/* ============================================================
   FAST DIGITAL MARKETING — brand stylesheet
   Palette: black + orange, echoing the logo's speed-line "F"
   Display: Rajdhani (condensed, technical, fast)
   Body: Inter
   Utility/labels: Space Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --black-0:#08090a;
  --black-1:#101113;
  --black-2:#18191c;
  --line:#2a2b2e;
  --orange-0:#ff9a1f;
  --orange-1:#ff7a1a;
  --orange-glow: rgba(255,138,26,.35);
  --white:#f4f2ee;
  --gray:#9a9a9d;
  --gray-dim:#6b6c6f;

  --display: 'Rajdhani', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'Space Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black-0);
  color:var(--white);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
section{position:relative;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* speed-line texture used as ambient background on hero/dark sections */
.speedlines{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(100deg,
      transparent 0 140px,
      rgba(255,138,26,.05) 140px 141px,
      transparent 141px 280px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 80%);
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange-0);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width:0; height:1px;
  background:var(--orange-0);
  display:inline-block;
  animation:eyebrowLine .6s ease forwards;
  animation-delay:.45s;
}
@keyframes eyebrowLine{to{width:22px;}}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
}
h1{font-size:clamp(42px, 6.4vw, 84px);}
h2{font-size:clamp(30px, 4vw, 48px);}
h3{font-size:clamp(20px, 2.4vw, 26px);}
p{color:var(--gray);}
.grad-text{
  background:linear-gradient(95deg, var(--orange-0), #ffcf7a 45%, var(--orange-1), var(--orange-0));
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 5s ease-in-out infinite;
}
@keyframes gradShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media (prefers-reduced-motion: reduce){
  .grad-text{animation:none !important;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:15px 28px;
  border-radius:2px;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(95deg, var(--orange-1), var(--orange-0));
  color:#0c0a08;
  font-weight:700;
  box-shadow:0 0 0 rgba(255,138,26,0);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px -8px var(--orange-glow);
}
.btn-ghost{
  border:1px solid var(--line);
  color:var(--white);
}
.btn-ghost:hover{
  border-color:var(--orange-0);
  color:var(--orange-0);
}
.btn svg{width:14px; height:14px;}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(8,9,10,.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  animation:navDown .6s cubic-bezier(.16,.9,.35,1) both;
}
@keyframes navDown{from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
  .nav{animation:none;}
}
.nav::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--orange-0) 25%, #ffcf7a 50%, var(--orange-0) 75%, transparent);
  background-size:200% 100%;
  opacity:.85;
  animation:navBorderShift 6s linear infinite;
}
@keyframes navBorderShift{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
@media (prefers-reduced-motion: reduce){
  .nav::before{animation:none;}
}
.nav.scrolled{
  background:rgba(8,9,10,.92);
  border-bottom-color:var(--line);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.75);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
  transition:height .35s ease;
}
.nav.scrolled .container{height:66px;}
.brand{display:flex; align-items:center; gap:12px; transition:transform .25s ease;}
.brand:hover{transform:translateY(-1px);}
.nav-logo-ring{
  position:relative; display:inline-flex; border-radius:50%; padding:2.5px; flex-shrink:0;
  background:conic-gradient(from 0deg, var(--orange-0), transparent 30%, transparent 70%, var(--orange-0));
  animation:ringSpin 5s linear infinite;
  transition:filter .3s ease;
}
.brand:hover .nav-logo-ring{filter:drop-shadow(0 0 8px rgba(255,154,31,.5));}
.brand img{
  height:52px; width:52px; border-radius:50%; object-fit:cover;
  display:block; border:2px solid var(--black-0);
  transition:height .35s ease, width .35s ease, transform .25s ease;
}
.brand:hover img{transform:scale(1.06);}
.nav.scrolled .brand img{height:44px; width:44px;}
@media (prefers-reduced-motion: reduce){
  .nav-logo-ring{animation:none;}
}
.brand-name{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.02em;}
.brand-name span{color:var(--orange-0);}
.nav-links{display:flex; align-items:center; gap:4px;}
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:600;
  color:var(--gray); position:relative;
  padding:9px 18px; border-radius:22px;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .25s ease, background .25s ease;
}
.nav-links a::before{
  content:""; position:absolute; inset:0; border-radius:22px; z-index:-1;
  background:rgba(255,255,255,.055); border:1px solid transparent;
  opacity:0; transform:scale(.92);
  transition:opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}
.nav-links a:hover::before{opacity:1; transform:scale(1);}
.nav-links a.active::before{
  opacity:1; transform:scale(1);
  background:linear-gradient(95deg, rgba(255,138,26,.18), rgba(255,154,31,.08));
  border-color:rgba(255,154,31,.35);
}
.nav-links a:hover, .nav-links a.active{color:var(--white);}
.nav-links a.active::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 0 rgba(255,154,31,.5); animation:navDotPulse 2s ease-out infinite;
}
@keyframes navDotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,154,31,.5);}
  70%{box-shadow:0 0 0 6px rgba(255,154,31,0);}
  100%{box-shadow:0 0 0 0 rgba(255,154,31,0);}
}
.nav-cta{display:flex; align-items:center; gap:20px;}
.nav-cta::before{
  content:""; width:1px; height:26px; background:rgba(255,255,255,.14);
}
.nav-cta .btn{padding:11px 22px; font-size:11.5px;}
.nav-cta .btn svg{width:12px; height:12px;}
.nav-cta .btn-ghost{
  border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.03);
}
.nav-cta .btn-ghost:hover{background:rgba(255,154,31,.08);}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer;
  background:none; border:none; width:34px; height:34px; position:relative;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--white); transition:transform .3s ease, opacity .3s ease, background .3s ease;
}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg); background:var(--orange-0);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg); background:var(--orange-0);}

@media (max-width:900px){
  .nav-links{
    position:fixed; top:78px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(8,9,10,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .nav.scrolled .nav-links{top:66px;}
  .nav-links.open{max-height:400px; box-shadow:0 24px 40px -20px rgba(0,0,0,.6);}
  .nav-links a{width:100%; padding:16px 24px; border-bottom:1px solid var(--line);}
  .nav-links a::before{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-ghost{display:none;}
  .nav-cta::before{display:none;}
}

/* ---------- Hero v2: animated network graphic + entrance animation ---------- */
.hero{
  padding:170px 0 110px;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:radial-gradient(ellipse at 70% 40%, #14161a 0%, var(--black-0) 65%);}
.hero-bg-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.4; filter:grayscale(.15) contrast(1.1) saturate(1.05) brightness(.85);
  transform:scale(1.08);
  animation:heroKenBurns 24s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  0%{transform:scale(1.08) translate(0,0);}
  100%{transform:scale(1.17) translate(-1.5%,-1%);}
}
.hero-network{width:100%; height:100%; display:block; position:relative; animation:netDrift 40s ease-in-out infinite alternate;}
@keyframes netDrift{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.05) translate(-1%,1%);}
}
.netline{
  stroke-width:1.3; opacity:.3;
  stroke-dasharray:5 16;
  animation:netFlow 7s linear infinite;
}
@keyframes netFlow{ to{ stroke-dashoffset:-84; } }
.netnode{
  fill:var(--orange-0);
  filter:drop-shadow(0 0 8px rgba(255,154,31,1));
  animation:netPulse 3.2s ease-in-out infinite;
}
@keyframes netPulse{
  0%,100%{opacity:.35; transform:scale(1);}
  50%{opacity:1; transform:scale(1.5);}
}
.nethex{
  opacity:.28;
  transform-box:fill-box; transform-origin:center;
  animation:hexSpin 26s linear infinite;
}
@keyframes hexSpin{ to{ transform:rotate(360deg); } }
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,9,10,.94) 22%, rgba(8,9,10,.55) 55%, rgba(8,9,10,.85) 100%),
    linear-gradient(0deg, var(--black-0) 0%, transparent 22%, transparent 78%, var(--black-0) 100%);
}
.hero-bg::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at 30% 20%, rgba(255,138,26,.16), transparent 55%);
  mix-blend-mode:screen;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .hero-network, .netline, .netnode, .nethex, .hero-bg-photo{animation:none !important;}
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;
  position:relative; z-index:2;
}

@keyframes heroUp{
  from{opacity:0; transform:translateY(28px);}
  to{opacity:1; transform:none;}
}
.hero-anim{opacity:0; animation:heroUp .8s cubic-bezier(.16,.9,.35,1) forwards;}
.hero-anim.a1{animation-delay:.05s;}
.hero-anim.a2{animation-delay:.22s;}
.hero-anim.a2b{animation-delay:.36s;}
.hero-anim.a3{animation-delay:.5s;}
.hero-anim.a4{animation-delay:.68s;}
.hero-anim.a5{animation-delay:.86s;}
.hero-anim.a6{animation-delay:1s;}

.title-line{display:inline-block;}

.hero-badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.hero-badge-row span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--white);
  border:1px solid rgba(255,255,255,.14); padding:8px 15px; border-radius:20px;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.045); backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -12px rgba(0,0,0,.5);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
  opacity:0; transform:translateY(14px) scale(.94);
  animation:badgeIn .65s cubic-bezier(.16,.9,.35,1) forwards;
}
.hero-badge-row span:nth-child(1){animation-delay:.08s;}
.hero-badge-row span:nth-child(2){animation-delay:.22s;}
@keyframes badgeIn{to{opacity:1; transform:translateY(0) scale(1);}}
.hero-badge-row span:hover{
  border-color:var(--orange-0); transform:translateY(-3px);
  box-shadow:0 12px 26px -10px var(--orange-glow);
  background:rgba(255,154,31,.08);
}
.hero-badge-row span::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 8px 1px var(--orange-glow);
  animation:badgeDotPulse 2.4s ease-in-out infinite;
}
.hero-badge-row span:nth-child(2)::before{animation-delay:.6s;}
@keyframes badgeDotPulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.45; transform:scale(.7);}}

.hero h1{margin:18px 0 22px; font-size:clamp(32px, 3.6vw, 52px); letter-spacing:.005em; line-height:1.15;}
.hero h1 .typewriter{
  color:var(--orange-0); border-right:3px solid var(--orange-0);
  padding-right:4px; animation:caret .8s steps(1) infinite;
}
@keyframes caret{50%{border-color:transparent;}}

.trust-points{
  display:grid; grid-template-columns:repeat(2,auto); gap:14px 32px;
  margin-top:8px;
}
.trust-points span{
  font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--white);
  display:flex; align-items:center; gap:9px;
  opacity:0; transform:translateX(-10px);
  animation:tpIn .6s cubic-bezier(.16,.9,.35,1) forwards;
  transition:color .2s ease;
}
.trust-points span:nth-child(1){animation-delay:1.15s;}
.trust-points span:nth-child(2){animation-delay:1.3s;}
.trust-points span:nth-child(3){animation-delay:1.45s;}
.trust-points span:nth-child(4){animation-delay:1.6s;}
@keyframes tpIn{to{opacity:1; transform:translateX(0);}}
.trust-points span:hover{color:var(--orange-0);}
.tp-check{
  width:19px; height:19px; min-width:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,154,31,.12); border:1px solid rgba(255,154,31,.4);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
  opacity:0; animation:tpCheckPop .45s cubic-bezier(.3,1.4,.4,1) forwards;
}
.trust-points span:nth-child(1) .tp-check{animation-delay:1.15s;}
.trust-points span:nth-child(2) .tp-check{animation-delay:1.3s;}
.trust-points span:nth-child(3) .tp-check{animation-delay:1.45s;}
.trust-points span:nth-child(4) .tp-check{animation-delay:1.6s;}
@keyframes tpCheckPop{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);}}
.trust-points span:hover .tp-check{
  background:rgba(255,154,31,.22);
  box-shadow:0 0 12px rgba(255,154,31,.45);
  transform:scale(1.12);
}
.tp-check svg{width:12px; height:12px;}
.tp-check path{
  fill:none; stroke:var(--orange-0); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
  animation:tpCheckDraw .5s ease forwards;
}
.trust-points span:nth-child(1) .tp-check path{animation-delay:1.55s;}
.trust-points span:nth-child(2) .tp-check path{animation-delay:1.7s;}
.trust-points span:nth-child(3) .tp-check path{animation-delay:1.85s;}
.trust-points span:nth-child(4) .tp-check path{animation-delay:2s;}
@keyframes tpCheckDraw{to{stroke-dashoffset:0;}}
@media(max-width:560px){
  .trust-points{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .trust-points span{opacity:1 !important; transform:none !important; animation:none !important;}
  .tp-check path{stroke-dashoffset:0 !important; animation:none !important;}
  .tp-check{opacity:1 !important; transform:none !important; animation:none !important;}
  .hero-badge-row span{opacity:1 !important; transform:none !important; animation:none !important;}
  .hero-badge-row span::before{animation:none !important;}
  .eyebrow::before{width:22px !important; animation:none !important;}
}

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray);
  animation:heroUp .8s ease forwards; animation-delay:1.1s; opacity:0;
  text-shadow:0 0 20px rgba(0,0,0,.6);
}
.scroll-cue .chev{width:16px; height:16px; color:var(--orange-0); animation:cueBounce 1.8s ease-in-out infinite;}
@keyframes cueBounce{0%,100%{transform:translateY(0); opacity:.5;} 50%{transform:translateY(6px); opacity:1;}}

/* animated chart draw-in */
.hero-chart .draw-line{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:drawLine 1.8s cubic-bezier(.3,.8,.3,1) forwards;
  animation-delay:.9s;
}
@keyframes drawLine{to{stroke-dashoffset:0;}}
.hero-chart .grow-bar{transform-origin:bottom; transform:scaleY(0); animation:growBar .7s cubic-bezier(.2,.8,.3,1.2) forwards;}
@keyframes growBar{to{transform:scaleY(1);}}
.hero-chart .pop-arrow{opacity:0; animation:popIn .5s ease forwards; animation-delay:2.5s;}
@keyframes popIn{from{opacity:0; transform:scale(.5);} to{opacity:1; transform:scale(1);}}

@media (prefers-reduced-motion: reduce){
  .hero-anim, .scroll-cue, .draw-line, .grow-bar, .pop-arrow{animation:none !important; opacity:1 !important; transform:none !important;}
}


.hero p.lead{font-size:18px; max-width:520px; margin-bottom:34px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}

