/* ============================================================
   Think Through Technology — Shared Stylesheet
   Used by: index.html, about.html, projects.html
   ============================================================ */

:root{
  --bg:#050509;
  --bg-soft:#0b0c16;
  --panel:#10121e;
  --line: rgba(255,255,255,0.08);
  --text:#f4f5fb;
  --muted:#9198b3;
  --accent:#8b6bff;
  --accent2:#22e1ff;
  --accent-grad: linear-gradient(120deg, #8b6bff 0%, #22e1ff 100%);
  --gold:#ffcf7a;
  --radius: 18px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --nav-bg: rgba(5,5,9,.7);
  --shadow-soft: 0 24px 60px -20px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- Light theme ---------- */
[data-theme="light"]{
  --bg:#f6f7fb;
  --bg-soft:#ffffff;
  --panel:#ffffff;
  --line: rgba(10,12,30,0.09);
  --text:#0d0e1a;
  --muted:#5b6178;
  --accent:#6c4fe0;
  --accent2:#0891b2;
  --gold:#b9790a;
  --nav-bg: rgba(255,255,255,.72);
  --shadow-soft: 0 24px 60px -20px rgba(20,22,50,.15);
  color-scheme: light;
}
[data-theme="light"] .grain{ opacity:.025; }
[data-theme="light"] .vignette{ background: radial-gradient(ellipse at center, transparent 55%, rgba(20,22,50,.10) 100%); }
[data-theme="light"] header.nav.scrolled{ box-shadow: 0 1px 0 rgba(10,12,30,.05); }
[data-theme="light"] .card-label{ background: rgba(255,255,255,.9); }
[data-theme="light"] .stat h3, [data-theme="light"] .service-chip .ic{ color:#08080d; }

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition: background .4s ease, color .4s ease;
}
h1,h2,h3,.font-display{ font-family:'Sora', sans-serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background: var(--accent); color:#fff; }

.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; mix-blend-mode:overlay; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
  transition: background .4s ease;
}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
#preloader .p-logo{ width:56px; height:56px; border-radius:16px; overflow:hidden; }
#preloader .p-logo img{ width:100%; height:100%; object-fit:cover; }
#preloader .mark{
  font-family:'Sora'; font-weight:700; font-size:15px; letter-spacing:.35em;
  color:var(--muted);
}
#preloader .cat-track{ width:240px; height:34px; position:relative; }
#preloader .caterpillar{
  position:absolute; top:50%; left:0%; transform:translate(0,-50%); display:flex; align-items:center;
  transition: left .15s linear;
}
#preloader .c-seg{
  width:16px; height:16px; border-radius:50%; background:var(--accent-grad); margin-left:-6px;
  box-shadow:0 3px 8px rgba(0,0,0,.35); animation: inch .6s ease-in-out infinite; position:relative;
}
#preloader .c-seg:nth-child(1){ animation-delay:0s; }
#preloader .c-seg:nth-child(2){ animation-delay:.08s; }
#preloader .c-seg:nth-child(3){ animation-delay:.16s; }
#preloader .c-seg:nth-child(4){ animation-delay:.24s; }
#preloader .c-seg.c-head{ width:20px; height:20px; margin-left:-6px; animation-delay:.32s; }
#preloader .c-antenna{ position:absolute; width:2px; height:11px; background:var(--accent2); top:-9px; border-radius:2px; }
#preloader .c-antenna-l{ left:5px; transform:rotate(-24deg); transform-origin:bottom; }
#preloader .c-antenna-r{ right:5px; transform:rotate(24deg); transform-origin:bottom; }
#preloader .c-eye{ position:absolute; width:4px; height:4px; border-radius:50%; background:#08080d; top:6px; right:3px; }
@keyframes inch{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
#preloader .pct{ font-size:12px; color:var(--muted); letter-spacing:.15em; font-family:'Sora'; }

/* ---------- Navbar ---------- */
header.nav{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(20px, 5vw, 60px);
  transition: transform .5s var(--ease-out), background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
header.nav.scrolled{ background: var(--nav-bg); backdrop-filter: blur(14px); border-color: var(--line); }
header.nav.hide-nav{ transform: translateY(-110%); }
.brand-logo{ display:flex; align-items:center; gap:13px; font-family:'Sora'; font-weight:700; font-size:19px; letter-spacing:.01em;}
.brand-logo .glyph{
  width:50px; height:50px; border-radius:13px; overflow:hidden; flex-shrink:0;
  box-shadow: 0 4px 16px -4px rgba(139,107,255,.5);
}
.brand-logo .glyph img{ width:100%; height:100%; object-fit:cover; }
.brand-logo .brand-text{ display:flex; flex-direction:column; line-height:1.18; }
.brand-logo .brand-text small{ font-family:'Inter'; font-weight:500; font-size:11px; letter-spacing:.16em; color:var(--muted); }
nav.links{ display:flex; align-items:center; gap:34px; }
nav.links a{ font-size:13.5px; color:var(--muted); font-weight:500; position:relative; transition:color .3s; }
nav.links a:hover, nav.links a.active{ color:var(--text); }
nav.links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--accent-grad);
}
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{
  padding:11px 22px; border-radius:100px; font-size:13px; font-weight:600;
  background:var(--accent-grad); color:#08080d;
}
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--panel);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:14px;
  transition: border-color .3s, transform .3s, background .3s;
}
.theme-toggle:hover{ border-color: var(--accent2); transform: rotate(12deg); }
.burger{ display:none; width:22px; height:16px; position:relative; cursor:pointer; z-index:600; }
.burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--text); transition: transform .3s, opacity .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:450; background: var(--bg); opacity:0; visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transition: opacity .4s ease, visibility .4s ease;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu a{ font-family:'Sora'; font-size:26px; font-weight:600; color:var(--text); }
.mobile-menu a.active{ background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mobile-menu .mm-cta{ margin-top:10px; }

/* ---------- Buttons ---------- */
.hero-ctas{ position:relative; z-index:1; margin-top:38px; margin-bottom:8px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.btn-primary, .btn-ghost{
  padding:15px 30px; border-radius:100px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:10px;
  transition: transform .3s var(--ease-out), border-color .3s, opacity .3s;
}
.btn-primary{ background:var(--accent-grad); color:#08080d; }
.btn-primary:hover{ transform: translateY(-2px); }
.btn-ghost{ border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ border-color: var(--accent2); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding: 130px 24px 110px;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  object-position:center 30%; filter:brightness(1.28) saturate(1.08);
}
[data-theme="light"] .hero-video{ display:none; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(139,107,255,.28), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 75%, rgba(34,225,255,.14), transparent 60%),
    var(--bg);
}
/* homepage hero has a video layer beneath — tint it instead of covering it solid */
.hero .hero-bg{
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(139,107,255,.32), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 75%, rgba(34,225,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(5,5,9,.62) 0%, rgba(5,5,9,.46) 40%, rgba(5,5,9,.74) 100%);
}
[data-theme="light"] .hero .hero-bg{
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(139,107,255,.28), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 75%, rgba(34,225,255,.14), transparent 60%),
    var(--bg);
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 75%);
}
.eyebrow{
  position:relative; z-index:1; font-size:12.5px; letter-spacing:.28em; color:var(--accent2);
  font-weight:600; margin-bottom:26px; display:flex; align-items:center; gap:10px;
}
.hero .eyebrow{ text-shadow: 0 0 18px rgba(34,225,255,.6), 0 2px 6px rgba(0,0,0,.7); }
.eyebrow::before, .eyebrow::after{ content:''; width:26px; height:1px; background:var(--accent2); opacity:.6; }

