.h-wrap{height:200vh;position:relative}
.hero{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#000;z-index:1}
.hero::before{content:'';position:absolute;inset:0;z-index:0;background:url('../images/hero.jpg') center/cover no-repeat;opacity:.4}
@supports not (background-image:-webkit-image-set(url('../images/hero.jpg') 1x)){.hero::before{background-image:url('../images/hero.jpg')}}
.h-c{position:relative;z-index:2;padding:0 24px}
.hero h1{font-size:clamp(48px,8vw,96px);font-weight:800;line-height:.92;letter-spacing:clamp(-1.5px,-.035em,-4px);opacity:0;animation:fadeUp .9s var(--ease) .1s forwards}
.hero h1 b{font-weight:800;color:var(--c)}
.hero .sub{margin-top:clamp(16px,2vw,24px);font-size:clamp(15px,1.5vw,18px);font-weight:400;color:var(--w2);line-height:1.55;letter-spacing:-.2px;opacity:0;animation:fadeUp .9s var(--ease) .3s forwards}
.hero .acts{margin-top:clamp(28px,3vw,44px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease) .48s forwards}

.cover{position:relative;z-index:2;border-radius:28px 28px 0 0}
.sec-dark{background:var(--bg);color:var(--w);border-radius:28px}
.sec-light{background:var(--lt);color:var(--ltt);border-radius:28px}

.tr{padding:clamp(140px,20vh,240px) 24px;display:flex;justify-content:center}
.tr-i{max-width:780px;text-align:center}
.tr h2{font-size:clamp(26px,4.2vw,52px);font-weight:700;line-height:1.25;letter-spacing:clamp(-1px,-.025em,-2px)}
.tr h2 .ch{display:inline}.tr h2 .wd{display:inline-block;white-space:nowrap}.tr h2 .sp{display:inline-block;width:.3em}
.tr .aside{margin-top:24px;font-size:15px;line-height:1.6;letter-spacing:-.2px;transition:color .8s,opacity .8s;opacity:.4}
.sec-dark .tr h2 .ch{color:var(--w5)}.sec-dark .tr .aside{color:var(--w4)}.sec-dark .tr .aside.on{color:var(--w2);opacity:1}
.sec-light .tr h2 .ch{color:var(--ltt4)}.sec-light .tr .aside{color:var(--ltt3)}.sec-light .tr .aside.on{color:var(--ltt2);opacity:1}

/* ===== METRICS — editorial stat band ===== */
.metrics{padding:clamp(96px,13vh,170px) 24px}
.metrics .ctn{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.4fr;align-items:center}
.met{padding:0 clamp(28px,4vw,60px)}
.met:first-child{padding-left:0}
.met+.met,.met-text{border-left:1px solid var(--ltb)}
.met-cap{font-family:var(--m);font-size:10.5px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:var(--c);margin-bottom:18px}
.met-num{font-size:clamp(96px,11vw,164px);font-weight:800;letter-spacing:-7px;line-height:.82;color:var(--ltt);transform:translateY(.18em);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.metrics.v .met-num{transform:none;opacity:1}
.metrics.v .met:nth-child(2) .met-num{transition-delay:.12s}
.met-sub{margin-top:18px;font-size:13.5px;color:var(--ltt2);line-height:1.55;letter-spacing:-.1px;max-width:230px}
.met-text{padding-left:clamp(32px,4.5vw,64px)}
.met-text p{font-size:clamp(17px,2vw,21px);font-weight:500;line-height:1.5;letter-spacing:-.35px;color:var(--ltt);margin:0 0 18px}
.met-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.2px;color:var(--c);transition:color .25s var(--ease)}
.met-link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.met-link:hover{color:var(--c2)}
.met-link:hover svg{transform:translateY(3px)}

.bento-s{padding:clamp(80px,10vh,120px) 24px clamp(120px,16vh,200px)}
.bento-s .ctn{max-width:1120px;margin:0 auto}
.bento-hd{margin-bottom:clamp(48px,6vh,64px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bento-hd h2{font-size:clamp(32px,4vw,50px);font-weight:700;letter-spacing:-2px;line-height:1.1;color:var(--w)}
.bento-hd h2 b{color:var(--c);font-weight:700}
.bento-hd p{font-size:14px;color:var(--w2);max-width:320px;line-height:1.6;letter-spacing:-.15px;text-align:right}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.b-c{position:relative;border-radius:18px;overflow:hidden;transition:transform .5s var(--ease);opacity:0;transform:translateY(32px)}
.b-c.v{opacity:1;transform:none}.b-c:hover{transform:translateY(-3px)!important}
.b-c::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(160deg,rgba(212,164,74,.12),var(--b) 40%,var(--b) 60%,rgba(212,164,74,.06));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;transition:background .5s}
.b-c:hover::before{background:linear-gradient(160deg,rgba(212,164,74,.25),var(--bh) 40%,var(--bh) 60%,rgba(212,164,74,.12))}
.b-c-inner{background:var(--s1);border-radius:18px;padding:clamp(28px,3vw,40px);height:100%;position:relative;overflow:hidden;transition:background .4s var(--ease)}
.b-c:hover .b-c-inner{background:var(--s2)}
.b-c-inner::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(212,164,74,.035),transparent 60%)}
.b-c:hover .b-c-inner::after{opacity:1}
.b8{grid-column:span 8}.b4{grid-column:span 4}.b6{grid-column:span 6}.b5{grid-column:span 5}.b7{grid-column:span 7}
.b-c h3{font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.5px;margin-bottom:10px;line-height:1.15}
.b-c h3 b{color:var(--c);font-weight:700}
.b-c-inner>p{font-size:14px;color:var(--w2);line-height:1.6;letter-spacing:-.15px;max-width:440px}
.b-stat{font-size:clamp(64px,8vw,96px);font-weight:800;letter-spacing:-4px;line-height:.85;margin:12px 0 16px;color:var(--w)}
.b-stat b{color:var(--c)}
.b-sm{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--w3)}
.b-c-inner>.b-sm{font-size:11px;color:var(--w3);max-width:none}
.bm{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bm-g{background:var(--c)}.bm-b{background:#5b9bf5}.bm-gr{background:#34d399}

/* ===== bento card graphics ===== */
.b-viz{position:relative;margin-bottom:clamp(22px,3vh,30px)}

/* natural language -> SQL pipeline */
.bv-sql{display:grid;grid-template-columns:1fr 44px 1.3fr;align-items:stretch;gap:0}
.bv-sql-in,.bv-sql-out{border:1px solid var(--b);border-radius:14px;background:rgba(255,255,255,.015);padding:16px 18px;display:flex;flex-direction:column;gap:9px;justify-content:center;transition:border-color .4s var(--ease)}
.b-c:hover .bv-sql-out{border-color:rgba(212,164,74,.22)}
.bv-sql-in em{font-size:clamp(14px,1.4vw,16px);font-style:italic;font-weight:500;letter-spacing:-.25px;line-height:1.45;color:var(--w)}
.bv-sql-out code{font-family:var(--m);font-size:11.5px;line-height:1.75;letter-spacing:.2px;color:var(--w2);font-style:normal}
.bv-sql-out code b{color:var(--c);font-weight:500}
.bv-sql-flow{display:flex;align-items:center;padding:0 6px}
.bv-sql-flow span{flex:1;height:1px;background:linear-gradient(90deg,var(--b),rgba(212,164,74,.45))}
.bv-sql-flow span:last-child{background:linear-gradient(90deg,rgba(212,164,74,.45),var(--b))}
.bv-sql-flow i{width:7px;height:7px;border-radius:50%;background:var(--c);margin:0 3px;flex-shrink:0;box-shadow:0 0 0 4px rgba(212,164,74,.1),0 0 12px rgba(212,164,74,.45)}

/* answer-time scale */
.bv-time{margin-bottom:clamp(24px,3.2vh,34px)}
.bv-time-line{position:relative;height:22px}
.bv-time-line::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--b)}
.bv-ticks{position:absolute;left:0;right:0;top:calc(50% - 4px);height:9px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 1px,transparent 1px,transparent 10%)}
.bv-dot{position:absolute;left:9%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(212,164,74,.12),0 0 14px rgba(212,164,74,.5)}
.bv-time-lab{display:flex;justify-content:space-between;font-family:var(--m);font-size:9.5px;font-weight:500;letter-spacing:1.4px;color:var(--w3);margin-top:8px}