.hero-chart{
  position:relative;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
  background:linear-gradient(160deg, rgba(18,18,20,.82), rgba(10,10,12,.72));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  padding:28px 28px 40px;
}
.hero-chart::before{
  content:"";
  position:absolute; inset:-1px; border-radius:19px; z-index:0; pointer-events:none;
  padding:1px;
  background:conic-gradient(from 0deg, transparent 0%, var(--orange-0) 12%, transparent 28%, transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderSpin 5s linear infinite;
  opacity:.8;
}
@keyframes borderSpin{ to{ transform:rotate(360deg); } }
.hero-chart svg{width:100%; height:100%; filter:drop-shadow(0 10px 20px rgba(255,138,26,.12)); position:relative; z-index:1;}

.hero-live{
  position:absolute; top:18px; left:28px; z-index:3;
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--white);
  background:rgba(10,11,12,.75); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1); border-radius:20px;
  padding:7px 14px;
}
.live-dot{
  width:7px; height:7px; border-radius:50%; background:#3ddc7a;
  box-shadow:0 0 8px 1px rgba(61,220,122,.7);
  animation:liveDot 1.6s ease-in-out infinite;
}
@keyframes liveDot{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.75);}}
@media (prefers-reduced-motion: reduce){
  .hero-chart::before{animation:none !important;}
  .live-dot{animation:none !important;}
}

.stat-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  margin-top:70px; border:1px solid var(--line);
}
.stat{
  background:var(--black-0); padding:26px 22px;
  position:relative; overflow:hidden;
  transition:background .35s ease, transform .35s ease;
}
.stat::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--orange-0), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s ease;
}
.stat:hover{background:var(--black-1); transform:translateY(-4px);}
.stat:hover::before{transform:scaleX(1);}
.stat svg{margin-bottom:14px; transition:transform .35s ease, filter .35s ease;}
.stat:hover svg{transform:scale(1.15) translateY(-2px); filter:drop-shadow(0 0 8px rgba(255,154,31,.5));}
.stat .num{font-family:var(--display); font-size:38px; font-weight:700; color:var(--orange-0);}
.stat .label{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); margin-top:6px;}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
}

/* ---------- Section shells ---------- */
.section{padding:110px 0;}
.section-tight{padding:80px 0;}
.story-section{overflow:hidden;}
.values-section{overflow:hidden;}
.section-head{max-width:640px; margin-bottom:60px;}
.section-head h2{margin-top:16px;}
.section-head p{margin-top:18px; font-size:16px;}
.section-alt{background:var(--black-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* animated background for the services / "what we do" section */
.services-section{position:relative; overflow:hidden;}
.services-section .container{position:relative; z-index:1;}
.services-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.services-grid-lines{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 75% 65% at 50% 20%, black 35%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 20%, black 35%, transparent 88%);
  animation:gridDrift 34s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0;} to{background-position:54px 54px;}}
.services-orb{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.28;
  background:radial-gradient(circle, var(--orange-glow), transparent 70%);
  animation:float-orb 13s ease-in-out infinite;
}
.services-orb.o1{width:380px; height:380px; top:-140px; left:-110px;}
.services-orb.o2{width:320px; height:320px; bottom:-160px; right:-90px; animation-delay:-6.5s;}
.services-net{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.services-net .netline{stroke-width:1.2; opacity:.35; stroke-dasharray:5 16; animation:netFlow 8s linear infinite;}
.services-net .netnode{fill:var(--orange-0); filter:drop-shadow(0 0 6px rgba(255,154,31,.9)); animation:netPulse 3.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .services-grid-lines, .services-orb, .services-net .netline, .services-net .netnode{animation:none !important;}
}
@media(max-width:700px){
  .services-orb{display:none;}
}

/* ---------- Service 01: code-themed animated background ---------- */
.dev-section{overflow:hidden;}
.dev-section .container{position:relative; z-index:1;}
.dev-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.dev-dot-grid{
  position:absolute; inset:-2px;
  background-image:radial-gradient(rgba(255,154,31,.35) 1.4px, transparent 1.4px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 40%, black 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%, black 30%, transparent 85%);
  animation:devDotDrift 22s linear infinite;
}
@keyframes devDotDrift{from{background-position:0 0;} to{background-position:-30px -30px;}}
.dev-scanbeam{
  position:absolute; top:0; left:-20%; width:35%; height:100%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,154,31,.10) 45%, rgba(255,154,31,.22) 50%, rgba(255,154,31,.10) 55%, transparent 100%);
  filter:blur(6px);
  animation:devScan 7s ease-in-out infinite;
}
@keyframes devScan{
  0%{transform:translateX(0);}
  50%{transform:translateX(340%);}
  100%{transform:translateX(0);}
}
.dev-tag{
  position:absolute; font-family:var(--mono); font-weight:700; color:var(--orange-0);
  opacity:.16; animation:devTagFloat 9s ease-in-out infinite;
}
.dev-tag.t1{top:14%; left:6%; font-size:34px; animation-delay:0s;}
.dev-tag.t2{top:68%; left:16%; font-size:26px; animation-delay:-2.5s;}
.dev-tag.t3{top:22%; right:10%; font-size:46px; animation-delay:-4.5s;}
.dev-tag.t4{top:78%; right:22%; font-size:30px; animation-delay:-6s;}
.dev-tag.t5{top:46%; left:44%; font-size:22px; animation-delay:-1.5s;}
@keyframes devTagFloat{
  0%,100%{transform:translateY(0) rotate(0deg); opacity:.16;}
  50%{transform:translateY(-22px) rotate(-4deg); opacity:.32;}
}
@media (prefers-reduced-motion: reduce){
  .dev-dot-grid, .dev-scanbeam, .dev-tag{animation:none !important;}
}
@media(max-width:700px){
  .dev-tag.t3, .dev-tag.t4{display:none;}
}

/* ---------- Service 02: SEO-themed animated background (radar + rising graph) ---------- */
.seo-section{overflow:hidden;}
.seo-section .container{position:relative; z-index:1;}
.seo-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}

/* faint scattered dot field, different scale/position from Service 01's grid */
.seo-dot-field{
  position:absolute; inset:-2px;
  background-image:radial-gradient(rgba(255,154,31,.28) 1.6px, transparent 1.6px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 65% 55% at 78% 55%, black 25%, transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 78% 55%, black 25%, transparent 82%);
  animation:seoDotDrift 26s linear infinite;
}
@keyframes seoDotDrift{from{background-position:0 0;} to{background-position:46px -46px;}}

/* radar: pulsing concentric rings + rotating sweep, parked on the right side */
.seo-radar{position:absolute; top:50%; right:4%; width:360px; height:360px; transform:translateY(-50%);}
.seo-radar-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,154,31,.4);
  animation:seoRingPulse 4.5s cubic-bezier(.2,.7,.3,1) infinite;
}
.seo-radar-ring.r2{animation-delay:-1.5s;}
.seo-radar-ring.r3{animation-delay:-3s;}
@keyframes seoRingPulse{
  0%{transform:scale(.25); opacity:.75;}
  100%{transform:scale(1); opacity:0;}
}
.seo-radar-sweep{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,154,31,.4) 22deg, transparent 65deg);
  animation:seoSweepSpin 5s linear infinite;
}
@keyframes seoSweepSpin{to{transform:rotate(360deg);}}
.seo-radar-core{
  position:absolute; top:50%; left:50%; width:10px; height:10px; margin:-5px;
  border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 12px 3px rgba(255,154,31,.7);
  animation:seoCorePulse 2.2s ease-in-out infinite;
}
@keyframes seoCorePulse{0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.4);}}

/* rising ranking graph line, bottom-left */
.seo-graph{position:absolute; left:-2%; bottom:6%; width:46%; max-width:420px; opacity:.5;}
.seo-graph-path{
  fill:none; stroke:var(--orange-0); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:340; stroke-dashoffset:340;
  animation:seoGraphDraw 5s ease-in-out infinite;
}
@keyframes seoGraphDraw{
  0%{stroke-dashoffset:340;}
  55%{stroke-dashoffset:0;}
  85%{stroke-dashoffset:0; opacity:1;}
  100%{stroke-dashoffset:-340; opacity:.4;}
}
.seo-graph-dot{fill:var(--orange-0); animation:seoCorePulse 2.4s ease-in-out infinite;}

/* floating SEO keyword/rank tags */
.seo-tag{
  position:absolute; font-family:var(--mono); font-weight:700; color:var(--orange-0);
  opacity:.18; animation:seoTagFloat 8.5s ease-in-out infinite;
}
.seo-tag.s1{top:12%; left:8%; font-size:28px; animation-delay:0s;}
.seo-tag.s2{top:74%; left:20%; font-size:22px; animation-delay:-2s;}
.seo-tag.s3{top:20%; right:14%; font-size:20px; animation-delay:-4s;}
.seo-tag.s4{top:82%; right:10%; font-size:32px; animation-delay:-5.5s;}
.seo-tag.s5{top:48%; left:38%; font-size:18px; animation-delay:-1s;}
@keyframes seoTagFloat{
  0%,100%{transform:translateY(0) rotate(0deg); opacity:.18;}
  50%{transform:translateY(-18px) rotate(3deg); opacity:.36;}
}

@media (prefers-reduced-motion: reduce){
  .seo-dot-field, .seo-radar-ring, .seo-radar-sweep, .seo-radar-core, .seo-graph-path, .seo-graph-dot, .seo-tag{animation:none !important;}
}
@media(max-width:700px){
  .seo-radar{display:none;}
  .seo-tag.s3, .seo-tag.s4{display:none;}
}

/* ---------- Service 03: GMB / local-map themed animated background ---------- */
.gmb-section{position:relative; overflow:hidden;}
.gmb-section .container{position:relative; z-index:1;}
.gmb-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}

/* diagonal street-map grid, drifting slowly */
.gmb-map-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(60deg, rgba(255,154,31,.10) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(255,154,31,.10) 1px, transparent 1px);
  background-size:64px 110px;
  mask-image:radial-gradient(ellipse 70% 60% at 22% 45%, black 25%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 22% 45%, black 25%, transparent 85%);
  animation:gmbGridDrift 30s linear infinite;
}
@keyframes gmbGridDrift{from{background-position:0 0, 0 0;} to{background-position:64px 0, -64px 0;}}

/* "you are here" pulsing pin ping, parked on the right where the pin icon sits */
.gmb-pin-ping{position:absolute; top:50%; right:16%; width:14px; height:14px; transform:translate(-50%,-50%);}
.gmb-ping-ring{
  position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; border:1.5px solid rgba(255,154,31,.55);
  animation:gmbPingPulse 3.6s cubic-bezier(.25,.7,.35,1) infinite;
}
.gmb-ping-ring.pr2{animation-delay:-1.2s;}
.gmb-ping-ring.pr3{animation-delay:-2.4s;}
@keyframes gmbPingPulse{
  0%{transform:scale(1); opacity:.7;}
  100%{transform:scale(11); opacity:0;}
}
.gmb-pin-dot{
  position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 14px 4px rgba(255,154,31,.75);
  animation:gmbCorePulse 2.4s ease-in-out infinite;
}
@keyframes gmbCorePulse{0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.35);}}

/* animated route / road line tracing across the lower half */
.gmb-route{position:absolute; left:4%; bottom:8%; width:52%; max-width:440px; opacity:.45;}
.gmb-route-path{
  fill:none; stroke:var(--orange-0); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:10 9;
  animation:gmbRouteFlow 4s linear infinite;
}
@keyframes gmbRouteFlow{to{stroke-dashoffset:-190;}}
.gmb-route-dot{fill:var(--orange-0); animation:gmbCorePulse 2.4s ease-in-out infinite;}

/* floating GMB / local-listing tags */
.gmb-tag{
  position:absolute; font-family:var(--mono); font-weight:700; color:var(--orange-0);
  opacity:.18; animation:gmbTagFloat 9.5s ease-in-out infinite;
}
.gmb-tag.g1{top:16%; left:10%; font-size:26px; animation-delay:0s;}
.gmb-tag.g2{top:70%; left:6%; font-size:20px; animation-delay:-2.2s;}
.gmb-tag.g3{top:24%; right:24%; font-size:18px; animation-delay:-4.4s;}
.gmb-tag.g4{top:80%; right:14%; font-size:22px; animation-delay:-6.6s;}
.gmb-tag.g5{top:48%; left:34%; font-size:16px; animation-delay:-1.3s;}
@keyframes gmbTagFloat{
  0%,100%{transform:translateY(0) rotate(0deg); opacity:.18;}
  50%{transform:translateY(-16px) rotate(-3deg); opacity:.34;}
}

@media (prefers-reduced-motion: reduce){
  .gmb-map-grid, .gmb-ping-ring, .gmb-pin-dot, .gmb-route-path, .gmb-route-dot, .gmb-tag{animation:none !important;}
}
@media(max-width:700px){
  .gmb-pin-ping{display:none;}
  .gmb-tag.g3, .gmb-tag.g4{display:none;}
}

/* ---------- Service 04: Social-media themed animated background (rising engagement bubbles) ---------- */
.social-section{position:relative; overflow:hidden;}
.social-section .container{position:relative; z-index:1;}
.social-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}

/* reaction icons rising from the bottom and fading out, like live-stream likes/comments */
.social-bubble{
  position:absolute; bottom:-10%; font-size:22px; color:var(--orange-0);
  opacity:0; animation:socialBubbleRise 7s ease-in infinite;
}
.social-bubble.sb1{left:12%; font-size:26px; --drift:14px; animation-delay:0s;}
.social-bubble.sb2{left:24%; font-size:18px; --drift:-10px; animation-delay:-1.2s;}
.social-bubble.sb3{left:82%; font-size:20px; --drift:-16px; animation-delay:-2.4s;}
.social-bubble.sb4{left:70%; font-size:24px; --drift:12px; animation-delay:-3.6s;}
.social-bubble.sb5{left:40%; font-size:19px; --drift:-8px; animation-delay:-4.8s;}
.social-bubble.sb6{left:58%; font-size:17px; --drift:10px; animation-delay:-6s;}
@keyframes socialBubbleRise{
  0%{transform:translate(0,0) scale(.6); opacity:0;}
  12%{opacity:.8;}
  85%{opacity:.5;}
  100%{transform:translate(var(--drift,10px),-420px) scale(1.15); opacity:0;}
}

