*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- Light theme (default) ---------- */
:root{
  --bg:#FFFFFF;
  --surface:#F4F7FC;
  --surface-2:#E8EEF8;
  --surface-card:#FFFFFF;
  --line:rgba(10,22,50,.11);
  --line-2:rgba(10,22,50,.06);
  --ink:#0A1B3C;
  --dim:#334155;
  --faint:#64748B;
  --accent:#2563EB;
  --accent-2:#1D4FD1;
  --accent-soft:rgba(37,99,235,.09);
  --cyan:#0284C7;
  --cyan-soft:rgba(2,132,199,.1);
  --gold:#D97706;
  --gold-soft:rgba(217,119,6,.12);
  --success:#059669;
  --success-soft:rgba(5,150,105,.12);
  --nav-bg:rgba(255,255,255,.85);
  --card-bg:#FFFFFF;
  --card-border:rgba(10,22,50,.08);
  --card-shadow:0 2px 4px rgba(10,22,50,.04),0 12px 24px -8px rgba(10,22,50,.08),0 32px 50px -24px rgba(10,22,50,.1);
  --card-shadow-hover:0 8px 16px rgba(10,22,50,.06),0 22px 44px -10px rgba(10,22,50,.14),0 48px 80px -28px rgba(37,99,235,.18);
  --panel-shadow:0 4px 10px rgba(10,22,50,.05),0 30px 60px -22px rgba(10,22,50,.15),0 70px 110px -55px rgba(10,22,50,.2);
  --nav-shadow:0 8px 28px -12px rgba(10,22,50,.12);
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.4,0,.2,1);
  --pad:32px;
}
/* ---------- Dark theme ---------- */
:root[data-theme="dark"]{
  --bg:#080A0F;
  --surface:#0F131D;
  --surface-2:#161B28;
  --surface-card:#101522;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.05);
  --ink:#F8FAFC;
  --dim:#94A3B8;
  --faint:#64748B;
  --accent:#3D7BFF;
  --accent-2:#5A8DFF;
  --accent-soft:rgba(61,123,255,.14);
  --cyan:#00F0FF;
  --cyan-soft:rgba(0,240,255,.12);
  --gold:#FAB421;
  --gold-soft:rgba(250,180,33,.14);
  --success:#10B981;
  --success-soft:rgba(16,185,129,.14);
  --nav-bg:rgba(8,10,15,.78);
  --card-bg:#0F1422;
  --card-border:rgba(255,255,255,.08);
  --card-shadow:0 8px 24px -10px rgba(0,0,0,.6);
  --card-shadow-hover:0 24px 50px -20px rgba(0,0,0,.8),0 0 30px -10px rgba(61,123,255,.2);
  --panel-shadow:0 30px 90px -30px rgba(0,0,0,.9);
  --nav-shadow:0 8px 30px rgba(0,0,0,.6);
}

body{
  font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--dim);
  line-height:1.6;
  font-size:16px;
  letter-spacing:-0.011em;
  font-feature-settings:"cv05","cv08","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  overflow-x:hidden;
  transition:background .4s var(--ease-2),color .4s var(--ease-2);
}

/* Global scroll progress bar at top */
.scroll-progress-bar{
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,var(--accent),#00F0FF,var(--gold));
  width:0%;transition:width .1s linear;box-shadow:0 0 8px var(--accent);
}

h1,h2,h3,h4{
  font-family:'Outfit',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  font-feature-settings:"ss01","cv05";
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:'DM Sans',sans-serif;font-weight:400}

.tag{
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:9px;
  font-weight:600;
}
.tag::before{content:"";width:20px;height:2px;background:var(--gold);flex:none;border-radius:1px}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.proj:focus-visible,.arch-layer:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
  box-shadow:0 0 0 4px var(--accent-soft);
}