/* self-drawing chart */
.bv-bars{display:flex;align-items:flex-end;gap:7px;height:108px;border-bottom:1px solid var(--b)}
.bv-bars i{flex:1;height:calc(var(--h)*100%);border-radius:4px 4px 0 0;background:rgba(255,255,255,.09);transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease),background .4s}
.bv-bars i.gold{background:linear-gradient(180deg,var(--c2),var(--c));box-shadow:0 0 18px rgba(212,164,74,.22)}
.b-c.v .bv-bars i{transform:scaleY(1)}
.b-c.v .bv-bars i:nth-child(2){transition-delay:.07s}
.b-c.v .bv-bars i:nth-child(3){transition-delay:.14s}
.b-c.v .bv-bars i:nth-child(4){transition-delay:.21s}
.b-c.v .bv-bars i:nth-child(5){transition-delay:.28s}
.b-c.v .bv-bars i:nth-child(6){transition-delay:.35s}
.b-c.v .bv-bars i:nth-child(7){transition-delay:.42s}
.b-c:hover .bv-bars i{background:rgba(255,255,255,.13)}
.b-c:hover .bv-bars i.gold{background:linear-gradient(180deg,var(--c2),var(--c));filter:brightness(1.08)}

/* export format tiles */
.bv-fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.bv-fmt span{font-family:var(--m);font-size:10.5px;font-weight:500;letter-spacing:1.3px;color:var(--w2);text-align:center;padding:12px 0;border:1px solid var(--b);border-radius:10px;background:rgba(255,255,255,.015);transition:border-color .35s,color .35s}
.bv-fmt span.gold{color:var(--c);border-color:rgba(212,164,74,.3);background:rgba(212,164,74,.05)}
.b-c:hover .bv-fmt span{border-color:var(--bh);color:var(--w)}
.b-c:hover .bv-fmt span.gold{color:var(--c)}