/* pulsing notification bell/badge, top-right */
.social-notif{position:absolute; top:14%; right:12%; width:16px; height:16px;}
.social-notif-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(255,154,31,.5);
  animation:socialNotifPulse 2.6s cubic-bezier(.25,.7,.35,1) infinite;
}
.social-notif-badge{
  position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 12px 3px rgba(255,154,31,.7);
  animation:socialCorePulse 1.8s ease-in-out infinite;
}
@keyframes socialNotifPulse{0%{transform:scale(1); opacity:.7;} 100%{transform:scale(3.2); opacity:0;}}
@keyframes socialCorePulse{0%,100%{opacity:.75; transform:scale(1);} 50%{opacity:1; transform:scale(1.35);}}

/* floating growth/engagement stat tags */
.social-tag{
  position:absolute; font-family:var(--mono); font-weight:700; color:var(--orange-0);
  opacity:.18; animation:socialTagFloat 9s ease-in-out infinite;
}
.social-tag.st1{top:20%; left:8%; font-size:26px; animation-delay:0s;}
.social-tag.st2{top:76%; left:18%; font-size:18px; animation-delay:-3s;}
.social-tag.st3{top:66%; right:10%; font-size:18px; animation-delay:-5.5s;}
@keyframes socialTagFloat{
  0%,100%{transform:translateY(0) rotate(0deg); opacity:.18;}
  50%{transform:translateY(-16px) rotate(3deg); opacity:.34;}
}

/* Shared feature list style — used by all 5 service sections so every list looks/behaves the same:
   icon badge with idle radar-ping + hover slide-in glow */
.feature-badge-list{margin-top:22px; display:flex; flex-direction:column; gap:10px; list-style:none; padding:0;}
.feature-badge-item{
  position:relative; display:flex; align-items:center; gap:14px;
  padding:10px 14px 10px 10px; border-radius:12px;
  color:var(--gray); font-size:14.5px;
  background:rgba(255,154,31,.03);
  border:1px solid rgba(255,154,31,.08);
  overflow:hidden;
  transition:background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease, color .35s ease;
}
.feature-badge-item::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(255,154,31,.14), transparent 60%);
  transform:translateX(-100%); transition:transform .5s ease;
}
.feature-badge-item:hover::before{transform:translateX(0);}
.feature-badge-item:hover{
  color:#f1f1f2; border-color:rgba(255,154,31,.35); transform:translateX(6px);
  box-shadow:0 10px 24px -14px var(--orange-glow);
}
.fbi-icon{
  position:relative; z-index:1; flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-size:14px; border-radius:50%; background:rgba(255,154,31,.1); border:1px solid rgba(255,154,31,.25);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .35s ease, box-shadow .35s ease;
}
/* idle radar-ping so every row feels "alive" even before hover, staggered per item */
.fbi-icon::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,154,31,.55);
  animation:fbiRadarPing 2.6s ease-out infinite;
}
.feature-badge-item:nth-child(1) .fbi-icon::after{animation-delay:0s;}
.feature-badge-item:nth-child(2) .fbi-icon::after{animation-delay:.65s;}
.feature-badge-item:nth-child(3) .fbi-icon::after{animation-delay:1.3s;}
.feature-badge-item:nth-child(4) .fbi-icon::after{animation-delay:1.95s;}
@keyframes fbiRadarPing{
  0%{transform:scale(1); opacity:.7;}
  100%{transform:scale(1.9); opacity:0;}
}
.feature-badge-item:hover .fbi-icon{
  transform:rotate(-12deg) scale(1.12); background:rgba(255,154,31,.2);
  box-shadow:0 0 14px 2px rgba(255,154,31,.4);
}
.fbi-text{position:relative; z-index:1;}
@media (prefers-reduced-motion: reduce){
  .feature-badge-item, .fbi-icon, .fbi-icon::after{animation:none !important; transition:none !important;}
}
@media(max-width:700px){
  .social-bubble.sb3, .social-bubble.sb4{display:none;}
  .social-tag.st3{display:none;}
}

/* Service 01 image: floating glow ring + gentle hover lift */
.dev-image{animation:devImageFloat 6s ease-in-out infinite;}
.dev-image-ring{
  position:absolute; inset:-1px; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow:0 0 0 1px rgba(255,154,31,.25);
  animation:devRingPulse 3.2s ease-in-out infinite;
}
@keyframes devRingPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,154,31,.18), 0 0 18px 0 rgba(255,138,26,.05);}
  50%{box-shadow:0 0 0 1px rgba(255,154,31,.5), 0 0 32px 4px rgba(255,138,26,.22);}
}
@keyframes devImageFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@media (prefers-reduced-motion: reduce){
  .dev-image, .dev-image-ring{animation:none !important;}
}

/* ---------- Services grid ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  perspective:1400px;
}
.service-card{
  background:var(--black-0); position:relative; overflow:hidden;
  transition:background .3s ease, transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
  display:flex; flex-direction:column;
  will-change:transform;
  transform-style:preserve-3d;
}
/* animated gradient top bar */
.service-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg, var(--orange-1), var(--orange-0));
  transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
/* cursor-follow spotlight glow */
.service-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,154,31,.16), transparent 45%);
  opacity:0; transition:opacity .35s ease;
}
.service-card:hover::after{opacity:1;}
.service-card:hover{
  background:var(--black-2);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,154,31,.3), 0 0 34px -8px rgba(255,154,31,.35);
  z-index:2;
}
.service-card:hover::before{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce), (hover:none){
  .service-card{transform:none !important;}
}

.service-media{position:relative; height:172px; overflow:hidden; z-index:2;}
.service-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) brightness(.72) saturate(1.05);
  transform:scale(1.04);
  transition:transform .6s cubic-bezier(.2,.8,.3,1), filter .45s ease;
}
.service-card:hover .service-media img{transform:scale(1.15) rotate(1deg); filter:grayscale(0) brightness(.85) saturate(1.2);}
.service-media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,154,31,.28) 48%, transparent 66%);
  background-size:250% 250%; background-position:120% 0%;
  opacity:0; transition:opacity .3s ease;
}
.service-card:hover .service-media::before{opacity:1; animation:mediaSweep 1s ease forwards;}
@keyframes mediaSweep{
  from{background-position:120% 0%;}
  to{background-position:-20% 0%;}
}
.service-media-fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,12,0) 35%, var(--black-0) 96%);
  transition:background .35s ease;
}
.service-card:hover .service-media-fade{background:linear-gradient(180deg, rgba(10,11,12,0) 20%, var(--black-2) 96%);}
.service-media .idx{
  position:absolute; bottom:14px; left:18px; z-index:2;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--white);
  background:rgba(10,11,12,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,154,31,.4); padding:5px 12px; border-radius:20px;
  transition:transform .3s ease, border-color .3s ease, color .3s ease;
}
.service-media .ic-badge{
  position:absolute; top:14px; right:16px; z-index:2;
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,12,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .3s ease, background .3s ease, box-shadow .35s ease;
  animation:icBadgeFloat 3.2s ease-in-out infinite;
}
.service-media .ic-badge::before{
  content:""; position:absolute; inset:-6px; border-radius:14px; z-index:-1;
  box-shadow:0 0 0 0 rgba(255,154,31,.5);
  animation:icBadgePulse 2.6s ease-out infinite;
}
@keyframes icBadgePulse{
  0%{box-shadow:0 0 0 0 rgba(255,154,31,.45);}
  70%{box-shadow:0 0 0 10px rgba(255,154,31,0);}
  100%{box-shadow:0 0 0 0 rgba(255,154,31,0);}
}
.service-media .ic-badge svg{width:19px; height:19px; stroke:var(--orange-0); transition:stroke .3s ease;}
.service-card:hover .service-media .ic-badge{
  transform:translateY(-3px) rotate(-6deg) scale(1.1);
  border-color:rgba(255,154,31,.6);
  background:rgba(255,154,31,.14);
  box-shadow:0 0 18px rgba(255,154,31,.45);
  animation-play-state:paused;
}
@keyframes icBadgeFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
@media (prefers-reduced-motion: reduce){
  .service-media .ic-badge{animation:none;}
}

/* richer scroll-reveal specifically for service cards: 3D flip-up entrance */
.service-card.reveal{
  opacity:0;
  transform:translateY(46px) rotateX(-18deg) scale(.94);
  filter:blur(4px);
  transition:opacity .7s cubic-bezier(.16,.9,.35,1), transform .7s cubic-bezier(.16,.9,.35,1), filter .7s ease;
}
.service-card.reveal.in{opacity:1; transform:none; filter:blur(0);}
@media (prefers-reduced-motion: reduce){
  .service-card.reveal{filter:none; transform:none; opacity:1;}
}
.service-card:hover .service-media .idx{transform:translateX(4px); border-color:var(--orange-0); color:var(--orange-0);}

.service-card-body{padding:26px 32px 32px; display:flex; flex-direction:column; gap:14px; flex:1; position:relative; z-index:2;}
.service-card h3{margin-top:0;}
.service-card p{font-size:14.5px;}
.service-card .tag-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;}
.service-card .tag-list span{
  font-family:var(--mono); font-size:11px; color:var(--gray);
  border:1px solid var(--line); padding:5px 10px; border-radius:2px;
  transition:border-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.8,.3,1), background .25s ease;
}
.service-card:hover .tag-list span{border-color:var(--orange-0); color:var(--orange-0); transform:translateY(-3px);}
.service-card:hover .tag-list span:hover{transform:translateY(-5px); background:rgba(255,154,31,.1);}
.service-card .tag-list span:nth-child(1){transition-delay:0s;}
.service-card .tag-list span:nth-child(2){transition-delay:.05s;}
.service-card .tag-list span:nth-child(3){transition-delay:.1s;}

/* heading + paragraph gently rise into place on hover */
.service-card h3{transition:transform .35s cubic-bezier(.2,.8,.3,1), color .3s ease;}
.service-card:hover h3{transform:translateX(3px); color:var(--orange-0);}

.service-card-cta{
  background:linear-gradient(155deg, rgba(255,138,26,.1), rgba(255,255,255,.02));
  justify-content:center;
}
.service-card-cta:hover{background:linear-gradient(155deg, rgba(255,138,26,.16), rgba(255,255,255,.03));}
.service-card-cta .service-card-body{padding:40px;}

@media(max-width:800px){.services-grid{grid-template-columns:1fr;}}

/* ---------- Process ---------- */
/* ---------- Process / How we move ---------- */
.process-section{position:relative; overflow:hidden; background:var(--black-1);}
.process-section .container{position:relative; z-index:1;}
.process-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:var(--black-1);
}
.process-bg-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, var(--black-1) 0%, rgba(28,19,9,.75) 32%, rgba(10,11,12,.55) 58%, rgba(24,15,6,.8) 82%, var(--black-1) 100%),
    radial-gradient(ellipse at 14% 18%, rgba(255,154,31,.16), transparent 52%),
    radial-gradient(ellipse at 88% 12%, rgba(255,122,26,.11), transparent 48%),
    radial-gradient(ellipse at 78% 92%, rgba(255,154,31,.13), transparent 55%);
}
.process-bg::after{
  content:"";
  position:absolute; inset:-50%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.035) 50%, transparent 58%);
  animation:processSheen 10s linear infinite;
}
@keyframes processSheen{
  0%{transform:translate(-25%,-15%);}
  100%{transform:translate(25%,15%);}
}
.process-glow{
  position:absolute; top:60%; left:50%; transform:translate(-50%,-50%);
  width:60%; height:340px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,154,31,.14), transparent 72%);
  filter:blur(10px);
  animation:processSpotlightPulse 6s ease-in-out infinite;
}
@keyframes processSpotlightPulse{
  0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1);}
  50%{opacity:.95; transform:translate(-50%,-50%) scale(1.08);}
}
.process-orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; pointer-events:none;
  background:radial-gradient(circle, var(--orange-glow), transparent 70%);
  animation:float-orb 11s ease-in-out infinite;
}
.process-orb.o1{width:320px; height:320px; top:-100px; left:-80px;}
.process-orb.o2{width:280px; height:280px; bottom:-120px; right:-70px; animation-delay:-4.5s;}
/* ---------- Service 05 extra layer: maintenance/monitoring themed effects (gears + uptime pulse + status chips) ---------- */
/* slow-turning gear glyphs, distinct from Service 01's floating tags (rotation, not drift) */
.maint-gear{
  position:absolute; color:var(--orange-0); opacity:.1; line-height:1; pointer-events:none;
  will-change:transform;
}
.maint-gear.g1{top:6%; right:6%; font-size:130px; animation:maintGearSpin 34s linear infinite;}
.maint-gear.g2{bottom:4%; left:3%; font-size:84px; animation:maintGearSpin 24s linear infinite reverse;}
@keyframes maintGearSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

/* uptime-monitor style pulse line: dim baseline + a bright "comet" segment travelling along it on loop */
.maint-pulse{position:absolute; left:0; bottom:16%; width:100%; height:70px; opacity:.8; pointer-events:none;}
.maint-pulse-base{
  fill:none; stroke:rgba(255,154,31,.16); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.maint-pulse-comet{
  fill:none; stroke:var(--orange-0); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:8 92;
  filter:drop-shadow(0 0 6px rgba(255,154,31,.65));
  animation:maintPulseTravel 3.4s linear infinite;
}
@keyframes maintPulseTravel{ from{stroke-dashoffset:0;} to{stroke-dashoffset:-100;} }

/* status chips: gentle scale/opacity pulse in place, distinct from the rising/drifting motion used elsewhere */
.maint-chip{
  position:absolute; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:#ffcf9a; background:rgba(255,154,31,.08); border:1px solid rgba(255,154,31,.28);
  padding:6px 12px; border-radius:20px; white-space:nowrap; pointer-events:none;
  animation:maintChipPulse 5s ease-in-out infinite;
}
.maint-chip.mc1{top:14%; left:5%; animation-delay:0s;}
.maint-chip.mc2{bottom:18%; right:6%; animation-delay:-1.6s;}
.maint-chip.mc3{top:58%; right:10%; animation-delay:-3.2s;}
@keyframes maintChipPulse{
  0%,100%{opacity:.55; transform:scale(1);}
  50%{opacity:1; transform:scale(1.06);}
}

/* Service 05 side image: slow tilt-float + pulsing ring, distinct rhythm from Service 01's image */
.maint-image{animation:maintImageFloat 7s ease-in-out infinite;}
.maint-image .cta-corner::before, .maint-image .cta-corner::after{background:var(--orange-0);}
@keyframes maintImageFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-8px) rotate(.6deg);}
}

