:root{
  --ink:#000; --text:#1A1A1A; --muted:#595959; --line:#E3E3E3; --soft:#F2F2F2; --soft2:#F7F7F7;
  --gold:#A83232; --gold-deep:#8E2626;
  --red:#B91C1C; --red-tint:#FEF2F2; --green:#047857; --green-tint:#ECFDF5;
}
h1,h2,h3,h4,.btn,.links,.brand,.label,.go,.tab,.badge,.k,.num,input,.fine,.status,.disc,.pill,.mini{font-family:'Noto Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:#fff;color:var(--text);font-family:'Lora',Georgia,serif;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{color:var(--ink);margin:0;letter-spacing:-0.02em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* floating nav */
.navwrap{position:fixed;top:0;left:0;width:100%;z-index:50;padding:12px clamp(12px,3vw,32px) 0}
.nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;padding:0 20px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo{width:38px;height:38px;border-radius:10px;background:var(--gold);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;font-family:'Noto Sans',sans-serif}
.logo-img{height:44px;width:auto;display:block}
.foot-logo{height:32px;filter:brightness(0) invert(1)}
.brand b{display:block;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;line-height:1.1}
.brand small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.links{display:flex;align-items:center;gap:6px}
.links a{font-size:14px;font-weight:600;color:var(--text);text-decoration:none;padding:8px 12px;border-radius:10px}
.links a:hover{background:var(--soft);color:var(--ink)}
.links a.cta{background:var(--gold);color:#fff;margin-left:8px;padding:11px 18px;border-radius:12px}
.links a.cta:hover{background:var(--gold-deep)}
@media(max-width:980px){.links a:not(.cta){display:none}}
@media(max-width:480px){.brand small{display:none}.links a.cta{padding:10px 14px;font-size:13px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:12px;border:0;font:700 16px 'Noto Sans',sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#222}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--ink)}

.label{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.band{padding:clamp(72px,9vw,112px) 0}
.band.tint{background:var(--soft2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center{text-align:center}
h2.big{font-size:clamp(32px,4.6vw,52px);line-height:1.08;font-weight:800}
.sub2{font-size:clamp(18px,2vw,22px);color:var(--text);max-width:780px;margin:16px auto 0}

/* hero */
.hero{padding:clamp(120px,14vw,168px) 0 clamp(64px,8vw,104px);position:relative}
.hero::before{content:"";position:absolute;top:70px;left:50%;transform:translateX(-50%);width:100%;max-width:1180px;height:360px;background:radial-gradient(ellipse at 30% 40%,rgba(168,50,50,.07),transparent 65%),radial-gradient(ellipse at 80% 60%,rgba(0,0,0,.05),transparent 60%);filter:blur(30px);z-index:-1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(40px,6vw,76px);line-height:1.04;font-weight:800;letter-spacing:-0.035em}
.hero p.lede{font-size:clamp(18px,2vw,22px);line-height:1.6;color:var(--text);max-width:640px;margin:26px 0 34px}
.hero p.lede .way{display:block;margin-top:14px}
.hero p.lede strong{color:var(--ink);font-family:'Noto Sans',sans-serif;font-weight:700}
.hero .btn{min-height:58px;padding:0 34px;font-size:17px}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* hero preview card */
.pv{position:relative}
.pv::before{content:"";position:absolute;inset:-4px;background:linear-gradient(135deg,rgba(168,50,50,.35),rgba(0,0,0,.2));border-radius:26px;filter:blur(14px);opacity:.35;z-index:-1}
.pvbox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.pvtop{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--soft);margin-bottom:18px;font-family:'Noto Sans',sans-serif}
.pvtop span:first-child{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--gold)}
.pill{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--text)}
.mini{border-radius:14px;padding:16px 18px}
.mini.old{background:var(--red-tint);border:1px solid #FECACA}
.mini.new{background:var(--green-tint);border:1px solid #A7F3D0}
.mini .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.mini.old .k{color:var(--red)}.mini.new .k{color:var(--green)}
.mini p{font-family:'Noto Sans',sans-serif;font-size:15px;line-height:1.45;font-weight:600;color:var(--ink)}
.arrow{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;margin:-8px auto;position:relative;z-index:1;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.arrow svg{width:16px;height:16px}
.pvfoot{margin-top:18px;padding-top:14px;border-top:1px solid var(--soft);text-align:right;font-family:'Noto Sans',sans-serif;font-size:13.5px;font-weight:700}
.pvfoot a{color:var(--gold-deep);text-decoration:none}
.pvfoot a:hover{text-decoration:underline}

.problem{padding:0 0 clamp(64px,8vw,104px)}
.gaplead{max-width:820px;margin:0 auto;text-align:center;font-size:clamp(21px,2.6vw,28px);line-height:1.4;color:var(--ink);font-weight:500}
.gapcards{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:stretch;max-width:960px;margin:40px auto 44px}
.gcard{border-radius:22px;padding:34px 30px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.gcard p{font-family:'Noto Sans',sans-serif;font-weight:800;font-size:clamp(22px,2.5vw,30px);line-height:1.2;letter-spacing:-0.02em;color:var(--ink)}
.gcard.mind{background:#fff;border:2px solid var(--ink)}
.gcard.old{background:#FBEFEF;border:2px solid #E3B4B4}
.gico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.gico svg{width:21px;height:21px}
.gcard.mind .gico{background:var(--ink)}
.gcard.old .gico{background:var(--gold)}
.gconn{display:flex;align-items:center;justify-content:center;gap:12px}
.gconn i{display:block;width:20px;border-top:3px dashed #B9B9B9}
.gapclose{max-width:820px;margin:0 auto;text-align:center;font-size:clamp(19px,2.2vw,24px);line-height:1.55;color:var(--text)}
.gapclose em{font-style:normal;font-weight:600;color:var(--gold-deep)}
@media(max-width:760px){.gapcards{grid-template-columns:minmax(0,1fr)}.gconn{flex-direction:column;height:64px}.gconn i{width:0;height:16px;border-top:0;border-left:3px dashed #B9B9B9}.gcard{min-height:0}}
/* method */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:52px 0 44px}
.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px}
.step .n{width:36px;height:36px;border-radius:10px;background:var(--soft);color:var(--ink);font-family:'Noto Sans',sans-serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.step h3{font-size:22px;font-weight:800;margin-bottom:8px}
.step p{font-size:16.5px;color:var(--text)}
.anchor{max-width:820px;margin:0 auto;padding-top:36px;border-top:1px solid var(--line);font-size:clamp(18px,2vw,21px);line-height:1.65;color:var(--ink);text-align:center}
@media(max-width:800px){.steps{grid-template-columns:minmax(0,1fr)}}

.core{max-width:800px;margin:44px auto 0;font-size:clamp(19px,2.2vw,23px);line-height:1.65;color:var(--ink);text-align:center}
/* simulator */
.simhead{text-align:center;margin-top:clamp(64px,8vw,96px)}
.simhead h3{font-size:clamp(26px,3.2vw,36px);font-weight:800;margin-top:10px}
.simhead p{color:var(--muted);font-size:17px;margin-top:8px}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 28px}
.tab{min-height:46px;padding:0 20px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--text);font:600 14px 'Noto Sans',sans-serif;cursor:pointer;transition:background .15s,border-color .15s}
.tab:hover{border-color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.engine{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(20px,4vw,36px);box-shadow:0 18px 40px rgba(0,0,0,.06)}
.panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pane{border-radius:18px;padding:24px;border:1.5px solid;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;transition:background .25s,border-color .25s}
.pane.loop{background:var(--red-tint);border-color:#FCA5A5}
.pane.idle{background:var(--soft2);border-color:var(--line);border-style:dashed}
.pane.warn{background:var(--soft);border-color:#BDBDBD}
.pane.ok{background:var(--green-tint);border-color:#6EE7B7}
.pane .k{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;padding:5px 12px;border-radius:999px}
.pane.loop .k{background:#FECACA;color:var(--red)}
.pane.idle .k{background:var(--soft);color:var(--muted)}
.pane.warn .k{background:#E3E3E3;color:var(--ink)}
.pane.ok .k{background:#A7F3D0;color:var(--green)}
.pane .t{display:block;font-size:clamp(17px,2vw,20px);font-weight:600;color:var(--ink);line-height:1.45}
.pane.idle .t{color:var(--muted);font-weight:500}
.pane .foot{font-family:'Noto Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--muted);border-top:1px solid rgba(0,0,0,.08);padding-top:12px}
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.note{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--soft);font-size:14.5px;color:var(--text);text-align:center}
@media(max-width:700px){.panes,.acts{grid-template-columns:minmax(0,1fr)}.pane{min-height:0}}

/* ecosystem */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:56px}
.tcard{display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:20px;padding:30px 26px;background:#fff;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;text-align:left}
.tcard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.07)}
.tcard .num{width:46px;height:46px;border-radius:12px;background:var(--soft);color:var(--gold-deep);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:background .2s,color .2s}
.tcard:hover .num{background:var(--gold);color:#fff}
.tcard h3{font-size:22px;font-weight:800;margin-bottom:12px}
.tcard p{font-size:16px;line-height:1.6;color:var(--text)}
.tcard .more{margin-top:22px;padding-top:16px;border-top:1px solid var(--soft);font-family:'Noto Sans',sans-serif;font-size:13px;font-weight:700;color:var(--gold-deep)}
.disc{margin:28px auto 0;font-size:13.5px;color:var(--muted);max-width:640px;text-align:center}
@media(max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid4{grid-template-columns:minmax(0,1fr)}}

/* articles (dark band) */
.dark{background:#0B0B0B;color:#fff}
.dark .label{color:#E8A0A0}
.dark h2{color:#fff}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{display:flex;flex-direction:column;justify-content:space-between;gap:28px;background:#161616;border:1px solid #2A2A2A;border-radius:20px;padding:28px;text-decoration:none;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card h3{font-size:21px;line-height:1.3;font-weight:700;color:#fff}
.card .go{font-size:14px;font-weight:700;color:#F0B3B3}
.dark .btn-line{background:transparent;color:#fff;border-color:#3A3A3A}
.dark .btn-line:hover{border-color:#fff}
@media(max-width:900px){.grid3{grid-template-columns:minmax(0,1fr)}}

/* opt-in */
.final{position:relative;overflow:hidden;background:var(--gold);color:#fff;border-radius:32px;padding:clamp(36px,7vw,76px);text-align:center}
.final::before{content:"";position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08)}
.final::after{content:"";position:absolute;left:12%;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(0,0,0,.12)}
.final>*{position:relative;z-index:1}
.final h2{color:#fff;font-size:clamp(32px,4.8vw,54px);line-height:1.06;font-weight:800;max-width:820px;margin:0 auto 18px}
.final .lead{font-size:clamp(17px,1.9vw,20px);color:rgba(255,255,255,.94);max-width:760px;margin:0 auto}
.signup{display:flex;gap:10px;max-width:580px;flex-wrap:wrap;margin:34px auto 0;justify-content:center}
.signup input{flex:1 1 260px;min-width:0;height:56px;padding:0 20px;border:0;border-radius:14px;font:500 16px 'Noto Sans',sans-serif;color:var(--ink);background:#fff}
.signup input:focus{outline:3px solid #000;outline-offset:2px}
.signup .btn{height:56px;background:#000;color:#fff}
.signup .btn:hover{background:#222}
.status{min-height:24px;margin-top:12px;font-size:15px;font-weight:700;color:#fff}
.final .fine{font-size:14px;color:rgba(255,255,255,.88);margin-top:6px}

/* footer */
footer{background:#000;color:#9A9A9A;padding:44px 0 36px;font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot .brand b{color:#fff;font-size:17px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:#CFCFCF}
.foot nav a:hover{color:#fff}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55)}
.modal[hidden]{display:none}
.modal-box{position:relative;width:100%;max-width:520px;background:#fff;border-radius:22px;padding:clamp(26px,5vw,40px);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-box h3{font-size:clamp(24px,3.4vw,30px);line-height:1.15;font-weight:800;margin:10px 0 12px}
.modal-q{font-family:'Noto Sans',sans-serif;font-weight:700;font-size:16px;color:var(--ink);padding:12px 14px;background:var(--soft);border-radius:12px;margin-bottom:12px}
.modal-q:empty{display:none}
.modal-p{font-size:17px;color:var(--text)}
.modal-form{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.modal-form input[type=email]{height:54px;padding:0 18px;border:1.5px solid var(--line);border-radius:12px;font:500 16px 'Noto Sans',sans-serif;color:var(--ink)}
.modal-form input[type=email]:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.modal-box .status{color:var(--gold-deep);min-height:24px;margin-top:10px}
.modal-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;background:transparent;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;border-radius:10px}
.modal-x:hover{background:var(--soft)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.navwrap~main{padding-top:110px}
.post{max-width:720px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(20px,4vw,40px) 24px}
.post h1{font-size:clamp(32px,5vw,50px);line-height:1.1;font-weight:800;margin:14px 0 28px}
.post h2{font-size:clamp(23px,3vw,29px);line-height:1.2;font-weight:800;margin:46px 0 14px}
.post p{margin:0 0 30px;font-size:19px;line-height:1.75}
.post .lede{font-size:21px;line-height:1.65;color:var(--ink);font-weight:500}
.post .step{padding-left:18px;border-left:3px solid var(--gold)}
.post .step strong{font-family:'Noto Sans',sans-serif;color:var(--gold-deep)}
.post .closer{margin-top:38px;font-size:21px;line-height:1.6;color:var(--ink);font-weight:600}
.hero{margin:0 0 30px}.hero img{display:block;width:100%;height:auto;border-radius:18px;aspect-ratio:16/9;object-fit:cover}
.back{display:inline-block;font:600 14px 'Noto Sans',sans-serif;color:var(--muted);text-decoration:none;margin-bottom:6px}
.back:hover{color:var(--ink)}
.post .hero{margin:0 0 32px}
.post h1{margin:0 0 28px}
.post blockquote.lede{margin:0 0 34px;padding:2px 0 2px 24px;border-left:4px solid var(--gold);font-style:italic;font-size:21px;line-height:1.7;color:var(--text)}
.back.end{display:inline-block;margin-top:18px}
.sub{padding:20px 0 clamp(60px,8vw,96px)}
.sub .final h2{font-size:clamp(28px,4vw,42px)}

/* library, tags, related */
.lib{padding:clamp(120px,13vw,160px) 0 clamp(48px,6vw,80px)}
.lib h1{font-size:clamp(34px,5vw,56px);line-height:1.08;font-weight:800}
.lib .intro{margin:14px 0 28px;font-size:19px;color:var(--muted);max-width:640px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.chips.big{margin-bottom:36px}
.chip{font:600 14px 'Noto Sans',sans-serif;text-decoration:none;color:var(--text);background:var(--soft);padding:8px 14px;border-radius:999px}
.chip:hover{background:var(--line)}
.chip.on{background:var(--ink);color:#fff}
.alist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post .alist{grid-template-columns:minmax(0,1fr)}
.acard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s}
.acard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.acard .thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--soft)}
.acard .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.acard .atxt{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px}
.acard h3{font-size:20px;line-height:1.25;font-weight:800}
.acard p{font-size:16px;line-height:1.55;color:var(--muted)}
.acard .go{font:700 14px 'Noto Sans',sans-serif;color:var(--gold)}
.atags{display:flex;flex-wrap:wrap;gap:6px}
.tagtxt{font:600 11px 'Noto Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.tagtxt+.tagtxt::before{content:"\00b7";margin-right:6px;color:var(--muted)}
.post .meta{margin:-10px 0 26px;font:500 14px 'Noto Sans',sans-serif;color:var(--muted)}
.related{margin-top:48px}
.related h2{margin:0 0 18px}
@media(max-width:980px){.alist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.alist{grid-template-columns:minmax(0,1fr)}}

/* phones: header scrolls away with the page */
@media(max-width:700px){.navwrap{position:absolute}}