.skip{position:absolute;left:16px;top:-60px;background:var(--accent);color:#fff;padding:10px 18px;border-radius:8px;z-index:2000;font-weight:500;transition:top .2s var(--ease)}
.skip:focus{top:16px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:11px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;position:relative;
  transition:transform .25s var(--ease),background .25s var(--ease-2),border-color .25s var(--ease-2),color .25s var(--ease-2),box-shadow .35s var(--ease);
}
.btn:active{transform:scale(.96)}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 30px -12px rgba(37,99,235,.55)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 40px -12px rgba(37,99,235,.75)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--faint);background:var(--surface);transform:translateY(-2px)}
.btn-ghost:hover svg{transform:translateX(4px)}
.btn-sm{min-height:44px;padding:0 20px;font-size:14px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease),box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:var(--nav-bg);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid var(--line-2);
  box-shadow:0 1px 0 var(--line-2),0 8px 32px -12px rgba(10,22,50,.18);
}
:root[data-theme="dark"] .nav.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 32px -12px rgba(0,0,0,.5);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:28px}
.brand{display:flex;align-items:center;gap:13px;font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.brand-mark{width:48px;height:48px;flex:none;border-radius:13px;display:block;transition:transform .4s var(--ease),box-shadow .4s var(--ease);box-shadow:0 6px 16px -6px rgba(37,99,235,.45)}
.brand:hover .brand-mark{transform:scale(1.07) rotate(-4deg);box-shadow:0 10px 22px -6px rgba(37,99,235,.6)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-size:22px}
.brand-tagline{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.01em;color:var(--faint);text-transform:none;margin-top:1px;white-space:nowrap}
@media (max-width:1180px){.brand-tagline{display:none}}
@media (prefers-reduced-motion: reduce){.brand-mark{transition:none}.brand:hover .brand-mark{transform:none}}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  position:relative;color:var(--dim);font-size:14px;font-weight:500;padding:9px 14px;border-radius:8px;
  transition:color .2s var(--ease-2),background .2s var(--ease-2);
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--surface);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;bottom:3px;left:14px;right:14px;height:2px;background:var(--accent);border-radius:2px}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:9px;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease-2),border-color .2s var(--ease-2)}
.theme-btn:hover{background:var(--surface);border-color:var(--faint)}
.theme-btn svg{width:19px;height:19px}
:root[data-theme="light"] .ico-sun{display:none}
:root[data-theme="dark"] .ico-moon{display:none}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;color:var(--ink)}
.nav-mobile{
  display:flex;flex-direction:column;position:fixed;inset:0;background:var(--bg);z-index:950;padding:96px 24px 40px;
  opacity:0;pointer-events:none;transform:translateY(-14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.nav-mobile.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-mobile ul{display:flex;flex-direction:column}
.nav-mobile a{display:block;padding:20px 4px;font-family:'Outfit',sans-serif;font-size:26px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2);letter-spacing:-.02em}
.nav-mobile .btn{margin-top:28px;width:100%}
.nav-close{position:absolute;top:22px;right:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;color:var(--ink)}
@media (max-width:960px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .nav-toggle{display:flex}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:168px 0 92px;overflow:hidden}
.hero-glow{
  position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:1100px;height:640px;pointer-events:none;z-index:0;
  background:radial-gradient(60% 60% at 50% 40%, rgba(37,99,235,.22), rgba(37,99,235,.05) 45%, transparent 72%);
  filter:blur(20px);
}
:root[data-theme="dark"] .hero-glow{background:radial-gradient(60% 60% at 50% 40%, rgba(61,123,255,.24), rgba(61,123,255,.05) 45%, transparent 72%)}
.hero-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-aurora span{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.hero-aurora .a1{width:560px;height:560px;left:-8%;top:-16%;background:radial-gradient(circle,rgba(37,99,235,.26),transparent 68%);animation:aur1 22s var(--ease-2) infinite alternate}
.hero-aurora .a2{width:440px;height:440px;right:2%;top:-8%;background:radial-gradient(circle,rgba(250,180,33,.14),transparent 70%);animation:aur2 26s var(--ease-2) infinite alternate}
.hero-aurora .a3{width:520px;height:520px;left:34%;top:24%;background:radial-gradient(circle,rgba(77,142,247,.2),transparent 70%);animation:aur3 30s var(--ease-2) infinite alternate}
:root[data-theme="dark"] .hero-aurora .a1{background:radial-gradient(circle,rgba(61,123,255,.36),transparent 68%)}
:root[data-theme="dark"] .hero-aurora .a2{background:radial-gradient(circle,rgba(250,180,33,.14),transparent 70%)}
:root[data-theme="dark"] .hero-aurora .a3{background:radial-gradient(circle,rgba(90,141,255,.3),transparent 70%)}
@keyframes aur1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,50px) scale(1.12)}}
@keyframes aur2{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.1)}}
@keyframes aur3{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,-50px) scale(1.14)}}
@media (prefers-reduced-motion: reduce){.hero-aurora span{animation:none}}

/* Floating particles */
.hero-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-particles .p{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.25;animation:particleFloat linear infinite}
.hero-particles .p:nth-child(1){left:12%;top:20%;width:5px;height:5px;opacity:.3;animation-duration:18s;animation-delay:0s}
.hero-particles .p:nth-child(2){left:28%;top:60%;width:3px;height:3px;opacity:.2;animation-duration:22s;animation-delay:-4s}
.hero-particles .p:nth-child(3){left:65%;top:15%;width:6px;height:6px;opacity:.18;animation-duration:25s;animation-delay:-8s}
.hero-particles .p:nth-child(4){left:80%;top:45%;width:4px;height:4px;opacity:.22;animation-duration:20s;animation-delay:-2s}
.hero-particles .p:nth-child(5){left:45%;top:75%;width:3px;height:3px;opacity:.15;animation-duration:28s;animation-delay:-6s}
.hero-particles .p:nth-child(6){left:90%;top:25%;width:5px;height:5px;opacity:.2;animation-duration:16s;animation-delay:-10s}
@keyframes particleFloat{
  0%{transform:translateY(0) translateX(0);opacity:.15}
  25%{transform:translateY(-40px) translateX(20px);opacity:.3}
  50%{transform:translateY(-80px) translateX(-15px);opacity:.2}
  75%{transform:translateY(-120px) translateX(25px);opacity:.25}
  100%{transform:translateY(-160px) translateX(0);opacity:.1}
}
@media (prefers-reduced-motion: reduce){.hero-particles .p{animation:none}}

.hero-top{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.status{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--dim);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px 7px 12px;
  background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.status .live{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(250,180,33,.6);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(250,180,33,.5)}70%{box-shadow:0 0 0 7px rgba(250,180,33,0)}100%{box-shadow:0 0 0 0 rgba(250,180,33,0)}}
@media (prefers-reduced-motion: reduce){.status .live{animation:none}}

.hero h1{
  font-size:clamp(2.6rem,5.8vw,4.8rem);
  font-weight:800;
  letter-spacing:-.035em;line-height:1.02;
  max-width:18ch;margin-bottom:24px;
}
:root[data-theme="dark"] .hero h1{text-shadow:0 2px 40px rgba(61,123,255,.15)}
.hero h1 .thin{color:var(--faint);font-weight:400}
.hero-lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--dim);max-width:58ch;line-height:1.58;margin-bottom:38px}
.hero-lead b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:54px}