@media (prefers-reduced-motion: reduce){
  .process-bg, .process-bg::after, .process-glow, .process-orb{animation:none !important;}
  .maint-gear, .maint-pulse-comet, .maint-chip, .maint-image{animation:none !important;}
}
@media(max-width:700px){
  .process-orb{display:none;}
  .maint-gear.g1{font-size:90px;}
  .maint-chip.mc3{display:none;}
}

.process{
  display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;
  align-items:stretch; gap:0 6px; position:relative;
}
.process-step{
  position:relative; text-align:left; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 60%), rgba(16,17,19,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.09); border-radius:18px;
  padding:34px 24px 28px;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .35s ease, background .3s ease;
}
.process-step::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:2px;
  background:linear-gradient(90deg, transparent, var(--orange-0), transparent);
  opacity:.55; transition:opacity .3s ease;
}
.process-step:hover{
  transform:translateY(-8px);
  border-color:rgba(255,154,31,.5);
  background:linear-gradient(160deg, rgba(255,154,31,.08), rgba(255,255,255,.01) 60%), rgba(18,19,21,.8);
  box-shadow:0 26px 48px -20px rgba(255,154,31,.32);
}
.process-step:hover::before{opacity:1;}
.process-ghost{
  position:absolute; top:-10px; right:12px;
  font-family:var(--mono); font-size:62px; font-weight:800; line-height:1; letter-spacing:-2px;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.1);
  pointer-events:none; transition:all .3s ease;
}
.process-step:hover .process-ghost{-webkit-text-stroke:1px rgba(255,154,31,.4);}
.process-arrow{
  display:flex; align-items:center; justify-content:center;
}
.process-arrow span{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,154,31,.1); border:1px solid rgba(255,154,31,.3);
  color:var(--orange-0);
}
.process-arrow svg{width:15px; height:15px; animation:arrowNudge 2.2s ease-in-out infinite;}
.process-arrow:nth-of-type(4) svg{animation-delay:.3s;}
.process-arrow:nth-of-type(6) svg{animation-delay:.6s;}
@keyframes arrowNudge{
  0%,100%{transform:translateX(0); opacity:.6;}
  50%{transform:translateX(4px); opacity:1;}
}

.process-marker{
  position:relative; z-index:1;
  width:50px; height:50px; border-radius:14px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(255,154,31,.16), rgba(255,154,31,.03));
  border:1px solid rgba(255,154,31,.3); color:var(--orange-0);
  transition:border-color .3s ease, background .3s ease, transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.process-marker::before{
  content:""; position:absolute; inset:-6px; border-radius:16px;
  box-shadow:0 0 0 0 rgba(255,154,31,.4);
  animation:icBadgePulse 3.2s ease-out infinite;
}
.process-step.d2 .process-marker::before{animation-delay:.7s;}
.process-step.d3 .process-marker::before{animation-delay:1.4s;}
.process-step.d4 .process-marker::before{animation-delay:2.1s;}
.process-marker svg{width:22px; height:22px;}
.process-step:hover .process-marker{
  transform:scale(1.08) rotate(-6deg);
  border-color:var(--orange-0); background:linear-gradient(160deg, rgba(255,154,31,.3), rgba(255,154,31,.08));
  box-shadow:0 0 24px rgba(255,154,31,.45);
}
.process-step h4{position:relative; margin:0 0 10px; font-size:20px; letter-spacing:-.01em; transition:color .3s ease;}
.process-step:hover h4{color:var(--orange-0);}
.process-step p{position:relative; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.62);}

@media(max-width:900px){
  .process{grid-template-columns:1fr 1fr; gap:20px;}
  .process-arrow{display:none;}
}
@media(max-width:520px){.process{grid-template-columns:1fr;}}

/* ---------- Cards / values ---------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.value-card{
  background:var(--black-0); padding:34px; position:relative; overflow:hidden;
  transition:background .3s ease, transform .3s ease;
}
.value-card::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--orange-0), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s ease;
}
.value-card:hover::before{transform:scaleX(1);}
.value-card .ic-ring{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,154,31,.3);
  background:radial-gradient(circle, rgba(255,154,31,.1), transparent 70%);
  margin-bottom:18px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.value-card:hover .ic-ring{border-color:rgba(255,154,31,.7); box-shadow:0 0 22px -4px rgba(255,154,31,.5);}
.value-card:hover{background:var(--black-1); transform:translateY(-4px);}
.value-card svg{transition:transform .35s ease, filter .35s ease;}
.value-card:hover svg{transform:scale(1.15); filter:drop-shadow(0 0 8px rgba(255,154,31,.5));}
.value-card h4{font-size:18px; margin:14px 0 10px; transition:color .3s ease;}
.value-card:hover h4{color:var(--orange-0);}
.value-card p{font-size:14px;}
@media(max-width:800px){.value-grid{grid-template-columns:1fr;}}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(100deg, #1a1409, var(--black-1) 55%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:90px 0;
  position:relative; overflow:hidden;
}
.cta-band .container{position:relative; z-index:1;}

/* ambient floating glow orbs */
.cta-orb{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(60px);
  background:radial-gradient(circle, rgba(255,154,31,.35), rgba(255,154,31,0) 70%);
  animation:orbFloat 9s ease-in-out infinite;
}
.cta-orb-1{width:340px; height:340px; top:-120px; left:-80px; animation-delay:0s;}
.cta-orb-2{width:260px; height:260px; bottom:-100px; right:-60px;
  background:radial-gradient(circle, rgba(255,207,122,.28), rgba(255,207,122,0) 70%);
  animation-delay:-4.5s;
}
.cta-orb-3{width:200px; height:200px; top:30%; right:18%;
  background:radial-gradient(circle, rgba(255,122,26,.22), rgba(255,122,26,0) 70%);
  animation-delay:-2.2s; animation-duration:12s;
}
@keyframes orbFloat{
  0%, 100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-20px) scale(1.12);}
}

/* faint moving grid texture, slowly drifting */
.cta-grid{
  position:absolute; inset:-42px; z-index:0; pointer-events:none;
  opacity:.35;
  background-image:
    linear-gradient(rgba(255,154,31,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,154,31,.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 90% at 50% 50%, #000 40%, transparent 90%);
  animation:gridDrift 18s linear infinite;
}
@keyframes gridDrift{
  0%{background-position:0 0, 0 0;}
  100%{background-position:42px 42px, 42px 42px;}
}

/* diagonal light beams sweeping across the band */
.cta-beam{
  position:absolute; top:-50%; width:2px; height:200%; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,177,66,.35), transparent);
  transform:rotate(18deg);
  animation:beamSweep 8s ease-in-out infinite;
  opacity:0;
}
.cta-beam-1{left:20%; animation-delay:0s;}
.cta-beam-2{left:65%; width:1.5px; animation-delay:3.5s; animation-duration:10s;}
@keyframes beamSweep{
  0%{transform:translateX(-40px) rotate(18deg); opacity:0;}
  10%{opacity:.8;}
  45%{opacity:.8;}
  60%{transform:translateX(60px) rotate(18deg); opacity:0;}
  100%{opacity:0;}
}

/* small particles rising slowly through the band */
.cta-particles{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.cta-particles span{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--orange-0); opacity:0;
  animation-name:particleRise; animation-timing-function:ease-in; animation-iteration-count:infinite;
}
@keyframes particleRise{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:.7;}
  50%{transform:translateY(-140px) translateX(10px); opacity:.5;}
  90%{opacity:0;}
  100%{transform:translateY(-260px) translateX(-6px); opacity:0;}
}

/* glass panel wrapping the CTA content */
.cta-panel{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  padding:52px 56px;
  border-radius:20px;
  border:1px solid rgba(255,154,31,.18);
  background:rgba(16,17,19,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  overflow:hidden;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.cta-panel:hover{
  border-color:rgba(255,154,31,.4);
  box-shadow:0 30px 70px -25px rgba(255,138,26,.18);
}
.cta-panel::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,154,31,.06) 50%, transparent 70%);
  background-size:250% 250%;
  animation:panelSheen 7s ease-in-out infinite;
}
@keyframes panelSheen{
  0%{background-position:0% 0%;}
  50%{background-position:100% 100%;}
  100%{background-position:0% 0%;}
}
.cta-text, .cta-actions{position:relative; z-index:1;}
.cta-actions{display:flex; gap:16px; flex-wrap:wrap;}
.cta-sub{margin-top:14px; font-size:15px; max-width:420px;}
.cta-band h2{max-width:480px;}

/* corner bracket accents — tech / premium feel */
.cta-corner{position:absolute; width:26px; height:26px; z-index:1; pointer-events:none; opacity:.7;}
.cta-corner::before, .cta-corner::after{content:''; position:absolute; background:var(--orange-0);}
.cta-corner::before{width:100%; height:1.5px; top:0; left:0;}
.cta-corner::after{width:1.5px; height:100%; top:0; left:0;}
.cta-corner-tl{top:14px; left:14px;}
.cta-corner-tr{top:14px; right:14px; transform:rotate(90deg);}
.cta-corner-bl{bottom:14px; left:14px; transform:rotate(-90deg);}
.cta-corner-br{bottom:14px; right:14px; transform:rotate(180deg);}

/* pulsing live-style dot before eyebrow */
.pulse-dot{
  position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--orange-0); flex-shrink:0;
}
.pulse-dot::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--orange-0);
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.6); opacity:.9;}
  100%{transform:scale(1.9); opacity:0;}
}

/* shine sweep across the primary CTA button on hover */
.btn-shine{position:relative; overflow:hidden;}
.btn-shine::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.btn-shine:hover::after{left:130%;}

@media(max-width:1000px){
  .cta-panel{flex-direction:column; align-items:flex-start; padding:38px 26px;}
}
@media (prefers-reduced-motion: reduce){
  .cta-orb, .cta-panel::before, .pulse-dot::after, .cta-grid, .cta-beam, .cta-particles span, .tl-item::after{animation:none !important; opacity:0;}
}

/* ---------- Footer ---------- */
.footer{
  position:relative;
  padding:70px 0 30px;
  border-top:1px solid transparent;
  background:linear-gradient(180deg, var(--black-1) 0%, var(--black-0) 100%);
  overflow:hidden;
}
.footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--orange-0) 20%, #ffcf7a 50%, var(--orange-0) 80%, transparent);
  background-size:200% 100%;
  animation:footerBorderShift 6s linear infinite;
}
@keyframes footerBorderShift{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}

/* ambient glow + grid texture behind footer content */
.footer-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; border-radius:50%;
  top:-180px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,154,31,.14), rgba(255,154,31,0) 70%);
  filter:blur(40px);
  animation:orbFloat 11s ease-in-out infinite;
}
.footer-grid-bg{
  position:absolute; inset:-42px; z-index:0; pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,154,31,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,154,31,.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 85%);
  animation:gridDrift 20s linear infinite;
}
.footer .container{position:relative; z-index:1;}

/* status badge above the footer columns */
.footer-top-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; margin-bottom:40px;
  background:rgba(255,154,31,.04);
}

.footer-main{
  display:grid; grid-template-columns:1fr 2.1fr; gap:56px;
  padding-bottom:44px;
}

/* -- brand / about column -- */
.footer-brand-col{max-width:320px;}
.footer-brand{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.footer-logo-ring{
  position:relative; display:inline-flex; flex:none; border-radius:50%; padding:3px;
  background:conic-gradient(from 0deg, var(--orange-0), transparent 30%, transparent 70%, var(--orange-0));
  animation:ringSpin 5s linear infinite;
}
.footer-logo-ring img{height:52px; width:52px; border-radius:50%; object-fit:cover; display:block; border:2px solid var(--black-0);}
@keyframes ringSpin{100%{transform:rotate(360deg);}}
.footer-brand-name{
  font-family:var(--mono); font-size:13px; line-height:1.4; letter-spacing:.03em;
  color:var(--white); font-weight:700; text-transform:uppercase;
}
.footer p.desc{font-size:14.5px; line-height:1.7; color:var(--gray); max-width:320px; margin-bottom:22px;}

.footer-contact-list{margin-bottom:20px;}
.footer-contact-list li{
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px; font-size:14px; color:var(--gray);
}
.footer-contact-list svg{width:16px; height:16px; flex:none; color:var(--orange-0);}
.footer-contact-list a{color:var(--gray); transition:color .25s ease;}
.footer-contact-list a:hover{color:var(--orange-0);}

.social-row{display:flex; gap:12px; margin-top:4px;}
.social-row a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.social-row a:hover{
  border-color:var(--orange-0); color:var(--orange-0);
  transform:translateY(-3px);
  box-shadow:0 8px 20px -8px rgba(255,154,31,.5);
}
.social-row svg{width:16px; height:16px;}

/* -- services taxonomy grid -- */
.footer-services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 32px;
}
.footer-service-col h5{
  position:relative;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white); margin-bottom:16px; padding-bottom:12px;
}
.footer-service-col h5::after{
  content:''; position:absolute; left:0; bottom:0; width:28px; height:2px;
  background:linear-gradient(90deg, var(--orange-0), transparent);
}
.footer-service-col ul li{
  position:relative; padding-left:14px;
  margin-bottom:10px; font-size:14px; line-height:1.4; color:var(--gray);
}
.footer-service-col ul li::before{
  content:''; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%;
  background:var(--orange-0); opacity:.75;
}

/* -- bottom bar -- */
.footer-bottom{
  border-top:1px solid var(--line); padding-top:26px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-family:var(--mono); font-size:12px; color:var(--gray-dim);
}
.footer-bottom-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-bottom-links a{color:var(--gray-dim); transition:color .25s ease;}
.footer-bottom-links a:hover{color:var(--orange-0);}

/* ===== Responsive: tablet ===== */
@media(max-width:1000px){
  .footer-main{grid-template-columns:1fr; gap:44px;}
  .footer-brand-col{max-width:520px;}
  .footer-services-grid{grid-template-columns:repeat(3, 1fr);}
}
@media(max-width:800px){
  .footer-services-grid{grid-template-columns:repeat(2, 1fr); gap:32px 28px;}
}

