/* AI Infrastructure — light "companion" aesthetic: dot-grid canvas, squircle cards, rounded pills, blur-in text. Tokens first. */
body.ai2 {
  --bg:#F4F4F4; --ink:#111; --mut:#4a4a52; --line:#e6e6ec; --p:#6155F5; --o:#F5882B; --b:#0A74E6; --g:#14A38B;
  --acc:#6155F5; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-color:var(--bg); color:var(--ink); font-family:var(--sans);
  background-image:radial-gradient(circle, #cdcdd8 1.15px, transparent 1.5px); background-size:65px 65px; background-position:16px 16px;
}
@font-face { font-family:"Inter"; font-weight:100 900; font-style:normal; font-display:swap; src:url("fonts/inter-latin-wght-normal.woff2") format("woff2"); }
body.ai2 main { display:block; padding:0; text-align:left; flex:none; }
body.ai2 .nav { background:transparent; position:relative; z-index:60; }
body.ai2 .footer { background:transparent; border-top:1px solid var(--line); }
.skip { position:absolute; left:-999px; top:8px; background:#fff; color:#111; padding:8px 14px; border-radius:8px; z-index:99; } .skip:focus { left:8px; }
:focus-visible { outline:2px solid var(--p); outline-offset:3px; border-radius:10px; }

/* ---- segmented section bar (fixed, top centre) ---- */
.tabbar { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:55; display:flex; gap:6px; padding:5px; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:22px; box-shadow:0 8px 30px rgba(40,30,120,.08); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tab { width:42px; height:42px; display:grid; place-items:center; border-radius:15px; color:#8a8a98; border:1px solid transparent; transition:background .25s,color .25s,transform .2s; }
.tab svg { width:20px; height:20px; } .tab:hover { color:var(--p); background:#f1f0ff; transform:translateY(-1px); } .tab.on { background:var(--p); color:#fff; box-shadow:0 6px 16px rgba(97,85,245,.35); }

/* ---- shared type + reveal ---- */
.chip { display:inline-block; margin:0 0 18px; padding:8px 16px; border-radius:22px; background:rgba(97,85,245,.1); border:1px solid rgba(97,85,245,.22); color:var(--p); font:600 14px/1 var(--sans); letter-spacing:.01em; }
.big { font:600 clamp(32px,4.6vw,58px)/1.08 var(--sans); letter-spacing:-.025em; margin:0 auto 14px; max-width:15em; text-wrap:balance; }
.sub { font:400 clamp(16px,1.5vw,20px)/1.5 var(--sans); color:var(--mut); margin:0 auto; max-width:40em; }
[data-rv] { opacity:0; filter:blur(10px); transform:translateY(26px); transition:opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
[data-rv].in { opacity:1; filter:none; transform:none; }
.reduced [data-rv] { opacity:1 !important; filter:none !important; transform:none !important; transition:none !important; }
.btn2 { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 30px; border-radius:16px; background:var(--p); color:#fff; font:600 16px/1 var(--sans); text-decoration:none; box-shadow:0 10px 26px rgba(97,85,245,.32); transition:transform .2s, box-shadow .2s; }
.btn2:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(97,85,245,.4); } .btn2.wide { min-width:260px; }
.lnk2 { color:var(--p); font:600 16px/1 var(--sans); text-decoration:none; padding:6px 2px; border-bottom:1.5px solid rgba(97,85,245,.35); } .lnk2:hover { border-color:var(--p); }

/* ---- hero ---- */
.hero2 { position:relative; min-height:calc(100svh - 70px); display:flex; justify-content:center; text-align:center; overflow:hidden; padding:clamp(70px,13vh,150px) 20px 0; }
.hero-copy2 { position:relative; z-index:3; max-width:980px; }
.hero2 h1 { font:600 clamp(36px,6.2vw,80px)/1.04 var(--sans); letter-spacing:-.03em; margin:0 auto; max-width:12.5em; text-wrap:balance; }
.hl { color:var(--acc); transition:color .9s ease; }
.lede2 { font:400 clamp(17px,1.7vw,22px)/1.5 var(--sans); color:var(--mut); max-width:34em; margin:clamp(18px,3vh,28px) auto 0; }
.cta2 { display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; align-items:center; margin-top:clamp(22px,4vh,36px); }
.pills { list-style:none; margin:clamp(26px,5vh,48px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.pills a { display:inline-flex; gap:8px; padding:11px 18px; border-radius:25px; background:rgba(97,85,245,.1); border:1px solid rgba(97,85,245,.22); color:var(--p); text-decoration:none; font:500 14.5px/1 var(--sans); transition:background .2s, transform .2s; }
.pills a span { opacity:.6; } .pills a:hover { background:rgba(97,85,245,.18); transform:translateY(-2px); }
.deco { position:absolute; right:-120px; top:8%; width:min(640px,60vw); color:rgba(97,85,245,.12); pointer-events:none; z-index:0; }
.mascot-slot { position:absolute; left:50%; bottom:0; width:min(220px,50vw); height:240px; margin-left:calc(min(220px,50vw) / -2); z-index:2; }
.hero-glow { position:absolute; left:50%; bottom:-120px; width:520px; height:360px; margin-left:-260px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--acc) 38%, transparent), color-mix(in srgb, var(--acc) 12%, transparent) 55%, transparent 75%); transition:background .9s ease; animation:breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.06); opacity:1; } }

/* ---- services (squircle cards) + demo ---- */
.services { text-align:center; padding:clamp(60px,10vh,120px) clamp(16px,4vw,48px) 40px; }
.cards4 { max-width:1240px; margin:clamp(34px,6vh,64px) auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; text-align:center; }
.scard { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; min-height:430px; padding:34px 22px 0; border-radius:56px; background:#fff; border:1px solid var(--line); cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1.15), box-shadow .35s, border-color .25s; }
.scard:hover { transform:translateY(-8px); box-shadow:0 26px 50px rgba(40,30,120,.12); }
.scard.is-on { border-color:var(--c); box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent), 0 24px 46px rgba(40,30,120,.12); }
.sc-no { margin:0 0 6px; font:600 12px/1 var(--sans); letter-spacing:.14em; color:var(--c); }
.scard h3 { margin:0 0 10px; font:600 24px/1.15 var(--sans); letter-spacing:-.015em; }
.sc-p { margin:0; font:400 14.5px/1.55 var(--sans); color:var(--mut); }
.go { margin:16px 0 0; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--c) 12%, #fff); color:var(--c); text-decoration:none; font-size:19px; transition:transform .2s, background .2s, color .2s; position:relative; z-index:3; }
.go:hover { background:var(--c); color:#fff; transform:translateX(3px); }
.sc-art { position:absolute; left:0; right:0; bottom:0; height:150px; display:grid; place-items:end center; color:var(--c); pointer-events:none; }
.sc-glow { position:absolute; left:50%; bottom:-60px; width:210px; height:170px; margin-left:-105px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 32%, transparent), transparent 75%); }
.gi { position:relative; width:104px; height:104px; margin-bottom:-26px; opacity:.95; transition:transform .45s cubic-bezier(.2,.8,.2,1.2); }
.scard:hover .gi, .scard.is-on .gi { transform:translateY(-14px) scale(1.06); }
.gi * { stroke-dasharray:1; } .gi path, .gi circle, .gi ellipse { pathLength:1; }
.demo2 { max-width:1080px; margin:26px auto 0; display:grid; grid-template-columns:1.25fr 1fr; gap:18px; text-align:left; }
.d-main, .d-side { background:#fff; border:1px solid var(--line); border-radius:40px; padding:30px 32px; }
.d-side { background:#fbfbff; }
.d-main h4, .d-side h4 { margin:0 0 14px; font:600 18px/1.2 var(--sans); padding-bottom:14px; border-bottom:1px solid var(--line); }
.ill { margin:0 0 12px; font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--o); }
.who { display:flex; gap:12px; align-items:center; margin:0 0 16px; } .who b { width:38px; height:38px; border-radius:50%; background:var(--p); color:#fff; display:grid; place-items:center; font-size:15px; } .who strong { display:block; font-size:15px; } .who small { color:#7a7a88; font-size:13px; }
.q { font:500 17px/1.45 var(--sans); margin:0 0 16px; }
.sk { display:block; height:9px; border-radius:5px; background:#eceef3; margin:0 0 11px; } .w90{width:90%} .w85{width:85%} .w80{width:80%} .w70{width:70%} .w60{width:60%}
.src { margin:18px 0 10px; font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#808090; }
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .chips li { padding:7px 13px; border-radius:20px; background:rgba(97,85,245,.08); border:1px solid rgba(97,85,245,.2); color:var(--p); font-size:13px; }
.ctrls { margin-top:20px; display:flex; gap:10px; } .ctrls span { padding:10px 16px; border-radius:14px; background:#f0f0f6; font-size:13px; }
.cmp { width:100%; border-collapse:collapse; font-size:14px; } .cmp th,.cmp td { padding:11px 8px; border-bottom:1px solid var(--line); text-align:left; } .cmp thead th { font-size:12px; color:#808090; letter-spacing:.06em; text-transform:uppercase; } .cmp tbody th { font-weight:500; }
.tiers { list-style:none; margin:0; padding:0; } .tiers li { display:flex; flex-direction:column; gap:3px; padding:13px 0; border-bottom:1px solid var(--line); } .tiers b { font-size:15px; } .tiers span { font-size:14px; color:var(--mut); }
.sh { display:flex; align-items:center; gap:10px; } .sh h4 { border:0; padding:0; margin:0 0 14px; } .dot { width:22px; height:22px; border-radius:50%; border:2px solid var(--p); position:relative; margin-bottom:14px; } .dot::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--o); }
.act { list-style:none; margin:0; padding:0; } .act li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; font-size:14px; color:var(--mut); border-top:1px solid var(--line); } .act li::before { content:""; flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--o); }

/* ---- statement ---- */
.statement2 { min-height:min(80svh,720px); display:grid; place-items:center; text-align:center; padding:60px 20px; }
.statement2 h2 { font:600 clamp(38px,6.6vw,92px)/1.05 var(--sans); letter-spacing:-.035em; margin:0; max-width:12em; }
.hl2 { background:linear-gradient(100deg, var(--p), var(--o) 60%, var(--b)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- system diagram (light) ---- */
.system2 { padding:clamp(40px,8vh,90px) 20px clamp(50px,9vh,110px); text-align:center; }
.intro2 { max-width:760px; margin:0 auto; }
.diagram { max-width:960px; margin:clamp(34px,6vh,70px) auto 0; }
.dg-desk { display:block; width:100%; height:auto; overflow:visible; }
.dg-stroke { fill:none; stroke:#bdbdd2; stroke-width:1.6; }
.dg-fill { fill:#fff; }
.dg-card .dg-fill { fill:#fff; stroke:#dcdce8; stroke-width:1.4; }
.dg-bar { fill:#e9e9f2; } .dg-tab { fill:var(--o); } .dg-title { fill:#111; font:600 17px var(--sans); }
.dg-path { fill:none; stroke:#aaa6ea; stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; }
.dg-node circle:first-child { fill:#fff; stroke:var(--p); stroke-width:2; }
.dg-node:nth-of-type(2) circle:first-child { stroke:var(--o); }
.dg-dot { fill:var(--o); } .dg-lab { fill:#222; font:600 15px var(--sans); text-anchor:middle; } .dg-lab-lg { font-size:18px; fill:#111; }
.dg-aside rect { fill:#fafaff; stroke:#dcdce8; }
.dg-route .dg-fill { fill:#fff; stroke:var(--p); stroke-width:2; }
.dg-card,.dg-node,.dg-aside,.dg-route,.dg-done { opacity:0; }
.dg-mob { display:none; list-style:none; margin:0 auto; padding:0; max-width:320px; }
.dg-mob li { position:relative; opacity:0; text-align:center; padding-bottom:34px; } .dg-mob li::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:34px; margin-top:-34px; background:#cfcdf3; } .dg-mob li:last-child { padding-bottom:0; } .dg-mob li:last-child::after { display:none; }
.m-card,.m-node,.m-done { display:block; padding:18px; border:1px solid var(--line); border-radius:26px; background:#fff; font:600 16px var(--sans); box-shadow:0 8px 20px rgba(40,30,120,.06); } .m-node { border-radius:999px; border-color:var(--p); } .m-done { border-radius:999px; border:2px dashed var(--o); }
.reduced .dg-card,.reduced .dg-node,.reduced .dg-aside,.reduced .dg-route,.reduced .dg-done,.reduced .dg-mob li { opacity:1 !important; } .reduced .dg-path { stroke-dashoffset:0 !important; }

/* ---- approach ---- */
.approach2 { text-align:center; padding:clamp(50px,9vh,110px) clamp(16px,4vw,48px); }
.stgrid { list-style:none; margin:clamp(34px,6vh,60px) auto 0; padding:0; max-width:1180px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; text-align:left; }
.stcard { position:relative; padding:34px 30px 30px; border-radius:48px; background:#fff; border:1px solid var(--line); transition:transform .3s, box-shadow .3s; }
.stcard:hover { transform:translateY(-6px); box-shadow:0 24px 44px rgba(40,30,120,.1); }
.st-no { display:inline-block; padding:7px 14px; border-radius:20px; background:color-mix(in srgb, var(--c) 12%, #fff); border:1px solid color-mix(in srgb, var(--c) 30%, #fff); color:var(--c); font:600 12.5px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; }
.stcard h3 { margin:16px 0 10px; font:600 26px/1.12 var(--sans); letter-spacing:-.02em; }
.stcard p { margin:0; font:400 15.5px/1.55 var(--sans); color:var(--mut); }
.stcard .leave { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font:600 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#808090; }
.stcard .outcome { margin-top:10px; color:var(--ink); font-weight:500; }

/* ---- support + contact ---- */
.support2 { padding:20px clamp(16px,4vw,56px) clamp(60px,10vh,120px); }
.scard2 { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:46fr 54fr; border-radius:56px; overflow:hidden; background:#fff; border:1px solid var(--line); }
.s-art { position:relative; min-height:380px; display:grid; place-items:center; color:rgba(97,85,245,.5); background:linear-gradient(160deg,#f6f5ff,#fff 70%); }
.s-art svg { position:relative; width:min(380px,84%); height:auto; }
.sa-glow { position:absolute; left:50%; top:50%; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; background:radial-gradient(closest-side, rgba(97,85,245,.22), transparent 72%); }
.mascot-slot2 { position:absolute; left:50%; bottom:0; width:180px; height:200px; margin-left:-90px; }
.s-copy { padding:clamp(32px,5vw,70px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.s-copy h3 { font:600 clamp(28px,3vw,42px)/1.1 var(--sans); letter-spacing:-.025em; margin:6px 0 16px; }
.s-copy p:not(.chip) { margin:0 0 26px; font:400 17px/1.6 var(--sans); color:var(--mut); max-width:34em; }
.contact2 { padding:0 clamp(16px,4vw,48px) clamp(80px,14vh,150px); }
.ccard { position:relative; max-width:640px; margin:0 auto; padding:clamp(40px,6vw,68px) clamp(24px,5vw,56px) 40px; border-radius:56px; background:#fff; border:1px solid var(--line); text-align:center; box-shadow:0 30px 70px rgba(40,30,120,.08); }
.ccard h2 { font:600 clamp(32px,4.2vw,52px)/1.06 var(--sans); letter-spacing:-.03em; margin:0 0 14px; }
.ccard > p { margin:0 0 26px; font:400 18px/1.5 var(--sans); color:var(--mut); }
.mail2 { margin:22px 0 0 !important; font-size:15px !important; } .mail2 a { color:var(--p); font-weight:600; }

/* ---- responsive ---- */
@media (max-width:1100px) { .cards4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .stgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px) {
  .demo2 { grid-template-columns:1fr; } .scard2 { grid-template-columns:1fr; } .s-art { min-height:260px; }
  .dg-desk { display:none; } .dg-mob { display:block; }
  .tabbar { top:auto; bottom:max(14px, env(safe-area-inset-bottom)); } .tab { width:40px; height:40px; }
  .deco { right:-200px; opacity:.7; } .hero2 { min-height:auto; padding-bottom:300px; }
}
@media (max-width:620px) { .cards4, .stgrid { grid-template-columns:1fr; } .scard { min-height:400px; border-radius:48px; } .stcard { border-radius:40px; } .btn2 { width:100%; max-width:340px; } .d-main,.d-side { padding:24px 22px; border-radius:32px; } .ccard, .scard2 { border-radius:40px; } }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation:none; } }
body.ai2 h1::after { display:none !important; } body.ai2 h1 { color:var(--ink); }
@media (max-width:860px) { body.ai2 .to-top { bottom:76px; right:12px; } }