/* Entrance animations */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(32px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes heroSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes heroScaleIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}
.hero-anim-status{animation:heroSlideUp .7s var(--ease) .1s both;animation-play-state:paused}
.hero-anim-title{animation:heroFadeUp .9s var(--ease) .25s both;animation-play-state:paused}
.hero-anim-lead{animation:heroSlideUp .8s var(--ease) .5s both;animation-play-state:paused}
.hero-anim-cta{animation:heroSlideUp .7s var(--ease) .7s both;animation-play-state:paused}
.hero-anim-slider{animation:heroScaleIn .9s var(--ease) .85s both;animation-play-state:paused}
body.loaded .hero-anim-status,body.loaded .hero-anim-title,body.loaded .hero-anim-lead,body.loaded .hero-anim-cta,body.loaded .hero-anim-slider{animation-play-state:running}
@media (prefers-reduced-motion: reduce){
  .hero-anim-status,.hero-anim-title,.hero-anim-lead,.hero-anim-cta,.hero-anim-slider{animation:none;animation-play-state:running}
}

/* ---------- WebGL hero scene (Three.js) ---------- */
.hero-webgl{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-webgl.is-ready{opacity:.9}
:root[data-theme="dark"] .hero-webgl.is-ready{opacity:1}
@media (max-width:760px){.hero-webgl{display:none}}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--bg);transition:opacity .55s var(--ease-2),visibility .55s var(--ease-2);
}
.preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-mark{width:52px;height:52px;animation:preloaderPulse 1.6s var(--ease) infinite}
.preloader-mark rect{filter:drop-shadow(0 8px 24px rgba(37,99,235,.35))}
@keyframes preloaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.preloader-bar{width:140px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.preloader-bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--cyan));transition:width .25s var(--ease-2)}
.preloader-label{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
@media (prefers-reduced-motion: reduce){.preloader-mark{animation:none}}

/* Scroll reveal system */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.26s}.rv-d4{transition-delay:.34s}.rv-d5{transition-delay:.42s}.rv-d6{transition-delay:.5s}.rv-d7{transition-delay:.58s}.rv-d8{transition-delay:.66s}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}}

/* hero — full-width AI product slider */
.slider{position:relative;border:1px solid var(--card-border);border-radius:20px;overflow:hidden;background:var(--card-bg);box-shadow:var(--panel-shadow)}
.slider-bar{position:relative;display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line-2)}
.slider-bar i{width:11px;height:11px;border-radius:50%;background:var(--dim);opacity:.35}
.slider-bar .lbl{margin-left:8px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--faint);letter-spacing:.02em}
.slider-bar .s-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.s-live .dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:ping 2.4s var(--ease) infinite}
.slider-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--accent);width:0%;transition:width 0.05s linear}

.slider-view{overflow:hidden}
.slides{display:flex;will-change:transform;transition:transform .7s var(--ease)}
.slide{min-width:100%;display:grid;grid-template-columns:.82fr 1.18fr}
.slide-info{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line-2)}
.slide-info .k{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:9px}
.slide-info .k::before{content:"";width:16px;height:1px;background:var(--gold)}
.slide-info h3{font-size:clamp(1.5rem,2.4vw,2.05rem);letter-spacing:-.028em;margin-bottom:14px}
.slide-info p{font-size:15px;color:var(--dim);max-width:38ch;margin-bottom:24px}
.slide-tags{display:flex;flex-wrap:wrap;gap:8px}
.slide-tags span{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:100px;padding:5px 11px;background:var(--surface)}
.slide-mock{padding:34px 36px;position:relative;min-height:360px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,transparent,var(--surface) 320%)}
@media (max-width:820px){
  .slide{grid-template-columns:1fr}
  .slide-info{border-right:0;border-bottom:1px solid var(--line-2);padding:32px 26px}
  .slide-mock{min-height:300px;padding:28px 24px}
}