/* ===== Responsive: mobile ===== */
@media(max-width:520px){
  .footer{padding:56px 0 24px;}
  .footer-services-grid{grid-template-columns:repeat(2, 1fr); gap:28px 20px;}
  .footer-brand-col{max-width:100%;}
  .footer p.desc{max-width:100%;}
  .footer-bottom{flex-direction:column; align-items:flex-start; text-align:left;}
  .footer-bottom-links{order:2; gap:16px;}
}
@media(max-width:400px){
  .footer-services-grid{grid-template-columns:1fr 1fr; gap:26px 16px;}
  .footer-service-col h5{font-size:11px;}
  .footer-service-col ul li{font-size:13.5px;}
}

@media (prefers-reduced-motion: reduce){
  .footer::before, .footer-glow, .footer-grid-bg, .footer-logo-ring{animation:none !important;}
}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
.contact-panel{background:var(--black-0); padding:48px;}
.contact-item{display:flex; gap:16px; margin-bottom:30px;}
.contact-item .ic{
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange-0);
}
.contact-item .ic svg{width:18px; height:18px;}
.contact-item h4{font-size:15px; margin-bottom:4px;}
.contact-item p, .contact-item a{font-size:14.5px; color:var(--gray);}
.contact-item a:hover{color:var(--orange-0);}

.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gray); margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--black-1); border:1px solid var(--line);
  color:var(--white); padding:13px 14px; font-family:var(--body); font-size:14.5px;
  border-radius:2px; transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange-0);
}
.field textarea{resize:vertical; min-height:120px;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;}}

.map-frame{border:1px solid var(--line); margin-top:0; filter:grayscale(1) invert(.92) contrast(1.1);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{padding:150px 0 70px; border-bottom:1px solid var(--line); position:relative; overflow:hidden;}
.page-hero .container{position:relative; z-index:1;}
.crumbs{font-family:var(--mono); font-size:12px; color:var(--gray-dim); margin-top:14px;}
.crumbs span{color:var(--orange-0);}

/* photo variant — matches the home hero's sizing, Ken Burns photo, and overlay treatment */
/* ---------- About hero: subtle ambient glow ---------- */
.hero-sweep{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.hero-sweep::before{
  content:"";
  position:absolute; inset:-10%;
  background:radial-gradient(ellipse 55% 45% at 72% 30%, rgba(255,154,31,.14), transparent 70%);
  animation:glowBreathe 12s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%,100%{opacity:.6; transform:scale(1);}
  50%{opacity:1; transform:scale(1.06);}
}
@media (prefers-reduced-motion: reduce){
  .hero-sweep::before{animation:none !important;}
}
.page-hero-photo{padding:170px 0 110px;}
.page-hero-photo h1{
  margin:18px 0 22px; font-size:clamp(32px, 3.6vw, 52px); letter-spacing:.005em; line-height:1.15;
}
.page-hero-photo .eyebrow{position:relative; z-index:1;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-q{display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:20px;}
.faq-q h4{font-size:16.5px; font-weight:600; font-family:var(--body); text-transform:none;}
.faq-plus{width:20px; height:20px; position:relative; flex-shrink:0;}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; background:var(--orange-0); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-plus::before{width:14px; height:2px;}
.faq-plus::after{width:2px; height:14px; transition:transform .25s ease;}
.faq-item.open .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-a p{padding-top:14px; font-size:14.5px;}
.faq-item.open .faq-a{max-height:200px;}

/* ---------- Team / about ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;}}
.about-image{
  border:1px solid var(--line); aspect-ratio:4/3; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--black-1);
}
.about-image img{height:60%; opacity:.9;}
.about-image-premium{
  border-radius:18px; transition:border-color .4s ease, box-shadow .4s ease;
}
.about-image-premium:hover{border-color:rgba(255,154,31,.4); box-shadow:0 24px 50px -22px rgba(255,138,26,.25);}
.about-image-premium img{
  height:100%; width:100%; object-fit:cover; opacity:1;
  filter:grayscale(.15) brightness(.88);
  transition:transform .6s cubic-bezier(.2,.8,.3,1), filter .4s ease;
}
.about-image-premium:hover img{transform:scale(1.08); filter:grayscale(0) brightness(1);}
.about-image-premium::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,10,0) 40%, rgba(8,9,10,.55) 100%);
}
.about-image-premium .cta-corner{opacity:0; transition:opacity .35s ease;}
.about-image-premium:hover .cta-corner{opacity:1;}

.timeline{border-left:1px solid var(--line); padding-left:36px; position:relative;}
.tl-item{position:relative; padding-bottom:40px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-42px; top:2px; width:11px; height:11px;
  background:var(--orange-0); border-radius:50%; box-shadow:0 0 0 4px var(--black-0);
  z-index:1;
}
.tl-item::after{
  content:""; position:absolute; left:-42px; top:2px; width:11px; height:11px;
  border-radius:50%; border:1px solid var(--orange-0);
  animation:pulseRing 2.4s ease-out infinite;
}
.tl-item:nth-child(2)::after{animation-delay:.3s;}
.tl-item:nth-child(3)::after{animation-delay:.6s;}
.tl-item:nth-child(4)::after{animation-delay:.9s;}
.tl-item .yr{font-family:var(--mono); color:var(--orange-0); font-size:13px;}
.tl-item h4{margin:6px 0 8px; font-size:18px;}
.tl-item p{font-size:14px;}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

/* utility */
.mt-0{margin-top:0;}
.text-orange{color:var(--orange-0);}

/* ============================================================
   NEW: professional homepage additions
   ============================================================ */

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--orange-1), var(--orange-0), #ffcf7a);
  box-shadow:0 0 10px rgba(255,154,31,.6);
  z-index:200; transition:width .1s ease-out;
}

/* cursor glow (desktop only) */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px;
  background:radial-gradient(circle, rgba(255,138,26,.10) 0%, transparent 70%);
  border-radius:50%; pointer-events:none; z-index:1;
  transform:translate(-50%,-50%); opacity:0; transition:opacity .4s ease;
  will-change:transform;
}
@media (pointer:fine){ .cursor-glow{opacity:1;} }
@media (pointer:coarse){ .cursor-glow{display:none;} }

/* floating whatsapp button */
.float-whatsapp{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange-1), var(--orange-0));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px var(--orange-glow);
  color:#0c0a08;
}
.float-whatsapp svg{width:26px; height:26px;}
.float-whatsapp::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--orange-0); animation:pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1); opacity:.7;}
  100%{transform:scale(1.7); opacity:0;}
}

/* floating call button */
.float-call{
  position:fixed; left:26px; bottom:26px; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg, var(--orange-1), var(--orange-0));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px var(--orange-glow);
  color:#0c0a08;
}
.float-call svg{width:26px; height:26px;}
.float-call::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--orange-0); animation:pulse-ring 2.2s ease-out infinite;
}

/* back to top */
.back-to-top{
  position:fixed; right:26px; bottom:96px; z-index:150;
  width:44px; height:44px; border-radius:50%;
  background:var(--black-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, border-color .2s ease;
}
.back-to-top.show{opacity:1; pointer-events:auto; transform:none;}
.back-to-top:hover{border-color:var(--orange-0); color:var(--orange-0);}
.back-to-top svg{width:18px; height:18px;}

@media(max-width:600px){
  .float-whatsapp{width:52px; height:52px; right:18px; bottom:18px;}
  .float-call{width:52px; height:52px; left:18px; bottom:18px;}
  .back-to-top{right:18px; bottom:84px;}
}

/* trust marquee */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--black-1);
  padding:22px 0; overflow:hidden;
  position:relative;
  display:flex; align-items:center;
}
.marquee-wrap::before, .marquee-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none;
}
.marquee-wrap::before{left:0; background:linear-gradient(90deg, var(--black-1), transparent);}
.marquee-wrap::after{right:0; background:linear-gradient(270deg, var(--black-1), transparent);}
.marquee-label{
  flex:none; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--white); white-space:nowrap;
  padding:0 24px 0 max(24px, calc((100vw - 1180px)/2));
  position:relative; z-index:4;
  background:var(--black-1);
}
.marquee-label::before{
  content:""; position:absolute; top:0; bottom:0; left:100%; width:50px; z-index:1;
  background:linear-gradient(90deg, var(--black-1), transparent); pointer-events:none;
}
.marquee-label::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:rgba(255,255,255,.14);
}
.marquee-dot{
  width:7px; height:7px; border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 9px 1px var(--orange-glow); flex:none;
  animation:liveDot 1.8s ease-in-out infinite;
}
.marquee-track{
  display:flex; gap:56px; width:max-content;
  animation:marquee 24s linear infinite;
  padding-left:32px;
}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--mono); font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:600; color:var(--gray); display:flex; align-items:center; gap:10px; white-space:nowrap;
  transition:color .25s ease;
}
.marquee-track span:hover{color:var(--white);}
.marquee-track span::before{
  content:""; width:5px; height:5px; border-radius:1px; background:var(--orange-0);
  transform:rotate(45deg); flex:none; opacity:.85;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media(max-width:700px){
  .marquee-label{display:none;}
}

/* ---------- Why choose us: clean brand background ---------- */
.why-section{position:relative; overflow:hidden;}
.why-section .container{position:relative; z-index:2;}
.why-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse at 12% 10%, rgba(255,154,31,.14), transparent 55%),
    radial-gradient(ellipse at 88% 90%, rgba(255,122,26,.12), transparent 55%),
    var(--black-0);
}
.why-bg::after{
  content:"";
  position:absolute; inset:-50%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.03) 50%, transparent 58%);
  animation:whySheen 11s linear infinite;
}
@keyframes whySheen{
  0%{transform:translate(-25%,-15%);}
  100%{transform:translate(25%,15%);}
}
.why-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:65%; height:380px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,154,31,.16), transparent 72%);
  filter:blur(20px);
  animation:processSpotlightPulse 8s ease-in-out infinite;
}
.why-orb{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.32; pointer-events:none;
  background:radial-gradient(circle, var(--orange-glow), transparent 70%);
  animation:float-orb 12s ease-in-out infinite;
}
.why-orb.o1{width:340px; height:340px; top:-110px; right:-90px;}
.why-orb.o2{width:280px; height:280px; bottom:-120px; left:-80px; animation-delay:-5s;}
@media (prefers-reduced-motion: reduce){
  .why-glow, .why-bg::after, .why-orb{animation:none !important;}
}
@media(max-width:700px){.why-orb{display:none;}}

/* feature media: stronger hover + glow ring */
.feature-media{
  position:relative; border:1px solid var(--line); overflow:hidden;
  aspect-ratio:4/3.2;
  transition:box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}
.feature-media:hover{
  box-shadow:0 26px 50px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,154,31,.3), 0 0 30px -6px rgba(255,154,31,.3);
  border-color:rgba(255,154,31,.4);
  transform:translateY(-4px);
}
.feature-media img{
  width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05);
  transition:transform .8s ease;
}
.feature-media:hover img{transform:scale(1.06);}
.feature-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(8,9,10,.85));
}
.feature-media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,154,31,.22) 48%, transparent 66%);
  background-size:250% 250%; background-position:120% 0%; opacity:0;
  transition:opacity .3s ease;
}
.feature-media:hover::before{opacity:1; animation:mediaSweep 1s ease forwards;}

/* animated counter badge with pulse ring */
.feature-badge{
  position:absolute; left:24px; bottom:24px; z-index:3;
  background:rgba(8,9,10,.75); backdrop-filter:blur(6px);
  border:1px solid var(--line); padding:16px 20px; border-radius:2px;
  display:flex; align-items:center; gap:14px;
}
.feature-badge::before{
  content:""; position:absolute; inset:-4px; border-radius:4px;
  box-shadow:0 0 0 0 rgba(255,154,31,.4);
  animation:icBadgePulse 2.8s ease-out infinite;
}

/* staggered rise-in for the feature rows */
.feature-badge .num{font-family:var(--display); font-size:30px; font-weight:700; color:var(--orange-0);}
.feature-badge .label{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--gray); max-width:120px; line-height:1.4;}