/* ---------- Hero butterflies (post-preload welcome flourish) ---------- */
.butterflies{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.butterfly{ position:absolute; width:30px; height:22px; opacity:0; left:-8%; top:70%; will-change:transform,left,top,opacity; }
.butterfly svg{ width:100%; height:100%; display:block; overflow:visible; }
.butterfly .wing{ transform-box:fill-box; transform-origin:center; }
.butterfly .wing-l{ animation: flap-l .28s ease-in-out infinite; }
.butterfly .wing-r{ animation: flap-r .28s ease-in-out infinite; }
.butterfly .body{ stroke:rgba(8,8,13,.55); stroke-width:1.4; stroke-linecap:round; }
@keyframes flap-l{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.32); } }
@keyframes flap-r{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.32); } }

.butterfly.b1 .wing{ fill:#8b6bff; }
.butterfly.b2 .wing{ fill:#22e1ff; }
.butterfly.b3 .wing{ fill:#ff9f6b; }
.butterfly.b4 .wing{ fill:#ff6ba5; }
.butterfly.b5 .wing{ fill:#7bffb0; }

.butterflies.fly .b1{ animation: flypath1 7.5s ease-in-out forwards; }
.butterflies.fly .b2{ animation: flypath2 8.2s ease-in-out .35s forwards; }
.butterflies.fly .b3{ animation: flypath3 7s ease-in-out .7s forwards; }
.butterflies.fly .b4{ animation: flypath4 8.6s ease-in-out .15s forwards; }
.butterflies.fly .b5{ animation: flypath5 7.8s ease-in-out .55s forwards; }

@keyframes flypath1{
  0%{ opacity:0; left:-6%; top:78%; transform:rotate(0deg) scale(.85); }
  8%{ opacity:1; }
  28%{ left:22%; top:38%; transform:rotate(-10deg) scale(.95); }
  50%{ left:46%; top:58%; transform:rotate(8deg) scale(1); }
  74%{ left:72%; top:22%; transform:rotate(-8deg) scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; left:104%; top:12%; transform:rotate(0deg) scale(1); }
}
@keyframes flypath2{
  0%{ opacity:0; left:-6%; top:55%; transform:rotate(0deg) scale(.8); }
  10%{ opacity:1; }
  32%{ left:26%; top:75%; transform:rotate(10deg) scale(.9); }
  55%{ left:52%; top:35%; transform:rotate(-8deg) scale(1); }
  78%{ left:78%; top:60%; transform:rotate(8deg) scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; left:106%; top:45%; transform:rotate(0deg) scale(1); }
}
@keyframes flypath3{
  0%{ opacity:0; left:-6%; top:30%; transform:rotate(0deg) scale(.75); }
  10%{ opacity:1; }
  34%{ left:24%; top:55%; transform:rotate(-12deg) scale(.9); }
  58%{ left:50%; top:20%; transform:rotate(10deg) scale(.95); }
  80%{ left:76%; top:48%; transform:rotate(-6deg) scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; left:105%; top:32%; transform:rotate(0deg) scale(1); }
}
@keyframes flypath4{
  0%{ opacity:0; left:-6%; top:85%; transform:rotate(0deg) scale(.85); }
  9%{ opacity:1; }
  30%{ left:20%; top:50%; transform:rotate(8deg) scale(.95); }
  54%{ left:48%; top:70%; transform:rotate(-10deg) scale(1); }
  76%{ left:74%; top:35%; transform:rotate(6deg) scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; left:105%; top:20%; transform:rotate(0deg) scale(1); }
}
@keyframes flypath5{
  0%{ opacity:0; left:-6%; top:42%; transform:rotate(0deg) scale(.8); }
  10%{ opacity:1; }
  33%{ left:25%; top:20%; transform:rotate(-8deg) scale(.9); }
  57%{ left:53%; top:48%; transform:rotate(10deg) scale(1); }
  80%{ left:79%; top:18%; transform:rotate(-6deg) scale(1); }
  92%{ opacity:1; }
  100%{ opacity:0; left:106%; top:8%; transform:rotate(0deg) scale(1); }
}
.hero h1{
  position:relative; z-index:1; font-size:clamp(30px, 7.4vw, 104px); line-height:1.05; font-weight:700;
  letter-spacing:-.02em; max-width:1200px;
}
.hero h1{ text-shadow: 0 2px 24px rgba(255,255,255,.18), 0 2px 10px rgba(0,0,0,.6); }
.hero h1 .line{ overflow:hidden; display:block; }
.hero h1 .line span{ display:inline-block; will-change:transform; white-space:nowrap; }
.hero h1 .grad{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.sub{
  position:relative; z-index:1; max-width:560px; margin:30px auto 0; color:var(--muted);
  font-size:clamp(14px,1.6vw,17px); font-weight:300; line-height:1.7;
}
section.hero p.sub{ color:#dfe2ee; text-shadow: 0 2px 10px rgba(0,0,0,.65); }
[data-theme="light"] section.hero p.sub{ color:var(--muted); text-shadow:none; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:11px;
  letter-spacing:.2em; font-family:'Sora'; pointer-events:none;
}
/* hide the decorative scroll cue on short viewports where hero content is taller than the window
   (e.g. laptops with browser chrome) so it never collides with the CTA buttons above it */
@media (max-height: 900px){
  .scroll-cue{ display:none; }
}
.scroll-cue .mouse{ width:22px; height:34px; border:1px solid var(--line); border-radius:14px; position:relative; }
.scroll-cue .mouse .dot{
  position:absolute; top:6px; left:50%; width:3px; height:6px; background:var(--accent2); border-radius:2px;
  transform:translateX(-50%); animation: cue 1.7s infinite ease;
}
@keyframes cue{ 0%{ opacity:1; top:6px;} 70%{opacity:0; top:18px;} 100%{opacity:0; top:6px;} }

/* ---------- Page hero (About / Projects) ---------- */
.page-hero{
  position:relative; padding: 160px 24px 100px; text-align:center; overflow:hidden;
}
.page-hero .hero-bg, .page-hero .hero-grid{ position:absolute; }
.page-hero h1{
  position:relative; z-index:1; font-size:clamp(34px, 6vw, 74px); font-weight:700; letter-spacing:-.02em;
  line-height:1.08; max-width:900px; margin:0 auto;
}
.page-hero p.sub{ position:relative; z-index:1; }
.breadcrumb{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12px; letter-spacing:.08em; color:var(--muted); margin-top:20px; text-transform:uppercase;
}
.breadcrumb a:hover{ color:var(--accent2); }
.breadcrumb i{ font-size:9px; opacity:.6; }

/* ---------- Stadium (pinned 3D scroll section) ---------- */
.stadium{
  position:relative; height:100vh; width:100%;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  /* This section stays cinematic dark regardless of site theme */
  --bg:#050509; --bg-soft:#0b0c16; --panel:#10121e; --line: rgba(255,255,255,0.08);
  --text:#f4f5fb; --muted:#9198b3;
  background: var(--bg);
}
.stadium::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(139,107,255,.14), transparent 65%);
}
.starfield{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;
}
/* ---------- Floating space planets behind the ring ---------- */
.space-planet{
  position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 68% 74%, rgba(0,0,0,.5), transparent 60%);
  box-shadow: inset -14px -10px 30px rgba(0,0,0,.65), inset 8px 6px 18px rgba(255,255,255,.08);
  animation: planetFloat 14s ease-in-out infinite;
}
.planet-a{
  top:12%; left:8%; width:86px; height:86px;
  background-color:#7a5cff;
  background-image:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(135deg, #9b7bff 0%, #5a3fce 60%, #2f1f7a 100%);
  animation-duration:16s;
}
.planet-a .ring-belt{
  position:absolute; left:50%; top:50%; width:150%; height:26px; transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%; border:6px solid rgba(190,170,255,.35); box-shadow:0 0 10px rgba(150,120,255,.25);
}
.planet-b{
  top:62%; left:4%; width:34px; height:34px;
  background-color:#22e1ff;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 45%),
    linear-gradient(135deg, #7ff2ff 0%, #22b8d6 60%, #0e5c6c 100%);
  animation-duration:11s; animation-delay:-3s;
}
.planet-c{
  top:20%; right:9%; width:52px; height:52px;
  background-color:#ffcf7a;
  background-image:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(135deg, #ffe0a3 0%, #e0a13f 60%, #7a5416 100%);
  animation-duration:19s; animation-delay:-7s;
}
@keyframes planetFloat{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(10px,-16px) rotate(6deg); }
}
@media (max-width: 720px){
  .planet-a{ width:56px; height:56px; }
  .planet-c{ width:36px; height:36px; }
  .planet-b{ width:24px; height:24px; }
}
.stadium-perspective{
  position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  perspective: 1500px; perspective-origin: 50% 42%;
}
.ring{
  position:relative; width:1px; height:1px; transform-style:preserve-3d;
  will-change: transform;
}
.card{
  position:absolute; top:50%; left:50%; width:272px; height:182px; margin:-91px 0 0 -136px;
  transform-style:preserve-3d;
  will-change: transform;
  backface-visibility:hidden;
}
.card-inner{
  position:relative; width:100%; height:100%; border-radius:14px; overflow:hidden;
  background: rgba(20,22,34,.35);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 34px 70px -18px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.5);
  transform: translateZ(0);
}
.card-inner::after{
  content:''; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit;
  background: linear-gradient(115deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 16%,
    rgba(255,255,255,0) 72%, rgba(255,255,255,.10) 100%);
}
.card-inner::before{
  content:''; position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.card .chrome{
  position:relative; z-index:2; height:20px;
  background: rgba(12,13,20,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:12px; padding:0 10px;
}
.card .chrome .dots{ display:flex; gap:5px; }
.card .chrome .dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28); }
.card .chrome .url{
  flex:1; height:10px; border-radius:5px; background:rgba(255,255,255,.08); display:flex; align-items:center; padding:0 6px;
}
.card .chrome .url i{ display:block; width:56%; height:3px; border-radius:2px; background:rgba(255,255,255,.35); }
.card .page-shot{
  position:relative; z-index:1; height:calc(100% - 20px);
  background-size:cover; background-position:top center; background-repeat:no-repeat;
}
.card .page-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 78%, rgba(0,0,0,.28) 100%);
}
.card-label{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); white-space:nowrap;
  background:rgba(16,17,28,.85); border:1px solid var(--line); backdrop-filter:blur(6px);
  padding:5px 12px; border-radius:100px; font-family:'Sora'; font-size:10.5px; font-weight:600;
  color:var(--text); letter-spacing:.03em; display:flex; align-items:center; gap:7px;
}
.card-label .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.stadium-floor{
  position:absolute; bottom:0; left:50%; width:1400px; height:420px; transform:translateX(-50%) rotateX(78deg);
  background: radial-gradient(ellipse at center, rgba(139,107,255,.16), transparent 68%);
  pointer-events:none;
}
.brand-reveal{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; opacity:0;
  z-index:5; width:min(94vw, 980px); pointer-events:none;
}
.services-kicker{
  display:block; font-family:'Sora'; font-size:clamp(11px,1.3vw,13px); font-weight:600;
  letter-spacing:.28em; color:var(--accent2); margin-bottom:10px;
}
.services-title{
  font-family:'Sora'; font-weight:700; font-size:clamp(24px, 4.4vw, 42px);
  line-height:1.08; letter-spacing:-.01em; color:var(--text); margin-bottom: clamp(18px, 3vw, 30px);
}
.services-title .accent-text{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.services-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:9px 11px;
  max-width:920px; margin:0 auto;
}
.service-chip{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px;
  background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  text-align:left; opacity:0;
}
.service-chip.chip-mascot{
  position:relative; z-index:3;
  border-color: rgba(139,107,255,.28);
  background: linear-gradient(135deg, rgba(139,107,255,.08), rgba(255,255,255,.045));
}
.service-chip .mascot-img{
  position:absolute; right:calc(100% - 10px); top:-76px; height:320px; width:auto;
  z-index:6; pointer-events:none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.service-chip .ic{
  flex-shrink:0; width:32px; height:32px; border-radius:9px; background:var(--accent-grad);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#08080d;
}
.service-chip .ic.ic-meta{ background:#0866FF; color:#fff; }
.service-chip .ic.ic-instagram{ background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5); color:#fff; }
.service-chip .ic.ic-whatsapp{ background:#25D366; color:#fff; }
.service-chip span{ font-size:clamp(11.5px,1.15vw,13px); font-weight:500; color:var(--text); line-height:1.22; }
.brand-glow{
  position:absolute; top:50%; left:50%; width:120px; height:120px; transform:translate(-50%,-50%);
  background: var(--accent-grad); filter:blur(90px); opacity:0; z-index:1; border-radius:50%;
}

@media (max-width: 900px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 10px; padding-left:72px; }
  .service-chip .mascot-img{ height:190px; top:-46px; right:calc(100% - 6px); }
}
@media (max-width: 480px){
  .services-title{ font-size:22px; }
  .services-grid{ padding-left:58px; }
  .service-chip{ padding:9px 11px; }
  .service-chip .ic{ width:28px; height:28px; font-size:11px; }
  .service-chip .mascot-img{ height:150px; top:-36px; right:calc(100% - 5px); }
}

.stadium-caption{
  position:absolute; left:clamp(20px,5vw,60px); bottom:clamp(20px,5vw,50px); z-index:4;
  display:flex; align-items:baseline; gap:14px; font-family:'Sora';
}
.stadium-caption .cap-index{ font-size:13px; color:var(--accent2); font-weight:600; letter-spacing:.1em; }
.stadium-caption .cap-label{ font-size:14px; color:var(--muted); letter-spacing:.02em; }
.stadium-progress{
  position:absolute; right:clamp(20px,5vw,60px); bottom:clamp(20px,5vw,50px); z-index:4;
  width:120px; height:2px; background:var(--line);
}
.stadium-progress i{ display:block; height:100%; width:0%; background:var(--accent-grad); }

/* ---------- Approach / stats section ---------- */
.approach{ position:relative; padding:150px 24px; background:var(--bg-soft); border-top:1px solid var(--line); }
.approach-head{ max-width:760px; margin:0 auto 90px; text-align:center; }
.approach-head .kicker{ font-size:12px; letter-spacing:.28em; color:var(--accent2); font-weight:600; margin-bottom:18px; }
.approach-head h2{ font-size:clamp(26px,4vw,46px); font-weight:600; line-height:1.25; }
.approach-head h2 span{ color:var(--muted); }

.stats-row{
  max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--bg-soft); padding:38px 24px; text-align:center; }
.stat h3{ font-family:'Sora'; font-size:clamp(28px,4vw,44px); font-weight:700; }
.stat h3 .u{ font-size:.5em; color:var(--accent2); }
.stat p{ color:var(--muted); font-size:13px; margin-top:8px; letter-spacing:.02em; }

.pillars{ max-width:1100px; margin:90px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px;
  transition: transform .4s var(--ease-out), border-color .4s;
}
.pillar:hover{ transform:translateY(-6px); border-color:rgba(139,107,255,.4); }
.pillar i{ font-size:22px; color:var(--accent2); margin-bottom:18px; display:block; }
.pillar h4{ font-family:'Sora'; font-size:17px; font-weight:600; margin-bottom:10px; }
.pillar p{ color:var(--muted); font-size:13.5px; line-height:1.7; font-weight:300; }

/* ---------- About page ---------- */
.founders{ max-width:1100px; margin:0 auto; padding: 40px 24px 20px; }
.section-kicker{ font-size:12px; letter-spacing:.28em; color:var(--accent2); font-weight:600; margin-bottom:14px; text-align:center; }
.section-title{ font-size:clamp(24px,3.6vw,40px); font-weight:600; text-align:center; max-width:700px; margin:0 auto 60px; line-height:1.3; }
.section-title span{ color:var(--muted); }
.founder-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.founder-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:40px 34px;
  text-align:center; transition: transform .4s var(--ease-out), border-color .4s;
}
.founder-card:hover{ transform:translateY(-6px); border-color:rgba(139,107,255,.4); }
.founder-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 22px; display:flex; align-items:center; justify-content:center;
  font-family:'Sora'; font-weight:700; font-size:30px; color:#08080d; background:var(--accent-grad);
  box-shadow: 0 10px 30px -8px rgba(139,107,255,.5);
  overflow:hidden;
}
.founder-avatar img{ width:100%; height:100%; object-fit:cover; }
.founder-card h3{ font-family:'Sora'; font-size:21px; font-weight:600; margin-bottom:4px; }
.founder-card .role{ font-size:12.5px; letter-spacing:.14em; color:var(--accent2); font-weight:600; text-transform:uppercase; margin-bottom:18px; }
.founder-card p.bio{ color:var(--muted); font-size:14px; line-height:1.75; font-weight:300; text-align:left; }
.founder-card .f-links{ display:flex; gap:14px; justify-content:center; margin-top:22px; }
.founder-card .f-links a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:14px; transition: color .3s, border-color .3s;
}
.founder-card .f-links a:hover{ color:var(--accent2); border-color:var(--accent2); }