/* shared mock bits */
.m-head{display:flex;align-items:center;gap:9px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--accent);margin-bottom:16px;font-weight:600}
.m-head .avatar{width:24px;height:24px;border-radius:7px;background:linear-gradient(150deg,var(--accent),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* mock: agent tasks */
.mk-agent .msg-user{align-self:flex-end;max-width:85%;margin:0 0 18px auto;background:var(--accent);color:#fff;padding:11px 15px;border-radius:14px 14px 4px 14px;font-size:14px;box-shadow:0 10px 22px -12px rgba(37,99,235,.6)}
.tasks{display:flex;flex-direction:column;gap:11px}
.task{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--ink)}
.is-active .mk-agent .task{opacity:0;transform:translateY(8px);animation:taskIn .5s var(--ease) forwards}
.is-active .mk-agent .task:nth-child(1){animation-delay:.2s}.is-active .mk-agent .task:nth-child(2){animation-delay:.6s}.is-active .mk-agent .task:nth-child(3){animation-delay:1s}.is-active .mk-agent .task:nth-child(4){animation-delay:1.4s}
@keyframes taskIn{to{opacity:1;transform:none}}
.task .tick{width:20px;height:20px;border-radius:6px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;font-weight:700}
.task-live{color:var(--dim)}
.task-live .spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}

/* mock: chatbot */
.mk-chat{display:flex;flex-direction:column;gap:12px}
.cbub{max-width:82%;font-size:14px;line-height:1.5;padding:11px 15px;border-radius:14px}
.cbub-bot{align-self:flex-start;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:14px 14px 14px 4px}
.cbub-user{align-self:flex-end;background:var(--accent);color:#fff;border-radius:14px 14px 4px 14px}
.cbub-typing{align-self:flex-start;display:inline-flex;gap:5px;padding:14px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px 14px 14px 4px}
.cbub-typing span{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.is-active .cbub-typing span{animation:bounce 1.2s var(--ease-2) infinite}
.is-active .cbub-typing span:nth-child(2){animation-delay:.15s}.is-active .cbub-typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* mock: voice AI */
.mk-voice{display:flex;flex-direction:column;gap:22px}
.vhead{display:flex;align-items:center;gap:13px}
.vhead .vava{width:44px;height:44px;border-radius:13px;background:linear-gradient(150deg,var(--accent),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.vhead b{display:block;color:var(--ink);font-size:15px}
.vhead span{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--dim)}
.vhead .vtime{margin-left:auto;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--accent);font-weight:600}
.wave{display:flex;align-items:center;gap:5px;height:56px}
.wave i{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:100px;height:20%;opacity:.85}
.is-active .wave i{animation:wave 1.1s var(--ease-2) infinite}
.is-active .wave i:nth-child(2n){animation-duration:.9s}.is-active .wave i:nth-child(3n){animation-duration:1.3s}.is-active .wave i:nth-child(4n){animation-delay:.2s}
@keyframes wave{0%,100%{height:22%}50%{height:100%}}
.vcap{font-size:14px;color:var(--dim);font-style:italic;border-left:2px solid var(--accent);padding-left:13px}

/* mock: automation flow */
.mk-flow{display:flex;flex-direction:column;gap:0}
.fnode{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--card-bg);position:relative;z-index:1}
.fnode .fico{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.fnode b{color:var(--ink);font-size:14px;display:block}
.fnode span{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--faint)}
.fnode .fok{margin-left:auto;color:#10B981;font-size:16px;font-weight:700}
.flink{width:2px;height:16px;margin-left:30px;background:repeating-linear-gradient(180deg,var(--accent) 0 4px,transparent 4px 8px)}
.is-active .fnode{opacity:0;transform:translateX(-8px);animation:taskIn .5s var(--ease) forwards}
.is-active .fnode:nth-child(1){animation-delay:.15s}.is-active .fnode:nth-child(3){animation-delay:.5s}.is-active .fnode:nth-child(5){animation-delay:.85s}.is-active .fnode:nth-child(7){animation-delay:1.2s}
.is-active .flink{opacity:0;animation:taskIn .4s var(--ease) forwards}
.is-active .flink:nth-child(2){animation-delay:.4s}.is-active .flink:nth-child(4){animation-delay:.75s}.is-active .flink:nth-child(6){animation-delay:1.1s}

/* slider footer / controls */
.slider-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line-2)}
.dots{display:flex;gap:8px;align-items:center}
.dot-btn{min-width:12px;height:24px;border-radius:100px;background:transparent;border:0;transition:width .4s var(--ease);padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dot-btn::before{content:"";width:8px;height:8px;border-radius:100px;background:var(--line);transition:width .4s var(--ease),background .3s var(--ease-2)}
.dot-btn.active::before{width:26px;background:var(--accent)}
.s-ctrl{display:flex;align-items:center;gap:8px}
.s-arrow{min-width:44px;min-height:44px;border-radius:9px;border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease-2),border-color .2s var(--ease-2),transform .2s var(--ease)}
.s-arrow:hover{background:var(--surface);border-color:var(--faint);transform:scale(1.05)}
.s-arrow:active{transform:scale(.95)}
.s-arrow svg{width:15px;height:15px}
.s-count{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--faint)}

@media (prefers-reduced-motion: reduce){
  .slides{transition:none}
  .s-live .dot,.mk-agent .task,.cbub-typing span,.wave i,.mk-flow .fnode,.mk-flow .flink,.task-live .spin{animation:none;opacity:1;transform:none;height:auto}
  .wave i{height:60%}
}

/* Trust / Capabilities Badges Ribbon */
.trust-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
  padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  margin-bottom:28px;
}
.trust-item{display:flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--dim);font-weight:500}
.trust-item svg{width:16px;height:16px;color:var(--accent);flex:none}

.strip{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:22px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip-track{display:flex;gap:48px;width:max-content;animation:slide 40s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track span{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--faint);white-space:nowrap;letter-spacing:.02em}
.strip-track span::before{content:"◇";color:var(--accent);margin-right:48px;opacity:.6}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.strip-track{animation:none;flex-wrap:wrap;justify-content:center}}

.section{padding:120px 0;position:relative;content-visibility:auto;contain-intrinsic-size:1px 800px}
#work{background:var(--surface);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
#contact{background:var(--surface);border-top:1px solid var(--line-2)}
.section-head{max-width:760px;margin-bottom:54px}
.section-head .tag{margin-bottom:20px}
.section-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:800;letter-spacing:-.035em;margin-bottom:18px}
.section-head p{font-size:clamp(1rem,1.4vw,1.14rem);color:var(--dim);max-width:60ch}

/* ---------- Services & Category Filtering ---------- */
.svc-filter-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:34px;
}
.svc-filter-btn{
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);
  font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--dim);
  background:var(--card-bg);cursor:pointer;transition:all .25s var(--ease);
}
.svc-filter-btn.active,.svc-filter-btn:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 14px rgba(37,99,235,.25);
}

.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* Flagship banner with animated conic glow */
.svc-feat{
  grid-column:1 / -1;position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;
  padding:40px 44px;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,rgba(37,99,235,.08),transparent 60%),var(--card-bg);
  border:1px solid rgba(37,99,235,.28);box-shadow:var(--card-shadow);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