.feature-list{display:flex; flex-direction:column; gap:26px; margin-top:8px;}
.feature-row{
  display:flex; gap:18px; position:relative;
  transition:transform .3s ease;
}
.feature-row:hover{transform:translateX(4px);}
.feature-row .ic{
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--orange-0);
  transition:background .3s ease, border-color .3s ease, transform .4s cubic-bezier(.2,.8,.3,1);
  position:relative;
}
.feature-row .ic::before{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,154,31,.45);
  animation:icBadgePulse 3s ease-out infinite;
}
.feature-row:nth-child(2) .ic::before{animation-delay:.8s;}
.feature-row:nth-child(3) .ic::before{animation-delay:1.6s;}
.feature-row:hover .ic{background:var(--orange-0); color:#0c0a08; border-color:var(--orange-0); transform:scale(1.1) rotate(-6deg);}
.feature-row .ic svg{width:20px; height:20px;}
.feature-row h4{font-size:16.5px; margin-bottom:6px; transition:color .3s ease;}
.feature-row:hover h4{color:var(--orange-0);}
.feature-row p{font-size:14px;}

/* portfolio */
.portfolio-section{position:relative; overflow:hidden;}
.portfolio-section .container{position:relative; z-index:2;}
.portfolio-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse at 12% 15%, rgba(255,154,31,.13), transparent 52%),
    radial-gradient(ellipse at 88% 85%, rgba(255,122,26,.11), transparent 52%);
}
.portfolio-grid-lines{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 85%);
  animation:gridDrift 40s linear infinite;
}
.portfolio-orb{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.2; pointer-events:none;
  background:radial-gradient(circle, var(--orange-glow), transparent 70%);
  animation:float-orb 15s ease-in-out infinite;
}
.portfolio-orb.o1{width:360px; height:360px; top:-120px; left:-90px;}
.portfolio-orb.o2{width:300px; height:300px; bottom:-130px; right:-80px; animation-delay:-7s;}
.portfolio-particles{position:absolute; inset:0;}
.portfolio-particles span{
  position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%;
  background:var(--orange-0); opacity:0; box-shadow:0 0 6px 1px var(--orange-glow);
  animation:portfolioParticleRise linear infinite;
}
.portfolio-particles span:nth-child(1){left:8%;  animation-duration:16s; animation-delay:0s;}
.portfolio-particles span:nth-child(2){left:22%; animation-duration:20s; animation-delay:3s;}
.portfolio-particles span:nth-child(3){left:41%; animation-duration:14s; animation-delay:6s;}
.portfolio-particles span:nth-child(4){left:63%; animation-duration:18s; animation-delay:2s;}
.portfolio-particles span:nth-child(5){left:81%; animation-duration:15s; animation-delay:8s;}
.portfolio-particles span:nth-child(6){left:93%; animation-duration:19s; animation-delay:5s;}
@keyframes portfolioParticleRise{
  0%{transform:translateY(0) scale(.6); opacity:0;}
  10%{opacity:.55;}
  90%{opacity:.35;}
  100%{transform:translateY(-420px) scale(1); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .portfolio-grid-lines, .portfolio-orb, .portfolio-particles span{animation:none !important;}
}
@media(max-width:700px){.portfolio-orb, .portfolio-particles{display:none;}}


.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.filter-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--line); border-radius:24px; color:var(--gray);
  background:rgba(255,255,255,.02); cursor:pointer; transition:all .25s ease;
}
.filter-btn:hover{color:var(--white); border-color:rgba(255,154,31,.4); background:rgba(255,154,31,.06);}
.filter-btn.active{
  background:linear-gradient(95deg, var(--orange-1), var(--orange-0)); color:#0c0a08; border-color:var(--orange-0);
  box-shadow:0 8px 20px -8px rgba(255,154,31,.5);
}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.portfolio-card{
  position:relative; overflow:hidden; border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  aspect-ratio:4/3.3; cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .35s ease;
}
.portfolio-card:hover{
  transform:translateY(-7px);
  border-color:rgba(255,154,31,.45);
  box-shadow:0 24px 46px -20px rgba(255,154,31,.28);
}
.portfolio-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .6s ease;}
.portfolio-card:hover img{transform:scale(1.08); filter:brightness(.6) saturate(1.1);}
.portfolio-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--white); background:rgba(10,11,12,.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:6px 12px;
  transition:border-color .3s ease, color .3s ease;
}
.portfolio-card:hover .portfolio-tag{border-color:rgba(255,154,31,.5); color:var(--orange-0);}
.portfolio-card .overlay{
  position:absolute; inset:0; padding:22px;
  background:linear-gradient(180deg, transparent 38%, rgba(8,9,10,.94));
  display:flex; flex-direction:column; justify-content:flex-end;
}
.portfolio-card h4{font-size:18px; margin:0 0 8px; transition:color .3s ease;}
.portfolio-card:hover h4{color:var(--orange-0);}
.portfolio-card .result{
  display:flex; align-items:center; gap:7px;
  font-size:13px; color:var(--gray);
  padding-top:9px; border-top:1px solid rgba(255,255,255,.09);
}
.portfolio-card .result svg{width:14px; height:14px; color:var(--orange-0); flex-shrink:0;}
.portfolio-card[data-cat]{transition:opacity .3s ease, transform .3s ease;}
.portfolio-card.hide{display:none;}
@media(max-width:900px){.portfolio-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr;}}

/* brands / clients served — individual badge-style cards */
.brand-card-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.brand-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  aspect-ratio:1/1;
  padding:24px;
  border:1px solid var(--line); border-radius:18px;
  background:var(--black-1);
  transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.brand-card:hover{
  border-color:var(--orange-0);
  background:rgba(255,154,31,.05);
  transform:translateY(-4px);
  box-shadow:0 14px 30px -14px rgba(255,154,31,.35);
}
.brand-card svg{width:38px; height:38px; color:var(--gray); flex-shrink:0; transition:color .3s ease;}
.brand-card:hover svg{color:var(--orange-0);}
.brand-card-name{
  font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:.01em;
  line-height:1.3; color:var(--gray-dim); text-align:center; transition:color .3s ease;
}
.brand-card:hover .brand-card-name{color:var(--white);}
@media(max-width:900px){
  .brand-card-row{grid-template-columns:repeat(3,1fr); gap:14px;}
  .brand-card{padding:18px;}
  .brand-card svg{width:32px; height:32px;}
  .brand-card-name{font-size:13px;}
}
@media(max-width:560px){
  .brand-card-row{grid-template-columns:repeat(2,1fr); gap:12px;}
}

/* magnetic button micro-interaction target */
.btn-magnetic{position:relative; overflow:hidden;}


/* stagger helper */
.reveal.d1{transition-delay:.05s;}
.reveal.d2{transition-delay:.15s;}
.reveal.d3{transition-delay:.25s;}
.reveal.d4{transition-delay:.35s;}
.reveal.d5{transition-delay:.45s;}
.reveal.d6{transition-delay:.55s;}

/* heading matching hero banner style/size, for use outside the hero */
.banner-heading{
  font-size:clamp(32px, 3.6vw, 52px) !important;
  letter-spacing:.005em; line-height:1.15;
}

/* hero floating accents */
.hero-orb{
  position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--orange-glow), transparent 70%);
  animation:float-orb 9s ease-in-out infinite;
}
@keyframes float-orb{
  0%,100%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-26px) translateX(14px);}
}
.hero-tag{
  position:absolute; z-index:2; background:rgba(10,11,12,.85); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:11px 17px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--white);
  display:flex; align-items:center; gap:8px; animation:float-tag 5s ease-in-out infinite;
  box-shadow:0 14px 32px -14px rgba(0,0,0,.7);
}
.hero-tag::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 10px 1px var(--orange-glow);
}
@keyframes float-tag{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}

/* Our Process (services page) */
.process-flow-section{position:relative; overflow:hidden;}
.process-flow-track{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.process-flow-line{
  position:absolute; top:70px; left:calc(12.5% - 2px); right:calc(12.5% - 2px);
  height:2px; background:var(--line); z-index:0; overflow:hidden;
}
.process-flow-line-fill{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, var(--orange-0), var(--orange-1));
  transition:width 1.4s cubic-bezier(.2,.8,.2,1);
}
.process-flow-track.in-view .process-flow-line-fill{width:100%;}
.process-flow-step{
  position:relative; z-index:1; text-align:center; padding:0 8px;
}
.pfs-visual{position:relative; z-index:1;}
.pfs-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gray-dim); margin:0 0 14px; transition:color .35s ease;
}
.process-flow-step:hover .pfs-label{color:var(--orange-0);}
.pfs-node{
  width:84px; height:84px; margin:0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--black-0);
  border:1px solid var(--line);
  box-shadow:0 0 0 6px var(--black-1);
  position:relative; transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.process-flow-step:hover .pfs-node{
  border-color:var(--orange-0); transform:translateY(-4px) scale(1.05);
  box-shadow:0 0 0 6px var(--black-1), 0 0 0 9px rgba(255,154,31,.10), 0 10px 24px rgba(255,138,26,.18);
}
.pfs-svg{
  width:30px; height:30px; color:var(--gray); transition:color .35s ease, transform .35s ease;
}
.process-flow-step:hover .pfs-svg{color:var(--orange-0); transform:scale(1.08);}
.pfs-text{margin-top:22px;}
.process-flow-step h3{font-size:19px; margin:0 0 10px;}
.process-flow-step p{font-size:14px; line-height:1.6;}

@media(max-width:900px){
  .process-flow-track{grid-template-columns:1fr; gap:40px;}
  .process-flow-line{top:0; bottom:0; left:41px; right:auto; width:2px; height:auto;}
  .process-flow-line-fill{width:100%; height:0%;}
  .process-flow-track.in-view .process-flow-line-fill{height:100%;}
  .process-flow-step{display:flex; align-items:flex-start; gap:20px; text-align:left; padding:0;}
  .pfs-visual{flex-shrink:0;}
  .pfs-label{text-align:center; margin:0 0 10px;}
  .pfs-text{margin-top:0;}
}

/* ============================================================
   VIP BRANDS SECTION — "Businesses we've helped grow"
   ============================================================ */
.vip-brands{overflow:hidden; padding-top:100px; padding-bottom:100px;}

/* ambient background: drifting glow orbs + faint grid */
.vip-brands-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.vip-orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; animation:vipOrbDrift 16s ease-in-out infinite;}
.vip-orb-1{width:360px; height:360px; left:-120px; top:-80px; background:radial-gradient(circle, rgba(255,154,31,.55), transparent 70%);}
.vip-orb-2{width:420px; height:420px; right:-140px; bottom:-120px; background:radial-gradient(circle, rgba(255,122,26,.4), transparent 70%); animation-delay:-8s;}
@keyframes vipOrbDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-24px) scale(1.12);}
}
.vip-brands-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,0,0,.85), transparent 75%);
}
.vip-brands .container{position:relative; z-index:1;}

/* eyebrow with pulsing live dot */
.vip-eyebrow{gap:9px;}
.vip-eyebrow-dot{
  position:relative; width:7px; height:7px; border-radius:50%; background:var(--orange-0);
  box-shadow:0 0 0 0 rgba(255,154,31,.6); animation:vipPulseDot 2.2s ease-out infinite;
}
@keyframes vipPulseDot{
  0%{box-shadow:0 0 0 0 rgba(255,154,31,.55);}
  70%{box-shadow:0 0 0 9px rgba(255,154,31,0);}
  100%{box-shadow:0 0 0 0 rgba(255,154,31,0);}
}

/* heading gradient shimmer + orbiting ring accent */
.vip-count-heading{position:relative; display:inline-block; background-size:200% auto; animation:vipGradShift 5s linear infinite;}
@keyframes vipGradShift{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}
.vip-count-ring{
  position:absolute; top:-14px; right:-30px; width:46px; height:46px;
  border:1.5px dashed rgba(255,154,31,.45); border-radius:50%;
  animation:vipSpin 12s linear infinite;
}
.vip-count-ring::before{
  content:''; position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px;
  background:var(--orange-0); border-radius:50%; box-shadow:0 0 10px 2px rgba(255,154,31,.7);
}
@keyframes vipSpin{to{transform:rotate(360deg);}}
@media(max-width:640px){.vip-count-ring{display:none;}}

/* infinite scrolling industries marquee */
.vip-marquee{
  position:relative; margin:40px 0 46px; overflow:hidden;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.vip-marquee-track{
  display:flex; width:max-content; gap:14px; white-space:nowrap;
  animation:vipMarquee 26s linear infinite;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-dim);
}
.vip-marquee-track span{display:inline-flex; align-items:center;}
.vip-marquee-track .vip-dot{color:var(--orange-0); padding:0 4px; opacity:.7;}
@keyframes vipMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.vip-marquee-fade{position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;}
.vip-marquee-fade-l{left:0; background:linear-gradient(90deg, var(--black-0), transparent);}
.vip-marquee-fade-r{right:0; background:linear-gradient(270deg, var(--black-0), transparent);}
.section-alt .vip-marquee-fade-l{background:linear-gradient(90deg, var(--black-1), transparent);}
.section-alt .vip-marquee-fade-r{background:linear-gradient(270deg, var(--black-1), transparent);}

/* premium card grid */
.vip-brand-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.vip-brand-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  aspect-ratio:1/1; padding:24px;
  border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--black-1), var(--black-0));
  opacity:0; transform:translateY(26px) scale(.96);
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease, border-color .35s ease, box-shadow .35s ease;
  transition-delay:calc(var(--vip-i, 0) * 70ms);
}
.vip-brand-grid.in .vip-brand-card{opacity:1; transform:translateY(0) scale(1);}
.vip-brand-card:nth-child(1){--vip-i:0;} .vip-brand-card:nth-child(2){--vip-i:1;}
.vip-brand-card:nth-child(3){--vip-i:2;} .vip-brand-card:nth-child(4){--vip-i:3;}
.vip-brand-card:nth-child(5){--vip-i:4;} .vip-brand-card:nth-child(6){--vip-i:5;}
.vip-brand-card:nth-child(7){--vip-i:6;} .vip-brand-card:nth-child(8){--vip-i:7;}

/* animated conic gradient border sweep on hover */
.vip-brand-card::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--vip-angle,0deg), rgba(255,154,31,0), rgba(255,154,31,.9), rgba(255,154,31,0) 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; animation:vipBorderSpin 3.2s linear infinite paused;
}
.vip-brand-card:hover::before{opacity:1; animation-play-state:running;}
@keyframes vipBorderSpin{to{--vip-angle:360deg;}}
@property --vip-angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}

/* cursor-follow spotlight glow */
.vip-card-spotlight{
  position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,154,31,.14), transparent 65%);
}
.vip-brand-card:hover .vip-card-spotlight{opacity:1;}

/* diagonal shine sweep on hover */
.vip-card-shine{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.vip-card-shine::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.09), transparent);
  transform:skewX(-18deg); transition:left .75s ease;
}
.vip-brand-card:hover .vip-card-shine::after{left:130%;}

.vip-brand-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px -18px rgba(255,138,26,.4), inset 0 0 0 1px rgba(255,154,31,.15);
}

.vip-card-icon{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,154,31,.06); border:1px solid rgba(255,154,31,.2);
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.vip-card-icon svg{width:24px; height:24px; color:var(--gray); transition:color .35s ease;}
.vip-brand-card:hover .vip-card-icon{
  transform:scale(1.12) rotate(-8deg);
  background:rgba(255,154,31,.14); border-color:rgba(255,154,31,.55);
  box-shadow:0 0 22px -2px rgba(255,154,31,.55);
}
.vip-brand-card:hover .vip-card-icon svg{color:var(--orange-0);}

.vip-card-name{
  position:relative; z-index:1;
  font-family:var(--display); font-size:15.5px; font-weight:600; letter-spacing:.01em;
  line-height:1.3; color:var(--gray-dim); text-align:center; transition:color .3s ease;
}
.vip-brand-card:hover .vip-card-name{color:var(--white);}

.vip-card-tag{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gray-dim); opacity:0; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
}
.vip-brand-card:hover .vip-card-tag{opacity:.8; transform:translateY(0);}

