/* Layout: full-width bands alternating deep navy and clean paper, one 1240px column.
   Signature moments: the hero "operations feed", the before/after drag, and the live services bento.
   Deliberately one visual world (navy + paper + brand blue), so colours are set explicitly rather than per theme. */
:root {
  --night:#050a1c; --night-2:#0a1330; --night-3:#121d42; --night-line:rgba(157,180,255,.14);
  --paper:#f5f6fa; --white:#ffffff; --ink:#0a0f1f; --muted:#596175; --line:#e3e6ee;
  --blue:#295aff; --blue-2:#5b82ff; --sky:#a9bcff; --mist:#c9d3ef;
  --mint:#1fbf86; --amber:#f2a33a; --red:#e5484d;
  --at:#295aff; --plate:#ffffff; --logo-bg:transparent; --logo-pad:0;
  --shadow-sm:0 14px 34px rgba(10,15,31,.07);
  --glass-bg:rgba(255,255,255,.58); --glass-line:rgba(255,255,255,.85); --glass-ring:rgba(41,90,255,.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,.9); --glow:rgba(41,90,255,.20); --menu-bg:rgba(255,255,255,.86); --hdr-bg:rgba(255,255,255,.62); --hdr-edge:rgba(255,255,255,.9);
  --em-a:#1f45d6; --em-b:#295aff; --em-c:#4f78ff;
  --display:'Outfit', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --body:'Inter', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --white:#070c1f; --paper:#0b1229; --ink:#eef2ff; --muted:#9aa6c4; --line:rgba(157,180,255,.16);
  --at:#8fa8ff; --logo-bg:#ffffff; --logo-pad:8px 16px; --shadow-sm:0 14px 34px rgba(0,0,0,.35);
  --glass-bg:rgba(16,26,60,.52); --glass-line:rgba(157,180,255,.18); --glass-ring:rgba(91,130,255,.14); --glass-hi:inset 0 1px 0 rgba(255,255,255,.07); --glow:rgba(41,90,255,.30); --menu-bg:rgba(9,15,38,.88); --hdr-bg:rgba(7,12,31,.70); --hdr-edge:rgba(255,255,255,.06);
  --em-a:#295aff; --em-b:#5b82ff; --em-c:#a9bcff;
  color-scheme:dark;
} }
:root[data-theme="dark"] {
  --white:#070c1f; --paper:#0b1229; --ink:#eef2ff; --muted:#9aa6c4; --line:rgba(157,180,255,.16);
  --at:#8fa8ff; --logo-bg:#ffffff; --logo-pad:8px 16px; --shadow-sm:0 14px 34px rgba(0,0,0,.35);
  --glass-bg:rgba(16,26,60,.52); --glass-line:rgba(157,180,255,.18); --glass-ring:rgba(91,130,255,.14); --glass-hi:inset 0 1px 0 rgba(255,255,255,.07); --glow:rgba(41,90,255,.30); --menu-bg:rgba(9,15,38,.88); --hdr-bg:rgba(7,12,31,.70); --hdr-edge:rgba(255,255,255,.06);
  --em-a:#295aff; --em-b:#5b82ff; --em-c:#a9bcff;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:80; background:var(--night); }
a { color:inherit; }
img { max-width:100%; }
button { font:inherit; }
:focus-visible { outline:3px solid var(--blue-2); outline-offset:3px; border-radius:10px; }
.wrap { max-width:1240px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
.band { padding-block:120px; position:relative; }
.dark { background:var(--night); color:#eef2ff; }
.paper { background:var(--paper); }
h1, h2, h3, h4 { font-family:var(--display); font-weight:600; letter-spacing:-.035em; line-height:1.04; margin:0; text-wrap:balance; }
h2 { font-size:clamp(36px, 5vw, 64px); }
h3 { font-size:22px; letter-spacing:-.02em; line-height:1.2; }
p { margin:0; }
em.s { font-style:normal; background:linear-gradient(100deg, var(--em-a) 0%, var(--em-b) 55%, var(--em-c) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em; }
.dark em.s, .talk em.s { background:linear-gradient(100deg, #8fa8ff 0%, #c3d1ff 60%, #ffffff 100%); -webkit-background-clip:text; background-clip:text; }
.kicker { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--at); }
.kicker::before { content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }
.dark .kicker { color:var(--sky); }
.lead { font-size:clamp(17px, 1.45vw, 20px); color:var(--muted); line-height:1.55; max-width:60ch; text-wrap:pretty; }
.dark .lead { color:var(--mist); }
.sec-head { display:grid; gap:20px; max-width:820px; margin-bottom:60px; }
.sec-head.row { max-width:none; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:48px; }
.bang { color:var(--at); }
.dark .bang { color:var(--blue-2); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:999px; font-weight:600; font-size:15.5px; text-decoration:none; border:1px solid transparent; white-space:nowrap; transition:transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s; cursor:pointer; }
.btn svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg { transform:translateX(3px); }
.btn-blue { background:var(--blue); color:#fff; box-shadow:0 12px 34px rgba(41,90,255,.35); }
.btn-blue:hover { transform:translateY(-2px); background:#3966ff; }
.btn-line { border-color:var(--line); color:var(--ink); background:var(--white); }
.btn-line:hover { border-color:var(--at); }
.dark .btn-line { background:transparent; color:#fff; border-color:rgba(255,255,255,.22); }
.dark .btn-line:hover { border-color:#fff; }
.btn-white { background:#fff; color:#0a0f1f; }
.btn-white:hover { transform:translateY(-2px); }
.arrow-link { display:inline-flex; align-items:center; gap:8px; color:var(--at); font-weight:600; text-decoration:none; }
.arrow-link svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.arrow-link:hover svg { transform:translateX(4px); }
.dark .arrow-link { color:var(--sky); }

/* ================= HEADER + MEGA MENUS ================= */
.hdr { position:sticky; top:env(safe-area-inset-top,0px); z-index:70; transition:box-shadow .35s, border-color .35s, color .35s; border-bottom:1px solid rgba(157,180,255,.1); color:#eef2ff; }
.hdr::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(5,10,28,.55); backdrop-filter:saturate(170%) blur(18px); -webkit-backdrop-filter:saturate(170%) blur(18px); transition:background .35s; }
.hdr.solid { color:var(--ink); border-bottom-color:var(--line); box-shadow:0 10px 30px rgba(10,15,31,.06); }
.hdr.solid::before { background:var(--hdr-bg); backdrop-filter:saturate(200%) blur(22px); -webkit-backdrop-filter:saturate(200%) blur(22px); box-shadow:inset 0 1px 0 var(--hdr-edge), inset 0 -1px 0 var(--glass-line); }
.hdr .wrap { display:flex; align-items:center; gap:24px; height:72px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand svg { width:38px; height:38px; display:block; border-radius:9px; }
.brand b { display:block; font-family:var(--display); font-size:21px; font-weight:700; letter-spacing:-.025em; line-height:1; }
.brand small { display:block; font-size:10.5px; margin-top:4px; opacity:.72; letter-spacing:.01em; }
.menu { display:flex; align-items:center; gap:4px; margin-left:auto; list-style:none; padding:0; margin-block:0; }
.menu > li { position:relative; }
.menu > li > a, .menu > li > button { display:flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:999px; background:none; border:0; color:inherit; font-size:15px; font-weight:500; text-decoration:none; cursor:pointer; opacity:.9; }
.menu > li > a:hover, .menu > li > button:hover, .menu > li > button[aria-expanded="true"] { opacity:1; background:rgba(127,150,230,.14); }
.menu svg.chev { width:12px; height:12px; transition:transform .25s; }
.menu button[aria-expanded="true"] svg.chev { transform:rotate(180deg); }
.hdr-cta { display:flex; align-items:center; gap:10px; margin-left:12px; }
.hdr-cta .btn { height:44px; padding:0 20px; font-size:14.5px; }
.hdr .btn-line { background:transparent; color:inherit; border-color:rgba(127,150,230,.35); }
.hdr .btn-line:hover { border-color:currentColor; }
.tt { width:44px; height:44px; border-radius:12px; border:1px solid rgba(127,150,230,.35); background:transparent; color:inherit; cursor:pointer; display:grid; place-items:center; flex:none; }
.tt svg { width:19px; height:19px; }
.tt .moon { display:none; }
:root[data-theme="dark"] .tt .sun { display:none; } :root[data-theme="dark"] .tt .moon { display:block; }
.burger { display:none; width:44px; height:44px; border-radius:12px; border:1px solid currentColor; border-color:rgba(127,150,230,.35); background:transparent; color:inherit; cursor:pointer; place-items:center; }
.burger svg { width:20px; height:20px; }

.glass { background:var(--menu-bg); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 30px 70px rgba(10,15,31,.12); }
.mega, .drop { opacity:0; visibility:hidden; transition:opacity .25s, transform .35s var(--ease), visibility .25s; color:var(--ink); }
.mega.open, .drop.open { opacity:1; visibility:visible; transform:none; }
/* services: full width */
.mega { position:fixed; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 72px); transform:translateY(-8px); padding-block:22px 26px; border-left:0; border-right:0; border-top:0; border-radius:0 0 28px 28px; }
.mega::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:22px; }
.mega::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:radial-gradient(40% 60% at 78% 20%, var(--glow), transparent 70%), radial-gradient(30% 50% at 12% 100%, var(--glow), transparent 70%); opacity:.7; }
.mega-in { max-width:1240px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
.ms { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:stretch; }
.ms h6 { margin:6px 0 10px 14px; font:600 12px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ms-list { display:grid; gap:4px; align-content:start; }
.ms-item { display:grid; grid-template-columns:44px minmax(0,1fr) 16px; gap:14px; align-items:center; padding:12px 14px; border-radius:18px; text-decoration:none; transition:background .25s, box-shadow .25s; }
.ms-item .mi { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--at); transition:background .25s, color .25s; }
.ms-item .mi svg { width:20px; height:20px; }
.ms-item b { display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-item small { display:block; color:var(--muted); font-size:13.5px; line-height:1.4; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-item .ch { width:16px; height:16px; color:var(--at); opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s; }
.ms-item.cur, .ms-item:hover { background:color-mix(in srgb, var(--blue) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent), 0 10px 26px rgba(41,90,255,.10); }
.ms-item.cur .mi, .ms-item:hover .mi { background:var(--blue); color:#fff; }
.ms-item.cur .ch, .ms-item:hover .ch { opacity:1; transform:none; }
.ms-prev { position:relative; overflow:hidden; border-radius:24px; padding:30px; background:linear-gradient(150deg, #3d6bff, #1638c9); color:#fff; display:flex; flex-direction:column; gap:12px; box-shadow:0 26px 60px rgba(41,90,255,.32); min-height:300px; }
.ms-prev .mp-ghost { position:absolute; right:-22px; bottom:-30px; width:210px; height:210px; color:rgba(255,255,255,.13); pointer-events:none; transform:rotate(-8deg); transition:opacity .2s, transform .5s var(--ease); }
.ms-prev .mp-ghost svg { width:100%; height:100%; stroke-width:1.2; }
.ms-prev.fading .mp-ghost { opacity:0; transform:rotate(-14deg) scale(.94); }
.ms-prev .k { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#dbe4ff; }
.ms-prev h4 { font-family:var(--display); font-size:30px; letter-spacing:-.03em; line-height:1.1; max-width:16ch; }
.ms-prev p { color:rgba(255,255,255,.86); font-size:15.5px; max-width:42ch; }
.ms-prev .pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ms-prev .pills span { font-size:12.5px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); }
.ms-prev .act { display:flex; align-items:center; gap:18px; margin-top:auto; position:relative; z-index:1; }
.ms-prev .act .btn { height:46px; padding:0 22px; background:#fff; color:#0a0f1f; }
.ms-prev .act a.q { color:#fff; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.ms-prev .act a.q svg { width:15px; height:15px; }
.ms-prev .swap { transition:opacity .2s; }
.ms-prev.fading .swap { opacity:0; }
.mega-foot { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; font-size:14.5px; color:var(--muted); }
.mega-foot .btn { height:42px; padding:0 18px; font-size:14px; }
/* compact dropdowns */
.drop { position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%, 8px); width:340px; padding:10px; border-radius:22px; }
.drop.open { transform:translate(-50%, 0); }
.drop::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:18px; }
.drop-item { display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:14px; text-decoration:none; transition:background .2s; }
.drop-item:hover { background:color-mix(in srgb, var(--blue) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent); }
.drop-item .mi { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--at); }
.drop-item:hover .mi { background:var(--blue); color:#fff; }
.drop-item .mi svg { width:18px; height:18px; }
.drop-item b { display:block; font-size:15px; font-weight:600; white-space:nowrap; }
.drop-item small { display:block; color:var(--muted); font-size:13px; line-height:1.35; }
.drop-ind { width:300px; }
.drop-ind a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; text-decoration:none; font-size:14.5px; font-weight:500; white-space:nowrap; }
.drop-ind a:hover { background:color-mix(in srgb, var(--blue) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent); }
.drop-ind a i { width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; }
.drop-ind a.f i { background:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.drop-ind .all { position:relative; margin-top:11px; justify-content:space-between; color:var(--at); font-weight:600; }
.drop-ind .all::before { content:""; position:absolute; left:12px; right:12px; top:-6px; height:1px; background:var(--line); }
.drop-ind .all svg { width:16px; height:16px; flex:none; transition:transform .25s var(--ease); }
.drop-ind .all:hover svg { transform:translateX(3px); }

/* mobile drawer */
.drawer { position:fixed; inset:0; z-index:90; background:var(--night); color:#eef2ff; padding:calc(18px + env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:10px; transform:translateY(-102%); transition:transform .45s var(--ease); overflow-y:auto; }
.drawer.open { transform:none; }
.drawer-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.drawer details { border-bottom:1px solid var(--night-line); }
.drawer summary { list-style:none; cursor:pointer; padding:18px 0; font-family:var(--display); font-size:24px; font-weight:600; display:flex; justify-content:space-between; }
.drawer summary::-webkit-details-marker { display:none; }
.drawer summary::after { content:"+"; color:var(--sky); }
.drawer details[open] summary::after { content:"–"; }
.drawer details a { display:block; padding:10px 0; color:var(--mist); text-decoration:none; font-size:16.5px; }
.drawer > a.top { padding:18px 0; font-family:var(--display); font-size:24px; font-weight:600; text-decoration:none; border-bottom:1px solid var(--night-line); }
.drawer .btn { margin-top:22px; }

/* ================= HERO ================= */
.hero { background:var(--night); color:#eef2ff; position:relative; overflow:hidden; margin-top:-73px; padding-top:73px; isolation:isolate; }
.mesh { position:absolute; inset:-20%; z-index:-1; filter:blur(70px); opacity:.95; }
.mesh i { position:absolute; border-radius:50%; mix-blend-mode:screen; animation:drift 22s ease-in-out infinite alternate; }
.mesh i:nth-child(1) { width:46vw; height:46vw; left:48%; top:6%; background:radial-gradient(circle, rgba(41,90,255,.75), transparent 62%); }
.mesh i:nth-child(2) { width:38vw; height:38vw; left:6%; top:40%; background:radial-gradient(circle, rgba(37,64,180,.6), transparent 62%); animation-duration:28s; }
.mesh i:nth-child(3) { width:30vw; height:30vw; left:70%; top:52%; background:radial-gradient(circle, rgba(110,150,255,.45), transparent 62%); animation-duration:18s; }
@keyframes drift { to { transform:translate(-6vw, 4vw) scale(1.12); } }
.grain { position:absolute; inset:0; z-index:-1; opacity:.07; background-image:repeating-radial-gradient(circle at 0 0, #fff 0 1px, transparent 1px 3px); background-size:3px 3px; mix-blend-mode:overlay; }
.grid-lines { position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(157,180,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(157,180,255,.06) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 80%); -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 80%); }
.hero-in { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center; padding-block:96px 88px; }
.pill { display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 14px; border-radius:999px; background:rgba(127,150,230,.12); border:1px solid rgba(157,180,255,.2); font-size:13.5px; color:var(--mist); }
.pill b { background:var(--blue); color:#fff; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; }
.hero h1 { font-size:clamp(52px, 7.4vw, 104px); letter-spacing:-.05em; line-height:.96; margin-top:26px; }
.hero h1 em.s { letter-spacing:-.05em; }
.hero .lead { margin-top:26px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero-facts { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:44px; color:var(--mist); font-size:14px; }
.hero-facts span { display:inline-flex; align-items:center; gap:8px; }
.hero-facts svg { width:16px; height:16px; color:var(--mint); }

/* operations feed */
.ops { position:relative; border-radius:28px; padding:22px; background:linear-gradient(180deg, rgba(18,29,66,.82), rgba(8,14,36,.82)); border:1px solid rgba(157,180,255,.18); box-shadow:0 50px 120px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.ops-top { display:flex; justify-content:space-between; align-items:center; padding:4px 6px 18px; border-bottom:1px solid var(--night-line); }
.ops-top b { font-family:var(--display); font-size:17px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.live { width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(31,191,134,.6); animation:ping 2s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 10px rgba(31,191,134,0); } 100% { box-shadow:0 0 0 0 rgba(31,191,134,0); } }
.ops-top small { font-size:12px; color:var(--mist); opacity:.8; }
.feed { list-style:none; margin:0; padding:14px 0 6px; display:grid; gap:10px; height:404px; overflow:hidden; position:relative; mask-image:linear-gradient(180deg, #000 80%, transparent); -webkit-mask-image:linear-gradient(180deg, #000 80%, transparent); }
.feed li { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border-radius:18px; background:rgba(127,150,230,.08); border:1px solid rgba(157,180,255,.1); animation:in .7s var(--ease) both; }
@keyframes in { from { opacity:0; transform:translateY(-14px) scale(.98); } }
.feed .fi { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(41,90,255,.22); color:var(--sky); }
.feed .fi svg { width:20px; height:20px; }
.feed b { display:block; font-size:14.5px; font-weight:600; color:#fff; line-height:1.3; }
.feed span.d { display:block; font-size:13px; color:var(--mist); opacity:.85; margin-top:2px; }
.st { font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.st.ok { background:rgba(31,191,134,.16); color:#6ee7b7; }
.st.rv { background:rgba(242,163,58,.16); color:#fcd34d; }
.ops-foot { display:flex; justify-content:space-between; gap:12px; padding:14px 6px 2px; border-top:1px solid var(--night-line); font-size:12.5px; color:var(--mist); }
.ops-foot b { color:#fff; font-weight:600; }
.ops-tag { position:absolute; top:-14px; right:24px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:#fff; color:#0a0f1f; box-shadow:0 10px 24px rgba(0,0,0,.3); }

/* logo marquee */
.logos { background:var(--white); padding-block:52px; border-bottom:1px solid var(--line); }
.logos p { text-align:center; color:var(--muted); font-size:14px; margin-bottom:26px; }
.marq { position:relative; overflow:hidden; contain:paint; } .marq::before, .marq::after { content:""; position:absolute; z-index:1; top:0; bottom:0; width:10%; pointer-events:none; } .marq::before { left:0; background:linear-gradient(90deg, var(--white), transparent); } .marq::after { right:0; background:linear-gradient(270deg, var(--white), transparent); }
.track { display:flex; gap:56px; width:max-content; padding-right:56px; align-items:center; animation:marq 52s linear infinite; will-change:transform; backface-visibility:hidden; }
.marq:hover .track { animation-play-state:paused; }
@keyframes marq { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
.track span { height:62px; display:grid; place-items:center; flex:none; background:var(--logo-bg); padding:var(--logo-pad); border-radius:14px; }
.track img { max-height:46px; max-width:150px; width:auto; height:auto; filter:none; opacity:1; }
.track span.dk { background:#0b0d14; border-radius:12px; padding:6px 14px; }
.track span.dk img { filter:none; opacity:1; }
.track img:hover { filter:none; opacity:1; }

/* ================= BEFORE / AFTER ================= */
.ba { position:relative; border-radius:32px; overflow:hidden; height:560px; background:var(--white); border:1px solid var(--line); box-shadow:0 40px 90px rgba(10,15,31,.10); user-select:none; touch-action:pan-y; }
.ba-side { position:absolute; inset:0; padding:34px; }
.ba-before { background:var(--paper); background-image:radial-gradient(color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1px); background-size:22px 22px; color:var(--ink); }
.ba-after { background:radial-gradient(70% 70% at 70% 30%, var(--night-3), var(--night)); color:#eef2ff; clip-path:inset(0 0 0 var(--split, 50%)); }
.ba-label { position:absolute; top:22px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; border-radius:999px; z-index:3; }
.ba-label.l { left:22px; background:var(--white); color:var(--muted); border:1px solid var(--line); }
.ba-label.r { right:22px; background:var(--blue); color:#fff; }
.bc { position:absolute; background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); padding:16px; font-size:13.5px; filter:saturate(.75); }
.bc h5 { margin:0 0 12px; font:600 13px var(--body); display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--ink); }
.bc h5 small { font-weight:500; color:var(--muted); }
.badge-r { background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; }
.chip-r, .chip-a, .chip-g { font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.chip-r { background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red); }
.chip-a { background:color-mix(in srgb, var(--amber) 18%, transparent); color:#b7791f; }
.chip-g { background:var(--paper); color:var(--muted); }
.b-inbox { left:5%; top:15%; width:270px; transform:rotate(-1.5deg); }
.b-inbox .m { display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line); }
.b-inbox .m i { width:8px; height:8px; border-radius:50%; background:var(--red); }
.b-sheet { left:8%; top:55%; width:320px; transform:rotate(1deg); padding:0; overflow:hidden; }
.b-sheet h5 { padding:14px 16px 0; }
.b-sheet .r { display:grid; grid-template-columns:1.5fr 1fr; gap:10px; align-items:center; padding:9px 16px; border-top:1px solid var(--line); }
.b-tasks { left:47%; top:20%; width:250px; transform:rotate(2deg); }
.b-tasks .t { display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center; padding:8px 0; }
.b-tasks .t span.cb { width:16px; height:16px; border-radius:5px; border:1.5px solid var(--muted); opacity:.6; }
.b-toast { left:52%; top:66%; display:flex; gap:12px; align-items:center; width:250px; transform:rotate(-2deg); border-color:color-mix(in srgb, var(--red) 35%, var(--line)); }
.b-toast .ri { width:36px; height:36px; flex:none; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red); }
.b-toast .ri svg { width:18px; height:18px; }
.b-toast b { display:block; font-size:13.5px; }
.b-toast small { color:var(--muted); font-size:12px; }
.after-in { position:absolute; inset:0 0 0 40%; display:grid; place-items:center; padding-right:2%; }
.sys { position:relative; width:min(600px, 94%); aspect-ratio:16/10; }
.sys svg.wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wires path { fill:none; stroke:rgba(157,180,255,.28); stroke-width:1.5; stroke-dasharray:5 7; animation:dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset:-24; } }
.node { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:16px; background:rgba(18,29,66,.9); border:1px solid rgba(157,180,255,.22); font-size:13.5px; font-weight:500; white-space:nowrap; box-shadow:0 14px 34px rgba(0,0,0,.35); }
.node i { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(31,191,134,.18); }
.core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150px; height:150px; border-radius:38px; display:grid; place-items:center; text-align:center; background:linear-gradient(150deg, #3d6bff, #1638c9); box-shadow:0 0 0 14px rgba(41,90,255,.14), 0 0 90px rgba(41,90,255,.6); font-family:var(--display); }
.core b { display:block; font-size:18px; } .core small { display:block; font-size:12px; opacity:.85; font-family:var(--body); margin-top:2px; }
.core svg { width:30px; height:30px; margin:0 auto 8px; display:block; }
.ba-status { position:absolute; left:70%; bottom:26px; transform:translateX(-50%); display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:max-content; max-width:90%; }
.ba-status span { font-size:12.5px; padding:7px 12px; border-radius:999px; background:rgba(31,191,134,.14); color:#6ee7b7; border:1px solid rgba(31,191,134,.25); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--split, 50%); width:2px; background:#fff; z-index:4; box-shadow:0 0 0 1px rgba(10,15,31,.15); pointer-events:none; }
.ba-handle span { position:absolute; top:50%; left:50%; width:54px; height:54px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(10,15,31,.3); color:var(--at); }
.ba-handle svg { width:24px; height:24px; }
.ba input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0; }
.ba input:focus-visible + .ba-handle span { outline:3px solid var(--blue-2); outline-offset:3px; }
.ba-cap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:14.5px; }

/* ================= SERVICES BENTO ================= */
.bento { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:minmax(0,auto); gap:16px; }
.tile { position:relative; display:flex; flex-direction:column; gap:12px; padding:32px; border-radius:30px; background:var(--paper); text-decoration:none; overflow:hidden; border:1px solid transparent; transition:transform .5s var(--ease), border-color .3s, box-shadow .5s; min-height:340px; }
.tile:hover { transform:translateY(-6px); border-color:rgba(41,90,255,.35); box-shadow:0 30px 70px rgba(41,90,255,.12); }
.tile.t-ai { grid-column:span 4; background:linear-gradient(160deg, var(--night-3), var(--night)); color:#eef2ff; min-height:420px; }
.tile.t-web { grid-column:span 2; min-height:420px; }
.tile.t-mob, .tile.t-site, .tile.t-mkt { grid-column:span 2; }
.tile .lbl { font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--at); }
.tile.t-ai .lbl { color:var(--sky); }
.tile h3 { font-size:clamp(22px, 2vw, 28px); letter-spacing:-.03em; }
.tile p { color:var(--muted); font-size:15.5px; max-width:44ch; }
.tile.t-ai p { color:var(--mist); }
.tile .go { margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:8px; color:var(--at); font-weight:600; font-size:15px; }
.tile.t-ai .go { color:var(--sky); }
.tile .go svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.tile:hover .go svg { transform:translateX(4px); }
.vis { position:relative; margin-top:10px; }
/* AI chat vis */
.chat { position:absolute; right:32px; top:32px; width:min(360px, 46%); display:grid; gap:10px; }
.bub { padding:12px 15px; border-radius:18px; font-size:13.5px; line-height:1.4; max-width:88%; animation:pop .5s var(--ease) both; }
.bub.u { justify-self:end; background:var(--blue); color:#fff; border-bottom-right-radius:6px; }
.bub.a { background:rgba(127,150,230,.14); border:1px solid rgba(157,180,255,.18); color:#eef2ff; border-bottom-left-radius:6px; }
.bub.a small { display:block; color:var(--sky); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.typing { display:inline-flex; gap:4px; padding:14px 16px; border-radius:18px; background:rgba(127,150,230,.14); width:max-content; }
.typing i { width:6px; height:6px; border-radius:50%; background:var(--sky); animation:blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay:.2s; } .typing i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 50% { opacity:.25; transform:translateY(-2px); } }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.97); } }
.t-ai .copy { max-width:48%; display:flex; flex-direction:column; gap:12px; height:100%; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.chips span { font-size:12.5px; padding:6px 11px; border-radius:999px; background:rgba(127,150,230,.12); border:1px solid rgba(157,180,255,.16); color:var(--mist); }
/* shared mini-interfaces in the bottom tiles */
.mini { margin-top:auto; position:relative; height:176px; border-radius:18px; border:1px solid var(--line); background:var(--white); padding:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.mini.tall { height:210px; }
.tile .go { margin-top:18px; padding-top:0; }
.tile.t-ai .go { margin-top:auto; padding-top:16px; }
.mini-top { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.mini-top i { width:8px; height:8px; border-radius:50%; background:var(--line); }
.mini-top span { margin-left:8px; font-size:11px; color:var(--muted); background:var(--paper); padding:3px 10px; border-radius:999px; }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.kpis span { padding:8px 10px; border-radius:12px; background:var(--paper); }
.kpis small { display:block; font-size:10.5px; color:var(--muted); }
.kpis b { font-size:12.5px; color:var(--mint); }
.bars { display:flex; align-items:flex-end; gap:8px; height:84px; }
.bars i { flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, var(--blue-2), var(--blue)); transform-origin:bottom; animation:grow 2.8s var(--ease) infinite alternate; }
.bars i:nth-child(odd) { background:color-mix(in srgb, var(--blue) 22%, var(--white)); }
@keyframes grow { from { transform:scaleY(.35); } }
.phone-mini { position:absolute; left:50%; top:16px; transform:translateX(-50%); width:190px; height:240px; border-radius:28px; border:6px solid var(--ink); background:var(--paper); padding:30px 10px 10px; display:grid; gap:8px; align-content:start; transition:transform .6s var(--ease); }
.tile:hover .phone-mini { transform:translate(-50%, -6px); }
.phone-mini .notch { position:absolute; top:7px; left:50%; transform:translateX(-50%); width:56px; height:14px; border-radius:10px; background:var(--ink); }
.pn { display:flex; gap:9px; align-items:center; padding:9px 10px; border-radius:13px; background:var(--white); box-shadow:0 6px 16px rgba(10,15,31,.1); font-size:10.5px; line-height:1.3; color:var(--muted); animation:pop .6s var(--ease) both; }
.pn i { width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--blue); color:#fff; }
.pn i svg { width:14px; height:14px; }
.pn b { display:block; font-size:11px; color:var(--ink); }
.site { display:grid; gap:10px; }
.site-nav { display:flex; align-items:center; gap:8px; } .site-nav i { width:16px; height:16px; border-radius:5px; background:var(--blue); } .site-nav span { width:30px; height:6px; border-radius:3px; background:var(--paper); } .site-nav span:first-of-type { margin-left:auto; }
.site-hero { display:grid; gap:7px; padding:12px; border-radius:12px; background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, var(--white)), var(--white)); }
.site-hero .h { height:12px; width:72%; border-radius:6px; background:var(--ink); opacity:.85; } .site-hero .h2 { height:7px; width:50%; border-radius:4px; background:var(--muted); opacity:.5; }
.cta-b { justify-self:start; margin-top:3px; font-size:10px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--blue); color:#fff; }
.site .tags { display:flex; gap:6px; flex-wrap:wrap; } .site .tags span { font-size:10.5px; padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--mint) 14%, transparent); color:var(--mint); font-weight:600; }
.legend { display:flex; gap:14px; font-size:11px; color:var(--muted); margin-bottom:6px; } .legend span { display:flex; align-items:center; gap:6px; } .legend i { width:8px; height:8px; border-radius:50%; }
.line-ch { width:100%; height:118px; display:block; }
.line-ch path.l { fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; }
.line-ch path.l2 { fill:none; stroke:var(--sky); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; }
.line-ch path.a { fill:url(#lg); opacity:0; transition:opacity .8s .6s; }
.in-view .line-ch path.l, .in-view .line-ch path.l2 { animation:draw 2s var(--ease) forwards; }
.in-view .line-ch path.l2 { animation-delay:.3s; }
.in-view .line-ch path.a { opacity:1; }
@keyframes draw { to { stroke-dashoffset:0; } }

/* ================= PROCESS ================= */
.journey { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; padding-top:40px; }
.rail { position:absolute; left:0; right:0; top:0; height:2px; background:var(--night-line); border-radius:2px; }
.rail i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, var(--blue), var(--sky)); border-radius:2px; transition:width 1.8s var(--ease); box-shadow:0 0 18px rgba(91,130,255,.7); }
.in-view .rail i { width:100%; }
.step { position:relative; display:grid; gap:14px; align-content:start; }
.step::before { content:""; position:absolute; top:-47px; left:0; width:16px; height:16px; border-radius:50%; background:var(--night); border:2px solid var(--sky); box-shadow:0 0 0 6px rgba(91,130,255,.12); }
.num { font-family:var(--display); font-size:88px; font-weight:700; line-height:.9; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(169,188,255,.45); }
.step h3 { font-size:24px; color:#fff; }
.step p { color:var(--mist); font-size:15.5px; }
.step ul { list-style:none; padding:0; margin:4px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.step li { font-size:12.5px; padding:6px 11px; border-radius:999px; background:rgba(127,150,230,.12); border:1px solid rgba(157,180,255,.16); color:var(--mist); }
.promise { margin-top:64px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.promise div { padding:22px 24px; border-radius:20px; background:rgba(127,150,230,.07); border:1px solid var(--night-line); display:flex; gap:14px; align-items:flex-start; }
.promise svg { width:22px; height:22px; color:var(--mint); flex:none; margin-top:2px; }
.promise b { display:block; color:#fff; font-size:15.5px; }
.promise span { color:var(--mist); font-size:14px; }

/* ================= WORK ================= */
.works { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
.work { grid-column:span 6; position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:30px; overflow:hidden; background:var(--white); border:1px solid var(--line); text-decoration:none; transition:transform .5s var(--ease), box-shadow .5s, border-color .3s; }
.work:nth-child(1), .work:nth-child(4) { grid-column:span 7; }
.work:nth-child(2), .work:nth-child(3) { grid-column:span 5; }
.work:hover { transform:translateY(-6px); box-shadow:0 34px 80px rgba(10,15,31,.12); border-color:rgba(41,90,255,.3); }
.work-art { height:220px; display:grid; place-items:center; position:relative; background:var(--plate); border-bottom:1px solid var(--line); overflow:hidden; }
.work-art::before { content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 120%, rgba(41,90,255,.10), transparent 70%); transition:opacity .5s; opacity:.6; }
.work:hover .work-art::before { opacity:1; }
.work-art img { position:relative; max-height:78px; max-width:240px; width:auto; height:auto; transition:transform .7s var(--ease); }
.work:hover .work-art img { transform:scale(1.06); }
.work-art.dk { background:#0b0d14; }
.work-b { padding:26px 28px 28px; display:grid; gap:10px; align-content:start; }
.work-m { display:flex; gap:8px; flex-wrap:wrap; }
.work-m span { font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--muted); }
.work-m span.c { background:rgba(41,90,255,.09); color:var(--at); }
.work h3 { font-size:24px; }
.work p { color:var(--muted); font-size:15.5px; }
.work .circ { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--white); border:1px solid var(--line); color:var(--ink); transition:background .3s, color .3s, transform .4s var(--ease); z-index:2; }
.work .circ svg { width:18px; height:18px; }
.work:hover .circ { background:var(--blue); color:#fff; border-color:var(--at); transform:rotate(-45deg); }

/* ================= MODELS ================= */
.models { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
.model { position:relative; display:flex; flex-direction:column; gap:14px; padding:34px 32px 32px; border-radius:30px; background:var(--white); border:1px solid var(--line); transition:transform .5s var(--ease), box-shadow .5s; }
.model:hover { transform:translateY(-5px); box-shadow:0 30px 70px rgba(10,15,31,.10); }
.model.hot { background:linear-gradient(165deg, var(--night-3), var(--night)); color:#eef2ff; border-color:transparent; box-shadow:0 40px 90px rgba(41,90,255,.25); }
.model .ic { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:rgba(41,90,255,.09); color:var(--at); }
.model.hot .ic { background:rgba(127,150,230,.16); color:var(--sky); }
.model .ic svg { width:24px; height:24px; }
.model h3 { font-size:26px; }
.model .best { color:var(--muted); font-size:15.5px; }
.model.hot .best { color:var(--mist); }
.model ul { list-style:none; padding:0; margin:6px 0 10px; display:grid; gap:11px; }
.model li { display:flex; gap:11px; font-size:15px; }
.model li svg { width:18px; height:18px; color:var(--at); flex:none; margin-top:3px; }
.model.hot li svg { color:var(--sky); }
.model .arrow-link { margin-top:auto; }
.model .flag { position:absolute; top:22px; right:22px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:var(--blue); color:#fff; }
.price { margin-top:18px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px 28px; padding:24px 26px 24px 30px; border-radius:24px; background:var(--paper); border:1px solid var(--line); }
.price-l { display:flex; gap:18px; align-items:center; }
.price-l .big { color:var(--at); font-family:var(--display); font-size:clamp(28px, 3vw, 38px); font-weight:600; letter-spacing:-.03em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.price-l p { color:var(--muted); font-size:15px; max-width:44ch; }

/* ================= TRUST ================= */
.trust { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.trust .tslider { padding:52px 56px; }
.tslider { cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.tslider.dragging { cursor:grabbing; }
.tslider.dragging .ts-slide.on { will-change:transform; }
.tslider img, .tslider button { -webkit-user-drag:none; }
.trust .tslider:focus-visible { outline:3px solid var(--blue-2); outline-offset:4px; }
.trust .ts-slide blockquote { font-size:clamp(22px, 2.3vw, 30px); max-width:44ch; }
.trust .ts-slide { align-items:center; text-align:center; gap:22px; }
.trust .ts-type { align-self:center; }
.trust .ts-qm { margin:0 auto; }
.trust .ts-slide blockquote { margin:0 auto; max-width:46ch; }
.trust .ts-video { width:min(100%, 820px); margin:0 auto; }
.trust .ts-video .vc-art { aspect-ratio:16 / 9; }
.trust .ts-who { flex-direction:column; justify-content:center; gap:12px; margin-top:4px; }
.trust .ts-who .av { width:64px; height:64px; font-size:20px; box-shadow:0 12px 30px rgba(41,90,255,.4); }
.trust .ts-who b { font-size:20px; }
.trust .ts-who span span { display:block; margin-top:2px; }
.trust .ts-nav { justify-content:center; }
.trust .ts-prog { margin-left:18px; }
@media (max-width:620px) { .trust .tslider { padding:28px 22px 22px; } }
.quote { margin:0; padding:48px; border-radius:32px; background:linear-gradient(170deg, var(--night-3), var(--night-2)); border:1px solid var(--night-line); display:flex; flex-direction:column; gap:34px; position:relative; overflow:hidden; }
.quote::after { content:"“"; position:absolute; right:26px; top:-30px; font-family:var(--display); font-weight:700; font-size:240px; line-height:1; color:rgba(91,130,255,.18); }
.quote blockquote { margin:0; position:relative; font-family:var(--display); font-weight:500; font-size:clamp(21px, 2.1vw, 27px); line-height:1.45; letter-spacing:-.02em; color:#fff; }
.quote figcaption { display:flex; align-items:center; gap:14px; margin-top:auto; position:relative; }
.av { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,#4a75ff,#1a3fd0); color:#fff; font-family:var(--display); font-weight:600; font-size:18px; }
.quote figcaption b { display:block; font-family:var(--display); font-size:18px; color:#fff; }
.quote figcaption span { color:var(--mist); font-size:14px; }
.vid { border-radius:32px; overflow:hidden; position:relative; background:linear-gradient(150deg, #3a68ff, #12309f); display:flex; flex-direction:column; justify-content:flex-end; padding:32px; min-height:340px; color:#fff; text-decoration:none; }
.vid::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px); }
.vid .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); width:86px; height:86px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .4s var(--ease); }
.vid:hover .play { transform:translate(-50%,-60%) scale(1.08); }
.vid .play svg { width:28px; height:28px; margin-left:5px; fill:#fff; }
.vid b { position:relative; font-family:var(--display); font-size:22px; }
.vid span { position:relative; font-size:14px; opacity:.85; }
.nums { border-radius:32px; padding:34px; background:linear-gradient(150deg, #3a68ff, #12309f); color:#fff; display:flex; flex-direction:column; gap:26px; position:relative; overflow:hidden; min-height:340px; }
.nums::after { content:"!"; position:absolute; right:-10px; bottom:-90px; font-family:var(--display); font-weight:700; font-size:300px; line-height:1; color:rgba(255,255,255,.08); }
.ng { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; margin-top:auto; }
.ng b { display:block; font-family:var(--display); font-size:clamp(40px, 4.4vw, 56px); font-weight:600; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.ng span { display:block; margin-top:8px; font-size:14px; color:rgba(255,255,255,.8); }
.reasons { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.reason { padding:26px; border-radius:24px; background:rgba(127,150,230,.07); border:1px solid var(--night-line); display:grid; gap:10px; align-content:start; }
.reason .ic { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(41,90,255,.2); color:var(--sky); }
.reason .ic svg { width:21px; height:21px; }
.reason b { font-family:var(--display); font-size:18px; color:#fff; letter-spacing:-.01em; }
.reason p { color:var(--mist); font-size:14.5px; }
.cert-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.cert-row span { font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:7px; background:rgba(127,150,230,.16); color:var(--sky); }

/* ================= INDUSTRIES ================= */
.ind-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; }
.indc { display:flex; flex-direction:column; gap:12px; padding:26px 24px; border-radius:26px; background:var(--white); border:1px solid var(--line); text-decoration:none; transition:transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.indc:hover { transform:translateY(-6px); border-color:rgba(41,90,255,.4); box-shadow:0 26px 60px rgba(41,90,255,.12); }
.indc .ii { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--blue); color:#fff; }
.indc .ii svg { width:21px; height:21px; }
.indc b { font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.indc p { color:var(--muted); font-size:14.5px; line-height:1.5; }
.indc .use { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; font-weight:500; color:var(--at); }
.also { margin-top:24px; color:var(--muted); font-size:15px; text-align:center; }

/* ================= FAQ ================= */
.faq { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:start; }
.faq .sec-head { margin:0; position:sticky; top:110px; }
.qa details { border-bottom:1px solid var(--line); }
.qa details:first-child { border-top:1px solid var(--line); }
.qa summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 4px; font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary .pm { width:36px; height:36px; flex:none; border-radius:50%; background:var(--paper); position:relative; transition:background .3s, transform .4s var(--ease); }
.qa summary .pm::before, .qa summary .pm::after { content:""; position:absolute; left:11px; right:11px; top:17px; height:2px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease), background .3s; }
.qa summary .pm::after { transform:rotate(90deg); }
.qa details[open] .pm { background:var(--blue); transform:rotate(180deg); }
.qa details[open] .pm::before, .qa details[open] .pm::after { background:#fff; }
.qa details[open] .pm::after { transform:rotate(0); }
.qa p { padding:0 4px 26px; color:var(--muted); max-width:64ch; }

/* ================= LET'S TALK ================= */
.talk { background:var(--blue); color:#fff; position:relative; overflow:hidden; isolation:isolate; padding-block:130px; }
.talk::before { content:"!"; position:absolute; z-index:-1; right:4%; top:50%; transform:translateY(-50%); font-family:var(--display); font-weight:700; font-size:clamp(380px, 46vw, 720px); line-height:.8; color:rgba(255,255,255,.09); }
.talk::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(60% 80% at 10% 100%, rgba(5,10,28,.45), transparent 70%); }
.talk-in { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px; align-items:center; }
.talk h2 { font-size:clamp(44px, 6.2vw, 86px); letter-spacing:-.05em; line-height:.98; }
.talk h2 em.s { background:none; color:#dbe4ff; }
.talk .lead { color:rgba(255,255,255,.85); margin-top:22px; }
.talk-card { padding:28px; border-radius:26px; background:rgba(5,10,28,.28); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; gap:16px; }
.talk-card .row { display:flex; gap:12px; align-items:center; font-size:15px; }
.talk-card .row svg { width:20px; height:20px; flex:none; opacity:.9; }
.mail-copy { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px 12px 18px; border-radius:16px; background:rgba(255,255,255,.12); font-weight:600; }
.mail-copy span { user-select:all; }
.mail-copy button { border:0; border-radius:10px; padding:8px 12px; background:#fff; color:var(--at); font-weight:600; font-size:13px; cursor:pointer; }

/* ================= FOOTER ================= */
.ftr { background:var(--night); color:var(--mist); padding-block:84px 40px; }
.ftr-top { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.75fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.15fr); gap:40px; padding-bottom:56px; border-bottom:1px solid var(--night-line); }
.ftr .brand { color:#fff; }
.ftr-about p { margin-top:18px; font-size:14.5px; max-width:34ch; }
.ftr h4 { font-family:var(--body); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:18px; }
.ftr ul { list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:14.5px; }
.ftr ul a { text-decoration:none; transition:color .2s; }
.ftr ul a:hover { color:#fff; }
.ftr-contact b { color:#fff; font-weight:600; }
.ftr-contact p { font-size:14.5px; display:grid; gap:4px; margin-bottom:16px; }
.ftr-bot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 28px; padding-top:28px; font-size:13.5px; }
.ftr-bot nav { display:flex; gap:22px; }
.ftr-bot a { text-decoration:none; } .ftr-bot a:hover { color:#fff; }
.concept { color:var(--sky); }


/* ================= AI EXPLORER ================= */
.aix { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:start; }
.aix-tabs { display:grid; gap:6px; }
.aix-tab { all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center; padding:14px 16px; border-radius:18px; border:1px solid transparent; transition:background .25s, border-color .25s; }
.aix-tab:hover { background:rgba(127,150,230,.07); }
.aix-tab[aria-selected="true"] { background:rgba(16,26,60,.6); border-color:rgba(157,180,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.aix-tab:focus-visible { outline:3px solid var(--blue-2); outline-offset:2px; }
.ai-ic { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(41,90,255,.2); color:var(--sky); transition:background .25s, color .25s; flex:none; }
.ai-ic svg { width:20px; height:20px; }
.aix-tab[aria-selected="true"] .ai-ic { background:var(--blue); color:#fff; }
.aix-tab b { display:block; font-size:16px; font-weight:600; color:#fff; white-space:nowrap; }
.aix-tab small { display:block; color:var(--mist); font-size:13.5px; line-height:1.4; margin-top:2px; }
.aix-panel { position:sticky; top:100px; border-radius:30px; padding:30px; background:rgba(16,26,60,.55); border:1px solid rgba(157,180,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); }
.aix-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.aix-top b { font-family:var(--display); font-size:22px; letter-spacing:-.02em; color:#fff; }
.ex-tag { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:rgba(127,150,230,.16); color:var(--sky); white-space:nowrap; }
.aix-steps { list-style:none; margin:0; padding:0; display:grid; }
.aix-steps li { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; align-items:start; padding-bottom:20px; animation:in .5s var(--ease) both; }
.aix-steps li:nth-child(2) { animation-delay:.08s; } .aix-steps li:nth-child(3) { animation-delay:.16s; } .aix-steps li:nth-child(4) { animation-delay:.24s; }
.aix-steps li:not(:last-child)::before { content:""; position:absolute; left:20px; top:44px; bottom:2px; width:2px; background:rgba(157,180,255,.18); }
.aix-steps .n { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:15px; background:rgba(127,150,230,.12); border:1px solid rgba(157,180,255,.2); color:var(--sky); }
.aix-steps li.ai .n { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 0 24px rgba(41,90,255,.5); }
.aix-steps li.person .n { background:transparent; border-style:dashed; }
.aix-steps b { display:block; color:#fff; font-size:15.5px; font-weight:600; margin-top:2px; }
.aix-steps span.d { display:block; color:var(--mist); font-size:14.5px; }
.who-tag { font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; margin-top:4px; white-space:nowrap; }
.who-tag.ai { background:rgba(41,90,255,.22); color:var(--sky); }
.who-tag.person { background:rgba(242,163,58,.16); color:#fcd34d; }
.aix-foot { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding-top:18px; border-top:1px solid rgba(157,180,255,.14); }
.aix-foot div { font-size:12.5px; color:var(--mist); }
.aix-foot strong { display:block; color:#fff; font-size:14px; font-weight:600; margin-top:2px; }

/* ================= RESPONSIBLE AI ================= */
.resp { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; }
.resp-copy { display:grid; gap:20px; }
.resp-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.rp { padding:22px; border-radius:22px; display:grid; gap:8px; align-content:start; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 16px 40px rgba(41,90,255,.07); }
.rp .ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--blue); color:#fff; }
.rp .ic svg { width:20px; height:20px; }
.rp b { font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.01em; }
.rp p { color:var(--muted); font-size:14.5px; }
.perm { border-radius:30px; padding:28px; background:linear-gradient(165deg, var(--night-3), var(--night)); color:#eef2ff; box-shadow:0 40px 90px rgba(10,15,31,.25); display:grid; gap:6px; }
.perm-top { display:flex; gap:14px; align-items:center; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid rgba(157,180,255,.14); }
.perm-top b { display:block; font-family:var(--display); font-size:19px; color:#fff; }
.perm-top small { color:var(--mist); font-size:13px; }
.sw { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px 4px; cursor:pointer; position:relative; }
.sw b { display:block; font-size:15px; font-weight:600; color:#fff; }
.sw small { display:block; font-size:12.5px; color:var(--mist); }
.sw input { position:absolute; opacity:0; width:1px; height:1px; }
.sw i { width:46px; height:26px; border-radius:999px; background:rgba(127,150,230,.25); position:relative; transition:background .25s; }
.sw i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .3s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.3); }
.sw input:checked + i { background:var(--blue); }
.sw input:checked + i::after { transform:translateX(20px); }
.sw input:focus-visible + i { outline:3px solid var(--blue-2); outline-offset:2px; }
.sw em { order:-1; grid-column:2; font-style:normal; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:rgba(242,163,58,.16); color:#fcd34d; white-space:nowrap; }
.sw input:checked ~ em { background:rgba(31,191,134,.16); color:#6ee7b7; }
.sw em { grid-row:1; } .sw i { grid-column:3; grid-row:1; } .sw > span { grid-column:1; grid-row:1; }
.perm-note { margin-top:8px; padding:12px 14px; border-radius:14px; background:rgba(127,150,230,.1); font-size:13.5px; color:var(--mist); }

/* ================= COMPARISON ================= */
.cmp { border-radius:30px; overflow:hidden; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 24px 60px rgba(41,90,255,.08); }
.cmp-scroll { overflow-x:auto; }
.cmp table { width:100%; min-width:760px; border-collapse:collapse; font-size:15px; }
.cmp th, .cmp td { padding:18px 22px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:0; }
.cmp thead th { font-family:var(--display); font-size:17px; font-weight:600; color:var(--ink); }
.cmp thead th.us { display:flex; align-items:center; gap:10px; color:var(--at); }
.cmp thead th.us svg { width:28px; height:28px; border-radius:7px; }
.cmp tbody th { font-weight:500; color:var(--ink); width:34%; }
.cmp td { color:var(--muted); }
.cmp td.us, .cmp th.us { background:color-mix(in srgb, var(--blue) 7%, transparent); }
.cmp td.us { color:var(--ink); font-weight:600; }
.cmp-y { display:inline-flex; vertical-align:-3px; margin-right:8px; width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center; background:color-mix(in srgb, var(--mint) 16%, transparent); color:var(--mint); }
.cmp-y svg { width:13px; height:13px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ================= INSIGHTS ================= */
.posts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.post { display:flex; flex-direction:column; border-radius:28px; overflow:hidden; text-decoration:none; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08); transition:transform .5s var(--ease), box-shadow .5s; }
.post:hover { transform:translateY(-6px); box-shadow:var(--glass-hi), 0 0 0 1px rgba(41,90,255,.35), 0 30px 70px rgba(41,90,255,.16); }
.post-art { height:150px; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(150deg, #3d6bff, #1638c9); }
.post-art::after { content:"!"; position:absolute; right:14px; bottom:-60px; font-family:var(--display); font-weight:700; font-size:200px; line-height:1; color:rgba(255,255,255,.10); }
.post:nth-child(2) .post-art { background:linear-gradient(150deg, var(--night-3), var(--night)); }
.post:nth-child(3) .post-art { background:linear-gradient(150deg, #5b82ff, #2a4fd6); }
.pa-ic { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; transition:transform .5s var(--ease); }
.post:hover .pa-ic { transform:scale(1.08) rotate(-4deg); }
.pa-ic svg { width:28px; height:28px; }
.post-b { display:flex; flex-direction:column; gap:10px; padding:24px 26px 26px; flex:1; }
.post-k { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--at); }
.post-b b { font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.post-p { color:var(--muted); font-size:15px; }
.post-go { margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:8px; color:var(--at); font-weight:600; font-size:15px; }
.post-go svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.post:hover .post-go svg { transform:translateX(4px); }

@media (max-width:1120px) { .aix { grid-template-columns:1fr; } .aix-panel { position:static; } .resp { grid-template-columns:1fr; gap:40px; } }
@media (max-width:900px) { .posts { grid-template-columns:1fr; } .aix-foot { grid-template-columns:1fr; } }
@media (max-width:620px) { .resp-grid { grid-template-columns:1fr; } .aix-tab b { white-space:normal; } .aix-panel, .perm { padding:22px; } .aix-steps li { grid-template-columns:42px minmax(0,1fr); } .who-tag { grid-column:2; justify-self:start; margin-top:0; } }


/* ================= RESPONSIBLE AI: lanes ================= */
.lanes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.lane { --c:var(--mint); border-radius:28px; padding:26px; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08); position:relative; overflow:hidden; }
.lane::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--c); }
.lane.ask { --c:var(--amber); } .lane.no { --c:var(--red); }
.lane-h { display:flex; gap:14px; align-items:center; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.lane-dot { width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent); flex:none; animation:ping2 2.6s infinite; }
@keyframes ping2 { 50% { box-shadow:0 0 0 10px color-mix(in srgb, var(--c) 6%, transparent); } }
.lane-h b { display:block; font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.02em; }
.lane-h small { color:var(--muted); font-size:13.5px; }
.lane ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.lane li { display:flex; gap:12px; align-items:center; padding:11px 4px; font-size:15px; border-radius:12px; }
.li-ic { width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.li-ic svg { width:16px; height:16px; }
.js .lane.rv li { opacity:0; transform:translateX(-10px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(.25s + var(--k) * .09s); }
.js .lane.rv.in li { opacity:1; transform:none; }
.promises { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
.promises span { display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:999px; font-size:14.5px; font-weight:500; background:var(--glass-bg); border:1px solid var(--glass-line); box-shadow:0 0 0 1px var(--glass-ring); }
.promises i { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--blue); color:#fff; }
.promises i svg { width:15px; height:15px; }

/* ================= PROCESS: scroll-driven journey ================= */
.journey2 { --p:0; position:relative; padding-top:54px; }
.track2 { position:absolute; left:0; right:0; top:14px; height:3px; border-radius:3px; background:rgba(157,180,255,.14); }
.track2 .fill { position:absolute; inset:0 auto 0 0; width:calc(var(--p) * 100%); border-radius:3px; background:linear-gradient(90deg, var(--blue), var(--sky)); box-shadow:0 0 22px rgba(91,130,255,.8); }
.track2 .spark { position:absolute; top:50%; left:calc(var(--p) * 100%); width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(91,130,255,.35), 0 0 30px 8px rgba(91,130,255,.8); opacity:calc(min(var(--p) * 20, 1)); }
.stages { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.stage { position:relative; display:flex; flex-direction:column; gap:14px; padding:26px 24px 24px; border-radius:26px; background:rgba(16,26,60,.45); border:1px solid rgba(157,180,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); opacity:.55; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .5s, box-shadow .6s, background .6s; }
.stage::before { content:""; position:absolute; top:-47px; left:26px; width:14px; height:14px; border-radius:50%; background:var(--night); border:2px solid rgba(157,180,255,.35); transition:border-color .4s, background .4s, box-shadow .4s; }
.stage.on { opacity:1; transform:none; border-color:rgba(157,180,255,.32); background:rgba(18,30,72,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(91,130,255,.18); }
.stage.on::before { border-color:#fff; background:var(--blue); box-shadow:0 0 0 6px rgba(91,130,255,.25), 0 0 18px rgba(91,130,255,.9); }
.st-top { display:flex; justify-content:space-between; align-items:center; }
.st-ic { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:rgba(127,150,230,.14); color:var(--sky); transition:background .5s, color .5s, transform .6s var(--ease); }
.st-ic svg { width:22px; height:22px; }
.stage.on .st-ic { background:var(--blue); color:#fff; transform:rotate(-6deg) scale(1.05); box-shadow:0 12px 30px rgba(41,90,255,.5); }
.st-n { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sky); }
.stage h3 { font-size:24px; color:#fff; }
.stage > p { color:var(--mist); font-size:15px; }
.st-get small, .st-part small { display:block; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sky); margin-bottom:8px; }
.st-get ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.st-get li { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:#eef2ff; opacity:.35; transform:translateX(-6px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(.15s + var(--k) * .1s); }
.st-get li svg { width:16px; height:16px; color:var(--mint); flex:none; margin-top:3px; }
.stage.on .st-get li { opacity:1; transform:none; }
.st-part { margin-top:auto; display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; background:rgba(127,150,230,.08); border:1px dashed rgba(157,180,255,.22); font-size:14px; color:#eef2ff; }
.st-part .pi { width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(242,163,58,.16); color:#fcd34d; }
.st-part .pi svg { width:15px; height:15px; }

/* ================= VIDEO TESTIMONIALS ================= */
.vids { grid-column:1 / -1; margin-top:6px; }
.vids-h { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 20px; margin:10px 2px 16px; }
.vids-h b { font-family:var(--display); font-size:22px; color:#fff; letter-spacing:-.02em; }
.vids-h small { color:var(--mist); font-size:13.5px; }
.vgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.vcard { all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; border-radius:26px; overflow:hidden; background:rgba(127,150,230,.07); border:1px solid var(--night-line); transition:transform .5s var(--ease), box-shadow .5s, border-color .3s; }
.vcard:hover { transform:translateY(-6px); border-color:rgba(157,180,255,.35); box-shadow:0 30px 70px rgba(0,0,0,.4); }
.vcard:focus-visible { outline:3px solid var(--blue-2); outline-offset:3px; }
.vc-art { position:relative; aspect-ratio:16 / 10; display:grid; place-items:center; overflow:hidden; }
.vc-art::before { content:""; position:absolute; inset:-30%; background:conic-gradient(from 0deg, #2a54f0, #12309f, #5b82ff, #2a54f0); animation:spin 14s linear infinite; opacity:.9; }
.vc-art.v1::before { background:conic-gradient(from 90deg, #0f1d4d, #295aff, #0a1330, #0f1d4d); }
.vc-art.v2::before { background:conic-gradient(from 180deg, #3d6bff, #1fbf86, #12309f, #3d6bff); }
@keyframes spin { to { transform:rotate(360deg); } }
.vc-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(5,10,28,.6)); }
.vc-play { position:relative; z-index:1; width:70px; height:70px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .4s var(--ease), background .3s; }
.vcard:hover .vc-play { transform:scale(1.1); background:rgba(255,255,255,.3); }
.vc-play svg { width:24px; height:24px; margin-left:4px; fill:#fff; }
.vc-time { position:absolute; z-index:1; right:14px; bottom:12px; font-size:12px; font-weight:600; padding:4px 8px; border-radius:8px; background:rgba(5,10,28,.6); color:#fff; font-variant-numeric:tabular-nums; }
.vc-b { padding:16px 18px 18px; display:grid; gap:3px; }
.vc-b b { color:#fff; font-size:16px; font-weight:600; }
.vc-b small { color:var(--mist); font-size:13px; }
.vmodal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:max(20px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(20px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); background:rgba(3,6,18,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:fadeIn .3s ease; }
.vmodal[hidden] { display:none; }
@keyframes fadeIn { from { opacity:0; } }
.vm-box { position:relative; width:min(960px, 100%); border-radius:24px; overflow:hidden; background:#000; box-shadow:0 40px 120px rgba(0,0,0,.6); animation:popIn .45s var(--ease); }
@keyframes popIn { from { transform:scale(.94); opacity:0; } }
.vm-box canvas { display:block; width:100%; height:auto; aspect-ratio:16 / 9; }
.vm-x { position:absolute; top:12px; right:12px; z-index:2; width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; cursor:pointer; }
.vm-x svg { width:18px; height:18px; }
.vm-bar { display:flex; align-items:center; gap:14px; padding:12px 16px; background:#0a0f22; color:#fff; }
.vm-bar button { width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; cursor:pointer; }
.vm-bar button svg { width:16px; height:16px; } .vm-bar .i-play { display:none; } .vm-bar.paused .i-play { display:block; } .vm-bar.paused .i-pause { display:none; }
.vm-prog { flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.18); overflow:hidden; } .vm-prog i { display:block; height:100%; width:0; background:var(--blue-2); }
.vm-t { font-size:13px; font-variant-numeric:tabular-nums; color:var(--mist); }
.vm-tag { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:rgba(242,163,58,.18); color:#fcd34d; }

/* footer: one-line service names on wide screens */
@media (min-width:1121px) { .ftr-svc a { white-space:nowrap; } }

@media (max-width:1120px) { .stages { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:16px; } .track2 { display:none; } .stage::before { display:none; } .journey2 { padding-top:0; } }
@media (max-width:900px) { .lanes, .vgrid { grid-template-columns:1fr; } }
@media (max-width:620px) {
  .stages { grid-template-columns:1fr; padding-left:28px; position:relative; }
  .journey2 .track2 { display:block; left:7px; right:auto; top:0; bottom:0; width:3px; height:auto; }
  .journey2 .track2 .fill { width:100%; height:calc(var(--p) * 100%); inset:0 0 auto 0; background:linear-gradient(180deg, var(--blue), var(--sky)); }
  .journey2 .track2 .spark { left:50%; top:calc(var(--p) * 100%); margin:-9px 0 0 -9px; }
}
@media (prefers-reduced-motion: reduce) { .stage, .stage.on, .st-get li, .js .lane.rv li { opacity:1 !important; transform:none !important; } .vc-art::before { animation:none; } }


/* ================= SELECTED WORK (premium) ================= */
.wk2 { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.wk-feat, .wk-row, .wk-all { --mx:50%; --my:50%; position:relative; text-decoration:none; color:var(--ink); border-radius:30px; overflow:hidden; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 24px 60px rgba(41,90,255,.08); transition:transform .55s var(--ease), box-shadow .55s; isolation:isolate; }
.wk-feat::after, .wk-row::after, .wk-all::after { content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s; background:radial-gradient(380px circle at var(--mx) var(--my), color-mix(in srgb, var(--blue) 18%, transparent), transparent 60%); }
.wk-feat:hover::after, .wk-row:hover::after, .wk-all:hover::after { opacity:1; }
.wk-feat:hover, .wk-row:hover, .wk-all:hover { transform:translateY(-6px); box-shadow:var(--glass-hi), 0 0 0 1px rgba(41,90,255,.35), 0 34px 80px rgba(41,90,255,.18); }
.wk-feat { display:flex; flex-direction:column; }
.wk-art { position:relative; display:grid; place-items:center; padding:44px 40px 0; overflow:hidden; min-height:340px; }
.wk-art.t0 { background:radial-gradient(80% 90% at 70% 0%, #3d6bff, #12309f 60%, #0a1330); }
.wk-art::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:40px 40px; mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent); -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.wk-flag { position:absolute; top:22px; left:24px; z-index:2; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.wb { position:relative; z-index:1; width:min(520px, 100%); border-radius:18px 18px 0 0; background:#fff; box-shadow:0 -10px 60px rgba(0,0,0,.35); transform:translateY(14px); transition:transform .7s var(--ease); }
.wk-feat:hover .wb { transform:translateY(0) scale(1.02); }
.wb-bar { display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid #e9ecf3; }
.wb-bar i { width:9px; height:9px; border-radius:50%; background:#dfe3ec; }
.wb-bar span { margin-left:10px; font-size:11.5px; color:#6b7183; background:#f3f5fa; padding:4px 12px; border-radius:999px; }
.wb-body { display:grid; justify-items:center; gap:18px; padding:46px 30px 40px; }
.wb-body img { max-height:84px; max-width:260px; width:auto; height:auto; }
.wb-lines { display:grid; gap:8px; width:70%; } .wb-lines i { height:8px; border-radius:4px; background:#eef1f7; } .wb-lines i:last-child { width:60%; justify-self:center; }
.wk-body { display:grid; gap:12px; padding:28px 32px 32px; }
.wk-meta { display:flex; flex-wrap:wrap; gap:8px; }
.wk-meta span { font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--paper); color:var(--muted); }
.wk-meta span.c { background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--at); }
.wk-body > b { font-family:var(--display); font-size:clamp(24px, 2.4vw, 32px); font-weight:600; letter-spacing:-.03em; line-height:1.12; }
.wk-p { color:var(--muted); font-size:16px; max-width:56ch; }
.wk-go { display:inline-flex; align-items:center; gap:12px; margin-top:6px; color:var(--at); font-weight:600; }
.wk-circ { width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--white); color:var(--ink); transition:background .3s, color .3s, border-color .3s, transform .45s var(--ease); }
.wk-circ svg { width:18px; height:18px; }
.wk-feat:hover .wk-circ, .wk-row:hover .wk-circ, .wk-all:hover .wk-circ { background:var(--blue); color:#fff; border-color:var(--blue); transform:rotate(-45deg); }
.wk-list { display:grid; gap:16px; grid-auto-rows:1fr; }
.wk-row, .wk-all { display:grid; grid-template-columns:132px minmax(0,1fr) 44px; gap:20px; align-items:center; padding:16px 22px 16px 16px; }
.wk-thumb { height:100%; min-height:104px; border-radius:20px; display:grid; place-items:center; overflow:hidden; position:relative; }
.wk-thumb.t1 { background:linear-gradient(150deg, #1fbf86, #0f6e5a); }
.wk-thumb.t2 { background:linear-gradient(150deg, #8b7bff, #4b3bc7); }
.wk-thumb.t3 { background:linear-gradient(150deg, #295aff, #0f1d4d); }
.wk-chip { width:84%; height:62%; border-radius:12px; background:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.25); transition:transform .6s var(--ease); }
.wk-row:hover .wk-chip { transform:scale(1.06) rotate(-2deg); }
.wk-chip img { max-height:70%; max-width:80%; width:auto; height:auto; }
.wk-rb { display:grid; gap:10px; }
.wk-rb b { font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.wk-all { grid-template-columns:minmax(0,1fr) 44px; padding:22px 22px 22px 26px; background:linear-gradient(150deg, var(--night-3), var(--night)); color:#fff; border-color:transparent; }
.wk-all b { display:block; font-family:var(--display); font-size:20px; font-weight:600; }
.wk-all small { color:var(--mist); font-size:14px; }
.wk-all .wk-circ { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
@media (max-width:1000px) { .wk2 { grid-template-columns:1fr; } .wk-art { min-height:280px; } }
@media (max-width:560px) { .wk-row { grid-template-columns:96px minmax(0,1fr); } .wk-row .wk-circ { display:none; } .wk-thumb { min-height:88px; } .wk-body { padding:24px; } .wk-art { padding:56px 20px 0; } }

/* ================= TESTIMONIAL SLIDER (text + video) ================= */
.tslider { position:relative; border-radius:32px; padding:40px 44px; background:linear-gradient(170deg, var(--night-3), var(--night-2)); border:1px solid var(--night-line); display:flex; flex-direction:column; overflow:hidden; }
.tslider::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 50% at 20% 0%, rgba(41,90,255,.22), transparent 70%); }
.ts-track { position:relative; z-index:1; transition:height .55s var(--ease); }
.ts-slide { position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; gap:24px; opacity:0; visibility:hidden; transform:translateX(30px); transition:opacity .6s var(--ease), transform .7s var(--ease), visibility .6s; }
.ts-slide.on { position:relative; opacity:1; visibility:visible; transform:none; }
.ts-slide.out { transform:translateX(-30px); }
.ts-type { align-self:flex-start; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px; border-radius:999px; background:rgba(127,150,230,.16); color:var(--sky); }
.ts-type.v { background:rgba(242,163,58,.16); color:#fcd34d; }
.ts-qm { width:42px; color:var(--blue-2); opacity:.7; } .ts-qm svg { width:100%; height:auto; display:block; fill:currentColor; }
.ts-slide blockquote { margin:0; font-family:var(--display); font-weight:500; font-size:clamp(20px, 2vw, 25px); line-height:1.45; letter-spacing:-.02em; color:#fff; }
.ts-who { display:flex; align-items:center; gap:14px; margin-top:auto; }
.ts-who b { display:block; font-family:var(--display); font-size:18px; color:#fff; }
.ts-who span span { color:var(--mist); font-size:14px; }
.ts-video { all:unset; box-sizing:border-box; cursor:pointer; display:block; border-radius:22px; overflow:hidden; border:1px solid rgba(157,180,255,.2); transition:transform .5s var(--ease), box-shadow .5s; }
.ts-video:hover { transform:scale(1.01); box-shadow:0 30px 70px rgba(0,0,0,.45); }
.ts-video:focus-visible { outline:3px solid var(--blue-2); outline-offset:3px; }
.ts-video .vc-art { aspect-ratio:16 / 8.2; }
.ts-video:hover .vc-play { transform:scale(1.1); }
.ts-nav { position:relative; z-index:1; display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--night-line); }
.ts-btn { width:44px; height:44px; border-radius:50%; border:1px solid rgba(157,180,255,.25); background:rgba(127,150,230,.08); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .25s, border-color .25s; }
.ts-btn:hover { background:var(--blue); border-color:var(--blue); }
.ts-btn svg { width:16px; height:16px; }
.ts-dots { display:flex; gap:8px; }
.ts-dots button { width:9px; height:9px; padding:0; border:0; border-radius:5px; background:rgba(157,180,255,.3); cursor:pointer; transition:width .35s var(--ease), background .3s; }
.ts-dots button.on { width:30px; background:var(--blue-2); }
.ts-dots button.is-vid { box-shadow:0 0 0 2px rgba(242,163,58,.45); }
.ts-prog { margin-left:auto; width:90px; height:3px; border-radius:3px; background:rgba(157,180,255,.18); overflow:hidden; }
.ts-prog i { display:block; height:100%; width:0; background:var(--sky); }
@media (max-width:620px) { .tslider { padding:28px 22px 22px; min-height:0; } .ts-prog { display:none; } }
@media (prefers-reduced-motion: reduce) { .ts-slide { transition:none; transform:none; } }


/* ================= SERVICE TEMPLATE ================= */
.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; font-size:13.5px; color:var(--mist); }
.crumb a { text-decoration:none; opacity:.8; transition:opacity .2s; } .crumb a:hover { opacity:1; }
.crumb span[aria-current] { color:#fff; }
.svc-hero h1 { font-size:clamp(46px, 6.2vw, 86px); }
.svc-hero .pill { margin-bottom:2px; }
/* hero agent console */
.agent { position:relative; border-radius:28px; padding:22px; background:linear-gradient(180deg, rgba(18,29,66,.82), rgba(8,14,36,.84)); border:1px solid rgba(157,180,255,.18); box-shadow:0 50px 120px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:grid; gap:14px; }
.agent::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(140deg, rgba(91,130,255,.7), transparent 35%, transparent 65%, rgba(52,211,153,.45)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.ag-top { display:flex; gap:14px; align-items:center; padding:2px 2px 0; }
.ag-top > span:nth-child(2) { flex:1; min-width:0; }
.ag-top b { display:block; font-family:var(--display); font-size:18px; color:#fff; }
.ag-top small { display:flex; align-items:center; gap:8px; color:var(--mist); font-size:13px; }
.agent .ops-tag { position:static; }
.ag-tabs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; padding:5px; border-radius:16px; background:rgba(4,9,26,.55); border:1px solid var(--night-line); }
.ag-tabs button { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 8px; border:0; border-radius:12px; background:none; color:var(--mist); font:600 14px/1 var(--body); cursor:pointer; transition:background .3s, color .3s; }
.ag-tabs button svg { width:15px; height:15px; }
.ag-tabs button:hover { color:#fff; }
.ag-tabs button[aria-selected="true"] { background:rgba(127,150,230,.16); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.ag-tabs button i { position:absolute; left:10px; right:10px; bottom:4px; height:2px; border-radius:2px; background:var(--sky); transform:scaleX(0); transform-origin:left; opacity:0; }
.ag-tabs button[aria-selected="true"] i { opacity:.9; }
.ag-tabs button.run i { transform:scaleX(1); transition:transform var(--dur, 9s) linear; }
.ag-in { display:flex; justify-content:flex-end; align-items:center; gap:10px; min-height:44px; }
.ag-msg { max-width:86%; padding:11px 15px; border-radius:16px 16px 4px 16px; background:var(--blue); color:#fff; font-size:14.5px; box-shadow:0 10px 30px rgba(41,90,255,.35); opacity:0; transform:translateY(8px) scale(.98); transition:opacity .4s, transform .4s var(--ease); }
.ag-msg.show { opacity:1; transform:none; }
.ag-typing { display:none; gap:4px; padding:12px 14px; border-radius:14px; background:rgba(127,150,230,.14); order:-1; margin-right:auto; }
.ag-typing.show { display:inline-flex; }
.ag-typing i { width:6px; height:6px; border-radius:50%; background:var(--sky); animation:agdot 1s infinite; }
.ag-typing i:nth-child(2) { animation-delay:.15s; } .ag-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes agdot { 0%, 80%, 100% { opacity:.3; transform:none; } 40% { opacity:1; transform:translateY(-3px); } }
.ag-steps { list-style:none; margin:0; padding:0; display:grid; gap:6px; position:relative; }
.ag-steps::before { content:""; position:absolute; left:29px; top:24px; bottom:24px; width:2px; background:linear-gradient(var(--sky), var(--mint)); opacity:.18; }
.ag-steps li { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) 22px; gap:12px; align-items:center; padding:9px 10px; border-radius:15px; border:1px solid transparent; opacity:.42; transition:opacity .4s, background .4s, border-color .4s; }
.ag-steps li.on { opacity:1; background:rgba(127,150,230,.1); border-color:rgba(157,180,255,.2); }
.ag-steps li.done { opacity:.9; }
.ag-n { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#0f1a3d; color:var(--sky); border:1px solid rgba(157,180,255,.16); transition:background .4s, color .4s, box-shadow .4s; }
.ag-n svg { width:17px; height:17px; }
.ag-steps li.on .ag-n { background:var(--blue); color:#fff; box-shadow:0 0 0 5px rgba(41,90,255,.18), 0 0 26px rgba(41,90,255,.6); }
.ag-steps li.person.on .ag-n { background:#4a3410; color:#fcd34d; box-shadow:0 0 0 5px rgba(242,163,58,.14); }
.ag-steps li.done .ag-n { color:#6ee7b7; }
.ag-steps b { display:block; color:#fff; font-size:14.5px; font-weight:600; }
.ag-steps small { display:block; color:var(--mist); font-size:12.5px; }
.ag-st { width:20px; height:20px; border-radius:50%; border:2px solid rgba(157,180,255,.22); position:relative; }
.ag-steps li.on .ag-st { border-color:var(--sky); border-top-color:transparent; animation:spin .9s linear infinite; }
.ag-steps li.done .ag-st { border-color:var(--mint); background:var(--mint); animation:none; }
.ag-steps li.done .ag-st::after { content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #05140e; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ag-out { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:16px; background:rgba(41,90,255,.14); border:1px solid rgba(91,130,255,.28); min-height:86px; opacity:.35; transition:opacity .4s; }
.ag-out.show { opacity:1; }
.ag-out > div { display:grid; gap:10px; justify-items:start; min-width:0; }
.ag-out p { color:#fff; font-size:14.5px; min-height:1.5em; }
.ag-act { display:inline-flex; align-items:center; padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:600; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.18); opacity:0; transform:translateY(4px); transition:opacity .35s, transform .35s var(--ease), background .35s, color .35s, border-color .35s; }
.ag-act.show { opacity:1; transform:none; }
.ag-act.sent { background:rgba(31,191,134,.18); color:#6ee7b7; border-color:rgba(31,191,134,.35); }
.ag-res { font-size:13.5px; color:var(--mist); padding:0 4px; min-height:2.9em; opacity:0; transition:opacity .5s; }
.ag-res.show { opacity:1; }
.ag-res::before { content:"Result  "; color:#6ee7b7; font-weight:600; white-space:pre; }
.ai-ic.sm { width:32px; height:32px; border-radius:10px; flex:none; } .ai-ic.sm svg { width:16px; height:16px; }

/* responsible AI: safeguards you can switch */
.guard { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:18px; align-items:stretch; margin-bottom:26px; }
.g-ctl, .g-run { border-radius:28px; padding:26px; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08); }
.g-ctl { display:grid; gap:6px; align-content:start; }
.g-h { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.g-h b, .g-run-h b { font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.g-h small { font-size:13px; color:var(--at); font-weight:600; }
.g-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.g-row:last-child { border-bottom:0; }
.g-row b { display:block; font-size:16px; font-weight:600; color:var(--ink); }
.g-row small { display:block; font-size:14px; color:var(--muted); margin-top:2px; }
.g-ic { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--blue); color:#fff; transition:background .3s, color .3s; }
.g-ic svg { width:20px; height:20px; }
.g-row.off .g-ic { background:rgba(242,163,58,.16); color:var(--amber); }
.gsw { position:relative; width:52px; height:30px; border-radius:999px; border:0; padding:0; cursor:pointer; background:rgba(120,135,180,.35); transition:background .3s; flex:none; }
.gsw::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25); transition:transform .4s var(--ease); }
.gsw[aria-checked="true"] { background:var(--blue); box-shadow:0 0 18px rgba(41,90,255,.45); }
.gsw[aria-checked="true"]::after { transform:translateX(22px); }
.gsw:focus-visible { outline:2px solid var(--at); outline-offset:3px; }
.g-run { display:grid; gap:16px; align-content:start; }
.g-run-h { display:flex; gap:14px; align-items:center; }
.g-run-h > span:nth-child(2) { flex:1; min-width:0; }
.g-run-h b { display:block; }
.g-run-h .ai-ic { background:var(--blue); color:#fff; }
.g-run-h small { font-size:13px; color:var(--muted); }
.g-chip { font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; background:rgba(31,191,134,.14); color:var(--mint); white-space:nowrap; transition:background .3s, color .3s; }
.g-chip.warn { background:rgba(242,163,58,.16); color:var(--amber); }
.g-log { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.g-log li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; align-items:center; padding:11px 14px; border-radius:14px; background:var(--glass-bg); border:1px solid var(--line); font-size:15px; color:var(--ink); opacity:0; transform:translateX(-8px); animation:glin .45s var(--ease) forwards; animation-delay:calc(var(--k) * .12s); }
.g-log li span:first-child { width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:rgba(31,191,134,.14); color:var(--mint); }
.g-log li span:first-child svg { width:16px; height:16px; }
.g-log li.off { border-color:rgba(242,163,58,.45); background:rgba(242,163,58,.08); }
.g-log li.off span:first-child { background:rgba(242,163,58,.18); color:var(--amber); }
@keyframes glin { to { opacity:1; transform:none; } }
.g-verdict { display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:16px; font-size:14.5px; font-weight:500; background:rgba(31,191,134,.1); color:var(--ink); border:1px solid rgba(31,191,134,.3); transition:background .3s, border-color .3s; }
.g-verdict b { color:var(--mint); white-space:nowrap; }
.g-verdict.warn { background:rgba(242,163,58,.1); border-color:rgba(242,163,58,.4); }
.g-verdict.warn b { color:var(--amber); }
.ai-ic.sm { width:32px; height:32px; border-radius:10px; } .ai-ic.sm svg { width:16px; height:16px; }

/* use cases */
.uc-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.uc, .aud, .relc { display:flex; flex-direction:column; gap:10px; padding:28px; border-radius:26px; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08); transition:transform .5s var(--ease), box-shadow .5s; text-decoration:none; color:var(--ink); }
.uc:hover, .aud:hover, .relc:hover { transform:translateY(-6px); box-shadow:var(--glass-hi), 0 0 0 1px rgba(41,90,255,.35), 0 30px 70px rgba(41,90,255,.16); }
.uc-ic, .aud-ic { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--blue); color:#fff; margin-bottom:6px; transition:transform .5s var(--ease); }
.uc:hover .uc-ic, .relc:hover .uc-ic { transform:rotate(-6deg) scale(1.06); }
.uc-ic svg, .aud-ic svg { width:22px; height:22px; }
.uc b, .aud b, .relc b { font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.uc p, .aud p, .relc p { color:var(--muted); font-size:15px; }
.uc-ex { margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:13px; font-weight:600; color:var(--at); }

/* aftercare */
.care { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.care-copy { display:grid; gap:20px; justify-items:start; }
.care-list { list-style:none; margin:6px 0 8px; padding:0; display:grid; gap:12px; }
.care-list li { display:flex; gap:12px; color:#eef2ff; font-size:16px; }
.care-list li svg { width:20px; height:20px; color:var(--mint); flex:none; margin-top:2px; }
.health { border-radius:28px; padding:24px; background:rgba(16,26,60,.55); border:1px solid rgba(157,180,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); display:grid; gap:6px; }
.health-top { display:flex; gap:14px; align-items:center; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--night-line); }
.health-top > span:nth-child(2) { flex:1; }
.health-top b { display:block; font-family:var(--display); font-size:19px; color:#fff; }
.health-top small { color:var(--mist); font-size:13px; }
.hc { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 8px; border-radius:14px; }
.hc-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:rgba(127,150,230,.12); color:var(--sky); transition:background .4s, color .4s; }
.hc-ic svg { width:18px; height:18px; }
.hc b { display:block; color:#fff; font-size:15px; font-weight:600; }
.hc small { color:var(--mist); font-size:13px; }
.hc em { font-style:normal; font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px; background:rgba(127,150,230,.12); color:var(--mist); transition:background .4s, color .4s; }
.hc.ok .hc-ic { background:rgba(31,191,134,.16); color:#6ee7b7; }
.hc.ok em { background:rgba(31,191,134,.16); color:#6ee7b7; }

/* audience */
.aud-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }

/* two-column comparison */
.cmp2 { min-width:640px; }
.cmp2 thead th.us { display:table-cell; }
.cmp2 thead th.us svg { width:20px; height:20px; vertical-align:-4px; margin-right:8px; color:var(--at); }
.cmp2 tbody th { width:30%; }

/* related services */
.rel { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.relc .go { margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:8px; color:var(--at); font-weight:600; font-size:15px; }
.relc .go svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.relc:hover .go svg { transform:translateX(4px); }

@media (max-width:1120px) { .guard { grid-template-columns:1fr; } .uc-grid, .aud-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .rel { grid-template-columns:repeat(2, minmax(0,1fr)); } .care { grid-template-columns:1fr; gap:40px; } }
@media (max-width:620px) { .uc-grid, .aud-grid, .rel { grid-template-columns:1fr; } .agent { padding:16px; } .ag-tabs button { font-size:13px; gap:6px; } .ag-tabs button svg { display:none; } .ag-steps li { grid-template-columns:34px minmax(0,1fr) 20px; padding:8px; } .ag-steps::before { left:25px; } .ag-steps small { display:none; } .ag-steps li { padding:6px 8px; } .ag-res { min-height:0; } .g-ctl, .g-run { padding:20px; } .g-row { grid-template-columns:minmax(0,1fr) auto; } .g-ic { display:none; } .g-run-h .ai-ic { display:none; } }
@media (prefers-reduced-motion: reduce) { .ag-steps li, .ag-out, .ag-res, .ag-msg, .ag-act { opacity:1; transform:none; } .g-log li { animation:none; opacity:1; transform:none; } }

/* ---------- glass cards and the glows behind them ---------- */
.band > .wrap { position:relative; z-index:1; }
.glows { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.glows i { position:absolute; border-radius:50%; filter:blur(60px); background:radial-gradient(circle, var(--glow), transparent 68%); }
.tile:not(.t-ai), .work, .model:not(.hot), .price, .indc, .qa {
  background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-line); box-shadow:var(--glass-hi), 0 0 0 1px var(--glass-ring), 0 20px 50px rgba(41,90,255,.08);
}
.tile:not(.t-ai):hover, .work:hover, .model:not(.hot):hover, .indc:hover { box-shadow:var(--glass-hi), 0 0 0 1px rgba(41,90,255,.35), 0 30px 70px rgba(41,90,255,.16); }
.qa { border-radius:28px; padding:8px 28px; }
.qa details:first-child { border-top:0; } .qa details:last-child { border-bottom:0; }
.mini { background:color-mix(in srgb, var(--white) 70%, transparent); }

/* reveal */
.rv { opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
.js .rv:not(.in) { opacity:0; transform:translateY(26px); }

/* ================= RESPONSIVE ================= */
@media (max-width:1120px) {
  .menu, .hdr-cta .btn-line { display:none; } .burger { display:grid; } .hdr-cta { margin-left:auto; }
  .hero-in { grid-template-columns:1fr; gap:56px; padding-block:72px 72px; }
  .tile.t-ai { grid-column:1 / -1; } .tile.t-web, .tile.t-mob { grid-column:span 3; } .tile.t-site, .tile.t-mkt { grid-column:span 3; }
  .ind-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ftr-top { grid-template-columns:repeat(3, minmax(0,1fr)); } .ftr-about, .ftr-contact { grid-column:span 3; }
  .sec-head.row { grid-template-columns:1fr; gap:20px; }
}
@media (max-width:900px) {
  .after-in { left:28%; } .ba-status { left:64%; }
  .band { padding-block:88px; }
  .journey { grid-template-columns:1fr 1fr; row-gap:56px; } .rail { display:none; } .step::before { display:none; }
  .promise, .models, .reasons { grid-template-columns:1fr; } .reasons { grid-template-columns:1fr 1fr; }
  .trust, .faq, .talk-in { grid-template-columns:1fr; } .faq .sec-head { position:static; } .faq { gap:32px; }
  .ind-grid { grid-template-columns:1fr 1fr; }
  .works { grid-template-columns:1fr; } .work, .work:nth-child(n) { grid-column:auto; }
  .ba { height:620px; } .b-inbox { left:5%; top:11%; } .b-sheet { left:6%; top:46%; } .b-tasks { left:44%; top:30%; } .b-toast { left:20%; top:80%; }
  .t-ai .copy { max-width:none; } .chat { position:relative; right:auto; top:auto; width:100%; margin-top:18px; }
}
@media (max-width:620px) {
  .hero h1 { font-size:clamp(46px, 13vw, 64px); }
  .bento { grid-template-columns:1fr; } .tile, .tile.t-ai, .tile.t-web, .tile.t-mob, .tile.t-site, .tile.t-mkt { grid-column:auto; min-height:0; } .tile { padding:26px; }
  .journey, .reasons, .ind-grid { grid-template-columns:1fr; }
  .quote { padding:32px 26px; }
  .ftr-top { grid-template-columns:1fr 1fr; } .ftr-about, .ftr-contact { grid-column:1 / -1; }
  .ba { height:600px; } .ba-side { padding:20px; } .bc { transform:none; } .b-inbox { width:230px; left:4%; top:12%; } .b-sheet { width:250px; left:4%; top:47%; } .b-tasks { display:none; } .b-toast { left:6%; top:83%; width:220px; }
  .node { font-size:12px; padding:9px 12px; } .core { width:116px; height:116px; border-radius:30px; } .core b { font-size:15px; }
  .price-l { flex-direction:column; align-items:flex-start; gap:8px; }
  .hdr-cta .btn-blue { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .rv:not(.in) { opacity:1; transform:none; }
  .rail i { width:100%; } .line-ch path.l, .line-ch path.l2 { stroke-dashoffset:0; } .line-ch path.a { opacity:1; }
}