/* ===========================================================
ANAK WEB SOLUTIONS — Stylesheet v2
Design language: matched to the brand mark — a violet→blue
gradient wordmark, an orange arc, and a globe built from
scattered navy/maroon/green data-points (global network).
=========================================================== */
/* Google Fonts are now loaded from as real tags (see
includes/header.php) instead of a CSS @import — @import blocks
the browser from starting the font download until AFTER this
whole stylesheet is fetched and parsed, which visibly delays text
rendering. Loading them as tags lets the browser fetch
fonts.googleapis.com in parallel with this file, right away. */
:root{
/* --- color tokens, sampled straight from the logo --- */
--violet-deep: #25017A;
--violet: #4B2FBE;
--violet-light: #6B4CE0;
--violet-soft: #F1EDFB;
--orange: #E75B06;
--orange-deep: #B84604;
--orange-soft: #FCE8D9;
--ink: #1C1730;
--ink-soft: #675F7D;
--bg: #FAF9FD;
--card: #FFFFFF;
--line: #E8E3F5;
--line-strong: #D6CDEE;
/* decorative-only, lifted from the dotted globe */
--dot-navy: #1B2A57;
--dot-maroon: #7A231F;
--dot-green: #1F4A2E;
/* legacy variable name referenced inline in a couple of templates */
--orange-2: var(--orange-deep);
/* --- type --- */
--f-display: 'Anton', sans-serif; /* condensed impact caps, echoes the wordmark */
--f-heading: 'Space Grotesk', sans-serif; /* modern geometric sans for h2-h4 */
--f-body: 'Inter', sans-serif;
--f-mono: 'IBM Plex Mono', monospace; /* data: prices, GR numbers, tags */
/* --- layout --- */
--max: 1180px;
--gutter: clamp(20px, 5vw, 64px);
--radius: 14px;
--radius-sm: 8px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--f-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
font-family:var(--f-heading);
font-weight:700;
line-height:1.15;
margin:0;
letter-spacing:-0.015em;
color:var(--ink);
}
p{ margin:0; }
.mono{ font-family:var(--f-mono); }
.icon{ width:20px; height:20px; flex-shrink:0; }
.icon.fi{ width:16px; height:16px; }
.skip-link{
position:absolute; left:-9999px; top:auto;
background:var(--violet-deep);
color:#fff;
padding:12px 18px;
border-radius:var(--radius-sm);
font-family:var(--f-mono);
font-size:13px;
z-index:200;
}
.skip-link:focus{ left:16px; top:16px; }
:focus-visible{
outline:2px solid var(--orange);
outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* ===================== EYEBROW ===================== */
.eyebrow{
font-family:var(--f-mono);
font-size:12px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--violet);
display:inline-flex;
align-items:center;
gap:9px;
margin-bottom:16px;
font-weight:600;
}
.eyebrow::before{
content:"";
width:7px; height:7px;
border-radius:50%;
background:linear-gradient(135deg, var(--violet), var(--orange));
}
.gradient-text{
background:linear-gradient(180deg, var(--violet-deep) 15%, var(--violet-light) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
/* ===================== BUTTONS ===================== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px 28px;
font-family:var(--f-body);
font-weight:600;
font-size:14.5px;
border-radius:999px;
cursor:pointer;
border:1.5px solid transparent;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{
background:linear-gradient(135deg, var(--violet), var(--violet-deep));
color:#fff;
box-shadow:0 10px 24px -10px rgba(37,1,122,0.55);
}
.btn-primary:hover{
box-shadow:0 14px 28px -8px rgba(37,1,122,0.6);
}
.btn-outline{
background:var(--card);
color:var(--violet-deep);
border:1.5px solid var(--line-strong);
}
.btn-outline:hover{
border-color:var(--violet);
background:var(--violet-soft);
}
.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-block{ width:100%; margin-top:6px; }
/* ===================== NAV ===================== */
.nav{
position:sticky; top:0; z-index:50;
background:rgba(250,249,253,0.85);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.nav-inner{
max-width:1440px;
margin:0 auto;
padding:16px var(--gutter);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.brand{
display:flex;
align-items:center;
gap:13px;
}
.brand-logo{
width:auto;
height:86px;
object-fit:contain;
}
.brand-text{
font-family:var(--f-heading);
font-weight:700;
font-size:27px;
letter-spacing:-0.01em;
color:var(--ink);
line-height:1.1;
white-space:nowrap;
}
.brand-text small{
display:block;
font-family:var(--f-mono);
font-weight:500;
font-size:13px;
letter-spacing:0.16em;
color:var(--orange-deep);
text-transform:uppercase;
margin-top:2px;
}
.nav-links{
display:flex;
gap:22px;
font-size:14.5px;
font-weight:600;
}
.nav-links a{
position:relative;
padding:6px 0;
color:var(--ink-soft);
transition:color 0.15s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
content:"";
position:absolute; left:0; bottom:0;
width:0; height:2px;
border-radius:2px;
background:linear-gradient(90deg, var(--violet), var(--orange));
transition:width 0.2s ease;
}
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }
.nav-links a.is-active{ color:var(--violet-deep); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:5px;
width:36px; height:36px;
background:var(--card);
border:1.5px solid var(--line);
border-radius:var(--radius-sm);
cursor:pointer;
padding:0;
}
.nav-toggle span{
display:block;
width:16px; height:2px;
margin:0 auto;
background:var(--violet-deep);
border-radius:2px;
transition:transform .2s ease, opacity .2s ease;
}
.nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobile{
display:none;
flex-direction:column;
padding:6px var(--gutter) 22px;
border-top:1px solid var(--line);
font-size:14.5px;
font-weight:600;
}
.nav-mobile a{
padding:12px 0;
border-bottom:1px solid var(--line);
color:var(--ink-soft);
}
.nav-mobile a.is-active{ color:var(--violet-deep); }
.nav.is-open .nav-mobile{ display:flex; }
/* ===================== HERO ===================== */
.hero{
padding:70px var(--gutter) 30px;
max-width:var(--max);
margin:0 auto;
position:relative;
}
.hero-grid{
display:grid;
grid-template-columns:1.05fr 0.95fr;
gap:56px;
align-items:center;
position:relative;
}
/* decorative dot-globe, echoing the logo mark, faded into the hero */
.hero::before{
content:"";
position:absolute;
top:-40px; right:2%;
width:420px; height:420px;
border-radius:50%;
opacity:0.5;
background-image:
radial-gradient(circle, var(--dot-navy) 1.6px, transparent 1.7px),
radial-gradient(circle, var(--dot-maroon) 1.6px, transparent 1.7px),
radial-gradient(circle, var(--dot-green) 1.6px, transparent 1.7px);
background-size: 22px 22px, 26px 26px, 24px 24px;
background-position: 0 0, 9px 13px, 15px 4px;
-webkit-mask-image: radial-gradient(circle, black 55%, transparent 78%);
mask-image: radial-gradient(circle, black 55%, transparent 78%);
pointer-events:none;
z-index:0;
}
.hero-title{
font-family:var(--f-display);
font-weight:400;
text-transform:uppercase;
font-size:clamp(34px, 4.4vw, 58px);
line-height:1.04;
position:relative;
z-index:1;
}
.hero-sub{
margin-top:22px;
font-size:17px;
color:var(--ink-soft);
max-width:48ch;
line-height:1.65;
position:relative; z-index:1;
}
.hero-actions{
margin-top:32px;
display:flex;
gap:14px;
flex-wrap:wrap;
align-items:center;
position:relative; z-index:1;
}
.hero-price-note{
margin-top:24px;
display:flex;
align-items:center;
gap:9px;
font-family:var(--f-mono);
font-size:13px;
color:var(--violet-deep);
font-weight:600;
position:relative; z-index:1;
}
.hero-price-note .icon{ width:16px; height:16px; color:var(--orange); }
.stats-row{
margin-top:36px;
display:flex;
gap:0;
padding-top:22px;
border-top:1px solid var(--line);
position:relative; z-index:1;
}
.stat{
flex:1;
padding-right:18px;
display:flex;
flex-direction:column;
gap:4px;
}
.stat b{
font-family:var(--f-heading);
font-size:23px;
font-weight:700;
color:var(--violet-deep);
}
.stat span{
font-family:var(--f-mono);
font-size:11px;
color:var(--ink-soft);
text-transform:uppercase;
letter-spacing:0.05em;
}
/* ---- signature: live shipment console ---- */
.console{
background:linear-gradient(165deg, var(--violet-deep), #170153 78%);
color:#EAE4FB;
border-radius:20px;
position:relative;
box-shadow:0 30px 60px -24px rgba(37,1,122,0.55);
overflow:hidden;
z-index:1;
}
.console::before{
content:"";
position:absolute;
top:0; right:0;
width:180px; height:180px;
background:radial-gradient(circle, rgba(231,91,6,0.35), transparent 70%);
pointer-events:none;
}
.console-head{
display:flex;
align-items:center;
gap:10px;
padding:18px 22px;
border-bottom:1px solid rgba(255,255,255,0.1);
position:relative;
}
.console-dots{ display:flex; gap:6px; }
.console-dots span{
width:8px; height:8px;
border-radius:50%;
background:rgba(255,255,255,0.18);
}
.console-dots span:first-child{ background:var(--orange); }
.console-title{
font-family:var(--f-mono);
font-size:12px;
letter-spacing:0.03em;
color:#C4B8EE;
margin-left:4px;
}
.console-body{ padding:24px 22px 6px; position:relative; }
.gr-row{ display:flex; justify-content:space-between; align-items:flex-start; }
.gr-row .label{
font-family:var(--f-mono);
font-size:10.5px;
letter-spacing:0.1em;
color:#9C8FD6;
text-transform:uppercase;
}
.gr-row .gr{
font-family:var(--f-mono);
font-size:16px;
font-weight:600;
color:#fff;
margin-top:5px;
}
.gr-status{
font-family:var(--f-mono);
font-size:11px;
font-weight:600;
padding:5px 12px;
border-radius:20px;
background:rgba(231,91,6,0.18);
color:#FFA35C;
text-transform:uppercase;
letter-spacing:0.06em;
white-space:nowrap;
border:1px solid rgba(231,91,6,0.35);
}
.route-line{
position:relative;
height:3px;
border-radius:3px;
background:rgba(255,255,255,0.12);
margin:26px 6px 0;
}
.route-fill{
position:absolute; left:0; top:0; height:100%;
border-radius:3px;
background:linear-gradient(90deg, var(--orange), #FFA35C);
width:38%;
animation:fillMove 6s ease-in-out infinite alternate;
}
@keyframes fillMove{ 0%{ width:14%; } 100%{ width:78%; } }
.route-points{ display:flex; justify-content:space-between; margin-top:-7px; }
.route-point{
width:12px; height:12px;
border-radius:50%;
background:var(--violet-deep);
border:2px solid rgba(255,255,255,0.2);
}
.route-point.done{ background:var(--orange); border-color:var(--orange); }
.route-point.active{
background:#FFA35C;
border-color:#FFA35C;
box-shadow:0 0 0 5px rgba(255,163,92,0.25);
animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{ box-shadow:0 0 0 4px rgba(255,163,92,0.25); }
50%{ box-shadow:0 0 0 9px rgba(255,163,92,0.08); }
}
.route-labels{
display:flex; justify-content:space-between; margin-top:10px;
font-family:var(--f-mono); font-size:10px; color:#9C8FD6;
}
.route-labels span{ width:70px; }
.route-labels span:first-child{ text-align:left; }
.route-labels span:last-child{ text-align:right; }
.route-labels span:nth-child(2),.route-labels span:nth-child(3){ text-align:center; }
.console-log{
margin:20px 0 4px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,0.1);
}
.log-row{
display:flex; gap:12px;
font-family:var(--f-mono); font-size:11.5px;
color:#9C8FD6; padding:5px 0;
}
.log-row .t{ color:#6C5FA8; width:48px; flex-shrink:0; }
.log-row.now{ color:#fff; font-weight:600; }
.log-row.now .t{ color:var(--orange); }
.console-foot{
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid rgba(255,255,255,0.1);
margin-top:14px;
}
.console-foot div{
padding:14px 22px;
font-family:var(--f-mono);
font-size:11px;
color:#9C8FD6;
}
.console-foot div:first-child{ border-right:1px solid rgba(255,255,255,0.1); }
.console-foot b{ display:block; color:#fff; font-size:13px; margin-top:2px; font-weight:600; }
/* ===================== LOGO STRIP ===================== */
.strip{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:24px var(--gutter);
}
.strip-inner{
max-width:var(--max);
margin:0 auto;
display:flex;
align-items:center;
gap:36px;
flex-wrap:wrap;
justify-content:space-between;
}
.strip-label{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--ink-soft);
white-space:nowrap;
}
.strip-logos{
display:flex; gap:34px; flex-wrap:wrap;
font-family:var(--f-heading); font-weight:700; font-size:14.5px;
color:var(--ink-soft);
}
.strip-logos a{ transition:color .15s ease; }
.strip-logos a:hover{ color:var(--violet-deep); }
/* ===================== SECTIONS (shared) ===================== */
.section{ padding:92px var(--gutter); }
.section-tight{ padding:56px var(--gutter); }
.section-inner{ max-width:var(--max); margin:0 auto; }
.section-head{
display:flex; justify-content:space-between; align-items:flex-end;
gap:24px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(27px,3vw,37px); max-width:20ch; }
.section-head p{ max-width:38ch; color:var(--ink-soft); font-size:15px; line-height:1.55; }
.section-head.center{
flex-direction:column; text-align:center; align-items:center;
max-width:640px; margin:0 auto;
}
.section-head.center h2{ max-width:none; }
.section-head.center p{ max-width:52ch; margin-top:6px; }
/* ===================== SERVICE / CARD GRID ===================== */
.card-grid{
margin-top:48px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}
.svc-card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px 26px 28px;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-card:hover{
transform:translateY(-4px);
box-shadow:0 20px 40px -22px rgba(37,1,122,0.35);
border-color:var(--line-strong);
}
.svc-icon{
width:48px; height:48px;
border-radius:14px;
background:linear-gradient(135deg, var(--violet), var(--violet-deep));
color:#fff;
display:flex; align-items:center; justify-content:center;
margin-bottom:18px;
}
.svc-card h3{ font-size:18.5px; margin-top:2px; }
.svc-card p{ margin-top:10px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.svc-tags span{
font-family:var(--f-mono); font-size:10.5px;
padding:4px 10px;
background:var(--violet-soft);
color:var(--violet-deep);
border-radius:20px;
}
/* ===================== PRICING ===================== */
.price-grid{
margin-top:8px;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
gap:24px;
}
.price-card{
position:relative;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:34px 28px 30px;
display:flex;
flex-direction:column;
transition:transform .18s ease, box-shadow .18s ease;
}
.price-card:hover{ transform:translateY(-4px); }
.price-card.is-highlight{
border-color:var(--violet);
box-shadow:0 26px 50px -22px rgba(37,1,122,0.4);
}
.price-badge{
position:absolute;
top:-14px; right:26px;
padding:7px 16px;
border-radius:999px;
background:linear-gradient(135deg, var(--orange), var(--orange-deep));
color:#fff;
font-family:var(--f-mono);
font-size:10.5px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.05em;
box-shadow:0 8px 18px -6px rgba(184,70,4,0.55);
}
.price-card h3{ font-size:20px; margin-top:4px; }
.price-blurb{ margin-top:8px; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.price-amount{ margin-top:20px; display:flex; align-items:baseline; gap:7px; }
.price-amount .num{ font-family:var(--f-heading); font-size:32px; font-weight:700; color:var(--violet-deep); }
.price-amount .period{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-soft); }
.price-feats{
margin-top:20px; padding-top:18px;
border-top:1px solid var(--line);
display:flex; flex-direction:column; gap:11px; flex:1;
}
.price-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink); line-height:1.45; }
.price-feats .icon{ width:15px; height:15px; color:var(--orange); flex-shrink:0; margin-top:3px; }
.price-note{ margin-top:16px; font-size:11.5px; color:var(--ink-soft); font-style:italic; line-height:1.5; }
.price-card .btn{ margin-top:22px; }
/* ===================== EMPTY STATE (e.g. Clients page) ===================== */
.empty-note{
margin-top:40px;
padding:40px 30px;
text-align:center;
border:1.5px dashed var(--line-strong);
border-radius:var(--radius);
color:var(--ink-soft);
font-size:14.5px;
line-height:1.6;
}
.empty-note .icon{ width:30px; height:30px; color:var(--violet-light); margin-bottom:12px; }
/* ===================== WORK ===================== */
.work-grid{
margin-top:48px;
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.work-card{
position:relative;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px 28px 28px;
display:flex;
flex-direction:column;
gap:16px;
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.work-card:hover{
border-color:var(--violet);
transform:translateY(-4px);
box-shadow:0 24px 46px -24px rgba(37,1,122,0.4);
}
.work-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.work-top .region{
font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase;
color:var(--violet-deep);
background:var(--violet-soft);
padding:5px 11px;
border-radius:20px;
white-space:nowrap;
}
.work-card h3{ font-size:21px; }
.work-card .domain{ font-family:var(--f-mono); font-size:12.5px; color:var(--orange-deep); margin-top:3px; }
.work-card p{ color:var(--ink-soft); font-size:14px; line-height:1.62; }
.work-feat{ display:flex; flex-wrap:wrap; gap:8px; }
.work-feat span{
font-family:var(--f-mono); font-size:10.5px; color:var(--ink-soft);
padding:4px 10px; border:1px solid var(--line); border-radius:20px;
}
.work-link{
margin-top:auto;
display:inline-flex; align-items:center; gap:8px;
font-family:var(--f-mono); font-size:12.5px; font-weight:600;
color:var(--violet-deep);
padding-top:8px;
border-top:1px solid var(--line);
}
.work-link .icon{ width:14px; height:14px; transition:transform .15s ease; }
.work-card:hover .work-link .icon{ transform:translateX(4px); }
/* ===================== PROCESS ===================== */
.process-list{ margin-top:48px; border-top:1px solid var(--line); }
.process-row{
display:grid;
grid-template-columns:64px 1fr 1.4fr;
gap:26px;
padding:26px 0;
border-bottom:1px solid var(--line);
align-items:baseline;
}
.process-row .stage{
font-family:var(--f-mono);
font-size:13px;
font-weight:700;
background:linear-gradient(135deg, var(--violet), var(--orange));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.process-row h4{ font-size:18px; }
.process-row p{ color:var(--ink-soft); font-size:14px; line-height:1.62; max-width:56ch; }
/* ===================== FAQ ===================== */
.faq-list{
margin-top:44px;
max-width:760px;
margin-left:auto; margin-right:auto;
display:flex; flex-direction:column;
}
.faq-item{ padding:22px 0; border-bottom:1px solid var(--line); }
.faq-item h4{ font-size:16px; display:flex; gap:10px; }
.faq-item h4::before{
content:"Q";
font-family:var(--f-mono);
color:var(--orange);
font-weight:700;
}
.faq-item p{ margin-top:10px; color:var(--ink-soft); font-size:14px; line-height:1.62; padding-left:20px; }
/* ===================== CTA BAND ===================== */
.cta-band{
background:linear-gradient(120deg, var(--violet-deep), var(--violet) 60%, var(--orange-deep) 130%);
color:#fff;
border-radius:22px;
padding:44px 44px;
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
flex-wrap:wrap;
position:relative;
overflow:hidden;
}
.cta-band::before{
content:"";
position:absolute;
top:-60px; right:-40px;
width:260px; height:260px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
pointer-events:none;
}
.cta-band h2{ color:#fff; font-size:clamp(22px,2.4vw,28px); }
.cta-band p{ color:#E3D9FA; margin-top:8px; max-width:48ch; font-size:14.5px; line-height:1.55; }
.cta-band .btn-primary{
flex-shrink:0;
background:#fff;
color:var(--violet-deep);
box-shadow:0 10px 24px -10px rgba(0,0,0,0.35);
}
.cta-band .btn-primary:hover{ background:var(--orange-soft); }
/* ===================== CONTACT ===================== */
.contact-grid{
margin-top:44px;
display:grid;
grid-template-columns:0.85fr 1.15fr;
gap:52px;
}
.contact-info h3{
font-size:13px; font-family:var(--f-mono); text-transform:uppercase;
letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:6px;
}
.contact-line{
display:flex; align-items:baseline; justify-content:space-between;
padding:15px 0; border-bottom:1px solid var(--line); gap:20px;
}
.contact-line .k{ color:var(--ink-soft); font-size:14px; }
.contact-line .v{ font-family:var(--f-mono); font-size:14px; color:var(--violet-deep); font-weight:600; text-align:right; }
.contact-line a.v:hover{ color:var(--orange-deep); }
.contact-quick{ display:flex; flex-direction:column; gap:12px; }
.contact-quick a{
display:flex; align-items:center; gap:10px;
font-size:13.5px; font-weight:600;
color:var(--violet-deep);
padding:11px 14px;
background:var(--violet-soft);
border-radius:var(--radius-sm);
transition:background .15s ease;
}
.contact-quick a:hover{ background:#E4DAF9; }
.contact-quick .icon{ width:16px; height:16px; }
.contact-note{
margin-top:26px;
padding:16px 18px;
background:var(--orange-soft);
border-radius:var(--radius-sm);
font-size:13px;
color:var(--orange-deep);
line-height:1.6;
}
.form-card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:34px;
box-shadow:0 30px 60px -34px rgba(37,1,122,0.3);
}
.form-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-row{ margin-top:22px; }
.form-card > .form-two:first-child .form-row,
.form-card > .form-row:first-child{ margin-top:0; }
.form-row label{
display:block; font-family:var(--f-mono); font-size:11px;
text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:8px;
}
.form-row input,.form-row textarea,.form-row select{
width:100%; padding:12px 14px;
font-family:var(--f-body); font-size:14.5px;
background:var(--bg);
border:1.5px solid var(--line);
border-radius:var(--radius-sm);
color:var(--ink);
transition:border-color .15s ease;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
border-color:var(--violet);
outline:none;
}
.form-row textarea{ resize:vertical; min-height:110px; }
.form-honeypot{ position:absolute; left:-9999px; opacity:0; }
.form-status{
margin-top:16px; font-family:var(--f-mono); font-size:12.5px;
padding:12px 14px; border-radius:var(--radius-sm); display:none; line-height:1.5;
}
.form-status.show{ display:block; }
.form-status.ok{ background:var(--violet-soft); color:var(--violet-deep); }
.form-status.err{ background:var(--orange-soft); color:var(--orange-deep); }
/* ===================== FOOTER ===================== */
.footer{
background:linear-gradient(165deg, var(--violet-deep), #170153 85%);
color:#B7A9E8;
padding:56px var(--gutter) 24px;
margin-top:8px;
}
.footer-inner{ max-width:var(--max); margin:0 auto; }
.footer-top{
display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand .brand-text{ color:#fff; }
.footer-brand .brand-text small{ color:#FFA35C; }
.footer-brand .brand-logo{
background:#fff;
padding:8px 12px;
border-radius:12px;
box-shadow:0 2px 14px -2px rgba(0,0,0,0.35);
}
.footer-brand p{ margin-top:14px; max-width:36ch; font-size:13.5px; line-height:1.6; }
.footer-badges{ display:flex; gap:18px; margin-top:16px; flex-wrap:wrap; }
.footer-badges span{ display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:11.5px; color:#C4B8EE; }
.footer-badges .icon{ color:var(--orange); }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h5{
font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
letter-spacing:0.09em; color:#8B7EC4; margin-bottom:14px;
}
.footer-col a,.footer-col span{ display:block; font-size:13.5px; padding:5px 0; color:#C4B8EE; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
display:flex; justify-content:space-between; padding-top:22px;
font-family:var(--f-mono); font-size:11px; color:#8B7EC4; flex-wrap:wrap; gap:10px;
}
.footer-bottom a:hover{ color:#C4B8EE; }
/* ===================== LEGAL / TERMS ===================== */
.legal{ max-width:74ch; }
.legal .updated{ font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); margin-bottom:22px; }
.legal p{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin-bottom:6px; }
.legal h2{ font-size:19px; margin-top:34px; margin-bottom:12px; padding-top:20px; border-top:1px solid var(--line); }
.legal ul{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
.legal li{ color:var(--ink-soft); font-size:14.5px; line-height:1.62; padding-left:20px; position:relative; }
.legal li::before{ content:"—"; position:absolute; left:0; color:var(--orange); }
.legal a{ color:var(--violet-deep); font-weight:600; }
.legal a:hover{ text-decoration:underline; }
/* ===================== RESPONSIVE ===================== */
@media (max-width: 1180px){
.nav-webmail{ display:none; }
}
@media (max-width: 940px){
.hero-grid{ grid-template-columns:1fr; }
.hero::before{ width:280px; height:280px; top:-20px; right:-10%; opacity:0.35; }
.card-grid{ grid-template-columns:1fr 1fr; }
.price-grid{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
.work-grid{ grid-template-columns:1fr; }
.contact-grid{ grid-template-columns:1fr; }
.process-row{ grid-template-columns:1fr; gap:8px; }
.nav-links{ display:none; }
.nav-toggle{ display:flex; }
.form-two{ grid-template-columns:1fr; }
.footer-top{ flex-direction:column; }
.stats-row{ flex-wrap:wrap; row-gap:18px; }
.stat{ flex:1 1 40%; }
.brand-logo{ height:64px; }
.brand-text{ font-size:21px; }
.brand-text small{ font-size:11px; }
}
@media (max-width: 560px){
.section{ padding:60px 20px; }
.section-tight{ padding:44px 20px; }
.hero{ padding:48px 20px 16px; }
.card-grid{ grid-template-columns:1fr; }
.console-foot{ grid-template-columns:1fr; }
.console-foot div:first-child{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
.cta-band{ padding:32px 24px; flex-direction:column; align-items:flex-start; border-radius:18px; }
.section-head{ flex-direction:column; align-items:flex-start; }
.brand-logo{ height:52px; }
.brand-text{ font-size:17px; }
.brand-text small{ font-size:9.5px; letter-spacing:0.13em; }
}
/* ===========================================================
HIGH-TECH VISUAL LAYER — animated backdrops, glow accents,
scroll-reveal, badges. Additive only; nothing above is
overridden, these are new utility classes.
=========================================================== */
/* animated grid + glow behind hero / any section that opts in */
.tech-bg{ position:relative; overflow:hidden; isolation:isolate; }
.tech-bg::after{
content:"";
position:absolute; inset:-10% -10%;
background-image:
linear-gradient(rgba(75,47,190,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(75,47,190,0.07) 1px, transparent 1px);
background-size:42px 42px;
-webkit-mask-image: radial-gradient(ellipse 60% 55% at 70% 20%, black 40%, transparent 78%);
mask-image: radial-gradient(ellipse 60% 55% at 70% 20%, black 40%, transparent 78%);
pointer-events:none;
z-index:-1;
animation: grid-drift 26s linear infinite;
}
@keyframes grid-drift{
0%{ transform:translate(0,0); }
100%{ transform:translate(42px,42px); }
}
.tech-blob{
position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:0.35;
z-index:-1;
pointer-events:none;
animation: blob-float 12s ease-in-out infinite;
}
.tech-blob.b1{ width:340px; height:340px; top:-120px; right:-60px; background:radial-gradient(circle, var(--violet-light), transparent 70%); }
.tech-blob.b2{ width:260px; height:260px; bottom:-100px; left:-40px; background:radial-gradient(circle, var(--orange), transparent 70%); animation-delay:-4s; }
@keyframes blob-float{
0%,100%{ transform:translate(0,0) scale(1); }
50%{ transform:translate(18px,-14px) scale(1.06); }
}
/* animated marquee-style pulse dot, used next to "live" badges */
.pulse-dot{
position:relative;
display:inline-block;
width:8px; height:8px;
border-radius:50%;
background:#22C55E;
}
.pulse-dot::after{
content:"";
position:absolute; inset:0;
border-radius:50%;
background:#22C55E;
animation: pulse-ring 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-ring{
0%{ transform:scale(1); opacity:0.7; }
100%{ transform:scale(2.8); opacity:0; }
}
/* glowing / high-tech CTA button variant */
.btn-glow{
background:linear-gradient(135deg, var(--orange), var(--orange-deep));
color:#fff;
box-shadow:0 0 0 0 rgba(231,91,6,0.55), 0 10px 24px -10px rgba(231,91,6,0.6);
animation: btn-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes btn-glow-pulse{
0%,100%{ box-shadow:0 0 0 0 rgba(231,91,6,0.35), 0 10px 24px -10px rgba(231,91,6,0.6); }
50%{ box-shadow:0 0 0 8px rgba(231,91,6,0), 0 14px 30px -8px rgba(231,91,6,0.7); }
}
/* scroll-reveal: JS toggles .in-view when an element enters viewport.
Kept short and low-threshold so content appears almost immediately
rather than feeling like a "loading" delay. */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
/* small "NEW" / feature ribbon for nav & cards */
.ribbon{
display:inline-flex; align-items:center; gap:5px;
font-family:var(--f-mono); font-size:10px; font-weight:700;
letter-spacing:0.06em; text-transform:uppercase;
padding:3px 9px; border-radius:999px;
background:linear-gradient(135deg, var(--orange), var(--orange-deep));
color:#fff;
vertical-align:middle;
}
/* ===========================================================
POPUP / LEAD MODAL
=========================================================== */
.popup-overlay{
position:fixed; inset:0; z-index:300;
background:rgba(20,10,45,0.55);
backdrop-filter:blur(4px);
display:flex; align-items:center; justify-content:center;
padding:20px;
opacity:0; pointer-events:none;
transition:opacity .25s ease;
}
.popup-overlay.is-open{ opacity:1; pointer-events:auto; }
.popup-card{
position:relative;
background:var(--card);
border-radius:20px;
max-width:440px; width:100%;
padding:34px 30px 28px;
box-shadow:0 30px 70px -20px rgba(20,10,45,0.5);
transform:translateY(14px) scale(0.98);
transition:transform .25s ease;
max-height:90vh;
overflow-y:auto;
}
.popup-overlay.is-open .popup-card{ transform:translateY(0) scale(1); }
.popup-close{
position:absolute; top:14px; right:14px;
width:32px; height:32px;
border-radius:50%;
border:none;
background:var(--violet-soft);
color:var(--violet-deep);
font-size:20px; line-height:1;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.popup-close:hover{ background:var(--line-strong); }
.popup-eyebrow{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--f-mono); font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.08em;
color:var(--orange-deep);
background:var(--orange-soft);
padding:5px 11px; border-radius:999px;
margin-bottom:14px;
}
.popup-eyebrow .icon{ width:13px; height:13px; }
.popup-card h3{ font-size:22px; margin-bottom:8px; }
.popup-sub{ color:var(--ink-soft); font-size:14px; line-height:1.55; margin-bottom:6px; }
.popup-card .form-row{ margin-top:16px; }
.popup-card .form-row:first-of-type{ margin-top:22px; }
/* ===========================================================
FREE TOOLS PAGE
=========================================================== */
.tools-nav{
display:flex; gap:10px; flex-wrap:wrap;
margin-bottom:36px;
}
.tools-nav a{
font-family:var(--f-mono); font-size:12.5px; font-weight:600;
padding:9px 16px; border-radius:999px;
border:1.5px solid var(--line-strong);
background:var(--card);
display:inline-flex; align-items:center; gap:7px;
}
.tools-nav a:hover{ border-color:var(--violet); color:var(--violet-deep); }
.tool-panel{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px;
margin-bottom:30px;
scroll-margin-top:100px;
position:relative;
}
.tool-panel-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.tool-panel-icon{
width:46px; height:46px; flex-shrink:0;
border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg, var(--violet), var(--violet-deep));
color:#fff;
}
.tool-panel-icon .icon{ width:24px; height:24px; }
.tool-panel-head h2{ font-size:21px; margin-bottom:4px; }
.tool-panel-head p{ color:var(--ink-soft); font-size:14px; max-width:56ch; }
.tool-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.tool-output{
background:var(--bg);
border:1px dashed var(--line-strong);
border-radius:var(--radius-sm);
padding:24px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px;
min-height:220px;
text-align:center;
}
.tool-output canvas, .tool-output img{ border-radius:8px; background:#fff; padding:10px; box-shadow:0 6px 20px -8px rgba(37,1,122,0.25); }
.tool-output .placeholder{ color:var(--ink-soft); font-size:13px; }
.tool-output-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.tool-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.tool-tab{
font-family:var(--f-mono); font-size:12px; font-weight:600;
padding:8px 14px; border-radius:999px;
border:1.5px solid var(--line-strong);
background:transparent; cursor:pointer;
}
.tool-tab.is-active{ background:var(--violet-deep); border-color:var(--violet-deep); color:#fff; }
.gst-result{
margin-top:20px;
background:var(--bg);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:18px 20px;
display:none;
}
.gst-result.show{ display:block; }
.gst-result-row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.gst-result-row:last-child{ border-bottom:none; }
.gst-result-row .k{ color:var(--ink-soft); }
.gst-result-row .v{ font-weight:600; text-align:right; }
.gst-status-badge{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--f-mono); font-size:11px; font-weight:700; text-transform:uppercase;
padding:4px 10px; border-radius:999px;
}
.gst-status-badge.active{ background:#DCFCE7; color:#166534; }
.gst-status-badge.inactive{ background:var(--orange-soft); color:var(--orange-deep); }
.tool-note{
margin-top:16px; font-size:12.5px; color:var(--ink-soft);
background:var(--violet-soft); border-radius:var(--radius-sm);
padding:12px 14px; line-height:1.55;
}
/* ===========================================================
CONSIGNMENT TRACKING PAGE
=========================================================== */
.track-form{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:30px;
max-width:640px;
}
.carrier-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(130px,1fr));
gap:10px;
margin-top:8px;
}
.carrier-chip{
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:14px 8px;
border-radius:var(--radius-sm);
border:1.5px solid var(--line-strong);
background:var(--bg);
cursor:pointer;
font-size:12px; font-weight:600; text-align:center;
transition:border-color .15s ease, background .15s ease;
}
.carrier-chip:hover{ border-color:var(--violet); }
.carrier-chip.is-selected{ border-color:var(--violet-deep); background:var(--violet-soft); color:var(--violet-deep); }
.carrier-chip .dot{ width:10px; height:10px; border-radius:50%; }
.track-steps{ display:flex; flex-direction:column; gap:0; margin-top:26px; }
.track-step{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.track-step:first-child{ border-top:none; }
.track-step .num{
width:28px; height:28px; border-radius:50%; flex-shrink:0;
background:var(--violet-soft); color:var(--violet-deep);
display:flex; align-items:center; justify-content:center;
font-family:var(--f-mono); font-size:12px; font-weight:700;
}
.track-step h4{ font-size:14.5px; margin-bottom:3px; }
.track-step p{ color:var(--ink-soft); font-size:13px; }
@media (max-width: 800px){
.tool-grid{ grid-template-columns:1fr; }
}