:root{
  --paper:#f4f7f5;--ink:#101715;--muted:#63706b;--line:#dfe7e2;
  --accent:#00d084;--accent2:#5b5ce2;--panel:rgba(255,255,255,.76);
  --shadow:0 24px 70px rgba(20,35,29,.09)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(circle at 12% 8%,rgba(0,208,132,.12),transparent 28%),
  radial-gradient(circle at 88% 15%,rgba(91,92,226,.10),transparent 28%),
  var(--paper);color:var(--ink);font-family:Inter,Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.7}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:
  linear-gradient(rgba(16,23,21,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(16,23,21,.035) 1px,transparent 1px);
  background-size:36px 36px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%)}
a{color:inherit}.wrap{max-width:1180px;margin:auto;padding:0 24px}
.topbar{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(16,23,21,.08);background:rgba(244,247,245,.78);backdrop-filter:blur(16px)}
.nav{max-width:1180px;margin:auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;text-decoration:none;letter-spacing:-.03em}
.brandmark{width:28px;height:28px;border-radius:9px;background:conic-gradient(from 210deg,var(--accent),#69e8ff,var(--accent2),var(--accent));position:relative;box-shadow:0 0 28px rgba(0,208,132,.20)}
.brandmark:after{content:"";position:absolute;inset:6px;border-radius:6px;background:var(--paper)}
.navlinks{display:flex;gap:18px;align-items:center}.navlinks a{text-decoration:none;font-size:13px;color:#43514b}.navlinks a:hover{color:var(--ink)}
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:60}
.hero{padding:82px 0 54px;display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.15em;font-weight:900;color:var(--accent2);text-transform:uppercase}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
h1{font-size:clamp(52px,7vw,92px);line-height:.98;letter-spacing:-.065em;margin:16px 0 22px}
h2{font-size:clamp(34px,4.5vw,58px);line-height:1.05;letter-spacing:-.05em;margin:14px 0 18px}
h3{font-size:21px;letter-spacing:-.02em}
.lead{font-size:18px;color:var(--muted);max-width:760px}
.heroCard{padding:24px;border:1px solid rgba(16,23,21,.08);border-radius:26px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(12px);transform:rotate(1.5deg)}
.metricBig{font-size:56px;font-weight:900;letter-spacing:-.06em}.heroCard small{color:var(--muted)}
.section{padding:78px 0}.kicker{font-size:11px;letter-spacing:.15em;font-weight:900;color:var(--accent2);text-transform:uppercase}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.card{position:relative;padding:24px;border:1px solid rgba(16,23,21,.08);border-radius:22px;background:rgba(255,255,255,.70);box-shadow:0 12px 40px rgba(20,35,29,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden}
.card:before{content:"";position:absolute;inset:auto -40px -60px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(0,208,132,.14),transparent 70%)}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 58px rgba(20,35,29,.10);border-color:rgba(0,208,132,.28)}
.card p{color:var(--muted);font-size:14px}.tag{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(91,92,226,.08);color:var(--accent2);font-size:10px;font-weight:900;letter-spacing:.09em}
.timeline{display:grid;gap:16px;margin-top:34px}.trow{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.tnum{font-size:46px;font-weight:900;letter-spacing:-.06em;color:rgba(16,23,21,.14);position:sticky;top:92px}
.tbody{padding:24px;border-left:2px solid var(--accent);background:rgba(255,255,255,.55);border-radius:0 20px 20px 0}
.tbody p{color:var(--muted)}
.sideLayout{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start}
.side{position:sticky;top:92px;padding:20px;border:1px solid rgba(16,23,21,.08);border-radius:18px;background:rgba(255,255,255,.62)}
.side a{display:block;padding:8px 0;text-decoration:none;color:#5c6964;font-size:13px}.side a:hover{color:var(--accent2)}
.content h2{margin-top:54px}.content p,.content li{color:var(--muted)}
.compare{width:100%;border-collapse:collapse;margin:28px 0;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.7)}
.compare th,.compare td{padding:15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.compare th{background:rgba(91,92,226,.06)}
.callout{padding:24px;border:1px solid rgba(91,92,226,.14);border-radius:20px;background:linear-gradient(135deg,rgba(91,92,226,.07),rgba(0,208,132,.07))}
.cta{margin:72px 0 40px;padding:34px;border-radius:28px;background:#101715;color:#fff;position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-90px;background:radial-gradient(circle,rgba(0,208,132,.35),transparent 70%)}
.cta p{color:#a8b6b0;max-width:680px}.btn{display:inline-flex;padding:13px 18px;border-radius:12px;background:var(--accent);color:#06110d;text-decoration:none;font-weight:900;position:relative;z-index:2}
.searchbox{display:flex;gap:10px;margin:28px 0}.searchbox input{flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:white;font:inherit}
.glossaryGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.term{padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.7)}.term h3{margin-top:0}.term p{color:var(--muted)}
.fade{opacity:0;transform:translateY(20px);transition:.65s cubic-bezier(.2,.8,.2,1)}.fade.in{opacity:1;transform:none}
footer{padding:34px 0 50px;color:#7b8983;border-top:1px solid var(--line);font-size:12px}
@media(max-width:860px){.hero{grid-template-columns:1fr}.heroCard{transform:none}.sideLayout{grid-template-columns:1fr}.side{position:static}.grid,.glossaryGrid{grid-template-columns:1fr}.navlinks a:nth-child(-n+2){display:none}}
@media(max-width:560px){.wrap{padding:0 18px}.nav{padding:14px 18px}.hero{padding-top:54px}.trow{grid-template-columns:1fr}.tnum{position:static;font-size:32px}.tbody{border-left:0;border-top:2px solid var(--accent);border-radius:0 0 18px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade{opacity:1;transform:none;transition:none}.card{transition:none}}

/* Responsive hardening */
img,svg,video,canvas{max-width:100%;height:auto}
button,input,textarea,select{max-width:100%}
a,button{touch-action:manipulation}
.wrap{width:min(100%,1180px)}
.nav{min-height:64px}
.navlinks{flex-wrap:wrap;justify-content:flex-end}
.hero>*{min-width:0}
.heroCard,.card,.tbody,.callout,.cta,.side,.term{min-width:0}
.card,.term,.tbody,.callout,.cta{overflow-wrap:anywhere}
.compare-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:20px}
.compare{min-width:680px;margin:0}
.content{min-width:0}
.content pre,.content code{max-width:100%;overflow:auto}
.searchbox input{min-width:0}
.mobileCta{display:none}

@media(max-width:1024px){
  .wrap{padding-left:22px;padding-right:22px}
  .hero{grid-template-columns:minmax(0,1fr) 320px;gap:30px;padding:68px 0 46px}
  h1{font-size:clamp(48px,7.4vw,76px)}
  .heroCard{padding:20px}
  .sideLayout{grid-template-columns:220px minmax(0,1fr);gap:26px}
  .grid{gap:14px}
}

@media(max-width:860px){
  body.has-mobile-cta{padding-bottom:76px}
  .nav{padding:14px 20px}
  .brand{font-size:16px}
  .brandmark{width:25px;height:25px}
  .navlinks{gap:10px}
  .navlinks a{display:none}
  .navlinks a:last-child{display:inline-flex;padding:9px 12px;border-radius:999px;background:#101715;color:#fff}
  .hero{grid-template-columns:1fr;gap:24px;padding:50px 0 36px}
  .heroCard{transform:none;max-width:520px}
  h1{font-size:clamp(43px,11vw,66px)}
  h2{font-size:clamp(32px,8vw,48px)}
  .lead{font-size:16px;line-height:1.8}
  .section{padding:58px 0}
  .sideLayout{grid-template-columns:1fr;gap:22px}
  .side{position:relative;top:auto;display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding:12px}
  .side b{display:none}
  .side a{flex:0 0 auto;padding:8px 10px;border-radius:999px;background:rgba(91,92,226,.06)}
  .grid,.glossaryGrid{grid-template-columns:1fr}
  .timeline{gap:12px}
  .trow{grid-template-columns:74px minmax(0,1fr);gap:14px}
  .tnum{position:static;font-size:36px}
  .cta{margin:54px 0 28px;padding:28px}
  .mobileCta{display:flex;position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:55;align-items:center;justify-content:center;padding:13px 16px;border-radius:14px;background:linear-gradient(100deg,var(--accent),#71e8ff);color:#06110d;text-decoration:none;font-weight:900;box-shadow:0 18px 50px rgba(7,18,14,.24)}
}

@media(max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .topbar{backdrop-filter:blur(12px)}
  .nav{padding:12px 16px}
  .hero{padding-top:38px}
  .eyebrow{font-size:10px}
  .heroCard{border-radius:20px}
  .metricBig{font-size:46px}
  .section{padding:48px 0}
  .card,.term{padding:19px;border-radius:18px}
  .trow{grid-template-columns:1fr}
  .tnum{font-size:28px;margin-bottom:-2px}
  .tbody{padding:20px;border-left:0;border-top:2px solid var(--accent);border-radius:0 0 18px 18px}
  .cta{padding:24px;border-radius:22px}
  .searchbox{margin:20px 0}
  .searchbox input{font-size:16px}
  .compare th,.compare td{padding:12px;font-size:13px}
  footer{padding-bottom:34px}
}

@media(max-width:430px){
  h1{font-size:clamp(38px,12vw,52px)}
  h2{font-size:clamp(29px,9vw,40px)}
  h3{font-size:19px}
  .lead{font-size:15px}
  .heroCard{padding:18px}
  .metricBig{font-size:42px}
  .card p,.term p{font-size:13px}
  .btn{width:100%;justify-content:center}
  .cta a.btn{width:100%}
}

@media(hover:none){
  .card:hover{transform:none;box-shadow:0 12px 40px rgba(20,35,29,.05)}
}

@media(max-width:430px){
  .navlinks a:last-child{padding:8px 10px;font-size:11px}
  .heroCard{margin-right:2px}
}

/* AIVistaQ Lab identity system */
body{position:relative;overflow-x:hidden}
body:after{content:"";position:fixed;inset:-30%;pointer-events:none;z-index:-2;background:conic-gradient(from 180deg at 50% 50%,rgba(0,208,132,.08),transparent 18%,rgba(91,92,226,.08) 34%,transparent 54%,rgba(105,232,255,.07) 72%,transparent 88%);animation:labAura 22s linear infinite}
@keyframes labAura{to{transform:rotate(360deg)}}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),#69e8ff,var(--accent2),transparent);background-size:220% 100%;animation:signalLine 7s linear infinite;opacity:.42}
@keyframes signalLine{to{background-position:220% 0}}
.brandmark{animation:brandPulse 4.8s ease-in-out infinite}
@keyframes brandPulse{50%{box-shadow:0 0 38px rgba(0,208,132,.34);transform:rotate(5deg) scale(1.04)}}
.hero{position:relative;isolation:isolate}
.hero:before{content:"";position:absolute;z-index:-1;inset:18px -5vw -10px;background:radial-gradient(circle at 16% 35%,rgba(0,208,132,.13),transparent 30%),radial-gradient(circle at 80% 18%,rgba(91,92,226,.12),transparent 27%);filter:blur(4px);animation:heroDrift 10s ease-in-out infinite alternate}
@keyframes heroDrift{to{transform:translate3d(0,16px,0) scale(1.025)}}
.hero h1{background:linear-gradient(110deg,var(--ink) 0 38%,#087d59 52%,var(--accent2) 66%,var(--ink) 82%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:headlineSignal 8s ease-in-out infinite}
@keyframes headlineSignal{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.heroCard{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.heroCard:before{content:"";position:absolute;inset:-60% auto -60% -40%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:rotate(18deg) translateX(-180%);animation:cardScan 6.5s ease-in-out infinite}
@keyframes cardScan{0%,55%{transform:rotate(18deg) translateX(-180%)}78%,100%{transform:rotate(18deg) translateX(520%)}}
.heroCard:hover{transform:rotate(0) translateY(-5px);box-shadow:0 30px 90px rgba(20,35,29,.15)}
.card,.term,.tbody,.callout{position:relative}
.card:after,.term:after{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),#69e8ff,transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.card:hover:after,.term:hover:after{transform:scaleX(1)}
.term{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.term:hover{transform:translateY(-3px);border-color:rgba(0,208,132,.28);box-shadow:0 18px 48px rgba(20,35,29,.08)}
.fade{transform:translateY(26px) scale(.992)}.fade.in{transform:none}
.trow .tnum{transition:color .25s ease,text-shadow .25s ease}.trow:hover .tnum{color:rgba(0,208,132,.55);text-shadow:0 0 28px rgba(0,208,132,.16)}
.cta:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(105,232,255,.07) 50%,transparent 65%);transform:translateX(-100%);animation:ctaScan 7s ease-in-out infinite}
@keyframes ctaScan{0%,60%{transform:translateX(-100%)}90%,100%{transform:translateX(100%)}}
.labSignal{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(16,23,21,.08);border-radius:999px;background:rgba(244,247,245,.72);backdrop-filter:blur(12px);font-size:9px;font-weight:900;letter-spacing:.1em;color:#65736d;pointer-events:none}
.labSignal i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:signalPulse 1.8s ease-in-out infinite}
@keyframes signalPulse{50%{opacity:.35;transform:scale(.7)}}
@media(max-width:860px){.labSignal{display:none}.hero h1{animation-duration:11s}}
@media(prefers-reduced-motion:reduce){body:after,.topbar:after,.brandmark,.hero:before,.hero h1,.heroCard:before,.cta:before,.labSignal i{animation:none}.heroCard:hover,.term:hover{transform:none}}