:root[data-theme="dark"] .svc-feat{
  background:linear-gradient(135deg,rgba(61,123,255,.12),transparent 60%),#0F1422;
  border-color:rgba(61,123,255,.35);
}
.svc-feat:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.svc-feat .badge{display:inline-flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-weight:600}
.svc-feat .badge b{color:var(--gold);font-weight:600}
.svc-feat h3{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.svc-feat p{font-size:15.5px;color:var(--dim);max-width:62ch;line-height:1.6}
.svc-feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.svc-feat-tags span{font-family:'DM Sans',sans-serif;font-size:11px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 10px;color:var(--dim)}
.svc-feat .go{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 28px;border-radius:11px;
  background:var(--accent);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14.5px;
  box-shadow:0 10px 26px -12px rgba(37,99,235,.7);transition:transform .35s var(--ease),background .25s var(--ease-2)}
.svc-feat .go svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.svc-feat:hover .go{background:var(--accent-2)}
.svc-feat:hover .go svg{transform:translateX(4px)}

/* Compact service cards */
.svc-card{
  position:relative;display:flex;flex-direction:column;border-radius:16px;
  background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .3s var(--ease);
}
.svc-card.hidden{display:none}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover)}
.svc-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.svc-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc-card:hover .svc-card-media img{transform:scale(1.06)}
.svc-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,22,50,.35));pointer-events:none}
:root[data-theme="dark"] .svc-card-media::after{background:linear-gradient(180deg,transparent 25%,rgba(11,11,13,.75))}
.svc-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;position:relative}
.svc-card h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:8px;padding-right:24px}
.svc-card p{font-size:13.5px;color:var(--dim);line-height:1.55;margin-bottom:16px}
.svc-card .sarrow{position:absolute;top:22px;right:22px;color:var(--faint);transition:all .35s var(--ease)}
.svc-card:hover .sarrow{transform:translate(3px,-3px);color:var(--accent)}
.svc-card .sarrow svg{width:16px;height:16px}
.svc-card-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.svc-badge-pill{font-family:'DM Sans',sans-serif;font-size:10.5px;padding:3px 8px;border-radius:4px;background:var(--surface);border:1px solid var(--line-2);color:var(--dim)}

@media (max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}.svc-feat{grid-template-columns:1fr;padding:30px 24px}.svc-feat .go{width:100%}}

/* ---------- Voice AI Interactive Audio Demo ---------- */
.voice-demo-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:36px;box-shadow:var(--panel-shadow);margin-top:32px}
.voice-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.voice-selector{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.voice-chip{padding:9px 16px;border-radius:100px;border:1px solid var(--line);font-family:'DM Sans',sans-serif;font-size:12px;color:var(--dim);background:var(--surface);cursor:pointer;transition:all .25s var(--ease)}
.voice-chip.active,.voice-chip:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.voice-player{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.voice-play-btn{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(37,99,235,.6);flex:none;transition:transform .2s var(--ease)}
.voice-play-btn:hover{transform:scale(1.06)}
.voice-play-btn svg{width:20px;height:20px}
.voice-waves{display:flex;align-items:center;gap:4px;height:36px;flex:1}
.voice-waves span{flex:1;background:var(--accent);border-radius:100px;height:25%;opacity:.75;transition:height .15s var(--ease)}
.voice-waves.playing span{animation:vwave 1.2s var(--ease-2) infinite}
.voice-waves.playing span:nth-child(2n){animation-duration:0.8s}
.voice-waves.playing span:nth-child(3n){animation-duration:1.4s}
@keyframes vwave{0%,100%{height:20%}50%{height:95%}}
.voice-transcript{padding:20px;background:var(--surface);border-radius:12px;border-left:3px solid var(--accent);font-size:14.5px;color:var(--ink);line-height:1.6;font-style:italic}
@media (max-width:760px){.voice-demo-grid{grid-template-columns:1fr}}

/* ---------- Architecture Explorer ---------- */
.arch-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:stretch}
.arch-layers{display:flex;flex-direction:column;gap:14px}
.arch-layer{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--card-bg);cursor:pointer;transition:all .35s var(--ease);border-left:4px solid transparent}
.arch-layer.active{border-color:var(--line);border-left-color:var(--accent);background:var(--card-bg);box-shadow:0 12px 32px -10px rgba(37,99,235,.18);transform:translateX(4px)}
.arch-layer:hover:not(.active){border-color:var(--line);background:var(--surface);transform:translateX(2px)}
.arch-layer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.arch-layer-num{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--accent);font-weight:600;letter-spacing:.06em}
.arch-layer-title{font-size:1.15rem;font-weight:700;color:var(--ink)}
.arch-layer-desc{font-size:13.5px;color:var(--dim);line-height:1.5}
.arch-detail{background:var(--card-bg);border:1px solid var(--line);border-radius:20px;padding:36px;box-shadow:var(--panel-shadow);display:flex;flex-direction:column;justify-content:space-between}
.arch-nodes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.arch-node{padding:16px 18px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--ink);display:flex;align-items:center;gap:10px;font-weight:500;transition:all .25s var(--ease)}
.arch-node::before{content:"◆";color:var(--accent);font-size:11px}
.arch-node:hover{border-color:var(--accent);background:var(--card-bg);transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.1)}
@media (max-width:860px){.arch-grid{grid-template-columns:1fr}}