/* ---------- Tablet ---------- */
@media(max-width:900px){
  .vip-brands{padding-top:74px; padding-bottom:74px;}
  .vip-brand-grid{grid-template-columns:repeat(3,1fr); gap:16px;}
  .vip-brand-card{padding:20px; border-radius:16px;}
  .vip-card-icon{width:46px; height:46px;}
  .vip-card-icon svg{width:21px; height:21px;}
  .vip-card-name{font-size:14px;}
  .vip-orb-1,.vip-orb-2{filter:blur(46px);}
}

/* ---------- Mobile ---------- */
@media(max-width:560px){
  .vip-brands{padding-top:56px; padding-bottom:56px;}
  .vip-brand-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .vip-brand-card{padding:16px; border-radius:14px; gap:9px;}
  .vip-card-icon{width:40px; height:40px;}
  .vip-card-icon svg{width:18px; height:18px;}
  .vip-card-name{font-size:12.5px;}
  .vip-card-tag{font-size:9px;}
  .vip-marquee{margin:28px 0 32px;}
  .vip-marquee-fade{width:36px;}
  /* touch devices: keep tags + a soft ring visible without hover */
  .vip-brand-card{box-shadow:inset 0 0 0 1px rgba(255,154,31,.05);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ============================================================
   VIP HEADER + FOOTER — premium refresh (desktop / tablet / mobile)
   ============================================================ */

:root{
  --vip-topbar-h:40px;
  --vip-nav-h:78px;
}

/* ---------- top utility bar ---------- */
.vip-topbar{
  position:fixed; top:0; left:0; right:0; z-index:101;
  height:var(--vip-topbar-h);
  background:linear-gradient(90deg, #0b0c0d 0%, #131417 50%, #0b0c0d 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);
  font-size:11.5px; letter-spacing:.04em;
  color:var(--gray-dim);
  transition:transform .4s cubic-bezier(.16,.9,.35,1), opacity .3s ease;
}
.vip-topbar .container{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.vip-topbar-left, .vip-topbar-right{display:flex; align-items:center; gap:14px; min-width:0;}
.vip-topbar-right a{
  display:inline-flex; align-items:center; gap:7px; color:var(--gray);
  transition:color .25s ease; white-space:nowrap;
}
.vip-topbar-right a:hover{color:var(--orange-0);}
.vip-topbar-right svg{width:13px; height:13px; color:var(--orange-0); flex:none;}
.vip-topbar-sep{width:1px; height:14px; background:rgba(255,255,255,.12);}
.vip-topbar-live{display:inline-flex; align-items:center; gap:8px; color:var(--orange-0);}

/* hide the utility bar once the user starts scrolling */
.vip-topbar:has(+ .nav.scrolled){transform:translateY(-100%); opacity:0;}

/* ---------- main navigation ---------- */
.vip-nav{top:var(--vip-topbar-h); transition:top .4s cubic-bezier(.16,.9,.35,1), background .35s ease, box-shadow .35s ease;}
.vip-nav.scrolled{top:0;}
.vip-nav .container{gap:22px;}

.vip-brand{gap:14px; min-width:0;}
.vip-brand-text{display:flex; flex-direction:column; line-height:1.05; min-width:0;}
.vip-brand-name{
  font-family:var(--display); font-weight:700; font-size:20px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--white); white-space:nowrap;
}
.vip-brand-name span{
  background:linear-gradient(90deg, var(--orange-0), #ffcf7a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vip-brand-tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gray-dim); white-space:nowrap;
}

.vip-links{
  gap:2px; padding:5px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
}
.vip-links a{
  position:relative; display:block;
  padding:9px 18px; border-radius:999px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray);
}
.vip-links a::before{border-radius:999px;}
.vip-links a.active{
  color:var(--black-0);
  background:linear-gradient(135deg, var(--orange-0), #ffbb55);
  box-shadow:0 8px 22px -12px var(--orange-glow);
}
.vip-links a.active::before, .vip-links a.active::after{display:none;}
.vip-links a:not(.active):hover{color:var(--white); background:rgba(255,255,255,.06);}

.vip-cta{gap:12px;}
.vip-cta::before{display:none;}
.vip-icon-btn{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); color:var(--gray);
  transition:all .25s ease; flex:none;
}
.vip-icon-btn svg{width:17px; height:17px;}
.vip-icon-btn:hover{color:var(--orange-0); border-color:var(--orange-0); background:rgba(255,154,31,.08); transform:translateY(-2px);}
.vip-nav-btn{padding:12px 22px !important; font-size:11.5px !important; white-space:nowrap;}

/* ---------- mobile drawer ---------- */
.vip-drawer-backdrop{
  position:fixed; inset:0; z-index:120;
  background:rgba(4,5,6,.72); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.vip-drawer-backdrop.show{opacity:1; pointer-events:auto;}
.vip-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:121;
  width:min(340px, 88vw);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #101113 0%, #08090a 100%);
  border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.9);
  transform:translateX(105%);
  transition:transform .42s cubic-bezier(.16,.9,.35,1);
  overflow-y:auto;
}
.vip-drawer.open{transform:none;}
.vip-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.vip-drawer-title{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--orange-0);
}
.vip-drawer-close{
  background:none; border:1px solid var(--line); border-radius:50%;
  width:36px; height:36px; display:grid; place-items:center;
  color:var(--white); cursor:pointer; transition:all .25s ease;
}
.vip-drawer-close svg{width:16px; height:16px;}
.vip-drawer-close:hover{border-color:var(--orange-0); color:var(--orange-0);}
.vip-drawer-links{padding:12px 0; flex:1;}
.vip-drawer-links li{opacity:0; transform:translateX(18px); transition:opacity .35s ease, transform .35s ease;}
.vip-drawer.open .vip-drawer-links li{opacity:1; transform:none;}
.vip-drawer-links a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 24px;
  font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .25s ease, color .25s ease, padding-left .25s ease;
}
.vip-drawer-links a svg{width:17px; height:17px; opacity:.35; transition:all .25s ease;}
.vip-drawer-links a:hover{background:rgba(255,154,31,.06); padding-left:30px;}
.vip-drawer-links a:hover svg{opacity:1; color:var(--orange-0);}
.vip-drawer-links a.active{color:var(--orange-0); background:rgba(255,154,31,.08); box-shadow:inset 3px 0 0 var(--orange-0);}
.vip-drawer-links a.active svg{opacity:1; color:var(--orange-0);}
.vip-drawer-foot{padding:22px 24px 30px; border-top:1px solid var(--line); display:grid; gap:12px;}
.vip-drawer-btn{justify-content:center; width:100%;}
.vip-drawer-contact{
  font-family:var(--mono); font-size:11px; color:var(--gray);
  overflow-wrap:anywhere; word-break:break-word; line-height:1.5; transition:color .25s ease;
}
.vip-drawer-contact:hover{color:var(--orange-0);}

/* ---------- header responsive ---------- */
@media(max-width:1080px){
  .vip-links a{padding:9px 14px; font-size:11px;}
  .vip-nav-btn{padding:11px 18px !important;}
  .vip-topbar-left span:not(.vip-topbar-live){display:none;}
  .vip-topbar-left .vip-topbar-sep{display:none;}
}
@media(max-width:900px){
  :root{--vip-topbar-h:38px;}
  .vip-links{display:none;}
  .nav-toggle{display:flex;}
  .vip-nav .container{height:70px;}
  .vip-nav.scrolled .container{height:62px;}
  .vip-nav-btn{display:inline-flex;}
  .vip-topbar-right a:first-of-type{display:inline-flex;}
}
@media(max-width:768px){
  .vip-topbar-right a:not(:first-of-type), .vip-topbar-right .vip-topbar-sep{display:none;}
  .vip-brand-name{font-size:17px;}
  .vip-brand-tag{font-size:8.5px; letter-spacing:.2em;}
  .vip-nav .brand img{height:40px; width:40px;}
  .vip-nav-btn{padding:10px 15px !important; font-size:10.5px !important;}
  .vip-nav-btn svg{display:none;}
  .vip-icon-btn{display:none;}
}
@media(max-width:520px){
  :root{--vip-topbar-h:34px;}
  .vip-topbar{font-size:10.5px;}
  .vip-topbar .container{padding:0 16px;}
  .vip-topbar-left span:not(.vip-topbar-live){display:none;}
  .vip-nav .container{height:64px; gap:10px;}
  .vip-nav-btn{display:none;}
  .vip-icon-btn{display:inline-grid; width:38px; height:38px;}
  .vip-brand-tag{display:none;}
}

/* ---------- footer ---------- */
.vip-footer{padding-top:0;}
.vip-footer-cta{
  position:relative; z-index:1;
  transform:translateY(-30px);
  margin:0 0 32px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:16px 22px;
  border:1px solid var(--line); border-radius:999px;
  background:
    radial-gradient(ellipse 60% 200% at 0% 50%, rgba(255,154,31,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:0 30px 60px -45px rgba(0,0,0,.9);
}
.vip-footer-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-0);
}
.vip-footer-cta-actions{display:flex; gap:10px; flex-wrap:wrap;}
.vip-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--gray);
  transition:all .25s ease;
}
.vip-chip svg{width:14px; height:14px; color:var(--orange-0);}
.vip-chip:hover{color:var(--white); border-color:var(--orange-0); background:rgba(255,154,31,.1); transform:translateY(-2px);}

.vip-footer-main{padding-bottom:8px;}
.vip-social-row a{
  width:40px; height:40px; border-radius:12px;
  display:inline-grid; place-items:center;
  border:1px solid var(--line); color:var(--gray);
  transition:all .25s ease;
}
.vip-social-row a svg{width:17px; height:17px;}
.vip-social-row a:hover{
  color:var(--orange-0); border-color:var(--orange-0);
  background:rgba(255,154,31,.08); transform:translateY(-3px);
  box-shadow:0 12px 24px -14px var(--orange-glow);
}
.vip-footer-bottom{
  margin-top:34px; padding-top:24px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--gray-dim);
  gap:16px;
}
.vip-footer-bottom .footer-bottom-links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
}
.vip-footer-signature{color:var(--orange-0); opacity:.85;}

@media(max-width:900px){
  .vip-footer-cta{border-radius:20px; padding:16px 18px;}
}
@media(max-width:520px){
  .vip-footer-cta{border-radius:18px;}
  .vip-footer-cta-actions{width:100%;}
  .vip-chip{flex:1 1 100%; justify-content:center;}
  .vip-footer-bottom{flex-direction:column; align-items:flex-start; text-align:left;}
  .vip-social-row a{width:38px; height:38px;}
}
@media (prefers-reduced-motion: reduce){
  .vip-topbar, .vip-nav, .vip-drawer, .vip-drawer-links li{transition:none !important;}
}
@media(max-width:520px){
  .vip-footer-bottom{gap:12px; padding-bottom:70px;}
  .vip-footer-bottom .footer-bottom-links{order:0;}
}
@media(min-width:521px){ .vip-footer-bottom{ padding-right:100px; } }

/* ============================================================
   ABOUT ME — founder spotlight (VIP)
   ============================================================ */
.aboutme-section{
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(255,138,26,.10), transparent 60%),
    linear-gradient(180deg, var(--black-0), var(--black-1));
  overflow:hidden;
}
.aboutme-bg{position:absolute; inset:0; pointer-events:none;}
.aboutme-orb{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.35;
  background:radial-gradient(circle, var(--orange-1), transparent 70%);
}
.aboutme-orb.o1{width:320px;height:320px;top:-120px;left:-80px;}
.aboutme-orb.o2{width:260px;height:260px;bottom:-100px;right:-60px;}
.aboutme-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:56px; align-items:start;
}
.aboutme-card{
  position:relative; text-align:center;
  padding:38px 28px 32px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
}
.aboutme-card::before{
  content:""; position:absolute; inset:-1px; border-radius:25px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,154,31,.55), transparent 45%, rgba(255,122,26,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.aboutme-photo{position:relative; width:150px; height:150px; margin:0 auto 22px;}
.aboutme-photo img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:2px solid rgba(255,154,31,.6);
  box-shadow:0 0 40px var(--orange-glow);
}
.aboutme-ring{
  position:absolute; inset:-12px; border-radius:50%;
  border:1px dashed rgba(255,154,31,.45);
  animation:aboutme-spin 18s linear infinite;
}
@keyframes aboutme-spin{to{transform:rotate(360deg);}}
.aboutme-name{font-family:var(--display); font-size:30px; font-weight:700; letter-spacing:.4px;}
.aboutme-role{font-family:var(--mono); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--orange-0); margin-top:6px;}
.aboutme-badges{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:20px 0 24px;}
.aboutme-badges span{
  font-size:12px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--gray);
  background:rgba(255,255,255,.03);
}
.aboutme-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.aboutme-points{margin-top:34px; display:grid; gap:18px;}
.aboutme-points li{display:flex; gap:16px; align-items:flex-start;}
.aboutme-points .ic-ring{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; font-size:19px;
  border:1px solid rgba(255,154,31,.35);
  background:rgba(255,138,26,.08);
}
.aboutme-points h4{font-family:var(--display); font-size:19px; letter-spacing:.3px;}
.aboutme-points p{color:var(--gray); font-size:15px;}
.aboutme-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px;
  border-top:1px solid var(--line); padding-top:26px;
}
.aboutme-stats div{display:flex; flex-direction:column; gap:4px;}
.aboutme-stats strong{font-family:var(--display); font-size:34px; color:var(--orange-0); line-height:1;}
.aboutme-stats > div > span{font-size:13px; color:var(--gray);}
.aboutme-stats strong span{font:inherit; color:inherit;}
@media (max-width:900px){
  .aboutme-grid{grid-template-columns:1fr; gap:40px;}
  .aboutme-stats{grid-template-columns:1fr 1fr;}
}