/* schema diagram */
.bv-schema svg{width:100%;max-width:230px;height:auto;display:block;margin:0 auto}

/* memory timeline */
.bv-mem{position:relative;height:58px}
.bv-mem::before{content:'';position:absolute;left:0;right:0;top:40%;height:1px;background:var(--b)}
.bv-mem i{position:absolute;top:40%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:#fff}
.bv-mem-now{position:absolute;left:94%;top:40%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px rgba(212,164,74,.12),0 0 14px rgba(212,164,74,.5)}
.bv-mem-now::before{content:'';position:absolute;inset:-5px;border-radius:50%;background:rgba(212,164,74,.35);animation:bvPulse 2.6s ease-out infinite}
@keyframes bvPulse{0%{transform:scale(.5);opacity:.6}70%,100%{transform:scale(2.1);opacity:0}}
.bv-mem-lab{position:absolute;bottom:0;font-family:var(--m);font-size:9.5px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--w3)}
.bv-mem-lab.l{left:0}
.bv-mem-lab.r{right:0;color:var(--c)}

/* expertise modes */
.bv-modes{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.bv-mode{display:grid;grid-template-columns:108px 1fr;align-items:center;gap:14px}
.bv-mode-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:9.5px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--w3)}
.bv-skel{display:flex;gap:6px}
.bv-skel i{height:7px;border-radius:4px;background:rgba(255,255,255,.09);width:var(--w);transition:background .4s}
.b-c:hover .bv-skel i{background:rgba(255,255,255,.14)}

