/* ===================================================================
   TechMonx — shared stylesheet
   Refined dark, professional theme (blue / violet / pink accent)
=================================================================== */

:root{
  --bg:#06080D;
  --bg-alt:#0A0D15;
  --panel:#0D111B;
  --border:#1D2433;
  --border-soft:#171D2A;
  --text:#EEF0F6;
  --muted:#8A92A6;
  --muted-2:#5C6478;
  --blue:#5B8CFF;
  --violet:#8B5CF6;
  --pink:#D946EF;
  --teal:#38E8D4;
  --grad: linear-gradient(120deg, var(--blue), var(--violet) 55%, var(--pink));
  --grad-soft: linear-gradient(120deg, rgba(91,140,255,0.16), rgba(139,92,246,0.16) 55%, rgba(217,70,239,0.16));
  --radius: 16px;
  --radius-lg: 22px;
  --maxw: 1220px;
  --section-pad: 130px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  font-size:16px;
}
h1,h2,h3,h4,h5{font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; line-height:1.15;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.suffix::after{content:"_"; color:var(--teal);}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
section{position:relative; padding:var(--section-pad) 0;}
.section-tight{padding:80px 0;}

/* ---------- eyebrow / section head ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:20px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal);}
.section-head{max-width:680px; margin-bottom:64px;}
.section-head.centered{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:18px;}
.section-head p{color:var(--muted); font-size:16.5px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:10px; font-weight:600; font-size:14.5px; cursor:pointer; border:1px solid transparent; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, border-color .3s; white-space:nowrap;}
.btn-primary{background:var(--grad); color:#fff; box-shadow:0 8px 26px -8px rgba(139,92,246,0.5);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(139,92,246,0.65);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--blue); background:rgba(91,140,255,0.06);}
.btn-white{background:#fff; color:#0B0F1A;}
.btn-white:hover{transform:translateY(-2px);}
.btn-sm{padding:10px 20px; font-size:13px;}

/* ---------- reveal (cinematic, organic assembly) ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.84,.28,1), transform .8s cubic-bezier(.16,.84,.28,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(26px) scale(.96); transition:opacity .7s cubic-bezier(.16,.84,.28,1), transform .7s cubic-bezier(.16,.84,.28,1);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0) scale(1);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.11s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.17s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.29s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.35s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.41s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.47s;}
.reveal-stagger.in > *:nth-child(9){transition-delay:.53s;}
.reveal-stagger.in > *:nth-child(10){transition-delay:.59s;}
.reveal-stagger.in > *:nth-child(11){transition-delay:.65s;}
.reveal-stagger.in > *:nth-child(12){transition-delay:.71s;}

/* directional / scale reveal variants for a more cinematic, organic assembly */
.reveal-left{opacity:0; transform:translateX(-48px); transition:opacity .85s cubic-bezier(.16,.84,.28,1), transform .85s cubic-bezier(.16,.84,.28,1);}
.reveal-left.in{opacity:1; transform:translateX(0);}
.reveal-right{opacity:0; transform:translateX(48px); transition:opacity .85s cubic-bezier(.16,.84,.28,1), transform .85s cubic-bezier(.16,.84,.28,1);}
.reveal-right.in{opacity:1; transform:translateX(0);}
.reveal-scale{opacity:0; transform:scale(.9) translateY(18px); transition:opacity .8s cubic-bezier(.16,.84,.28,1), transform .8s cubic-bezier(.16,.84,.28,1);}
.reveal-scale.in{opacity:1; transform:scale(1) translateY(0);}
.reveal-line{opacity:0; transform:scaleX(0); transform-origin:left; transition:opacity .6s ease, transform .9s cubic-bezier(.16,.84,.28,1);}
.reveal-line.in{opacity:1; transform:scaleX(1);}

/* ---------- motion polish ---------- */
.hero-blob{animation:floatBlob 9s ease-in-out infinite;}
.hero-blob.hb2{animation-delay:-4.5s;}
@keyframes floatBlob{0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(18px,-14px,0);}}

/* scroll-linked parallax layers (JS sets --py via rAF) */
[data-parallax]{transform:translate3d(0, var(--py, 0), 0); will-change:transform;}

/* energetic micro-interactions */
.svc-card, .port-card, .blog-card, .testi-card, .value-card, .member, .engage-card{transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease;}
.tilt-card{transform:perspective(900px) rotateX(var(--tiltX,0)) rotateY(var(--tiltY,0)) translateY(var(--tiltLift,0)); transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;}
.svc-row-ic, .fab-book svg, .fab-chat svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.btn-primary, .btn-white{transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .3s, border-color .3s;}
.btn-primary:active, .btn-white:active{transform:scale(.96);}
@keyframes softPulse{0%,100%{box-shadow:0 8px 26px -8px rgba(139,92,246,0.5);} 50%{box-shadow:0 8px 34px -6px rgba(139,92,246,0.75);}}

/* =========================================================
   PREMIUM VISUAL SYSTEM (layered graphic reveal panels)
   Shared "Glasgow visual" quality bar used across services,
   about, careers, blog covers, testimonials and portfolio.
========================================================= */
.pv-panel{position:relative; overflow:hidden;}
.pv-tex{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.055) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; z-index:0;}
.pv-orb{position:absolute; border-radius:50%; filter:blur(38px); opacity:.55; pointer-events:none; z-index:0; animation:pvFloat 8s ease-in-out infinite;}
.pv-orb.o1{width:150px; height:150px; background:radial-gradient(circle, rgba(91,140,255,.55), transparent 70%); top:-36px; left:-24px;}
.pv-orb.o2{width:120px; height:120px; background:radial-gradient(circle, rgba(217,70,239,.5), transparent 70%); bottom:-28px; right:-16px; animation-delay:-3.6s;}
@keyframes pvFloat{0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(9px,-9px,0);}}
.pv-scene{position:relative; z-index:1; width:82%; filter:drop-shadow(0 14px 24px rgba(0,0,0,0.35));}
.pv-badge{position:absolute; bottom:14px; right:14px; z-index:2; padding:5px 11px; border-radius:20px; background:rgba(6,8,13,0.65); border:1px solid var(--border); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--muted);}
@media (max-width: 768px){
  .pv-orb{filter:blur(24px);}
}
@media (prefers-reduced-motion: reduce){
  .pv-orb{animation:none !important;}
}

@media (max-width: 768px){
  [data-parallax]{transform:none !important;}
  .tilt-card{transform:none !important;}
}
@media (max-width: 640px){
  /* keep motion vertical-only and shorter-travel on small screens: avoids
     any perceived horizontal shove and keeps animations light on touch GPUs */
  .reveal-left, .reveal-right{transform:translateY(20px);}
  .reveal-left.in, .reveal-right.in{transform:translateY(0);}
  .reveal-scale{transform:scale(.97) translateY(14px);}
  .reveal, .reveal-stagger > *{transform:translateY(18px);}
}
@media (prefers-reduced-motion: reduce){
  [data-parallax]{transform:none !important;}
  .tilt-card{transform:none !important;}
}