/* ============================================================
   VIP FOOTER v2 — newsletter, service cards, trust strip
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.vip2-footer{position:relative; padding-top:0; overflow:hidden;}
.vip2-footer-topline{
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,154,31,.75), transparent);
}
.vip2-newsletter{
  position:relative; z-index:2;
  margin:56px 0 54px;
  padding:34px 38px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:center;
  border:1px solid var(--line); border-radius:22px;
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(255,138,26,.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.vip2-newsletter h3{font-family:var(--display); font-size:29px; line-height:1.2; margin-top:12px; letter-spacing:.3px;}
.vip2-newsletter p{color:var(--gray); font-size:14.5px; margin-top:10px; max-width:460px;}
.vip2-newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.vip2-newsletter-form input{
  flex:1 1 200px; min-width:0;
  padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:rgba(0,0,0,.45);
  color:var(--white); font-family:var(--body); font-size:14.5px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.vip2-newsletter-form input::placeholder{color:var(--gray-dim);}
.vip2-newsletter-form input:focus{outline:none; border-color:rgba(255,154,31,.7); box-shadow:0 0 0 3px rgba(255,138,26,.15);}

.vip2-footer-main{gap:56px;}
.vip2-services-grid{gap:26px 22px;}
.vip2-services-grid .footer-service-col{
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.vip2-services-grid .footer-service-col:hover{
  border-color:rgba(255,154,31,.4);
  transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(255,138,26,.08), rgba(255,255,255,0));
}
.vip2-services-grid .footer-service-col h5{display:flex; align-items:center; gap:9px;}
.vip2-col-ic{
  width:24px; height:24px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(255,138,26,.12); border:1px solid rgba(255,154,31,.3);
  color:var(--orange-0);
}
.vip2-col-ic svg{width:13px; height:13px;}

.vip2-social-row a{transition:transform .25s ease, border-color .25s ease, color .25s ease;}
.vip2-social-row a:hover{transform:translateY(-3px);}

.vip2-trust{
  position:relative; z-index:2;
  margin-top:44px; padding:18px 0;
  display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:space-between;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.vip2-trust span{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--gray);
}
.vip2-trust svg{width:16px; height:16px; color:var(--orange-0);}

.vip2-footer-bottom{padding-top:24px;}
.vip2-footer-bottom .footer-bottom-links a.is-active{color:var(--orange-0);}

@media (max-width:900px){
  .vip2-newsletter{grid-template-columns:1fr; padding:28px 24px; margin:44px 0;}
  .vip2-newsletter h3{font-size:25px;}
  .vip2-trust{gap:14px 22px;}
}
@media (max-width:600px){
  .vip2-newsletter-form{width:100%;}
  .vip2-newsletter-form .btn{width:100%; justify-content:center;}
  .vip2-trust span{font-size:10.5px;}
}

/* ================= SKILLS / EXPERTISE / RESULTS (VIP) ================= */
.skills-section, .results-section, .expertise-section, .tools-section,
.cases-section, .awards-section { position: relative; overflow: hidden; }

.skills-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px 40px; margin-top:44px;
}
.skillbar{
  position:relative; padding:20px 22px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.skillbar:hover{ transform:translateY(-4px); border-color:rgba(255,154,31,.45);
  box-shadow:0 18px 40px -22px rgba(255,154,31,.6); }
.skillbar-top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.skillbar-name{ font-weight:700; font-size:15.5px; letter-spacing:.2px; }
.skillbar-val{ font-weight:800; color:#ff9a1f; font-size:15px; }
.skillbar-track{
  position:relative; height:8px; border-radius:99px; margin-top:12px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.skillbar-fill{
  position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:99px;
  background:linear-gradient(90deg,#ff7a00,#ffc46b);
  box-shadow:0 0 18px rgba(255,154,31,.55);
  transform-origin:left center; animation:skillGrow 1.4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes skillGrow{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.skillbar-note{ margin-top:10px; font-size:13.5px; opacity:.72; }

.expertise-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.expertise-card{
  padding:26px 24px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.expertise-card:hover{ transform:translateY(-6px); border-color:rgba(255,154,31,.45);
  box-shadow:0 22px 48px -24px rgba(255,154,31,.55); }
.expertise-card .ic-ring, .award-card .ic-ring{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; }
.expertise-card .ic-ring svg, .award-card .ic-ring svg{ width:22px; height:22px; }
.expertise-card h4{ margin:16px 0 8px; font-size:17px; }
.expertise-card p{ font-size:14.5px; opacity:.78; }

.tools-cloud{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:40px; }
.tool-chip{
  padding:9px 16px; border-radius:99px; font-size:13.5px; font-weight:600; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  transition:all .3s ease;
}
.tool-chip:hover{ color:#0d0d0d; background:linear-gradient(90deg,#ff7a00,#ffc46b);
  border-color:transparent; transform:translateY(-3px); }

.ach-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.ach-stat{
  position:relative; text-align:center; padding:30px 20px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08); overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.ach-stat::after{ content:""; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg,transparent,#ff9a1f,transparent); opacity:.7; }
.ach-stat:hover{ transform:translateY(-6px); border-color:rgba(255,154,31,.45);
  box-shadow:0 22px 48px -24px rgba(255,154,31,.55); }
.ach-stat strong{ display:block; font-size:42px; line-height:1; font-weight:800; color:#ff9a1f;
  text-shadow:0 0 26px rgba(255,154,31,.35); }
.ach-stat > span{ display:block; margin-top:10px; font-size:14px; opacity:.78; }

.cases-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
.case-card{
  padding:28px 26px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.case-card:hover{ transform:translateY(-6px); border-color:rgba(255,154,31,.45);
  box-shadow:0 26px 54px -26px rgba(255,154,31,.55); }
.case-tag{ display:inline-block; padding:6px 12px; border-radius:99px; font-size:12px;
  letter-spacing:.6px; text-transform:uppercase; font-weight:700; color:#ff9a1f;
  background:rgba(255,154,31,.12); border:1px solid rgba(255,154,31,.28); }
.case-card h4{ margin:16px 0 14px; font-size:19px; line-height:1.35; }
.case-points{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.case-points li{ position:relative; padding-left:26px; font-size:14.5px; opacity:.82; }
.case-points li::before{ content:""; position:absolute; left:0; top:7px; width:12px; height:7px;
  border-left:2px solid #ff9a1f; border-bottom:2px solid #ff9a1f; transform:rotate(-45deg); }

.awards-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px; }
.award-card{
  display:flex; gap:16px; align-items:flex-start; padding:22px 22px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.award-card:hover{ transform:translateY(-4px); border-color:rgba(255,154,31,.45);
  box-shadow:0 20px 44px -24px rgba(255,154,31,.5); }
.award-card h4{ margin:0 0 6px; font-size:16px; }
.award-card p{ margin:0; font-size:14px; opacity:.75; }

@media (max-width: 980px){
  .expertise-grid{ grid-template-columns:repeat(2,1fr); }
  .ach-stats-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .skills-grid, .expertise-grid, .cases-grid, .awards-grid, .ach-stats-grid{ grid-template-columns:1fr; }
  .ach-stat strong{ font-size:34px; }
}

/* ============================================================
   VIP v5 — button shapes, Google reviews, hero polish, responsive
   ============================================================ */

/* ---------- 1. New button shape (soft pill) sitewide ---------- */
.btn,
.vip-nav-btn,
.vip-drawer-btn,
button.btn,
.vip2-newsletter-form .btn,
input[type="submit"],
button[type="submit"].btn{
  border-radius:999px !important;
  padding:15px 30px;
  font-weight:700;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.btn::before{
  content:"";
  position:absolute; inset:0; z-index:-1; border-radius:inherit;
  opacity:0; transition:opacity .3s ease;
}
.btn-primary{
  background:linear-gradient(100deg,#ffcf7a 0%, var(--orange-0) 42%, var(--orange-1) 100%);
  background-size:180% 100%;
  background-position:0% 50%;
  box-shadow:0 10px 26px -14px rgba(255,138,26,.85), inset 0 1px 0 rgba(255,255,255,.45);
  transition:background-position .5s ease, transform .25s ease, box-shadow .3s ease;
}
.btn-primary:hover{
  background-position:100% 50%;
  transform:translateY(-3px);
  box-shadow:0 18px 40px -14px rgba(255,138,26,.95), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active{transform:translateY(-1px) scale(.985);}
.btn-ghost{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  border-color:var(--orange-0);
  color:var(--orange-0);
  background:rgba(255,154,31,.09);
  transform:translateY(-3px);
  box-shadow:0 16px 34px -20px rgba(255,154,31,.7);
}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,154,31,.35), 0 0 0 6px rgba(255,154,31,.12);}
.nav-cta .btn{padding:12px 22px;}
.vip-icon-btn{border-radius:999px !important;}

/* ---------- 2. Hero banner — more premium ---------- */
.hero-bg::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 18% 40%, rgba(0,0,0,.72), transparent 70%),
    linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.72) 45%, rgba(8,7,6,.35) 100%),
    linear-gradient(180deg, rgba(8,7,6,.55) 0%, transparent 30%, rgba(8,7,6,.85) 100%);
}
.hero-badge-row span{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,154,31,.16), rgba(255,154,31,.05));
  border:1px solid rgba(255,154,31,.32);
  box-shadow:0 8px 24px -16px rgba(255,154,31,.9);
}
.hero .lead{color:rgba(255,255,255,.82);}
.hero-vip-rating{
  display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:26px; padding:10px 18px 10px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}
.hero-vip-rating .g-mark{width:22px; height:22px; flex:none;}
.hero-vip-rating strong{font-family:var(--display); font-size:16px; color:var(--white);}
.hero-vip-rating small{font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--gray); text-transform:uppercase;}
.hero-vip-rating .g-stars{display:inline-flex; gap:2px;}
.hero-vip-rating .g-stars svg{width:15px; height:15px; fill:#ffb400;}

/* ---------- 3. Google reviews section ---------- */
.greviews-section{position:relative; overflow:hidden;}
.greviews-section .container{position:relative; z-index:1;}
.greviews-orb{
  position:absolute; width:460px; height:460px; border-radius:50%; filter:blur(90px);
  opacity:.22; background:radial-gradient(circle, var(--orange-glow), transparent 70%);
  top:-160px; right:-140px; pointer-events:none;
}
.greviews-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px;
  flex-wrap:wrap; margin-bottom:44px;
}
.greviews-head .section-head{margin-bottom:0;}
.gsummary{
  display:flex; align-items:center; gap:20px;
  padding:20px 26px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
.gsummary-score{display:flex; flex-direction:column; align-items:center; line-height:1;}
.gsummary-score b{font-family:var(--display); font-size:42px; color:var(--white);}
.gsummary-score .g-stars{margin-top:8px;}
.gsummary-meta{display:flex; flex-direction:column; gap:8px;}
.gsummary-meta .gsummary-brand{display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:15px; color:var(--white);}
.gsummary-meta .gsummary-brand svg{width:20px; height:20px;}
.gsummary-meta span{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);}
.gsummary-meta a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange-0); text-decoration:none; border-bottom:1px solid rgba(255,154,31,.4); align-self:flex-start;
}
.g-stars{display:inline-flex; gap:3px;}
.g-stars svg{width:16px; height:16px; fill:#ffb400;}

.greviews-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.greview-card{
  position:relative;
  display:flex; flex-direction:column; gap:14px;
  padding:26px 24px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  border:1px solid rgba(255,255,255,.085);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.greview-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,154,31,.4);
  box-shadow:0 30px 60px -30px rgba(255,154,31,.45);
}
.greview-card .g-badge{position:absolute; top:22px; right:22px; width:20px; height:20px; opacity:.9;}
.greview-top{display:flex; align-items:center; gap:13px;}
.greview-avatar{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:17px; font-weight:700; color:#0c0a08;
  background:linear-gradient(140deg,#ffcf7a,#ff8a1a);
  box-shadow:0 0 0 2px rgba(255,154,31,.25);
}
.greview-avatar.a2{background:linear-gradient(140deg,#8ab4f8,#4285f4); color:#06122b;}
.greview-avatar.a3{background:linear-gradient(140deg,#7ee2a8,#34a853); color:#052a15;}
.greview-avatar.a4{background:linear-gradient(140deg,#ff9a9a,#ea4335); color:#2b0605;}
.greview-avatar.a5{background:linear-gradient(140deg,#ffe08a,#fbbc05); color:#2b2000;}
.greview-avatar.a6{background:linear-gradient(140deg,#d3b4ff,#8e6bff); color:#150a2b;}
.greview-name{display:flex; flex-direction:column; gap:4px; min-width:0;}
.greview-name b{font-family:var(--display); font-size:15px; color:var(--white); display:flex; align-items:center; gap:7px;}
.greview-name b svg{width:14px; height:14px; fill:#4285f4; flex:none;}
.greview-name span{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--gray); text-transform:uppercase;}
.greview-rate{display:flex; align-items:center; gap:10px;}
.greview-rate small{font-family:var(--mono); font-size:11px; color:var(--gray); letter-spacing:.05em;}
.greview-card p{margin:0; font-size:14.8px; line-height:1.72; color:rgba(255,255,255,.78);}
.greview-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gray);
}
.greview-foot em{font-style:normal; color:var(--orange-0);}
.greviews-cta{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:44px;}

/* ---------- 4. Responsive: desktop / laptop / tablet / mobile ---------- */
@media(max-width:1200px){
  .greviews-grid{gap:18px;}
}
@media(max-width:1024px){
  .section{padding:88px 0;}
  .greviews-grid{grid-template-columns:repeat(2,1fr);}
  .greviews-head{align-items:flex-start;}
  .hero-chart{max-width:520px; margin:0 auto;}
}
@media(max-width:900px){
  .hero-grid{gap:44px;}
  .hero .lead{max-width:100% !important;}
  .greviews-orb{display:none;}
  .gsummary{width:100%; justify-content:flex-start;}
}
@media(max-width:768px){
  .section{padding:70px 0;}
  .section-head{margin-bottom:40px;}
  .hero h1{font-size:clamp(28px,7.4vw,40px);}
  .hero .lead{font-size:15px;}
  .hero-vip-rating{width:100%; justify-content:center;}
  .greviews-grid{grid-template-columns:1fr;}
  .greview-card{padding:22px 20px;}
}
@media(max-width:600px){
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .btn{width:100%; justify-content:center;}
  .greviews-cta .btn{width:100%; justify-content:center;}
  .cta-actions .btn{width:100%; justify-content:center;}
  .btn{padding:14px 24px; font-size:12px;}
  .gsummary{flex-direction:column; align-items:flex-start; gap:16px; padding:20px;}
  .gsummary-score{flex-direction:row; align-items:center; gap:14px;}
  .gsummary-score .g-stars{margin-top:0;}
}
@media(max-width:400px){
  .greview-card p{font-size:14px;}
  .greview-foot{flex-direction:column; align-items:flex-start; gap:6px;}
}