/* ---------- AI ROI & Savings Calculator ---------- */
.calc-card{background:var(--card-bg);border:1px solid var(--line);border-radius:22px;padding:44px;box-shadow:var(--panel-shadow)}
.calc-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.calc-controls{display:flex;flex-direction:column;gap:26px}
.calc-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.calc-preset-btn{
  padding:6px 13px;border-radius:8px;border:1px solid var(--line);font-family:'DM Sans',sans-serif;
  font-size:11.5px;color:var(--dim);background:var(--surface);cursor:pointer;transition:all .2s var(--ease);
}
.calc-preset-btn.active,.calc-preset-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.calc-slider-group label{display:flex;justify-content:space-between;align-items:center;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--ink);margin-bottom:12px;font-weight:500}
.calc-slider-group label .val{color:var(--accent);font-weight:700;font-size:15px;background:var(--accent-soft);padding:4px 12px;border-radius:8px;border:1px solid rgba(37,99,235,.2)}
.calc-slider{width:100%;height:8px;border-radius:6px;background:var(--surface-2);outline:none;accent-color:var(--accent);cursor:pointer;transition:all .2s var(--ease)}
.calc-slider::-webkit-slider-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 4px 12px rgba(37,99,235,.5);cursor:pointer;border:3px solid #fff}
.calc-output{background:linear-gradient(145deg,rgba(37,99,235,.07),#FFFFFF);border:1px solid rgba(37,99,235,.25);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:20px;text-align:center;box-shadow:0 12px 32px -10px rgba(37,99,235,.15)}
:root[data-theme="dark"] .calc-output{background:linear-gradient(145deg,#161E30,#0D1322);border-color:rgba(61,123,255,.3)}
.calc-stat-val{font-family:'Outfit',sans-serif;font-size:clamp(2.4rem,4.2vw,3.4rem);font-weight:800;color:var(--accent);line-height:1;letter-spacing:-.03em}
@media (max-width:860px){.calc-grid{grid-template-columns:1fr}.calc-card{padding:28px}}

/* ---------- Approach ---------- */
.approach{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.principles{display:grid;grid-template-columns:repeat(2,1fr)}
.principle{padding:44px 44px 44px 0;border-bottom:1px solid var(--line-2)}
.principle:nth-child(odd){padding-right:56px;border-right:1px solid var(--line-2)}
.principle:nth-child(even){padding-left:44px}
.principle h3{font-size:1.4rem;letter-spacing:-.025em;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.principle h3 .k{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--accent);font-weight:400}
.principle p{font-size:15px;color:var(--dim);max-width:48ch}
@media (max-width:760px){
  .principles{grid-template-columns:1fr}
  .principle,.principle:nth-child(odd),.principle:nth-child(even){padding:34px 0;border-right:0}
}

.serve{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow)}
.serve-col{padding:38px 32px;border-right:1px solid var(--line);transition:background .5s var(--ease)}
.serve-col:last-child{border-right:0}
.serve-col:hover{background:var(--surface-2)}
.serve-col .n{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;display:block}
.serve-col h3{font-size:1.35rem;letter-spacing:-.025em;margin-bottom:12px}
.serve-col p{font-size:14.5px;color:var(--dim)}
@media (max-width:760px){.serve{grid-template-columns:1fr}.serve-col{border-right:0;border-bottom:1px solid var(--line)}.serve-col:last-child{border-bottom:0}}

/* ---------- Process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.proc-step{
  position:relative;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:16px;box-shadow:var(--card-shadow);padding:30px 26px 32px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.proc-step:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover)}
.proc-num{
  width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:17px;color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 22px -8px rgba(37,99,235,.7);margin-bottom:26px;
}
.proc-step .k{display:block;font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;font-weight:600}
.proc-step h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:11px}
.proc-step p{font-size:14px;color:var(--dim)}
.proc-step:not(:last-child)::after{
  content:"";position:absolute;top:54px;right:-11px;z-index:2;
  width:22px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 8px);
}
@media (max-width:900px){
  .proc{grid-template-columns:1fr 1fr}
  .proc-step:not(:last-child)::after{display:none}
}
@media (max-width:520px){.proc{grid-template-columns:1fr}}

/* ---------- Work ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.proj{position:relative;border:1px solid var(--card-border);border-radius:16px;overflow:hidden;background:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .6s var(--ease),box-shadow .5s var(--ease);cursor:pointer}
.proj:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover)}
.proj-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.proj-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.proj:hover .proj-media img{transform:scale(1.06)}
.proj-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,34,.08),rgba(8,16,34,.5));z-index:1}
.proj-tag{position:absolute;top:16px;left:16px;z-index:3;font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#EDEEF2;background:rgba(8,16,34,.65);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 11px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:600}
.proj-body{padding:24px 26px 28px;position:relative}
.proj-body h3{font-size:1.3rem;letter-spacing:-.022em;margin-bottom:9px}
.proj-body p{font-size:14.5px;color:var(--dim);max-width:52ch}
.proj-foot{display:flex;align-items:center;gap:8px;margin-top:18px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--faint)}
.proj-foot span{color:var(--dim)}
.proj-hint{display:inline-flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--accent);margin-top:14px;font-weight:600;transition:transform .3s var(--ease)}
.proj:hover .proj-hint{transform:translateX(4px)}
@media (max-width:720px){.work-grid{grid-template-columns:1fr}}

/* ---------- FrontDesk AI Featured Card ---------- */
.proj-featured{grid-column:1/-1}
.proj-media--wide{aspect-ratio:unset}
.proj-dashboard-wrap{position:relative;width:100%;overflow:hidden;border-radius:0;background:#F0F2F8}
.proj-dashboard-img{width:100%;height:320px;object-fit:cover;object-position:top;display:block;transition:transform 1s var(--ease)}
.proj:hover .proj-dashboard-img{transform:scale(1.03)}
.proj-dashboard-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(8,16,34,.45))}
.proj-dashboard-badge{
  position:absolute;bottom:16px;left:16px;pointer-events:auto;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(124,58,237,.85);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:7px 13px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(124,58,237,.45);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 4px 18px rgba(124,58,237,.45)}50%{box-shadow:0 4px 28px rgba(124,58,237,.75)}}
@media (prefers-reduced-motion:reduce){.proj-dashboard-badge{animation:none}}
.proj-tag--voice{background:rgba(124,58,237,.82);border-color:rgba(255,255,255,.22)}
.proj-featured .proj-body{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px}
.proj-featured .proj-body h3{font-size:1.5rem;width:100%}
.proj-featured .proj-body p{max-width:68ch}
@media (max-width:720px){.proj-dashboard-img{height:200px}}

/* ---------- Impact Metrics / Testimonials ---------- */
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.impact-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:28px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s var(--ease)}
.impact-card:hover{transform:translateY(-4px)}
.impact-metric{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:6px 12px;border-radius:8px;display:inline-block;margin-bottom:16px;font-weight:600}
.impact-quote{font-size:15px;color:var(--ink);line-height:1.6;margin-bottom:20px}
.impact-author{display:flex;align-items:center;gap:12px}
.impact-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--gold));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.impact-info b{display:block;font-size:14px;color:var(--ink)}
.impact-info span{font-size:12px;color:var(--faint)}
@media (max-width:860px){.impact-grid{grid-template-columns:1fr}}