.btn{position:relative; overflow:hidden;}
.btn::after{content:""; position:absolute; top:0; left:-60%; width:36%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg); transition:left .6s ease;}
.btn:hover::after{left:130%;}
.btn:active{transform:scale(.97);}

.nav-item > a, .nav-item > button{position:relative;}
.nav-item > a::after, .nav-item > button::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--grad); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.nav-item.active > a::after, .nav-item:hover > a::after{transform:scaleX(1);}

.logo svg{transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.logo:hover svg{transform:rotate(8deg) scale(1.06);}

a, button{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px;}

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

/* =========================================================
   HEADER + MEGA MENU
========================================================= */
header{position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; border-bottom:1px solid transparent; transition:background .3s, padding .3s, border-color .3s;}
header.scrolled{background:rgba(6,8,13,0.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:14px 0; border-color:var(--border);}
nav.mainnav{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:9px; font-family:'Space Grotesk'; font-weight:700; font-size:19px;}
.logo svg{width:30px; height:30px;}
.nav-links{display:flex; gap:6px; align-items:center;}
.nav-item{position:relative;}
.nav-item > a, .nav-item > button{display:flex; align-items:center; gap:5px; font-size:14px; font-weight:500; color:var(--muted); padding:10px 14px; border-radius:8px; background:none; border:none; cursor:pointer; transition:color .25s, background .25s;}
.nav-item > a:hover, .nav-item > button:hover, .nav-item.active > a, .nav-item.active > button{color:var(--text); background:rgba(255,255,255,0.04);}
.nav-item .chev{width:9px; height:9px; transition:transform .25s;}
.nav-item:hover .chev{transform:rotate(180deg);}
.mega{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); width:560px; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; box-shadow:0 30px 70px -20px rgba(0,0,0,0.6); z-index:50;}
.nav-item:hover .mega{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.mega-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.mega-item{display:flex; gap:12px; padding:12px; border-radius:10px; transition:background .2s;}
.mega-item:hover{background:rgba(255,255,255,0.04);}
.mega-ic{width:36px; height:36px; border-radius:9px; background:rgba(91,140,255,0.1); border:1px solid rgba(91,140,255,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mega-ic svg{width:17px; height:17px; stroke:var(--blue);}
.mega-item h5{font-size:13.5px; margin-bottom:3px;}
.mega-item p{font-size:12px; color:var(--muted); line-height:1.4;}
.nav-right{display:flex; align-items:center; gap:16px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1100;}
.burger span{width:22px; height:2px; background:var(--text); transition:.3s;}

/* mobile nav drawer */
.mobile-nav{position:fixed; top:0; right:0; height:100vh; width:82%; max-width:340px; background:rgba(6,8,13,0.98); backdrop-filter:blur(16px); border-left:1px solid var(--border); padding:100px 32px 40px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1); z-index:1050; overflow-y:auto;}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav a{display:block; padding:14px 4px; font-size:16px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border-soft);}
.mobile-nav .mn-sub{padding-left:14px;}
.mobile-nav .mn-sub a{font-size:13.5px; font-weight:500; color:var(--muted); padding:10px 4px; border-bottom:none;}
.mobile-nav .btn{margin-top:20px;}

/* =========================================================
   PAGE HERO (inner pages)
========================================================= */
.page-hero{padding:170px 0 90px; position:relative; overflow:hidden; border-bottom:1px solid var(--border);}
.page-hero .breadcrumb{font-size:13px; color:var(--muted); margin-bottom:22px; display:flex; align-items:center; gap:8px;}
.page-hero .breadcrumb a:hover{color:var(--teal);}
.page-hero h1{font-size:clamp(34px,5vw,58px); max-width:760px;}
.page-hero p.lead{color:var(--muted); font-size:17px; max-width:600px; margin-top:16px; margin-bottom:32px;}
.hero-blob{position:absolute; border-radius:50%; filter:blur(100px); opacity:0.28; z-index:0;}
.hb1{width:420px; height:420px; background:var(--violet); top:-180px; right:-100px;}
.hb2{width:340px; height:340px; background:var(--blue); bottom:-200px; left:-80px;}

/* =========================================================
   HOME HERO
========================================================= */
.home-hero{padding:210px 0 150px; position:relative; overflow:hidden; display:flex; align-items:center; min-height:640px;}
.home-hero-inner{position:relative; z-index:2; max-width:820px;}
.home-hero h1{font-size:clamp(38px,5.6vw,66px); margin-bottom:22px;}
.home-hero p.lead{font-size:18px; color:var(--muted); max-width:600px; margin-bottom:0;}
.hero-btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.hero-grid-bg{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 55% 55% at 30% 25%, #000 30%, transparent 80%); z-index:0;}

/* =========================================================
   JOURNEY / STATS
========================================================= */
.journey-section{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.journey-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.journey-heading{font-size:30px; margin:10px 0 20px; line-height:1.2;}
.journey-loc{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.journey-loc span{font-size:12.5px; color:var(--muted-2); display:inline-flex; align-items:center; gap:7px; font-weight:600; letter-spacing:.02em; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,0.03); border:1px solid var(--border-soft);}
.journey-loc span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0;}
.journey-copy p{color:var(--muted); font-size:16px; line-height:1.7; max-width:460px;}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:38px; padding-top:30px; border-top:1px solid var(--border-soft);}
.stat-tile{text-align:center;}
.stat-tile .num{font-family:'Space Grotesk'; font-size:34px; font-weight:700; line-height:1.1;}
.stat-tile .label{color:var(--muted); font-size:11.5px; margin-top:8px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
.journey-visual{aspect-ratio:4/3; border-radius:var(--radius-lg); background:var(--grad-soft); border:1px solid var(--border); position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:center;}
.journey-visual::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px); background-size:30px 30px;}
.journey-visual svg{position:relative; z-index:1; width:70%; opacity:0.9;}
.journey-visual.journey-photo-panel::after{display:none;}
.journey-visual .pv-orb{z-index:2;}
.journey-visual .pv-badge{z-index:3;}
.journey-photo-panel .pv-orb{z-index:2;}
.journey-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; border-radius:inherit; filter:saturate(1.05) contrast(1.05); transform:scale(1.04); animation:journeyPan 22s ease-in-out infinite alternate; will-change:transform;}
.journey-photo-overlay{position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(160deg, rgba(6,8,13,0.8), rgba(6,8,13,0.42) 55%, rgba(6,8,13,0.88)); pointer-events:none;}
@keyframes journeyPan{0%{transform:scale(1.04) translate3d(0,0,0);} 100%{transform:scale(1.12) translate3d(-1.5%,-1.5%,0);}}
@media (max-width:768px){
  .journey-photo{animation-duration:30s;}
}
@media (prefers-reduced-motion: reduce){
  .journey-photo{animation:none !important; transform:scale(1.04);}
}

