/* Systemology homepage (2026). Layout and motion patterns modeled on github.com/home,
   palette from Deal of the Week Pro. Base type per Rule 153 (18px / 1.7). */
:root{
  --bg:#09090f; --panel:#13141f; --panel2:#1b1c2c; --panel3:#222338; --line:#36375a;
  --text:#f2f2fc; --muted:#abacc8;
  --crimson:#ad3457; --crimson-deep:#943049; --crimson-bg:rgba(173,52,87,.12); --crimson-line:rgba(173,52,87,.35);
  --green:#22c55e; --green-bg:rgba(34,197,94,.12);
  --sans:'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif:Georgia, 'Times New Roman', Times, serif;
  --maxw:1200px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:18px; scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; border-radius:6px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; }
@media (min-width:700px){ .wrap{ padding:0 32px; } }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:600 .9rem/1 var(--sans); padding:.85rem 1.4rem; border-radius:10px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s; white-space:nowrap; }
.btn.primary{ background:var(--crimson); color:#fff; }
.btn.primary:hover{ background:var(--crimson-deep); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--muted); }
.btn.sm{ padding:.6rem 1rem; font-size:.8rem; }

/* header + mega menu */
.hdr{ position:sticky; top:0; z-index:40; background:rgba(9,9,15,.72); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s; }
.hdr.scrolled{ border-bottom-color:rgba(54,55,90,.6); }
.hdr .wrap{ display:flex; align-items:center; gap:28px; height:68px; }
.brand img{ height:22px; width:auto; filter:invert(1) grayscale(1) brightness(2); }
.menu{ display:flex; gap:4px; list-style:none; flex:1; }
.menu > li{ position:relative; }
.menu-btn{ background:none; border:0; color:var(--text); font:500 .85rem var(--sans); padding:.55rem .8rem; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:.35rem; }
.menu-btn:hover, .menu > li.open .menu-btn{ background:var(--panel2); }
.menu-btn svg{ transition:transform .2s; }
.menu > li.open .menu-btn svg{ transform:rotate(180deg); }
.mega{ position:absolute; top:calc(100% + 10px); left:0; min-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 24px 48px rgba(0,0,0,.5); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s, transform .16s; }
.menu > li.open .mega{ opacity:1; transform:none; pointer-events:auto; }
.mega a{ display:grid; grid-template-columns:36px 1fr; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; }
.mega a:hover{ background:var(--panel2); }
.mega .ico{ width:36px; height:36px; border-radius:9px; background:var(--crimson-bg); border:1px solid var(--crimson-line); display:grid; place-items:center; color:#e2809c; }
.mega b{ display:block; font-size:.85rem; font-weight:600; line-height:1.4; }
.mega span{ display:block; font-size:.75rem; color:var(--muted); line-height:1.5; }
.hdr-cta{ display:flex; gap:10px; }
.menu .m-only{ display:none; }
.burger{ display:none; background:none; border:1px solid var(--line); border-radius:8px; color:var(--text); width:40px; height:40px; cursor:pointer; margin-left:auto; }

/* hero */
.hero{ position:relative; padding:96px 0 0; text-align:center; isolation:isolate; }
.hero::before{ content:""; position:absolute; inset:-120px 0 auto; height:900px; z-index:-1;
  background:radial-gradient(ellipse 55% 45% at 50% 30%, rgba(173,52,87,.38), transparent 70%),
             radial-gradient(ellipse 35% 30% at 20% 55%, rgba(96,52,173,.18), transparent 70%); }
.hero::after{ content:""; position:absolute; inset:0 0 30%; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(54,55,90,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(54,55,90,.35) 1px, transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(ellipse 60% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 30%, #000 20%, transparent 75%); }
.pill{ display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; color:var(--muted); background:rgba(19,20,31,.8); border:1px solid var(--line); border-radius:99px; padding:.35rem .9rem .35rem .4rem; text-decoration:none; margin-bottom:28px; }
.pill i{ font-style:normal; background:var(--green-bg); color:var(--green); border-radius:99px; padding:.1rem .6rem; font-weight:600; }
.pill:hover{ border-color:var(--muted); color:var(--text); }
.hero h1{ font-size:clamp(2.6rem, 7.2vw, 5.4rem); font-weight:800; font-stretch:112%; line-height:1.02; letter-spacing:-.035em; max-width:14ch; margin:0 auto 24px; text-wrap:balance; }
.hero .sub{ font-size:clamp(1.05rem, 2vw, 1.3rem); color:var(--muted); max-width:38ch; margin:0 auto 36px; line-height:1.55; }
.hero .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* hero load sequence */
.seq{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.seq.d1{ animation-delay:.08s } .seq.d2{ animation-delay:.18s } .seq.d3{ animation-delay:.28s } .seq.d4{ animation-delay:.45s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* system map: the hero's product window */
.window{ margin:72px auto 0; max-width:1040px; text-align:left; background:linear-gradient(180deg, var(--panel) 0%, rgba(19,20,31,.92) 100%); border:1px solid var(--line); border-radius:16px; box-shadow:0 0 0 1px rgba(173,52,87,.08), 0 40px 120px -20px rgba(173,52,87,.35); overflow:hidden; }
.window .bar{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:.75rem; color:var(--muted); }
.dots{ display:flex; gap:6px; } .dots i{ width:10px; height:10px; border-radius:50%; background:var(--panel3); }
.live{ margin-left:auto; display:flex; align-items:center; gap:.45rem; color:var(--green); font-weight:600; }
.live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:ping 2s infinite; }
@keyframes ping{ 70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
.flow{ position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; padding:40px 28px 28px; }
.track{ position:absolute; left:calc(10% + 14px); right:calc(10% + 14px); top:64px; height:2px; background:var(--line); }
.track::after{ content:""; position:absolute; inset:0; width:var(--fill, 0%); background:linear-gradient(90deg, var(--crimson-deep), var(--crimson)); transition:width .9s cubic-bezier(.4,0,.2,1); }
.pulse{ position:absolute; top:-5px; left:var(--fill, 0%); width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(173,52,87,.45), 0 0 24px 6px rgba(173,52,87,.7); transition:left .9s cubic-bezier(.4,0,.2,1); z-index:1; }
.node{ position:relative; text-align:center; }
.node .dot{ width:50px; height:50px; margin:0 auto 14px; border-radius:14px; background:var(--panel2); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:all .35s; position:relative; z-index:2; }
.node.on .dot{ background:var(--crimson-bg); border-color:var(--crimson); color:#fff; box-shadow:0 0 28px rgba(173,52,87,.45); }
.node b{ display:block; font-size:.82rem; font-weight:600; line-height:1.35; }
.node span{ display:block; font-size:.72rem; color:var(--muted); line-height:1.45; margin-top:2px; }
.log{ border-top:1px solid var(--line); padding:14px 28px 18px; font-size:.78rem; color:var(--muted); min-height:58px; display:flex; align-items:center; gap:.6rem; }
.log b{ color:var(--text); font-weight:600; }
.log .ok{ color:var(--green); flex:none; }
.log .msg{ transition:opacity .25s; }

/* sections */
section{ padding:120px 0; }
.head{ max-width:760px; margin-bottom:56px; }
.head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.head h2{ font-size:clamp(2rem, 4.6vw, 3.4rem); font-weight:800; font-stretch:108%; letter-spacing:-.03em; line-height:1.08; margin-bottom:18px; text-wrap:balance; }
.head p{ font-size:1.1rem; color:var(--muted); max-width:56ch; }
.head.center p{ margin:0 auto; }

/* offer tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); position:relative; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ background:none; border:0; color:var(--muted); font:600 .95rem var(--sans); padding:14px 18px 16px; cursor:pointer; white-space:nowrap; transition:color .15s; }
.tab:hover, .tab[aria-selected="true"]{ color:var(--text); }
.ink{ position:absolute; bottom:-1px; height:2px; background:var(--crimson); border-radius:2px; transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1); }
.panels{ margin-top:40px; }
.panel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.panel[hidden]{ display:none; }
.panel.show{ animation:swap .45s cubic-bezier(.2,.7,.2,1); }
@keyframes swap{ from{ opacity:0; transform:translateY(10px); } }
.panel h3{ font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-bottom:14px; }
.panel p{ color:var(--muted); margin-bottom:22px; max-width:46ch; }
.checks{ list-style:none; margin-bottom:30px; display:grid; gap:10px; }
.checks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; }
.checks svg{ flex:none; margin-top:.3rem; color:var(--crimson); }
.shot{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); aspect-ratio:4/3; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.shot img{ width:100%; height:100%; object-fit:cover; }

/* nurture bento */
.bento{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.tile{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; display:flex; flex-direction:column; overflow:hidden; text-decoration:none; isolation:isolate; }
.tile::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(173,52,87,.16), transparent 60%); }
.tile:hover::before{ opacity:1; }
.tile.big{ grid-column:span 2; grid-row:span 2; padding:40px; background:radial-gradient(ellipse 80% 70% at 100% 0%, rgba(173,52,87,.28), transparent 60%), var(--panel); }
.tag{ align-self:flex-start; font-size:.7rem; font-weight:600; border-radius:99px; padding:.2rem .7rem; margin-bottom:18px; }
.tag.on{ background:var(--green-bg); color:var(--green); }
.tag.soon{ background:var(--panel3); color:var(--muted); }
.tile h3{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin-bottom:8px; }
.tile.big h3{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing:-.025em; line-height:1.1; margin-bottom:16px; }
.tile p{ font-size:.88rem; color:var(--muted); line-height:1.6; }
.tile.big p{ font-size:1.05rem; max-width:38ch; }
.tile .more{ margin-top:auto; padding-top:20px; font-size:.82rem; font-weight:600; color:#e2809c; }
.price{ margin:26px 0 6px; font-size:2.6rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.price small{ font-size:1rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.price s{ font-size:1rem; font-weight:500; color:var(--muted); margin-left:.5rem; }
.fine{ font-size:.8rem !important; margin-bottom:26px; }
.tile.big .btn{ align-self:flex-start; margin-top:auto; }

/* stories */
.quotes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.quote{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:30px; display:flex; flex-direction:column; }
.quote blockquote{ font-family:var(--serif); font-size:1rem; line-height:1.75; color:#dcdcef; margin-bottom:26px; }
.who{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.who img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.who b{ display:block; font-size:.9rem; line-height:1.3; }
.who span{ display:block; font-size:.76rem; color:var(--muted); }

/* about */
.about{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:center; }
.about .photo{ border-radius:20px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3.4; }
.about .photo img{ width:100%; height:100%; object-fit:cover; }
.about h2{ font-size:clamp(1.9rem, 4vw, 2.8rem); font-weight:800; font-stretch:108%; letter-spacing:-.03em; line-height:1.1; margin-bottom:22px; }
.about p{ color:var(--muted); margin-bottom:16px; max-width:56ch; }
.about p.big{ color:var(--text); font-size:1.15rem; }
.idea{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; list-style:none; }
.idea li{ font-size:.8rem; font-weight:600; border:1px solid var(--line); border-radius:99px; padding:.35rem .9rem; color:var(--muted); }
.idea li:last-child{ border-color:var(--crimson-line); color:#e2809c; background:var(--crimson-bg); }

/* closing */
.closing{ position:relative; text-align:center; isolation:isolate; overflow:hidden; border-top:1px solid var(--line); }
.closing::before{ content:""; position:absolute; left:50%; bottom:-280px; width:1100px; height:560px; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(ellipse at center, rgba(173,52,87,.45), transparent 65%); }
.closing h2{ font-size:clamp(2.2rem, 5.6vw, 4.2rem); font-weight:800; font-stretch:112%; letter-spacing:-.035em; line-height:1.04; max-width:16ch; margin:0 auto 22px; text-wrap:balance; }
.closing p{ color:var(--muted); font-size:1.15rem; margin-bottom:34px; }

/* footer */
footer{ border-top:1px solid var(--line); padding:64px 0 40px; font-size:.85rem; }
.fgrid{ display:grid; grid-template-columns:2fr repeat(3, 1fr); gap:40px; }
.fgrid img{ height:22px; width:auto; filter:invert(1) grayscale(1) brightness(2); margin-bottom:16px; }
.fgrid p{ color:var(--muted); max-width:30ch; }
.fgrid h4{ font-size:.85rem; font-weight:600; margin-bottom:14px; }
.fgrid ul{ list-style:none; display:grid; gap:8px; }
.fgrid a{ color:var(--muted); text-decoration:none; }
.fgrid a:hover{ color:var(--text); text-decoration:underline; }
.legal{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }

/* responsive */
@media (max-width:1000px){
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .quotes{ grid-template-columns:1fr; max-width:640px; margin:0 auto; }
  .fgrid{ grid-template-columns:1fr 1fr; }
  .fgrid > div:first-child{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .menu, .hdr-cta{ display:none; }
  .burger{ display:grid; place-items:center; }
  .hdr.nav-open .menu{ display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); padding:12px 16px 20px; max-height:calc(100vh - 68px); overflow:auto; }
  .menu .m-only{ display:block; padding:8px .6rem 0; }
  .menu .m-only .btn{ width:100%; }
  .mega{ position:static; min-width:0; box-shadow:none; border:0; background:none; padding:0 0 8px; display:none; opacity:1; transform:none; pointer-events:auto; }
  .menu > li.open .mega{ display:block; }
  .menu-btn{ width:100%; justify-content:space-between; font-size:1rem; padding:.8rem .6rem; }
  .panel, .about{ grid-template-columns:1fr; gap:36px; }
  .panel .shot{ order:-1; }
  section{ padding:88px 0; }
}
@media (max-width:760px){
  .flow{ grid-template-columns:1fr; gap:18px; padding:28px 20px; }
  .track{ left:44px; right:auto; top:44px; bottom:44px; width:2px; height:auto; }
  .track::after{ width:100%; height:var(--fill, 0%); }
  .pulse{ left:-5px; top:var(--fill, 0%); margin:-6px 0 0; transition:top .9s cubic-bezier(.4,0,.2,1); }
  .node{ display:grid; grid-template-columns:50px 1fr; gap:16px; text-align:left; align-items:center; }
  .node .dot{ margin:0; }
  .log{ padding:14px 20px 18px; }
  .bento{ grid-template-columns:1fr; }
  .tile.big{ grid-column:auto; grid-row:auto; padding:30px; }
  .hero{ padding-top:64px; }
  .window{ margin-top:52px; }
  .hero .actions .btn{ width:100%; }
  .fgrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}