/* ---------- CTA ---------- */
.cta{position:relative;text-align:center;padding:120px 0;overflow:hidden}
.cta-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 120% at 50% 120%,rgba(37,99,235,.16),transparent 60%)}
:root[data-theme="dark"] .cta-glow{background:radial-gradient(50% 120% at 50% 120%,rgba(61,123,255,.24),transparent 60%)}
.cta-in{position:relative;z-index:1;max-width:720px;margin:0 auto}
.cta h2{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;letter-spacing:-.035em;margin-bottom:20px}
.cta p{font-size:1.1rem;color:var(--dim);margin-bottom:38px;max-width:46ch;margin-left:auto;margin-right:auto}
.cta .btn-primary::before{content:"";position:absolute;inset:-6px;border-radius:14px;background:var(--accent);opacity:0;animation:ctaPulse 2.5s var(--ease) infinite;pointer-events:none}
@keyframes ctaPulse{0%{opacity:.25;transform:scale(1)}50%{opacity:0;transform:scale(1.15)}100%{opacity:0;transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){.cta .btn-primary::before{animation:none;display:none}}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.contact-info h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.03em;margin-bottom:18px}
.contact-info>p{font-size:1.05rem;color:var(--dim);margin-bottom:40px;max-width:44ch}
.contact-line{display:flex;flex-direction:column;gap:5px;padding:22px 0;border-top:1px solid var(--line-2)}
.contact-line:last-of-type{border-bottom:1px solid var(--line-2)}
.contact-line .k{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.contact-line .v{font-size:1.05rem;color:var(--ink)}
.contact-line .v a{transition:color .2s var(--ease-2)}
.contact-line .v a:hover{color:var(--accent)}
.form{border:1px solid var(--card-border);border-radius:18px;padding:36px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-family:'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:9px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px 15px;font-size:15px;color:var(--ink);
  transition:border-color .25s var(--ease-2),background .25s var(--ease-2);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.field input.is-valid,.field select.is-valid,.field textarea.is-valid{border-color:var(--success)}
.field input.is-invalid,.field textarea.is-invalid{border-color:#EF4444}
.field-err{display:block;min-height:16px;font-size:12.5px;color:#EF4444;margin-top:6px}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B93A5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.form .btn{width:100%;margin-top:6px}
.form-note{margin-top:16px;font-size:13.5px;padding:13px 15px;border-radius:10px;display:none}
.form-note.show{display:block}
.form-note.err{background:rgba(220,50,40,.09);color:#c0392b;border:1px solid rgba(220,50,40,.22)}
:root[data-theme="dark"] .form-note.err{background:rgba(255,90,80,.1);color:#ff9b93;border-color:rgba(255,90,80,.25)}
.form-ok{display:none;text-align:center;padding:32px 12px}
.form-ok.show{display:block}
.form-ok .ic{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-ok h3{font-size:1.3rem;margin-bottom:10px}
.form-ok p{font-size:14.5px;color:var(--dim)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px}.frow{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:72px 0 40px}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding-bottom:52px;border-bottom:1px solid var(--line-2)}
.foot-contact a{font-weight:700;color:var(--ink)}
.foot-contact a:hover{color:var(--accent)}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:14px;color:var(--dim);max-width:34ch;margin-bottom:14px}
.foot-expand{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.foot-col h4{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:18px}
.foot-col li{margin-bottom:12px}
.foot-col a{font-size:14px;color:var(--dim);transition:color .2s var(--ease-2)}
.foot-col a:hover{color:var(--ink)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:13px;color:var(--faint)}
.foot-bot .mono{font-size:12px}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr;row-gap:36px}}
@media (max-width:460px){.foot-top{grid-template-columns:1fr}}

/* ---------- Floating Back to Top Button ---------- */
.back-to-top{
  position:fixed;bottom:94px;left:28px;z-index:900;
  width:44px;height:44px;border-radius:12px;
  background:var(--card-bg);border:1px solid var(--line);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--card-shadow);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:all .3s var(--ease);
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}

/* ---------- Interactive Project Modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(10,22,50,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;max-width:740px;width:100%;max-height:88vh;overflow-y:auto;padding:36px;position:relative;box-shadow:var(--panel-shadow);transform:scale(.94) translateY(16px);transition:transform .35s var(--ease)}
.modal-overlay.open .modal-card{transform:scale(1) translateY(0)}
.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease-2)}
.modal-close:hover{background:var(--surface)}
.modal-tag{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:inline-block;font-weight:600}
.modal-title{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:14px}
.modal-img{width:100%;height:280px;object-fit:cover;border-radius:14px;margin-bottom:20px;border:1px solid var(--line-2)}
.modal-desc{font-size:15px;color:var(--dim);margin-bottom:24px;line-height:1.6}
.modal-section-h{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-weight:600}
.modal-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}
@media (max-width:600px){.modal-features{grid-template-columns:1fr}}
.modal-feat-item{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);background:var(--surface);padding:10px 14px;border-radius:10px;border:1px solid var(--line-2)}
.modal-feat-item span{color:var(--accent);font-weight:700}
.modal-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--line-2)}

/* ---------- Floating AI Assistant Chat Widget ---------- */
.floating-chat-trigger{
  position:fixed;bottom:28px;right:28px;z-index:999;
  height:54px;padding:0 22px;border-radius:100px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;
  box-shadow:0 12px 32px -8px rgba(37,99,235,.7);
  cursor:pointer;transition:transform .3s var(--ease),background .2s var(--ease);
}
.floating-chat-trigger:hover{transform:scale(1.05);background:var(--accent-2)}
.floating-chat-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(5,150,105,.25)}
/* Collapse to an icon-only FAB on narrow screens so it can't sit on top of
   the hero CTAs or any other tappable content underneath it. */
@media (max-width:600px){
  .floating-chat-trigger{width:54px;height:54px;padding:0;justify-content:center;bottom:20px;right:20px}
  .floating-chat-trigger span:not(.floating-chat-dot){display:none}
  .floating-chat-dot{position:absolute;top:10px;right:10px}
  .back-to-top{bottom:20px;left:20px}
  .chat-window{right:16px;bottom:86px}
}
.chat-window{
  position:fixed;bottom:94px;right:28px;z-index:1000;
  width:380px;max-width:calc(100vw - 32px);height:520px;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;
  box-shadow:var(--panel-shadow);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.96);
  transition:all .3s var(--ease);
}
.chat-window.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.chat-header{padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between}
.chat-header-info{display:flex;align-items:center;gap:10px}
.chat-header-info b{display:block;font-size:14px;color:var(--ink)}
.chat-header-info span{font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--success);font-weight:600}
.chat-close{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--faint);cursor:pointer}
.chat-close:hover{background:var(--line-2);color:var(--ink)}
.chat-messages{flex:1;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.chat-msg{max-width:85%;font-size:13.5px;line-height:1.5;padding:10px 14px;border-radius:12px}
.chat-msg-bot{align-self:flex-start;background:var(--surface);color:var(--ink);border-radius:12px 12px 12px 4px;border:1px solid var(--line-2)}
.chat-msg-user{align-self:flex-end;background:var(--accent);color:#fff;border-radius:12px 12px 4px 12px}
.chat-prompts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.chat-chip{padding:6px 11px;border-radius:100px;border:1px solid var(--line);font-size:11.5px;color:var(--accent);background:var(--accent-soft);cursor:pointer;transition:all .2s var(--ease)}
.chat-chip:hover{background:var(--accent);color:#fff}
.chat-input-bar{padding:12px 16px;border-top:1px solid var(--line-2);display:flex;gap:8px;background:var(--surface)}
.chat-input-bar input{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13.5px;background:var(--card-bg);color:var(--ink)}
.chat-input-bar button{width:36px;height:36px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}

/* Card Spotlight Glow */
.spotlight-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);background:radial-gradient(500px circle at var(--sx,50%) var(--sy,50%),rgba(37,99,235,.08),transparent 40%)}
:root[data-theme="dark"] .spotlight-glow{background:radial-gradient(500px circle at var(--sx,50%) var(--sy,50%),rgba(61,123,255,.12),transparent 40%)}
.svc-card:hover .spotlight-glow,.svc-feat:hover .spotlight-glow,.proj:hover .spotlight-glow{opacity:1}

/* ---- AI Receptionist hero spotlight (modernized, 2026-10) ---- */
.hot-badge{display:inline-flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#2563EB,#7C3AED);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.ai-spotlight{position:relative;border-radius:22px;padding:2px;background:linear-gradient(135deg,rgba(37,99,235,.55),rgba(124,58,237,.35),rgba(37,99,235,.15));margin-top:28px}
.ai-spotlight .voice-demo-card{margin:0;border-radius:20px;background:var(--card-bg)}
.ai-spotlight-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
@media (max-width:640px){.ai-spotlight{padding:1.5px}}

/* modernized product slider: gradient top edge + smoother dots */
.slider{border-top:3px solid transparent;background-image:linear-gradient(var(--card-bg),var(--card-bg)),linear-gradient(90deg,#2563EB,#7C3AED,#2563EB);background-origin:border-box;background-clip:padding-box,border-box;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dot-btn{transition:all .25s var(--ease)}
.dot-btn.active{transform:scale(1.15)}

/* condensed full services preview grid on Home */
.home-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:28px}
.home-svc-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;text-decoration:none;color:inherit;background:var(--card-bg);transition:transform .25s var(--ease),border-color .25s var(--ease)}
.home-svc-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.home-svc-card .k{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}
.home-svc-card h3{font-size:1rem;margin:0}
.home-svc-card p{margin:0;font-size:.86rem;color:var(--dim);line-height:1.45}