/* ---- Journey section image slider ("Our Journey So Far") ---- */
.journey-slider-panel{overflow:hidden;}
.journey-slide{position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1s ease;}
.journey-slide.active{opacity:1;}
.journey-slide img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05);}
.journey-slide.pos-1 img{object-position:center 60%;}
.journey-slide.pos-2 img{object-position:center 35%;}
.journey-slide.pos-3 img{object-position:center 40%;}
.journey-slider-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(160deg, rgba(6,8,13,0.78), rgba(6,8,13,0.32) 50%, rgba(6,8,13,0.85)); pointer-events:none;}
.journey-slider-panel .pv-orb{z-index:2;}
.journey-slider-panel .pv-badge{z-index:3;}
.journey-slider-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background:rgba(6,8,13,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s, border-color .25s, opacity .25s; opacity:0;}
.journey-slider-arrow svg{width:15px; height:15px; stroke:currentColor;}
.journey-slider-arrow.prev{left:14px;}
.journey-slider-arrow.next{right:14px;}
.journey-slider-arrow:hover{background:rgba(6,8,13,0.7); border-color:rgba(255,255,255,0.45);}
.journey-slider-panel:hover .journey-slider-arrow, .journey-slider-panel:focus-within .journey-slider-arrow{opacity:1;}
.journey-slider-dots{position:absolute; left:0; right:0; bottom:14px; z-index:4; display:flex; justify-content:center; gap:7px;}
.journey-slider-dots button{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer; transition:.25s;}
.journey-slider-dots button.active{background:#fff; width:20px; border-radius:4px;}
@media (max-width:640px){
  .journey-slider-arrow{width:32px; height:32px; opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .journey-slide{transition:none;}
}

/* ---- About page "Who We Are" story visual + slider ---- */
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.story-visual{aspect-ratio:4/3; border-radius:var(--radius-lg); background:var(--grad-soft); border:1px solid var(--border); position:relative; overflow:hidden;}
.who-slider{overflow:hidden;}
.who-slide{position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1s ease;}
.who-slide.active{opacity:1;}
.who-slide img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05);}
.who-slide.pos-1 img{object-position:center 60%;}
.who-slide.pos-2 img{object-position:center 35%;}
.who-slide.pos-3 img{object-position:center 40%;}
.who-slider-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(160deg, rgba(6,8,13,0.78), rgba(6,8,13,0.32) 50%, rgba(6,8,13,0.85)); pointer-events:none;}
.who-slider .pv-orb{z-index:2;}
.who-slider .pv-badge{z-index:3;}
.who-slider .pin{position:absolute; left:20px; bottom:20px; z-index:3; background:rgba(6,8,13,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.15); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; max-width:240px;}
.who-slider .pin svg{width:20px; height:20px; margin-bottom:2px;}
.who-slider .pin strong{font-size:14px;}
.who-slider .pin span{font-size:12px; color:var(--muted);}
.who-slider-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); background:rgba(6,8,13,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s, border-color .25s, opacity .25s; opacity:0;}
.who-slider-arrow svg{width:15px; height:15px; stroke:currentColor;}
.who-slider-arrow.prev{left:14px;}
.who-slider-arrow.next{right:14px;}
.who-slider-arrow:hover{background:rgba(6,8,13,0.7); border-color:rgba(255,255,255,0.45);}
.who-slider:hover .who-slider-arrow, .who-slider:focus-within .who-slider-arrow{opacity:1;}
.who-slider-dots{position:absolute; left:0; right:0; bottom:14px; z-index:4; display:flex; justify-content:center; gap:7px;}
.who-slider-dots button{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer; transition:.25s;}
.who-slider-dots button.active{background:#fff; width:20px; border-radius:4px;}
@media (max-width:640px){
  .who-slider-arrow{width:32px; height:32px; opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .who-slide{transition:none;}
}

/* =========================================================
   SERVICE TABS
========================================================= */
.tabs-nav{display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:40px; padding-bottom:0;}
.tab-btn{padding:13px 20px; font-size:14px; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; position:relative; transition:color .25s;}
.tab-btn::after{content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--grad); opacity:0; transition:opacity .25s;}
.tab-btn.active{color:var(--text);}
.tab-btn.active::after{opacity:1;}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeUp .5s ease;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.tab-content-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start;}
.tab-feature-list{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px;}
.tab-feature-list li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#D5D9E4;}
.tab-feature-list li svg{width:16px; height:16px; stroke:var(--teal); flex-shrink:0; margin-top:2px;}
.tech-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.tech-badges span{font-size:12px; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.03); border:1px solid var(--border); padding:8px 14px; border-radius:9px;}
.tab-visual{aspect-ratio:1/1; border-radius:var(--radius-lg); background:linear-gradient(160deg, rgba(91,140,255,0.1), rgba(217,70,239,0.08)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;}
.tab-visual svg{width:35%; opacity:0.85;}

/* =========================================================
   SERVICE CARD GRID
========================================================= */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.svc-card{border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)); padding:28px 24px; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;}
.svc-card:hover{transform:translateY(-6px); border-color:rgba(91,140,255,0.4); box-shadow:0 18px 44px -20px rgba(91,140,255,0.35);}
.svc-ic{width:46px; height:46px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.svc-ic svg{width:22px; height:22px; stroke:#fff;}
.svc-card h3{font-size:16.5px; margin-bottom:8px;}
.svc-card p{color:var(--muted); font-size:13.5px; margin-bottom:14px;}
.svc-card .svc-link{font-size:12.5px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:5px;}

/* =========================================================
   TRUST STRIP (marquee)
========================================================= */
.trust-strip{padding:36px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; background:var(--bg-alt);}
.trust-label{text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:26px;}
.marquee-track{display:flex; width:max-content; gap:52px; align-items:center; animation:scrollX 30s linear infinite;}
.marquee-track span{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--muted-2); white-space:nowrap;}
.marquee-track span svg{width:16px; height:16px; stroke:var(--teal);}
@keyframes scrollX{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.marquee-track.reverse{animation-direction:reverse; animation-duration:38s;}

/* =========================================================
   PORTFOLIO GRID + MODAL
========================================================= */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.filter-btn{padding:9px 18px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.25s;}
.filter-btn.active, .filter-btn:hover{background:var(--grad); color:#fff; border-color:transparent;}
.port-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.port-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--panel); cursor:pointer; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;}
.port-card:hover{transform:translateY(-6px); box-shadow:0 22px 50px -20px rgba(91,140,255,0.35);}
.port-thumb{position:relative; aspect-ratio:16/10; overflow:hidden;}
.port-thumb .grad-bg{position:absolute; inset:0; transition:transform .5s ease;}
.port-card:hover .port-thumb .grad-bg{transform:scale(1.08);}
.port-thumb::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.07) 1px,transparent 1px); background-size:22px 22px;}
.port-thumb img.port-icon{position:absolute; width:56px; height:56px; border-radius:14px; top:16px; left:16px; z-index:2; border:1px solid rgba(255,255,255,0.25); background:#fff;}
.port-tag{position:absolute; top:16px; right:16px; z-index:2; background:rgba(6,8,13,0.65); backdrop-filter:blur(6px); font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.03em;}
.port-expand{position:absolute; bottom:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(6,8,13,0.7); border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s;}
.port-card:hover .port-expand{opacity:1; transform:scale(1);}
.port-expand svg{width:14px; height:14px; stroke:#fff;}
.port-body{padding:20px 20px 22px;}
.port-body h3{font-size:16px; margin-bottom:6px;}
.port-body p{color:var(--muted); font-size:13px;}

/* photo-based featured project cards */
.port-grid-featured{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.port-thumb.photo::after{display:none;}
.port-thumb .port-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.port-card:hover .port-thumb .port-cover{transform:scale(1.08);}
.port-thumb.photo{aspect-ratio:16/9;}
.port-cta{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px; font-weight:600; color:var(--blue);}
.port-cta svg{width:14px; height:14px; transition:transform .25s;}
.port-card:hover .port-cta svg{transform:translateX(3px);}
.port-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.port-tags span{font-size:10.5px; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid var(--border); padding:4px 9px; border-radius:999px; transition:border-color .25s, color .25s;}
.port-card:hover .port-tags span{border-color:rgba(91,140,255,0.35); color:var(--text);}

.modal-overlay{position:fixed; inset:0; background:rgba(4,5,10,0.8); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:3000; opacity:0; pointer-events:none; transition:opacity .35s; padding:24px;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-panel{background:var(--panel); border:1px solid var(--border); border-radius:22px; max-width:780px; width:100%; max-height:88vh; overflow:auto; transform:scale(.9) translateY(20px); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s; position:relative;}
.modal-overlay.open .modal-panel{transform:scale(1) translateY(0); opacity:1;}
.modal-close{position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--border); color:var(--text); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; transition:.25s;}
.modal-close:hover{background:var(--grad); border-color:transparent;}
.modal-hero{aspect-ratio:20/8; position:relative; overflow:hidden;}
.modal-hero .grad-bg{position:absolute; inset:0;}
.modal-hero::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.07) 1px,transparent 1px); background-size:24px 24px;}
.modal-body{padding:34px 38px 38px;}
.modal-body .port-tag{position:static; display:inline-block; margin-bottom:14px;}
.modal-body h3{font-size:24px; margin-bottom:20px;}
.modal-cols{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:28px;}
.modal-cols h5{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); margin-bottom:10px;}
.modal-cols p{font-size:14px; color:var(--muted); line-height:1.65;}
.modal-tech{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px;}
.modal-tech span{font-size:12px; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.03); border:1px solid var(--border); padding:7px 13px; border-radius:8px;}
.modal-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; border-top:1px solid var(--border); padding-top:26px;}
.modal-kpis .k-num{font-family:'Space Grotesk'; font-size:22px; font-weight:700;}
.modal-kpis .k-label{font-size:11.5px; color:var(--muted); margin-top:4px;}
.modal-links{margin-top:26px; display:flex; gap:16px; flex-wrap:wrap;}
.modal-links a{font-size:13px; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:6px;}