.int-s{padding:clamp(120px,16vh,200px) 24px;position:relative}
.int-s::before{content:'';position:absolute;inset:0;background:url('../images/extensions.jpg') center/cover no-repeat;opacity:.25;pointer-events:none}
.int-s .ctn{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.int-hd{text-align:center;margin-bottom:clamp(72px,10vh,100px)}
.int-hd h2{font-size:clamp(32px,4vw,50px);font-weight:700;letter-spacing:-2px;line-height:1.1}
.sec-dark .int-hd h2{color:var(--w)}
.int-hd h2 b{color:var(--c);font-weight:700}
.int-row{display:flex;justify-content:center;gap:clamp(32px,6vw,80px);position:relative}
.int-item{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;z-index:2;cursor:default}
.int-circle{width:clamp(80px,12vw,110px);height:clamp(80px,12vw,110px);border-radius:50%;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;position:relative;transition:transform .6s var(--ease),border-color .5s,box-shadow .5s,background .5s}
.int-circle img{width:clamp(32px,5vw,44px);height:clamp(32px,5vw,44px);object-fit:contain;transition:transform .5s var(--ease);position:relative;z-index:2}
.int-circle::before{content:'';position:absolute;width:200%;height:200%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(212,164,74,.06),transparent 65%);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.int-circle::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(212,164,74,.08);opacity:0;transform:scale(.9);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.int-item:hover .int-circle{background:rgba(255,255,255,.04);border-color:rgba(212,164,74,.15);box-shadow:0 8px 40px rgba(0,0,0,.3),0 0 30px rgba(212,164,74,.06);transform:translateY(-12px) scale(1.05)}
.int-item:hover .int-circle::before{opacity:1}
.int-item:hover .int-circle::after{opacity:1;transform:scale(1)}
.int-item:hover .int-circle img{transform:scale(1.08)}
.int-name{font-size:clamp(14px,1.5vw,17px);font-weight:600;letter-spacing:-.3px;color:var(--w);text-align:center;transition:color .3s}
.int-desc{font-size:12px;color:var(--w3);text-align:center;max-width:140px;line-height:1.4;letter-spacing:-.1px;opacity:0;transform:translateY(-4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.int-item:hover .int-desc{opacity:1;transform:translateY(0)}
.int-item:hover .int-name{color:var(--c)}

.mod-s{padding:clamp(120px,16vh,200px) 24px}
.mod-s .ctn{max-width:1000px;margin:0 auto}
.mod-hd{text-align:center;margin-bottom:60px}
.mod-hd h2{font-size:clamp(32px,4vw,50px);font-weight:700;letter-spacing:-2px;line-height:1.1;margin-bottom:12px}
.mod-hd h2 b{color:var(--c);font-weight:700}
.mod-hd p{font-size:15px;letter-spacing:-.2px}
.sec-light .mod-hd h2{color:var(--ltt)}.sec-light .mod-hd p{color:var(--ltt2)}.sec-dark .mod-hd p{color:var(--w2)}
.mod-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:16px;overflow:hidden}
.sec-light .mod-g{background:var(--ltb)}.sec-dark .mod-g{background:var(--b)}
.mc{padding:clamp(28px,3.5vw,44px) 20px;text-align:center;transition:background .3s}
.sec-light .mc{background:var(--lt)}.sec-light .mc:hover{background:var(--lt3)}
.sec-dark .mc{background:var(--bg)}.sec-dark .mc:hover{background:var(--s1)}
.mc-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.sec-light .mc-i{background:rgba(0,0,0,.03);border:1px solid var(--ltb)}.sec-dark .mc-i{background:rgba(255,255,255,.03);border:1px solid var(--b)}
.mc:hover .mc-i{border-color:rgba(212,164,74,.25);transform:scale(1.08)}
.mc-i img{width:18px;height:18px;object-fit:contain}
.mc h4{font-size:15px;font-weight:600;letter-spacing:-.3px}
.sec-light .mc h4{color:var(--ltt)}.sec-dark .mc h4{color:var(--w)}
.mc .pv{font-size:11px;margin-top:2px}.sec-light .mc .pv{color:var(--ltt3)}.sec-dark .mc .pv{color:var(--w3)}
.mc-status{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--c);margin-top:8px}

.cta-s{padding:clamp(140px,20vh,240px) 24px;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(circle,rgba(212,164,74,.06),transparent 60%);pointer-events:none}
.cta-s .ctn{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta-s h2{font-size:clamp(40px,5.5vw,72px);font-weight:800;line-height:.95;letter-spacing:-3px;margin-bottom:16px}
.cta-s h2 b{color:var(--c);font-weight:800}
.sec-dark .cta-s h2{color:var(--w)}.sec-light .cta-s h2{color:var(--ltt)}
.cta-s .cta-sub{font-size:16px;max-width:380px;margin:0 auto 40px;line-height:1.6;letter-spacing:-.2px}
.sec-dark .cta-s .cta-sub{color:var(--w2)}.sec-light .cta-s .cta-sub{color:var(--ltt2)}

@media(max-width:1024px){
  .bento{grid-template-columns:repeat(6,1fr)}.b8,.b4,.b6,.b5,.b7{grid-column:span 6}
  .metrics .ctn{grid-template-columns:1fr 1fr}
  .met-text{grid-column:1/-1;border-left:none;border-top:1px solid var(--ltb);padding:36px 0 0;margin-top:40px}
}
@media(max-width:768px){
  .bento{grid-template-columns:1fr}.b8,.b4,.b6,.b5,.b7{grid-column:span 1}
  .mod-g{grid-template-columns:1fr}
  .cover{border-radius:20px 20px 0 0}.sec-dark,.sec-light{border-radius:20px}
  .int-row{flex-wrap:wrap;gap:40px 32px}
  .int-circle{width:72px!important;height:72px!important}
  .bv-sql{grid-template-columns:1fr}
  .bv-sql-flow{flex-direction:column;height:34px;padding:5px 0;align-items:center}
  .bv-sql-flow span{width:1px;height:auto;flex:1;background:linear-gradient(180deg,var(--b),rgba(212,164,74,.45))}
  .bv-sql-flow span:last-child{background:linear-gradient(180deg,rgba(212,164,74,.45),var(--b))}
  .bv-sql-flow i{margin:3px 0}
  .bv-mode{grid-template-columns:96px 1fr;gap:10px}
}
@media(max-width:600px){
  .metrics .ctn{grid-template-columns:1fr}
  .met{padding:0}
  .met+.met{border-left:none;border-top:1px solid var(--ltb);padding-top:36px;margin-top:36px}
  .met-num{letter-spacing:-4px}
  .met-text{margin-top:36px;padding-top:36px}
}