/* ===== Inner pages ===== */
.nav a.active{color:#fff;position:relative}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--orange);border-radius:2px}
@media(max-width:900px){
  .nav.open{background:rgba(28,43,58,.97)}
  .nav.open ul{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:72px;left:0;right:0;background:rgba(28,43,58,.97);padding:1rem 4vw 1.5rem;gap:1rem}
}

/* page hero */
.page-hero{position:relative;background:radial-gradient(1100px 600px at 80% 30%,#2F4360 0%,var(--navy) 55%,#121C28 100%);color:#fff;padding:160px 0 110px;overflow:hidden}
.page-hero canvas.bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.7rem);max-width:760px;letter-spacing:-.02em}
.page-hero h1 em{font-style:normal;color:var(--orange)}
.page-hero .sub{font-size:1.12rem;color:#C7D0DB;max-width:620px;margin-top:1.2rem}
.page-hero .eyebrow{color:#FDB58F}.page-hero .eyebrow::before{background:#FDB58F}
.crumbs{font-size:.85rem;color:#8A98A8;margin-bottom:1.1rem}
.crumbs a:hover{color:#fff}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
@media(max-width:1000px){.hero-split{grid-template-columns:1fr}}

/* section nav (in-page) */
.subnav{position:sticky;top:72px;z-index:20;background:rgba(245,247,250,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.subnav .container{display:flex;gap:1.6rem;overflow-x:auto;height:52px;align-items:center;white-space:nowrap}
.subnav a{font-size:.92rem;font-weight:700;color:var(--grey);padding:.3rem 0;border-bottom:2px solid transparent}
.subnav a.on,.subnav a:hover{color:var(--orange);border-color:var(--orange)}

/* ===== eras timeline ===== */
.eras{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;padding-top:46px}
.era-line{position:absolute;top:14px;left:0;right:0;height:4px;background:var(--line);border-radius:2px}
.era-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8B95A3,var(--orange));border-radius:2px;transition:width .15s linear}
.era{background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);position:relative}
.era::before{content:"";position:absolute;top:-40px;left:1.5rem;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid #8B95A3}
.era.hot::before{border-color:var(--orange);box-shadow:0 0 0 6px rgba(226,88,34,.18)}
.era .yr{font-family:var(--mono);font-size:.85rem;color:var(--grey);font-weight:700}
.era h3{font-size:1.3rem;margin:.3rem 0 .8rem}
.era.lit::before{border-color:var(--orange)}
.era.hot{background:linear-gradient(160deg,#fff 60%,var(--orange-soft))}
.era.hot h3{color:var(--orange)}
.era ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:.95rem}
.era li{padding-left:1.4rem;position:relative}
.era li::before{position:absolute;left:0;font-weight:800}
.era li.p::before{content:"＋";color:var(--green)}
.era li.m::before{content:"－";color:#DC2626}
@media(max-width:900px){.eras{grid-template-columns:1fr}.era-line{display:none}.era::before{display:none}}

/* ===== driver cards w/ mini animations ===== */
.driver{background:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem}
.driver .viz{height:130px;border-radius:12px;background:var(--navy);position:relative;overflow:hidden;padding:1rem}
.driver h3{font-size:1.15rem}
.driver p{font-size:.95rem}
.bw{display:grid;gap:.55rem}
.bw div{display:grid;grid-template-columns:62px 1fr;gap:.6rem;align-items:center;font-family:var(--mono);font-size:.72rem;color:#9FB0C3}
.bw span.bar{height:12px;border-radius:6px;background:#2F4360;position:relative;overflow:hidden}
.bw span.bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8B95A3,var(--orange));border-radius:6px;width:0;transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
.in .bw span.bar i{width:var(--w)}
.s3hub{display:flex;align-items:center;justify-content:space-between;height:100%;gap:.6rem}
.s3hub .col{display:grid;gap:.4rem}
.s3hub .col span{font-size:.72rem;color:#C7D0DB;background:rgba(255,255,255,.07);padding:.3rem .55rem;border-radius:6px;text-align:center;white-space:nowrap}
.s3hub .core{background:var(--orange);color:#fff;font-weight:800;font-family:var(--mono);font-size:.8rem;padding:.6rem .8rem;border-radius:10px;box-shadow:0 0 0 0 rgba(226,88,34,.6);animation:ring 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(226,88,34,.6)}100%{box-shadow:0 0 0 18px rgba(226,88,34,0)}}
.s3hub .wire{flex:1;height:2px;background:repeating-linear-gradient(90deg,#FDB58F 0 6px,transparent 6px 12px);background-size:24px 2px;animation:dash 1s linear infinite}
.s3hub .wire.r{animation-direction:reverse}
@keyframes dash{to{background-position:24px 0}}
.tfstack{position:relative;height:100%}
.tfstack div{position:absolute;left:12%;right:12%;height:22px;border-radius:6px;color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-20px)}
.in .tfstack div{animation:drop .6s forwards}
.tfstack div:nth-child(1){top:6px;background:var(--orange);animation-delay:.1s}
.tfstack div:nth-child(2){top:34px;background:#C2542A;animation-delay:.35s}
.tfstack div:nth-child(3){top:62px;background:#5F6B7A;animation-delay:.6s}
.tfstack div:nth-child(4){top:90px;background:#3B4A5E;animation-delay:.85s}
@keyframes drop{to{opacity:1;transform:none}}

/* ===== compare table ===== */
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.cmp th,.cmp td{padding:1rem 1.1rem;text-align:center;border-bottom:1px solid #EEF1F5;font-size:.95rem}
.cmp th{background:var(--navy);color:#fff;font-weight:700}
.cmp th.hare{background:var(--orange)}
.cmp td:first-child,.cmp th:first-child{text-align:left;font-weight:700;color:var(--navy)}
.cmp td.hare{background:#FFF7F2}
.cmp .mk{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;font-weight:900;transform:scale(0);transition:transform .4s cubic-bezier(.2,.9,.3,1.5)}
.cmp.in .mk{transform:scale(1)}
.mk.y{background:#DCFCE7;color:var(--green)}.mk.h{background:#FEF3C7;color:var(--amber)}.mk.n{background:#FEE2E2;color:#DC2626}
@media(max-width:700px){.cmp th,.cmp td{padding:.6rem .4rem;font-size:.8rem}}

/* ===== snapshot (time travel) demo ===== */
.snapdemo{display:grid;grid-template-columns:230px 1fr;gap:1.2rem}
@media(max-width:900px){.snapdemo{grid-template-columns:1fr}}
.ops{display:grid;gap:.6rem;align-content:start}
.ops .btn{justify-content:flex-start;width:100%;font-size:.92rem;padding:.7rem 1rem}
.ops .hint{font-size:.82rem;color:var(--grey);margin-top:.4rem}
.snappanel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem;min-width:0}
.chain{display:flex;align-items:center;gap:0;overflow-x:auto;padding:.4rem 0 1rem}
.snap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;padding:0 .2rem}
.snap i{width:34px;height:34px;border-radius:50%;background:#E5E9F0;color:var(--grey);font-style:normal;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .25s;animation:pop .4s}
.snap small{font-size:.68rem;color:var(--grey);white-space:nowrap}
.snap.cur i{background:var(--navy);color:#fff}
.snap.sel i{background:var(--orange);color:#fff;box-shadow:0 0 0 5px rgba(226,88,34,.2)}
.chain .lk{flex:0 0 26px;height:3px;background:#E5E9F0;margin-bottom:18px}
.tt-banner{font-size:.85rem;padding:.55rem .8rem;border-radius:8px;background:#EEF2FF;color:#3730A3;margin-bottom:.8rem;display:none}
.tt-banner.on{display:block}
.meta-path{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-family:var(--mono);font-size:.74rem;color:var(--grey);margin-bottom:.9rem}
.meta-path b{background:var(--bg);color:var(--navy);padding:.2rem .5rem;border-radius:6px;font-weight:600}
.meta-path b.o{background:var(--orange-soft);color:var(--orange-deep)}
table.data{width:100%;border-collapse:collapse;font-size:.88rem}
table.data th{text-align:left;font-size:.75rem;color:var(--grey);text-transform:uppercase;letter-spacing:.05em;padding:.5rem .6rem;border-bottom:2px solid var(--line)}
table.data td{padding:.55rem .6rem;border-bottom:1px solid #EEF1F5;font-variant-numeric:tabular-nums}
table.data tr.new td{animation:flashO 1.4s}
table.data td.chg{animation:flashO 1.4s}
table.data td.null{color:#C0C7D0}
table.data th.newcol{color:var(--orange)}
@keyframes flashO{0%{background:#FFE4D4}100%{background:transparent}}
.feat4{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.2rem}
.feat4 div{background:var(--bg);border-radius:10px;padding:.8rem;font-size:.85rem}
.feat4 b{display:block;color:var(--navy);font-size:.92rem}
@media(max-width:900px){.feat4{grid-template-columns:1fr 1fr}}

/* file skipping */
.skipdemo .filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.skipdemo .filters .btn{padding:.5rem .9rem;font-size:.85rem}
.skipdemo .filters .btn.on{background:var(--navy);color:#fff}
.files{display:grid;grid-template-columns:repeat(12,1fr);gap:.4rem}
.file{aspect-ratio:1/1.15;border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(28,43,58,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-size:.62rem;color:var(--grey);transition:all .45s}
.file b{font-size:.78rem;color:var(--navy)}
.file.skip{opacity:.25;transform:scale(.88)}
.file.hit{background:var(--orange);color:#FFE3D2;transform:translateY(-4px)}
.file.hit b{color:#fff}
@media(max-width:700px){.files{grid-template-columns:repeat(6,1fr)}}
.skipstat{display:flex;gap:1.6rem;margin-top:1rem;font-size:.95rem;flex-wrap:wrap}
.skipstat b{font-size:1.4rem;color:var(--orange);font-variant-numeric:tabular-nums}

/* future cards */
.fcard{background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.fcard .ic{width:46px;height:46px;border-radius:12px;background:var(--orange-soft);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:.9rem}
.fcard h3{font-size:1.08rem;margin-bottom:.4rem}
.fcard p{font-size:.93rem}
.fcard::after{content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;background:var(--orange-soft);opacity:.6;transition:transform .4s}
.fcard:hover::after{transform:scale(1.6)}

/* ===== architecture: orbit hero ===== */
.orbit{position:relative;width:min(420px,80vw);aspect-ratio:1;margin:0 auto}
.orbit .ringc{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.orbit .ringc.r2{inset:18%;border-color:rgba(226,88,34,.35)}
.orbit .core{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle,#fff 0%,#FDEFE5 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 60px rgba(226,88,34,.45)}
.orbit .core img{width:48%}
.orbit .core b{color:var(--navy);font-size:.85rem;margin-top:.3rem}
.orbit .spin{position:absolute;inset:0;animation:spin 40s linear infinite}
.orbit .sat{position:absolute;left:50%;top:50%;width:0;height:0}
.orbit .sat span{position:absolute;white-space:nowrap;background:rgba(28,43,58,.75);border:1px solid rgba(255,255,255,.22);color:#E6ECF2;font-size:.8rem;font-weight:700;padding:.4rem .75rem;border-radius:999px;backdrop-filter:blur(4px);animation:unspin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes unspin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* layer explorer */
.explorer{display:grid;grid-template-columns:320px 1fr;gap:1.4rem}
@media(max-width:900px){.explorer{grid-template-columns:1fr}}
.ex-list{display:grid;gap:.55rem;align-content:start}
.ex-list button{all:unset;cursor:pointer;display:flex;align-items:center;gap:.8rem;background:#fff;border-radius:12px;padding:.95rem 1.1rem;box-shadow:var(--shadow);font-weight:700;color:var(--navy);position:relative;overflow:hidden}
.ex-list button .no{font-family:var(--mono);color:var(--grey);font-size:.8rem}
.ex-list button .pg{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange)}
.ex-list button.on{background:var(--navy);color:#fff}
.ex-list button.on .no{color:#FDB58F}
.ex-panel{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:2rem;border:2px solid var(--orange-soft);min-height:360px;position:relative;overflow:hidden}
.ex-panel .tag{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;color:var(--orange);font-size:.9rem}
.ex-panel .tag img{height:22px}
.ex-panel h3{font-size:1.6rem;margin:.5rem 0 .6rem}
.ex-panel .tl{color:var(--grey);font-size:1.02rem}
.ex-panel ul{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ex-panel li{background:var(--bg);border-radius:10px;padding:.8rem .9rem;font-size:.93rem;animation:fadeUp .45s both}
.ex-panel li b{display:block;color:var(--navy)}
.ex-panel .impl{margin-top:1.3rem;font-size:.82rem;color:var(--grey);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.ex-panel .impl span{font-family:var(--mono);background:var(--bg);padding:.2rem .55rem;border-radius:6px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){.ex-panel ul{grid-template-columns:1fr}}

/* hub diagram */
.hub{width:100%;max-width:900px;margin:0 auto;display:block}
.hub text{font-family:var(--font)}

/* masking demo */
.maskdemo{display:grid;grid-template-columns:260px 1fr;gap:1.2rem}
@media(max-width:900px){.maskdemo{grid-template-columns:1fr}}
.roles{display:grid;gap:.6rem;align-content:start}
.role{all:unset;cursor:pointer;background:#fff;border-radius:12px;padding:.9rem 1rem;box-shadow:var(--shadow);display:flex;gap:.8rem;align-items:center}
.role .av{width:38px;height:38px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.role b{display:block;color:var(--navy);font-size:.95rem}
.role small{color:var(--grey);font-size:.78rem}
.role.on{background:var(--navy)}.role.on b{color:#fff}.role.on small{color:#9FB0C3}.role.on .av{background:var(--orange)}
.policies{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.policies span{font-size:.78rem;font-family:var(--mono);padding:.3rem .6rem;border-radius:6px;background:var(--orange-soft);color:var(--orange-deep);animation:pop .35s}
.policies span.g{background:#DCFCE7;color:#166534}
td.masked{color:var(--orange-deep);font-family:var(--mono)}
.audit{margin-top:1rem;background:#0F1720;border-radius:10px;padding:.8rem 1rem;font-family:var(--mono);font-size:.74rem;color:#9FB0C3;height:92px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.audit div{animation:fadeUp .35s}
.audit b{color:#7DD3A6;font-weight:500}

/* governance flow */
.gflow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;margin-top:1.6rem}
.gflow .st{background:#fff;border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow);text-align:center;position:relative;transition:transform .3s,background .3s}
.gflow .st .n{font-size:1.25rem;font-weight:900;color:var(--navy)}
.gflow .st p{font-size:.88rem;color:var(--grey);margin-top:.3rem}
.gflow .st .by{display:inline-block;margin-top:.7rem;font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:999px}
.gflow .st .by.w{background:#E0E7FF;color:#3730A3}.gflow .st .by.h{background:var(--orange-soft);color:var(--orange-deep)}
.gflow .st.on{transform:translateY(-6px);background:var(--navy)}
.gflow .st.on .n{color:#fff}.gflow .st.on p{color:#9FB0C3}
@media(max-width:900px){.gflow{grid-template-columns:1fr 1fr}}

/* deployment diagram */
.deploy{display:grid;grid-template-columns:180px 1fr 180px;gap:1rem;align-items:center}
@media(max-width:1000px){.deploy{grid-template-columns:1fr}}
.deploy .side{background:#fff;border-radius:12px;padding:1rem;box-shadow:var(--shadow);text-align:center;font-size:.88rem}
.deploy .side b{display:block;color:var(--navy);margin-bottom:.3rem}
.dframe{background:#fff;border-radius:18px;border:2px solid var(--orange-soft);box-shadow:var(--shadow);padding:1.1rem}
.drow{display:grid;grid-template-columns:170px 1fr;gap:1rem;align-items:center;background:var(--bg);border-radius:12px;padding:.8rem 1rem;margin-top:.6rem}
.drow .lab b{display:block;color:var(--navy)}
.drow .lab small{color:var(--grey);font-size:.78rem}
.nodes{display:flex;gap:.5rem;flex-wrap:wrap}
.srv{width:64px;height:46px;border-radius:8px;background:var(--navy);position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
.srv::before,.srv::after{content:"";height:4px;border-radius:2px;background:#2F4360}
.srv i{position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#7DD3A6;animation:led 1.2s infinite}
.srv.c{background:var(--orange)}.srv.c::before,.srv.c::after{background:#F7A07A}
.srv.s{background:#3B4A5E}
@keyframes led{50%{opacity:.25}}
.netband{margin-top:.8rem;height:38px;border-radius:10px;background:var(--navy);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-family:var(--mono)}
.netband .pk{position:absolute;top:50%;width:26px;height:4px;border-radius:2px;background:#FDB58F;transform:translateY(-50%);box-shadow:0 0 10px #FDB58F}
@media(max-width:700px){.drow{grid-template-columns:1fr}}
table.spec{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.92rem}
table.spec th{background:var(--navy);color:#fff;text-align:left;padding:.85rem 1rem;font-weight:700}
table.spec td{padding:.85rem 1rem;border-bottom:1px solid #EEF1F5}
table.spec td:first-child{font-weight:800;color:var(--navy)}
.optchips{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.optchips span{background:#fff;box-shadow:var(--shadow);padding:.5rem .9rem;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--navy)}

/* ops dashboard */
.dash{background:#0F1720;border-radius:18px;padding:1.2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;box-shadow:0 20px 50px rgba(15,23,32,.35)}
@media(max-width:1000px){.dash{grid-template-columns:1fr 1fr}}
.tile{background:#16212E;border-radius:12px;padding:1rem;min-height:150px;display:flex;flex-direction:column}
.tile .t{font-size:.75rem;color:#8A98A8;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.tile .v{font-size:1.7rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;margin:.2rem 0}
.tile .v small{font-size:.8rem;color:#8A98A8;font-weight:500}
.tile canvas{width:100%;flex:1;min-height:60px;display:block}
.tile.wide{grid-column:span 2}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.5rem}
.svc span{font-size:.78rem;color:#C7D0DB;display:flex;align-items:center;gap:.45rem}
.svc span::before{content:"";width:8px;height:8px;border-radius:50%;background:#16A34A;box-shadow:0 0 8px #16A34A}
.alerts{font-family:var(--mono);font-size:.72rem;color:#9FB0C3;display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem;overflow:hidden;flex:1;justify-content:flex-end}
.alerts div{animation:fadeUp .4s}
.alerts .w{color:#FBBF24}.alerts .ok{color:#7DD3A6}
.dash-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;color:#C7D0DB;font-size:.85rem}
.dash-head b{color:#fff}
.dash-head .live{display:inline-flex;align-items:center;gap:.4rem;color:#7DD3A6;font-family:var(--mono);font-size:.75rem}
.dash-head .live::before{content:"";width:8px;height:8px;border-radius:50%;background:#16A34A;animation:led 1s infinite}

/* ===== adoption ===== */
.startc{background:#fff;border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .3s}
.startc:hover{transform:translateY(-6px)}
.startc .big{font-size:2.4rem;line-height:1}
.startc h3{font-size:1.2rem;margin:.8rem 0 .5rem}
.startc p{font-size:.95rem}
.startc .fit{margin-top:1rem;font-size:.82rem;color:var(--grey)}
.startc .fit b{color:var(--orange)}
.startc.feat{border:2px solid var(--orange)}
.coex-ctl{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}
.coex-ctl .btn{padding:.55rem 1rem;font-size:.9rem}
.coex-ctl .btn.on{background:var(--navy);color:#fff}
.coex{width:100%;max-width:980px;margin:0 auto;display:block}

.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;position:relative}
.stepper button{all:unset;cursor:pointer;background:#fff;border-radius:12px;padding:1rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stepper button .ph{font-family:var(--mono);font-size:.78rem;color:var(--grey);font-weight:700}
.stepper button b{display:block;color:var(--navy);font-size:1.05rem;margin-top:.2rem}
.stepper button small{color:var(--grey);font-size:.8rem}
.stepper button .pg{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--orange)}
.stepper button.on{background:var(--navy)}
.stepper button.on b{color:#fff}.stepper button.on .ph{color:#FDB58F}.stepper button.on small{color:#9FB0C3}
.stepper button.done .ph::after{content:" ✓";color:var(--green)}
@media(max-width:800px){.stepper{grid-template-columns:1fr 1fr}}
.phase-panel{margin-top:1rem;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:1.8rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;border:2px solid var(--orange-soft)}
@media(max-width:900px){.phase-panel{grid-template-columns:1fr}}
.phase-panel h4{font-size:.8rem;color:var(--orange);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem}
.phase-panel ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.phase-panel li{background:var(--bg);border-radius:8px;padding:.55rem .8rem;font-size:.92rem;animation:fadeUp .4s both}

.gauge{background:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);text-align:center}
.gauge svg{width:110px;height:110px;display:block;margin:0 auto .6rem}
.gauge .arc{stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.gauge.in .arc{stroke-dashoffset:0}
.gauge .ck{opacity:0;transition:opacity .4s 1.5s}
.gauge.in .ck{opacity:1}
.gauge h3{font-size:1.05rem}
.gauge p{font-size:.88rem;color:var(--grey);margin-top:.3rem}

.support{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4rem}
@media(max-width:900px){.support{grid-template-columns:1fr}}
.courses{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.courses div{background:var(--bg);border-radius:10px;padding:.8rem;font-weight:700;color:var(--navy);display:flex;gap:.6rem;align-items:center}
.courses div span{width:30px;height:30px;border-radius:8px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex:0 0 auto}
.slv{display:grid;gap:.7rem;margin-top:1rem}
.slv div{display:grid;grid-template-columns:70px 1fr;gap:.8rem;align-items:center;font-weight:800;color:var(--navy)}
.slv .bar{height:14px;border-radius:7px;background:var(--bg);overflow:hidden}
.slv .bar i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,#FDB58F,var(--orange));transition:width 1.4s}
.in .slv .bar i{width:var(--w)}

.faq{display:grid;gap:.7rem}
.faq details{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:0 1.3rem;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:800;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--orange);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.1rem;color:var(--body)}

/* ===== about ===== */
.story{position:relative;max-width:820px;margin:0 auto}
.story::before{content:"";position:absolute;left:23px;top:0;bottom:0;width:3px;background:var(--line)}
.story .fill{position:absolute;left:23px;top:0;width:3px;height:0;background:var(--orange);transition:height .15s linear}
.story .it{position:relative;padding-left:72px;margin-bottom:1.8rem}
.story .it .dot{position:absolute;left:10px;top:4px;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .4s}
.story .it.in .dot{border-color:var(--orange);background:var(--orange-soft)}
.story .it .yr{font-family:var(--mono);font-weight:800;color:var(--orange);font-size:.9rem}
.story .it h3{font-size:1.2rem;margin:.2rem 0 .4rem}
.story .it .box{background:#fff;border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.ind{background:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);transition:transform .3s,background .3s}
.ind:hover{transform:translateY(-6px);background:var(--navy)}
.ind:hover h3{color:#fff}.ind:hover p{color:#9FB0C3}
.ind .e{font-size:2rem}
.ind h3{font-size:1.1rem;margin:.6rem 0 .3rem;transition:color .3s}
.ind p{font-size:.9rem;color:var(--grey);transition:color .3s}
.why{background:#fff;border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow);border-top:4px solid var(--orange)}
.why .n{font-family:var(--mono);color:var(--orange);font-weight:800}
.why h3{font-size:1.2rem;margin:.4rem 0 .6rem}

/* mini CTA */
.minicta{background:var(--navy);border-radius:20px;padding:2.6rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;color:#C7D0DB;position:relative;overflow:hidden}
.minicta h2{color:#fff;font-size:clamp(1.4rem,2.6vw,2rem)}
.minicta p{margin-top:.4rem}
.minicta::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(226,88,34,.45),transparent 70%)}
.minicta .actions{display:flex;gap:.7rem;flex-wrap:wrap;position:relative;z-index:1}

/* ===== Grafana-style monitoring recreation ===== */
.gf{background:#111217;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);margin-top:2rem;color:#CCCCDC;font-family:Inter,"Noto Sans TC",system-ui,sans-serif}
.gf-top{display:flex;align-items:center;gap:.9rem;padding:.55rem 1rem;background:#181B1F;border-bottom:1px solid #25282E;flex-wrap:wrap}
.gf-top img{height:22px}
.gf-crumb{font-size:.8rem;color:#9FA7B3}
.gf-crumb b{color:#fff;font-weight:600}
.gf-tabs{display:flex;gap:.3rem;margin-left:auto}
.gf-tabs button{all:unset;cursor:pointer;font-size:.75rem;padding:.3rem .7rem;border-radius:4px;color:#9FA7B3;border:1px solid #2A2D33}
.gf-tabs button:hover{color:#fff}
.gf-tabs button.on{background:#3D71D9;color:#fff;border-color:#3D71D9}
.gf-right{display:flex;gap:.45rem;font-size:.75rem}
.gf-right span{border:1px solid #2A2D33;padding:.25rem .55rem;border-radius:4px;white-space:nowrap}
.gf-live{color:#73BF69;display:inline-flex;align-items:center;gap:.35rem}
.gf-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#73BF69;animation:led 1s infinite}
.gf-vars{display:flex;gap:.5rem;padding:.7rem 1rem 0;flex-wrap:wrap}
.gf-vars span{font-size:.72rem;display:inline-flex;border:1px solid #2A2D33;border-radius:3px;overflow:hidden}
.gf-vars span i{font-style:normal;background:#181B1F;color:#6E9FFF;padding:.3rem .6rem;border-right:1px solid #2A2D33}
.gf-vars span b{padding:.3rem .6rem;font-weight:500;color:#CCCCDC}
.gf-body{padding:.6rem 1rem 1rem}
.gf-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:26px;gap:8px;grid-auto-flow:row dense}
.gf-row{grid-column:1/-1;font-size:.9rem;font-weight:600;color:#fff;display:flex;align-items:flex-end;padding-bottom:2px}
.gp{background:#181B1F;border:1px solid #22252B;border-radius:4px;display:flex;flex-direction:column;min-width:0;min-height:0;padding:.4rem .55rem .35rem;overflow:hidden}
.gp-t{font-size:.74rem;font-weight:600;color:#CCCCDC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem;flex:0 0 auto}
.gp canvas{flex:1 1 auto;width:100%;min-height:0;display:block}
.gp-lg{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:.64rem;color:#CCCCDC;margin-top:.15rem;flex:0 0 auto}
.gp-lg i,.gp-kv i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:.3rem;vertical-align:middle}
.gp-kv{display:grid;grid-template-columns:1fr auto;gap:.1rem .5rem;font-size:.68rem;margin-top:.2rem;flex:0 0 auto}
.gp-kv b{font-weight:500;text-align:right}
.gp-big{font-size:2.3rem;font-weight:500;color:#73BF69;text-align:center;line-height:1.1;flex:0 0 auto;font-variant-numeric:tabular-nums}
.gp-stat canvas{flex:0 0 38%}
.gf-note{font-size:.8rem;color:#8A98A8;margin-top:.8rem;text-align:right}
@media(max-width:900px){.gf-dash{grid-template-columns:repeat(2,minmax(0,1fr))}.gp{grid-column:span 2 !important;grid-row:span 6 !important}.gf-tabs{margin-left:0}}

.gf-top .gf-logo{height:24px}

/* why Hare vs DIY */
.diy{display:grid;gap:.55rem}
.diy-row{display:grid;grid-template-columns:160px 1fr 1fr;gap:.55rem;align-items:stretch}
.diy-row>span{padding:1rem 1.1rem;border-radius:12px;font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.diy-row .k{font-weight:800;color:var(--navy);background:#fff;box-shadow:var(--shadow)}
.diy-row .d{background:#EEF1F5;color:var(--grey)}
.diy-row .h{background:#fff;color:var(--navy);font-weight:600;box-shadow:var(--shadow);border-left:4px solid var(--orange)}
.diy-row:not(.diy-head) .d::before{content:"✕";color:#B0B7C3;font-weight:800}
.diy-row:not(.diy-head) .h::before{content:"✓";color:#fff;background:var(--orange);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;flex:0 0 auto;transform:scale(0);transition:transform .4s cubic-bezier(.2,.9,.3,1.5) .3s}
.diy-row.in .h::before{transform:scale(1)}
.diy-head>span{background:none!important;box-shadow:none!important;border:0!important;font-weight:800;padding-bottom:.2rem}
.diy-head .d{color:var(--grey)}
.diy-head .h{color:var(--orange)}
.diy-head .h img{height:22px}
@media(max-width:800px){.diy-row{grid-template-columns:1fr}.diy-head{display:none}}
/* privacy page */
.privacy{display:grid;gap:1.2rem;padding:2rem}
.privacy .pv{border-bottom:1px solid #EEF1F5;padding-bottom:1rem}
.privacy .pv:last-child{border-bottom:0}
.privacy h3{font-size:1.05rem;margin-bottom:.3rem}