/* =========================================================
   CONSULTATION CTA
========================================================= */
.consult-banner{max-width:var(--maxw); margin:0 auto; border-radius:var(--radius-lg); border:1px solid var(--border); background:linear-gradient(135deg, rgba(91,140,255,0.08), rgba(217,70,239,0.06)); padding:64px 56px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.consult-banner h2{font-size:clamp(24px,3.2vw,34px); max-width:520px;}
.consult-banner p{color:var(--muted); margin-top:12px; max-width:480px;}

/* =========================================================
   CLIENT LOGO WALL
========================================================= */
.client-wall{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.client-cell{background:var(--panel); aspect-ratio:2/1; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:14px; color:var(--muted-2); transition:color .3s, background .3s;}
.client-cell:hover{color:var(--text); background:rgba(255,255,255,0.03);}
.client-wall-compact{grid-template-columns:repeat(2,1fr); max-width:460px; margin:0 auto;}

/* =========================================================
   PROJECT DETAIL PAGES
========================================================= */
.project-hero-cover{border-radius:var(--radius-lg); overflow:hidden; margin-top:36px; border:1px solid var(--border); aspect-ratio:20/9; background:var(--panel);}
.project-hero-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.project-meta-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px;}
.project-meta-row .port-tag{position:static;}
.project-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:36px 0;}
.project-gallery img{width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:14px; border:1px solid var(--border); background:var(--panel); transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.project-gallery img:hover{transform:translateY(-4px) scale(1.02);}
@media (max-width:900px){.project-gallery{grid-template-columns:repeat(2,1fr);}}

.video-embed{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:#000; margin:32px 0;}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.quote-card{border:1px solid var(--border); border-radius:var(--radius-lg); padding:44px 40px; background:linear-gradient(135deg, rgba(91,140,255,0.07), rgba(217,70,239,0.05)); margin:32px 0; text-align:center;}

.platform-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.04em;}

/* =========================================================
   ENGAGEMENT MODELS
========================================================= */
.engage-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.engage-card{border:1px solid var(--border); border-radius:var(--radius); padding:30px 24px; text-align:left; background:rgba(255,255,255,0.02); transition:transform .35s, border-color .35s;}
.engage-card:hover{transform:translateY(-5px); border-color:rgba(139,92,246,0.4);}
.engage-num{font-family:'Space Grotesk'; font-size:13px; color:var(--teal); margin-bottom:16px; font-weight:700;}
.engage-card h3{font-size:16.5px; margin-bottom:10px;}
.engage-card p{color:var(--muted); font-size:13.5px; margin-bottom:20px;}
.engage-card a{font-size:12.5px; font-weight:700; color:var(--text); display:inline-flex; align-items:center; gap:6px;}

/* =========================================================
   TESTIMONIAL CAROUSEL
========================================================= */
.t-carousel{max-width:760px; margin:0 auto; text-align:center; position:relative;}
.t-slide{display:none;}
.t-slide.active{display:block; animation:fadeUp .5s ease;}
.t-stars{color:#FFC94A; font-size:15px; letter-spacing:2px; margin-bottom:22px;}
.t-quote{font-size:19px; line-height:1.6; color:#E4E7F0; margin-bottom:30px; font-family:'Space Grotesk'; font-weight:500;}
.t-person{display:flex; flex-direction:column; align-items:center; gap:4px;}
.t-avatar{width:46px; height:46px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:15px; margin-bottom:8px;}
.t-person strong{font-size:14px;}
.t-person span{font-size:12.5px; color:var(--muted);}
.t-nav{display:flex; justify-content:center; align-items:center; gap:20px; margin-top:36px;}
.t-arrow{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s;}
.t-arrow:hover{background:rgba(255,255,255,0.06);}
.t-arrow svg{width:15px; height:15px; stroke:currentColor;}
.t-dots{display:flex; gap:8px;}
.t-dot{width:7px; height:7px; border-radius:50%; background:var(--border); cursor:pointer; transition:.25s; border:none;}
.t-dot.active{background:var(--teal); width:20px; border-radius:4px;}

/* =========================================================
   FINAL CTA + FOOTER
========================================================= */
.final-cta{background:var(--bg-alt); border-top:1px solid var(--border);}
.final-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start;}
.final-grid h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:18px;}
.contact-info-card{border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,0.015); padding:32px;}
.contact-info-card > p{color:var(--muted); font-size:16px; margin-bottom:32px; max-width:440px;}
.contact-line{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.contact-line .ic{width:40px; height:40px; border-radius:11px; background:rgba(91,140,255,0.1); border:1px solid rgba(91,140,255,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-line .ic svg{width:18px; height:18px; stroke:var(--blue);}
.contact-line a, .contact-line span{font-size:14.5px; color:var(--muted);}
.contact-line a:hover{color:var(--teal);}
.mini-form{background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius); padding:36px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.form-group{margin-bottom:14px;}
label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:7px; font-weight:500;}
.form-optional{color:var(--muted-2); font-weight:400; text-transform:none;}
input, textarea, select{width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:9px; padding:12px 14px; color:var(--text); font-family:inherit; font-size:13.5px; transition:border-color .25s, box-shadow .25s; min-height:44px;}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(91,140,255,0.15);}
textarea{resize:vertical; min-height:110px;}
select{cursor:pointer;}
.mini-form .btn{width:100%; justify-content:center; margin-top:4px;}
.form-consent{display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; padding:2px 0;}
.form-consent input[type="checkbox"]{width:18px; height:18px; min-height:0; flex-shrink:0; margin-top:1px; accent-color:var(--blue); cursor:pointer;}
.form-consent label{margin-bottom:0; font-size:12.5px; font-weight:400; color:var(--muted); line-height:1.55; cursor:pointer;}
.form-consent a{color:var(--teal);}
.form-consent a:hover{text-decoration:underline;}

footer{border-top:1px solid var(--border); padding-top:70px; background:var(--bg);}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--border);}
.footer-brand p{color:var(--muted); font-size:13.5px; margin:16px 0 22px; max-width:270px;}
.footer-social{display:flex; flex-direction:column; gap:2px;}
.footer-social a{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border-soft); font-size:13.5px; font-weight:500; color:var(--muted); transition:color .25s;}
.footer-social a:hover{color:var(--text);}
.footer-social a svg{width:13px; height:13px; stroke:var(--muted-2); transition:transform .25s;}
.footer-social a:hover svg{transform:translate(2px,-2px); stroke:var(--teal);}
.footer-col h5{font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:18px;}
.footer-col a, .footer-col span{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); margin-bottom:13px; transition:color .25s;}
.footer-col a:hover{color:var(--teal);}
.footer-col img{width:16px; height:11px; border-radius:2px; flex-shrink:0;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding:26px 0; font-size:12.5px; color:var(--muted-2);}
.footer-bottom nav{display:flex; gap:22px; flex-wrap:wrap;}
.footer-bottom nav a:hover{color:var(--teal);}