.values{ max-width:1100px; margin:110px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value-card{ padding:6px 0; }
.value-card i{ font-size:20px; color:var(--accent2); margin-bottom:16px; display:block; }
.value-card h4{ font-family:'Sora'; font-size:16px; font-weight:600; margin-bottom:8px; }
.value-card p{ color:var(--muted); font-size:13.5px; line-height:1.7; font-weight:300; }

.story-block{ max-width:760px; margin:110px auto 0; padding:0 24px; text-align:center; }
.story-block p{ color:var(--muted); font-size:15px; line-height:1.9; font-weight:300; }
.story-block p + p{ margin-top:18px; }

/* ---------- Projects page: station sign ---------- */
.station-board-wrap{ display:flex; justify-content:center; margin:0 auto 6px; }
.station-sign{ position:relative; display:flex; flex-direction:column; align-items:center; }
.station-sign .board{
  display:flex; align-items:center; gap:10px; padding:12px 26px; border-radius:10px;
  background: linear-gradient(180deg, #12141f 0%, #0a0b13 100%); border:1px solid var(--line);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  font-family:'Sora'; font-weight:700; letter-spacing:.06em; color:#fff; font-size:15px;
}
.station-sign .board i{ color:var(--accent2); font-size:16px; }
.station-sign .board small{
  font-family:'Inter'; font-weight:600; font-size:9px; letter-spacing:.2em; color:var(--muted);
  border-left:1px solid var(--line); padding-left:10px; margin-left:2px;
}
.station-sign .post{ width:5px; height:20px; background: linear-gradient(180deg,#3a3d44,#1b1c21); }
.station-sign .post:first-of-type{ display:none; } /* single center post looks cleaner */
.station-sign .post:last-of-type{ border-radius:0 0 2px 2px; }

/* ---------- Projects page: animated train filter ---------- */
.train-viewport{
  position:relative; max-width:1180px; margin:0 auto 56px; padding:44px 24px 32px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
}
.train-viewport.animating{ overflow-x:hidden; }
.train-viewport::-webkit-scrollbar{ height:6px; }
.train-viewport::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.train-track{
  position:absolute; left:24px; right:24px; bottom:18px; height:5px;
  background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 16px);
  opacity:.35; border-radius:2px;
}
@keyframes camShake{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-5px,1px); } 40%{ transform:translate(4px,-1px); }
  60%{ transform:translate(-3px,1px); } 80%{ transform:translate(2px,0); } 100%{ transform:translate(0,0); }
}
.train-viewport.impact{ animation: camShake .45s ease; }

.train-container{
  position:relative; display:flex; align-items:flex-end; width:max-content; margin:0 auto;
  padding:46px 8px 30px; perspective:1400px;
  transform: translateX(0); filter:blur(0) brightness(1);
}
.train-container.pending{
  transform: translateX(-100vw) translateX(-400px); filter: blur(3px) brightness(1.2);
}
.train-container.arriving{
  transition: transform 2.3s cubic-bezier(.22,.68,0,1.01), filter 2.3s ease;
  transform: translateX(0); filter: blur(0) brightness(1);
}

.train-car{
  position:relative; width:172px; height:96px; flex-shrink:0; cursor:pointer; margin-right:-7px;
  transform-style:preserve-3d;
}
.train-car:last-child{ margin-right:0; }
.train-container.arrived .train-car{
  animation: carSettle .55s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes carSettle{
  0%{ transform: translateY(-9px) rotateY(-6deg); }
  60%{ transform: translateY(2px) rotateY(2deg); }
  100%{ transform: translateY(0) rotateY(0); }
}
.train-car .body{
  position:absolute; left:0; right:0; bottom:24px; top:16px;
  background: linear-gradient(180deg, #e6524f 0%, #c22b2b 55%, #911f22 100%);
  border-radius:11px 11px 3px 3px; border:1px solid rgba(0,0,0,.28);
  box-shadow: 0 12px 22px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
  transition: box-shadow .3s, filter .3s;
}
.train-car .roof{
  position:absolute; left:5px; right:5px; top:16px; height:9px; background:#181818; border-radius:7px 7px 0 0;
}
.train-car .windows{
  position:absolute; left:9px; right:9px; top:33px; height:22px; display:flex; gap:4px; z-index:2;
}
.train-car .windows span{
  flex:1; background:#12131e; border-radius:3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.train-car .wheels{
  position:absolute; left:16px; right:16px; bottom:9px; height:12px; display:flex; justify-content:space-between; z-index:2;
}
.train-car .wheels i{ width:11px; height:11px; border-radius:50%; background:#0c0c0c; border:2px solid #3a3a3a; }
.train-car .label{
  position:absolute; left:2px; right:2px; bottom:27px; text-align:center; z-index:3;
  font-family:'Sora'; font-weight:800; font-size:15px; line-height:1.15;
  color:#fff; letter-spacing:.01em; text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.35);
  pointer-events:none;
}
.train-car:hover .body{ filter:brightness(1.1); }
.train-car.active .body{
  box-shadow: 0 0 0 2px var(--accent2), 0 16px 30px -10px rgba(34,225,255,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.train-car.active .windows span{ background:#1c3540; box-shadow: inset 0 0 6px 1px rgba(34,225,255,.5); }
.train-car.active .label{ color:#eafcff; }

/* engine (last car, drawn as the locomotive) */
.train-car.engine{ width:196px; }
.train-car.engine .body{
  background: linear-gradient(180deg, #dfe4e9 0%, #aeb5bd 55%, #7d848c 100%);
  border-radius:7px 26px 3px 3px;
}
.train-car.engine .roof{ background:#2a2e33; border-radius:9px 9px 0 0; }
.train-car.engine .windows span:last-child{
  background:#ffe9a3; box-shadow: 0 0 10px 3px rgba(255,222,140,.65), inset 0 0 0 1px rgba(255,255,255,.2);
}
.train-car.active.engine .body{ box-shadow: 0 0 0 2px var(--accent2), 0 16px 30px -10px rgba(34,225,255,.55); }
.train-car.engine .label{ color:#1a1a1a; text-shadow: 0 1px 2px rgba(255,255,255,.4); }
/* headlight beam */
.train-car.engine::after{
  content:''; position:absolute; right:-34px; top:36%; width:76px; height:28px;
  background: radial-gradient(ellipse at left, rgba(255,235,180,.6), transparent 72%);
  filter:blur(2px); z-index:1; pointer-events:none;
}
/* chimney + rising smoke */
.train-car.engine .chimney{
  position:absolute; left:18px; top:3px; width:11px; height:15px; background:#33363b;
  border-radius:2px 2px 0 0; z-index:4;
}
.train-car.engine .smoke{
  position:absolute; left:19px; top:0px; width:11px; height:11px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 72%);
  opacity:0; z-index:4; pointer-events:none;
  animation: smokePuff 2.8s ease-out infinite;
}
.train-car.engine .smoke:nth-of-type(2){ animation-delay:.9s; left:18px; }
.train-car.engine .smoke:nth-of-type(3){ animation-delay:1.8s; left:20px; }
@keyframes smokePuff{
  0%{ opacity:0; transform:translate(0,0) scale(.4); }
  14%{ opacity:.7; }
  100%{ opacity:0; transform:translate(16px,-48px) scale(2.1); }
}
/* flag: "Our Work Journey" fluttering atop the engine */
.train-car.engine .flagpole{
  position:absolute; left:40px; top:-28px; width:2px; height:29px; background:#c9ced4; z-index:5;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.train-car.engine .flag{
  position:absolute; left:42px; top:-30px; width:92px; height:30px;
  background: linear-gradient(180deg,#ffffff,#eef0f3);
  border-radius:2px 12px 12px 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform-origin: 0% 50%;
  animation: flagWave 1.5s ease-in-out infinite;
  z-index:5;
}
.train-car.engine .flag span{
  font-family:'Sora'; font-weight:800; font-size:8.5px; line-height:1.15; color:#9c1616;
  letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
}
@keyframes flagWave{
  0%,100%{ transform: perspective(140px) rotateY(12deg) skewY(3deg); }
  50%{ transform: perspective(140px) rotateY(-12deg) skewY(-3deg); }
}

@media (max-width: 640px){
  .train-car{ width:138px; height:84px; }
  .train-car.engine{ width:168px; }
  .train-car .label{ font-size:12px; bottom:24px; }
  .train-car .windows{ top:29px; height:18px; }
  .train-track{ bottom:14px; }
  .station-sign .board{ padding:10px 18px; font-size:12px; gap:7px; }
  .station-sign .board small{ display:none; }
  .train-car.engine .flag{ width:78px; height:26px; left:34px; top:-26px; }
  .train-car.engine .flag span{ font-size:7.5px; }
}

.projects-grid{
  max-width:1200px; margin:0 auto; padding:0 24px 40px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.project-card{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition: transform .45s var(--ease-out), border-color .4s;
}
.project-card:hover{ transform:translateY(-8px); border-color:rgba(139,107,255,.4); }
.project-card .shot{
  height:190px; background-size:cover; background-position:top center; position:relative; overflow:hidden;
}
.project-card .shot::after{
  content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,9,.55), transparent 55%);
}
.project-card .shot .tag{
  position:absolute; left:14px; bottom:12px; z-index:2; font-family:'Sora'; font-size:10.5px; font-weight:600;
  letter-spacing:.06em; padding:5px 12px; border-radius:100px; background:rgba(5,5,9,.6); backdrop-filter:blur(6px);
  color:#fff; display:flex; align-items:center; gap:7px;
}
.project-card .shot .tag .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.project-card .shot .visit{
  position:absolute; right:14px; top:12px; z-index:2; font-family:'Sora'; font-size:10px; font-weight:600;
  letter-spacing:.04em; padding:5px 11px; border-radius:100px; background:rgba(5,5,9,.55); backdrop-filter:blur(6px);
  color:#fff; display:flex; align-items:center; gap:6px; opacity:0; transform:translateY(-4px);
  transition: opacity .3s, transform .3s;
}
.project-card .shot .visit i{ font-size:9px; }
.project-card:hover .shot .visit{ opacity:1; transform:translateY(0); }
.project-card .body{ padding:22px 22px 24px; }
.project-card h3{ font-family:'Sora'; font-size:17px; font-weight:600; margin-bottom:8px; }
.project-card p{ color:var(--muted); font-size:13px; line-height:1.65; font-weight:300; margin-bottom:16px; }
.project-card .stack{ display:flex; gap:7px; flex-wrap:wrap; }
.project-card .stack span{
  font-size:10.5px; padding:4px 10px; border-radius:100px; background:rgba(255,255,255,.05); color:var(--muted);
  border:1px solid var(--line); font-weight:500;
}

/* ---------- CTA / Footer ---------- */
.cta-final{
  position:relative; padding:170px 24px; text-align:center; overflow:hidden; background:var(--bg);
}
.cta-final::before{
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(139,107,255,.22), transparent 65%);
}
.cta-final h2{
  position:relative; z-index:1; font-size:clamp(28px,5.6vw,64px); font-weight:700; max-width:820px; margin:0 auto;
  line-height:1.12;
}
.cta-final p{ position:relative; z-index:1; color:var(--muted); margin:24px auto 0; max-width:460px; font-size:14.5px; font-weight:300;}
.cta-final .hero-ctas{ margin-top:40px; }

footer{
  border-top:1px solid var(--line); padding:44px clamp(20px,5vw,60px);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  color:var(--muted); font-size:13px;
}
footer .f-brand{ display:flex; align-items:center; gap:10px; }
footer .f-brand .glyph{ width:26px; height:26px; border-radius:7px; overflow:hidden; }
footer .f-brand .glyph img{ width:100%; height:100%; object-fit:cover; }
footer .f-links{ display:flex; gap:22px; flex-wrap:wrap; }
footer .f-links a:hover{ color:var(--accent2); }
footer .f-social{ display:flex; gap:18px; }
footer .f-social a{ color:var(--muted); font-size:15px; transition:color .3s; }
footer .f-social a:hover{ color:var(--accent2); }

/* ---------- Floating WhatsApp button ---------- */
.float-wa{
  position:fixed; right:24px; bottom:24px; z-index:400; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow: 0 10px 30px -6px rgba(37,211,102,.6); transition: transform .3s;
}
.float-wa:hover{ transform: scale(1.08); }

/* ---------- Floating Instagram button ---------- */
.float-ig{
  position:fixed; right:24px; bottom:90px; z-index:400; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px;
  box-shadow: 0 10px 30px -6px rgba(214,41,118,.5); transition: transform .3s;
}
.float-ig:hover{ transform: scale(1.08); }

@media (max-width: 860px){
  nav.links{ display:none; }
  .burger{ display:block; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .pillars{ grid-template-columns:1fr; }
  .card{ width:190px; height:124px; margin:-62px 0 0 -95px; }
  .founder-grid{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; gap:34px; }
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .projects-grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .nav-cta{ display:none; }
  .brand-logo{ gap:9px; font-size:14.5px; }
  .brand-logo .glyph{ width:38px; height:38px; border-radius:10px; }
  .brand-logo .brand-text small{ font-size:8px; letter-spacing:.14em; }
  header.nav{ padding:14px clamp(16px,4vw,24px); }
}
@media (max-width: 480px){
  .hero h1{ font-size:clamp(26px, 8.6vw, 40px); }
  .page-hero{ padding:130px 20px 70px; }
}

/* ---------- Testimonials page ---------- */
.testimonials-wrap{ max-width:1100px; margin:0 auto; padding: 40px 24px 20px; }
.testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px;
  display:flex; flex-direction:column; transition: transform .4s var(--ease-out), border-color .4s;
}
.testimonial-card:hover{ transform:translateY(-6px); border-color:rgba(139,107,255,.4); }
.testimonial-card .quote-icon{ color:var(--accent2); font-size:22px; margin-bottom:18px; opacity:.7; }
.testimonial-card p.msg{ color:var(--text); font-size:14.5px; line-height:1.8; font-weight:300; flex:1; }
.testimonial-card .t-who{ display:flex; align-items:center; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.testimonial-card .t-avatar{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:#fff; background:#25D366; flex-shrink:0;
}
.testimonial-card .t-source{ font-size:13px; color:var(--muted); font-weight:500; }

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

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