.back-to-top{position:fixed; bottom:190px; right:30px; width:42px; height:42px; border-radius:50%; background:var(--panel); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:.3s; z-index:900;}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-to-top svg{width:18px; height:18px; stroke:#fff;}

/* =========================================================
   TEAM (about page)
========================================================= */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.member{background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius); padding:22px; text-align:center; transition:transform .35s, border-color .35s;}
.member:hover{transform:translateY(-5px); border-color:rgba(139,92,246,0.4);}
.headshot-slot{position:relative; width:100px; height:100px; margin:0 auto 16px; border-radius:50%; padding:3px; background:var(--grad);}
.headshot-slot .inner{width:100%; height:100%; border-radius:50%; background:var(--panel); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.headshot-slot .initials{font-family:'Space Grotesk'; font-size:26px; font-weight:700; color:rgba(255,255,255,0.85);}
.headshot-slot .upload-hint{position:absolute; inset:0; background:rgba(6,8,13,0.75); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; opacity:0; transition:opacity .3s;}
.headshot-slot:hover .upload-hint{opacity:1;}
.headshot-slot .upload-hint svg{width:18px; height:18px; stroke:var(--teal);}
.headshot-slot .upload-hint span{font-size:9px; color:var(--teal); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.member h4{font-size:15px; margin-bottom:4px;}
.member .role{color:var(--teal); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:9px;}
.member .bio{color:var(--muted); font-size:12.5px;}

/* =========================================================
   PREMIUM SERVICES LIST (replaces icon-card grid)
========================================================= */
.svc-list{display:flex; flex-direction:column;}
.svc-row{display:grid; grid-template-columns:64px 1.3fr 1fr; gap:36px; align-items:start; padding:38px 0; border-top:1px solid var(--border);}
.svc-list .svc-row:last-child{border-bottom:1px solid var(--border);}
.svc-row-ic{width:56px; height:56px; border-radius:14px; background:var(--grad-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:transform .35s cubic-bezier(.2,.8,.2,1), background .35s;}
.svc-row-ic svg{width:24px; height:24px; stroke:var(--blue); transition:stroke .35s;}
.svc-row:hover .svc-row-ic{transform:translateY(-3px) rotate(-4deg); background:var(--grad);}
.svc-row:hover .svc-row-ic svg{stroke:#fff;}
.svc-row-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.svc-row-head .num-tag{font-family:'Space Grotesk'; font-size:12px; color:var(--teal); font-weight:700;}
.svc-row-head h3{font-size:19px;}
.svc-row-copy p{color:var(--muted); font-size:14.5px; line-height:1.7; margin-bottom:10px;}
.svc-row-copy p.svc-value{color:#C7CCDA;}
.svc-row-copy p.svc-value::before{content:"Business value: "; color:var(--teal); font-weight:600; font-style:normal;}
.svc-row-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.svc-row-tags span{font-size:11.5px; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.03); border:1px solid var(--border); padding:6px 12px; border-radius:999px; transition:border-color .25s, color .25s;}
.svc-row:hover .svc-row-tags span{border-color:rgba(91,140,255,0.35); color:var(--text);}
.svc-row-link{font-size:12.5px; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}

/* =========================================================
   CLIENT LOGO SLIDER
========================================================= */
.client-slider{overflow:hidden; position:relative; border-radius:var(--radius); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.client-track{display:flex; width:max-content; gap:18px; animation:clientScroll 34s linear infinite;}
.client-slider:hover .client-track{animation-play-state:paused;}
.client-logo{flex-shrink:0; width:220px; aspect-ratio:2.6/1; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:var(--muted-2); transition:color .3s, border-color .3s, transform .3s;}
.client-logo:hover{color:var(--text); border-color:rgba(91,140,255,0.4); transform:translateY(-3px);}
@keyframes clientScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* =========================================================
   FLOATING AI ASSISTANT + BOOKING
========================================================= */
.float-stack{position:fixed; right:26px; bottom:26px; z-index:1400; display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.fab{border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 34px -10px rgba(91,140,255,0.5); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;}
.fab-chat{width:58px; height:58px; border-radius:50%; background:var(--grad); position:relative;}
.fab-chat:hover{transform:translateY(-3px) scale(1.04); box-shadow:0 18px 40px -8px rgba(91,140,255,0.65);}
.fab-chat svg{width:24px; height:24px; stroke:#fff; position:absolute; transition:opacity .25s, transform .25s;}
.fab-chat .ic-close{opacity:0; transform:scale(.6) rotate(-45deg);}
.fab-chat.open .ic-chat{opacity:0; transform:scale(.6) rotate(45deg);}
.fab-chat.open .ic-close{opacity:1; transform:scale(1) rotate(0);}
.fab-chat::after{content:""; position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:var(--teal); border:2px solid var(--bg); animation:pulseDot 2.2s ease-in-out infinite;}
.fab-chat.open::after{display:none;}
@keyframes pulseDot{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.25); opacity:0.7;}}
.fab-book{height:46px; padding:0 20px 0 16px; border-radius:999px; background:var(--panel); border:1px solid var(--border); gap:9px; color:var(--text); font-size:13px; font-weight:600;}
.fab-book:hover{border-color:rgba(56,232,212,0.5); transform:translateY(-2px);}
.fab-book svg{width:17px; height:17px; stroke:var(--teal); flex-shrink:0;}

.chat-panel{position:fixed; right:26px; bottom:98px; width:360px; max-width:calc(100vw - 40px); max-height:min(72vh,560px); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,0.65); z-index:1399; display:flex; flex-direction:column; opacity:0; transform:translateY(16px) scale(.97); pointer-events:none; transition:opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1); overflow:hidden;}
.chat-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:18px 18px; border-bottom:1px solid var(--border); background:var(--grad-soft);}
.chat-head-id{display:flex; align-items:center; gap:11px;}
.chat-avatar{width:38px; height:38px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-avatar svg{width:18px; height:18px; stroke:#fff;}
.chat-head-id strong{font-size:13.5px; display:block;}
.chat-head-id span{font-size:11px; color:var(--muted);}
.chat-panel-close{width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.06); border:1px solid var(--border); color:var(--text); cursor:pointer; font-size:13px; transition:.25s;}
.chat-panel-close:hover{background:var(--grad); border-color:transparent;}
.chat-body{padding:18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:10px;}
.chat-msg{font-size:13px; line-height:1.55; padding:11px 14px; border-radius:12px; max-width:88%;}
.chat-msg.bot{background:rgba(255,255,255,0.04); border:1px solid var(--border); border-bottom-left-radius:3px; align-self:flex-start; color:#D5D9E4;}
.chat-msg.user{background:var(--grad); color:#fff; border-bottom-right-radius:3px; align-self:flex-end;}
.chat-form{padding:14px 18px 18px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:9px;}
.chat-form input, .chat-form textarea{font-size:13px; padding:10px 12px;}
.chat-form textarea{min-height:56px;}
.chat-book-link{font-size:11.5px; color:var(--blue); font-weight:600; text-align:center; margin-top:2px;}
.chat-book-link:hover{color:var(--teal);}

/* =========================================================
   CAREERS + BLOG (shared)
========================================================= */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; background:rgba(255,255,255,0.02); transition:transform .35s, border-color .35s;}
.value-card:hover{transform:translateY(-5px); border-color:rgba(139,92,246,0.4);}
.value-ic{width:44px; height:44px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.value-ic svg{width:20px; height:20px; stroke:#fff;}
.value-card h3{font-size:16px; margin-bottom:8px;}
.value-card p{color:var(--muted); font-size:13.5px;}

.perk-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px;}
.perk-list li{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#D5D9E4;}
.perk-list li svg{width:16px; height:16px; stroke:var(--teal); flex-shrink:0; margin-top:2px;}

.no-roles-panel{border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px 44px; background:linear-gradient(135deg, rgba(91,140,255,0.07), rgba(217,70,239,0.05)); text-align:center;}
.no-roles-panel h3{font-size:20px; margin-bottom:12px;}
.no-roles-panel p{color:var(--muted); font-size:14.5px; max-width:520px; margin:0 auto 26px;}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.blog-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--panel); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;}
.blog-card:hover{transform:translateY(-6px); box-shadow:0 22px 50px -20px rgba(91,140,255,0.35);}
.blog-thumb{aspect-ratio:16/10; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.blog-thumb::after{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.07) 1px,transparent 1px); background-size:22px 22px;}
.blog-thumb svg{width:34%; opacity:0.85; position:relative; z-index:1;}
.blog-thumb .pv-scene{width:76%; opacity:0.95;}
.blog-featured .blog-thumb .pv-scene{width:58%;}
.blog-cat{position:absolute; top:14px; left:14px; z-index:2; background:rgba(6,8,13,0.65); backdrop-filter:blur(6px); font-size:10.5px; font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.03em; color:var(--teal);}
.blog-body{padding:20px 20px 22px;}
.blog-meta{font-size:11.5px; color:var(--muted-2); margin-bottom:10px; display:flex; gap:8px; align-items:center;}
.blog-body h3{font-size:16.5px; margin-bottom:9px; line-height:1.35;}
.blog-body p{color:var(--muted); font-size:13px; margin-bottom:14px;}
.blog-tags{display:flex; flex-wrap:wrap; gap:6px;}
.blog-tags span{font-size:10.5px; font-weight:600; color:var(--muted); background:rgba(255,255,255,0.04); border:1px solid var(--border); padding:4px 9px; border-radius:999px;}
.blog-featured{display:grid; grid-template-columns:1.1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:var(--panel); margin-bottom:56px;}
.blog-featured .blog-thumb{aspect-ratio:auto; height:100%;}
.blog-featured-body{padding:40px 44px;}
.blog-featured-body h2{font-size:clamp(21px,2.6vw,28px); margin:12px 0 14px; line-height:1.3;}
.blog-featured-body p{color:var(--muted); font-size:15px; margin-bottom:20px;}
.article-body{max-width:740px; margin:0 auto;}
.article-body h2{font-size:22px; margin:36px 0 14px;}
.article-body p{color:#D5D9E4; font-size:16px; line-height:1.85; margin-bottom:20px;}
.article-body ul{list-style:disc; padding-left:22px; margin-bottom:20px;}
.article-body li{color:#D5D9E4; font-size:15.5px; line-height:1.8; margin-bottom:8px;}
.article-hero-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.article-hero-tags span{font-size:11.5px; font-weight:600; color:var(--teal); background:rgba(56,232,212,0.08); border:1px solid rgba(56,232,212,0.25); padding:6px 13px; border-radius:999px;}

/* =========================================================
   TESTIMONIALS PAGE
========================================================= */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; background:rgba(255,255,255,0.02); display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;}
.testi-card:hover{transform:translateY(-5px); border-color:rgba(139,92,246,0.4); box-shadow:0 20px 46px -22px rgba(91,140,255,0.3);}
.testi-stars{color:#FFC94A; font-size:15px; letter-spacing:2px; margin-bottom:16px;}
.testi-quote{font-size:14.5px; color:#D5D9E4; line-height:1.75; margin-bottom:24px; flex:1;}
.testi-footer{display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--border-soft);}
.testi-avatar{width:42px; height:42px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:14px; flex-shrink:0;}
.testi-name{font-size:13.5px; font-weight:600;}
.testi-role{font-size:11.5px; color:var(--muted); margin-top:2px;}
.testi-project-tag{font-size:10.5px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:block;}
.testi-card.placeholder{border-style:dashed; background:transparent; align-items:center; text-align:center; justify-content:center;}
.testi-card.placeholder .testi-ph-ic{width:44px; height:44px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.testi-card.placeholder .testi-ph-ic svg{width:19px; height:19px; stroke:var(--muted);}
.testi-card.placeholder .testi-quote{flex:none; color:var(--muted); font-style:italic; margin-bottom:14px;}
.testi-card.placeholder .testi-project-tag{margin-bottom:0;}

/* =========================================================
   AI AUTOMATION PACKAGES (shared: home teaser, services module,
   dedicated /ai-automation page)
========================================================= */
.pkg-section{padding-top:16px;}
.ai-automation-hero{padding-bottom:56px;}
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pkg-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--panel); padding:32px 28px; scroll-margin-top:112px; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;}
.pkg-card:hover{transform:translateY(-6px); border-color:rgba(139,92,246,0.4); box-shadow:0 24px 54px -22px rgba(91,140,255,0.32);}
.pkg-card.featured{border-color:rgba(139,92,246,0.5); background:linear-gradient(160deg, rgba(91,140,255,0.06), rgba(217,70,239,0.05)), var(--panel);}
.pkg-card-badge{position:absolute; top:-13px; left:28px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--grad); padding:6px 14px; border-radius:999px; box-shadow:0 8px 20px -6px rgba(139,92,246,0.6);}
.pkg-visual{width:100%; aspect-ratio:16/9; border-radius:12px; margin-bottom:22px; background:linear-gradient(160deg, rgba(91,140,255,0.08), rgba(217,70,239,0.06)); border:1px solid var(--border); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.pkg-visual svg{width:86%; height:86%; position:relative; z-index:1;}
.pkg-eyebrow{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:10px;}
.pkg-card h3.pkg-headline{font-size:22px; margin-bottom:6px;}
.pkg-name{font-size:13px; font-weight:600; color:var(--muted); margin-bottom:18px; display:block;}
.pkg-best-for{font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.55; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border-soft);}
.pkg-desc{font-size:14.5px; color:#D5D9E4; line-height:1.7; margin-bottom:22px;}
.pkg-features{display:flex; flex-direction:column; gap:12px; margin-bottom:24px; padding-left:2px;}
.pkg-features li{display:flex; align-items:flex-start; gap:11px; font-size:13.5px; color:#D5D9E4; line-height:1.55;}
.pkg-features li svg{width:15px; height:15px; stroke:var(--teal); flex-shrink:0; margin-top:2.5px;}
.pkg-price{margin-top:auto; padding-top:20px; border-top:1px solid var(--border-soft); margin-bottom:20px;}
.pkg-price-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; column-gap:10px; row-gap:3px; font-size:13px; color:var(--muted); margin-bottom:6px;}
.pkg-price-row .amt{font-family:'Space Grotesk'; font-weight:700; color:var(--text); font-size:14.5px; white-space:nowrap;}
.pkg-cta-row{display:flex; flex-direction:column; gap:10px;}
.pkg-cta-row .btn{width:100%; justify-content:center;}
.pkg-cta-row .pkg-cta-secondary{width:100%; justify-content:center; font-size:13px; font-weight:600; color:var(--muted); border:1px solid var(--border); border-radius:10px; padding:12px 20px; text-align:center; transition:border-color .3s, color .3s;}
.pkg-cta-row .pkg-cta-secondary:hover{border-color:var(--blue); color:var(--text);}

/* ---- package finder (replaces comparison table) ---- */
.pkg-finder-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pkg-finder-card{display:block; border:1px solid var(--border); border-radius:var(--radius-lg); background:rgba(255,255,255,0.02); padding:28px 26px; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s;}
.pkg-finder-card:hover{transform:translateY(-5px); border-color:rgba(139,92,246,0.45); background:rgba(255,255,255,0.035);}
.pkg-finder-tag{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:14px;}
.pkg-finder-scenario{font-size:15px; color:#D5D9E4; line-height:1.6; font-style:italic; margin-bottom:24px; min-height:76px;}
.pkg-finder-result{display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid var(--border-soft);}
.pkg-finder-name{font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:var(--text);}
.pkg-finder-result svg{width:17px; height:17px; stroke:var(--blue); transition:transform .3s, stroke .3s; flex-shrink:0;}
.pkg-finder-card:hover .pkg-finder-result svg{transform:translateX(4px); stroke:var(--teal);}
@media(max-width:900px){.pkg-finder-grid{grid-template-columns:1fr;} .pkg-finder-scenario{min-height:0;}}

/* ---- process flow (non-numbered, replaces old comparison table + numbered steps) ---- */
.process-flow{display:flex; align-items:flex-start; gap:0;}
.process-step{flex:1; min-width:0; text-align:center; padding:0 12px;}
.process-icon{width:54px; height:54px; margin:0 auto 18px; border-radius:15px; background:var(--grad-soft); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative;}
.process-icon svg{width:24px; height:24px; stroke:var(--teal); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.process-step h4{font-size:15px; margin-bottom:8px; letter-spacing:-0.005em; line-height:1.3;}
.process-step p{font-size:12.5px; color:var(--muted); line-height:1.65;}
.process-connector{flex:0 0 40px; height:1px; margin-top:27px; background:linear-gradient(90deg, rgba(91,140,255,.45), rgba(217,70,239,.45));}
@media(max-width:900px){
  .process-flow{flex-direction:column; gap:26px;}
  .process-connector{display:none;}
  .process-step{display:flex; align-items:flex-start; gap:16px; text-align:left; padding:0;}
  .process-icon{margin:0; flex-shrink:0;}
}

/* ---- trust note ---- */
.trust-note-wrap{margin-top:52px; padding-top:36px; border-top:1px solid var(--border-soft);}
.trust-note{display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:var(--radius); background:rgba(56,232,212,0.04); padding:18px 24px; font-size:13.5px; color:#D5D9E4; line-height:1.6;}
.trust-note svg{width:20px; height:20px; stroke:var(--teal); flex-shrink:0;}

/* ---- home teaser mini-cards (compact variant) ---- */
.pkg-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pkg-mini{border:1px solid var(--border); border-radius:var(--radius); background:rgba(255,255,255,0.02); padding:26px 24px; transition:transform .35s, border-color .35s;}
.pkg-mini:hover{transform:translateY(-5px); border-color:rgba(139,92,246,0.4);}
.pkg-mini .pkg-eyebrow{margin-bottom:8px;}
.pkg-mini h3{font-size:18px; margin-bottom:4px;}
.pkg-mini .pkg-name{margin-bottom:14px;}
.pkg-mini p.pkg-desc{font-size:13.5px; margin-bottom:16px;}
.pkg-mini .pkg-price-row{margin-bottom:0;}
.pkg-mini a.svc-row-link{margin-top:16px;}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1080px){
  .mega{width:460px;}
  .svc-grid{grid-template-columns:repeat(3,1fr);}
  .port-grid{grid-template-columns:repeat(2,1fr);}
  .client-wall{grid-template-columns:repeat(4,1fr);}
  .engage-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .project-gallery{grid-template-columns:repeat(3,1fr);}
  .port-grid-featured{grid-template-columns:repeat(2,1fr);}
  .value-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured .blog-thumb{aspect-ratio:16/9;}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .pkg-grid, .pkg-mini-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .journey-grid, .final-grid, .tab-content-grid, .story-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .nav-links{display:none;}
  .port-grid-featured{grid-template-columns:1fr;}
  .svc-row{grid-template-columns:56px 1fr; grid-template-areas:"ic head" "copy copy"; row-gap:6px;}
  .svc-row-ic{grid-area:ic;}
  .svc-row-head{grid-area:head;}
  .svc-row-copy{grid-area:copy;}
}
@media(max-width:720px){
  .burger{display:flex;}
  .nav-right .btn-outline{display:none;}
  section{padding:80px 0;}
  .home-hero{padding:150px 0 100px; min-height:auto;}
  .page-hero{padding:140px 0 60px;}
  :root{--section-pad:80px;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .port-grid{grid-template-columns:1fr;}
  .client-wall{grid-template-columns:repeat(2,1fr);}
  .client-wall-compact{grid-template-columns:1fr 1fr;}
  .engage-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .project-gallery{grid-template-columns:repeat(2,1fr);}
  .consult-banner{padding:40px 28px; flex-direction:column; align-items:flex-start;}
  .modal-cols{grid-template-columns:1fr;}
  .modal-kpis{grid-template-columns:1fr 1fr;}
  .modal-body{padding:26px 22px 30px;}
  .footer-top{grid-template-columns:1fr 1fr; gap:30px;}
  .tab-feature-list{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .perk-list{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .no-roles-panel{padding:36px 26px;}
  .blog-featured-body{padding:28px 24px;}
  .float-stack{right:16px; bottom:16px; gap:10px;}
  .fab-book .fab-label{display:none;}
  .fab-book{width:46px; height:46px; padding:0; border-radius:50%;}
  .fab-chat{width:52px; height:52px;}
  .chat-panel{right:12px; left:12px; width:auto; bottom:78px; max-height:64vh;}
  .back-to-top{bottom:150px; right:18px; width:38px; height:38px;}
  .pkg-grid, .pkg-mini-grid{grid-template-columns:1fr;}
  .trust-note{flex-direction:column; align-items:flex-start; text-align:left;}
  .trust-note-wrap{margin-top:36px; padding-top:26px;}
  .pkg-price-row{font-size:12.5px;}
  .pkg-price-row .amt{font-size:13.5px;}
  .journey-heading{font-size:24px;}
  .stats-row{grid-template-columns:repeat(2,1fr); gap:20px 18px;}
}

/* =========================================================
   COOKIE CONSENT — banner + preferences modal
========================================================= */
.cookie-banner{position:fixed; left:24px; right:24px; bottom:24px; max-width:640px; margin:0 auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,0.65); padding:26px 28px; z-index:3200; opacity:0; transform:translateY(24px); pointer-events:none; transition:opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1);}
.cookie-banner.is-visible{opacity:1; transform:translateY(0); pointer-events:auto;}
.cookie-banner p{font-size:13.5px; color:var(--muted); line-height:1.65; margin-bottom:18px;}
.cookie-banner p a{color:var(--blue); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-banner-actions button{font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:999px; padding:11px 20px; transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s, border-color .3s;}
.cookie-banner-actions .cookie-btn-accept{background:var(--grad); color:#fff; border:none; box-shadow:0 8px 26px -8px rgba(139,92,246,0.5);}
.cookie-banner-actions .cookie-btn-accept:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(139,92,246,0.65);}
.cookie-banner-actions .cookie-btn-reject{background:rgba(255,255,255,0.04); color:var(--text); border:1px solid var(--border);}
.cookie-banner-actions .cookie-btn-reject:hover{border-color:rgba(255,255,255,0.3);}
.cookie-banner-actions .cookie-btn-manage{background:transparent; color:var(--muted); border:1px solid transparent; padding:11px 6px;}
.cookie-banner-actions .cookie-btn-manage:hover{color:var(--text);}

.cookie-modal .modal-panel{max-width:520px;}
.cookie-modal-body{padding:34px 34px 30px;}
.cookie-modal-body h3{font-size:20px; margin-bottom:10px;}
.cookie-modal-body>p{font-size:13.5px; color:var(--muted); line-height:1.65; margin-bottom:24px;}
.cookie-pref-row{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 0; border-top:1px solid var(--border-soft);}
.cookie-pref-row:first-of-type{border-top:none;}
.cookie-pref-copy h5{font-size:13.5px; font-weight:700; margin-bottom:5px;}
.cookie-pref-copy p{font-size:12.5px; color:var(--muted); line-height:1.6;}
.cookie-pref-toggle{position:relative; flex-shrink:0; width:44px; height:26px;}
.cookie-pref-toggle input{opacity:0; width:0; height:0;}
.cookie-pref-toggle .track{position:absolute; inset:0; background:rgba(255,255,255,0.08); border:1px solid var(--border); border-radius:999px; cursor:pointer; transition:background .25s, border-color .25s;}
.cookie-pref-toggle .track::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--muted); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s;}
.cookie-pref-toggle input:checked+.track{background:rgba(91,140,255,0.25); border-color:var(--blue);}
.cookie-pref-toggle input:checked+.track::after{transform:translateX(18px); background:var(--blue);}
.cookie-pref-toggle input:disabled+.track{opacity:.55; cursor:not-allowed;}
.cookie-modal-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
.cookie-modal-actions button{font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:999px; padding:11px 20px; transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .3s, border-color .3s;}
.cookie-modal-actions .cookie-btn-accept{background:var(--grad); color:#fff; border:none; box-shadow:0 8px 26px -8px rgba(139,92,246,0.5);}
.cookie-modal-actions .cookie-btn-accept:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(139,92,246,0.65);}
.cookie-modal-actions .cookie-btn-save{background:rgba(255,255,255,0.04); color:var(--text); border:1px solid var(--border);}
.cookie-modal-actions .cookie-btn-save:hover{border-color:rgba(255,255,255,0.3);}

@media (prefers-reduced-motion:reduce){
  .cookie-banner, .cookie-pref-toggle .track, .cookie-pref-toggle .track::after{transition:none !important;}
}
@media (max-width:640px){
  .cookie-banner{left:14px; right:14px; bottom:14px; padding:22px 20px;}
  .cookie-modal-body{padding:26px 22px 26px;}
}