/* Діалоги Сагайдачного — стилі лендінгу. Токени бренду в :root. */
  :root{
    --ground:#031914;
    --ground-2:#052219;
    --panel:#003f2f;
    --panel-2:#0a4a39;
    --line:rgba(117,152,153,.32);
    --line-soft:rgba(117,152,153,.16);
    --text:#eef3f0;
    --muted:#a9bfbf;
    --haze:#759899;
    --mint:#3e993b;
    --mint-deep:#306651;
    --olive:#354b3d;
    --display:'Roboto Slab',Georgia,'Times New Roman',serif;
    --body:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html{color-scheme:dark}
  body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
  b,strong{font-weight:500}
  a{color:var(--mint);text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--mint);outline-offset:3px}
  .wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
  h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
  h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.01em}
  h3{font-size:19px;font-weight:700;line-height:1.3}
  p{margin:0}
  .lede{font-size:19px;line-height:1.6;color:var(--text);max-width:62ch;font-weight:300}
  .muted{color:var(--muted)}
  section{padding:88px 0;border-top:1px solid var(--line-soft)}
  .sec-head{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:40px;max-width:760px}

  /* header */
  .top{position:relative;z-index:2}
  .top .wrap{display:flex;justify-content:space-between;align-items:center;padding:26px 0 18px;gap:20px;flex-wrap:wrap}
  .top .wrap:has(.disclaimer){padding:0 0 10px}
  .brand{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:700;font-size:15px;line-height:1.15}
  .brand .x{color:var(--muted);font-weight:500}
  .brand small{display:block;font-weight:500;color:var(--muted);font-size:12px}
  .top-tag{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}

  .logos{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
  .logos img{height:34px;width:auto;display:block}
  .logos .wordmark{font-family:var(--display);font-weight:700;font-size:13px;line-height:1.15;color:var(--text);padding-left:22px;border-left:1px solid var(--line-soft)}
  .disclaimer{font-size:13px;color:var(--muted);max-width:78ch;line-height:1.5;border-top:1px solid var(--line-soft);padding:14px 0 0;margin:0 0 8px}
  .gains.three{grid-template-columns:repeat(3,1fr)}
  /* hero with aurora */
  .hero{position:relative;overflow:hidden;background:var(--ground)}
  .aurora{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(70% 90% at 0% 0%, rgba(48,102,81,.75), transparent 62%),
      radial-gradient(55% 70% at 100% 0%, rgba(0,63,47,.9), transparent 60%),
      linear-gradient(180deg, #06271f 0%, var(--ground) 100%)}
  .wave{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:auto;pointer-events:none;opacity:.9}
  .hero>.wrap{position:relative;z-index:1;padding:40px 0 150px}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}
  .hero h1{overflow-wrap:anywhere;font-size:clamp(44px,6.4vw,84px);font-weight:800;line-height:1;letter-spacing:-.01em;margin:14px 0 22px}
  .hero .sub{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,25px);line-height:1.3;max-width:26ch}
  .thesis{border-left:2px solid var(--mint);padding-left:22px;display:grid;gap:14px}
  .thesis .big{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.1vw,25px);line-height:1.3}
  .thesis p{color:var(--muted);max-width:52ch}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
  .btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;padding:14px 22px;border-radius:999px;border:1px solid var(--mint);color:var(--ground);background:var(--mint)}
  .btn:hover{background:#a9f5d6;text-decoration:none}
  .btn.ghost{background:transparent;color:var(--mint)}
  .btn.ghost:hover{background:rgba(62,153,59,.14)}

  .facts{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(13,26,24,.7);backdrop-filter:blur(6px);margin-top:48px}
  .fact{padding:22px 22px 20px;border-left:1px solid var(--line)}
  .fact:first-child{border-left:0}
  .fact b{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:var(--mint);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .fact span{display:block;color:var(--muted);font-size:14px;margin-top:6px;line-height:1.4}

  /* why */
  .why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  .why-grid .lede+.lede{margin-top:18px}
  .four{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
  .four div{background:var(--panel);padding:22px}
  .four h3{color:var(--mint);font-size:17px;margin-bottom:8px}
  .four p{color:var(--muted);font-size:15px;line-height:1.5}
  .ask{margin-top:28px;padding:20px 22px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:15px}
  .ask b{color:var(--text);font-weight:600}

  /* not a course */
  .versus{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .versus>div{padding:28px}
  .versus .no{background:var(--ground-2);border-right:1px solid var(--line)}
  .versus .yes{background:var(--panel)}
  .versus h3{margin-bottom:16px}
  .versus .no h3{color:var(--muted)}
  .versus .yes h3{color:var(--mint)}
  .versus ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
  .versus li{padding-left:22px;position:relative;line-height:1.5}
  .versus .no li{color:var(--muted)}
  .versus .no li::before{content:"—";position:absolute;left:0;color:var(--muted)}
  .versus .yes li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--mint)}

  /* two logics */
  .logics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .logic{background:var(--panel);padding:28px}
  .logic h3{font-size:22px;margin-bottom:10px}
  .logic .q{font-weight:600;margin-bottom:10px}
  .logic p.who{color:var(--muted);font-size:15px;line-height:1.55}
  .bridge{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:16px 22px;font-size:15px;color:var(--muted)}
  .bridge b{color:var(--text);font-weight:600}

  /* how it works */
  .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:40px}
  .layer{background:var(--panel);padding:24px}
  .layer .eyebrow{display:block;margin-bottom:8px}
  .layer h3{font-size:24px;margin-bottom:8px}
  .layer p{color:var(--muted);font-size:15px;line-height:1.55}
  .rhythm{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;margin-bottom:56px}
  .rhythm>div{background:var(--ground-2);padding:22px 24px}
  .rhythm h3{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);font-weight:500;margin-bottom:12px}
  .rhythm ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
  .rhythm li{display:grid;grid-template-columns:auto 1fr;gap:14px;font-size:15px;line-height:1.5}
  .rhythm li span:first-child{font-family:var(--mono);color:var(--mint);font-size:13px;padding-top:3px;font-variant-numeric:tabular-nums}

  .timeline{display:grid;gap:0;border-top:1px solid var(--line)}
  .meet{display:grid;grid-template-columns:150px 1fr 1.5fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line-soft);align-items:start}
  .meet .when{font-family:var(--mono);font-size:13px;color:var(--mint);line-height:1.6;font-variant-numeric:tabular-nums}
  .meet .when small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
  .meet h3{font-size:19px}
  .meet .place{display:block;color:var(--muted);font-size:14px;margin-top:6px}
  .meet p{color:var(--muted);font-size:15px;line-height:1.55}
  .meet p b{color:var(--text);font-weight:600}
  .artefacts{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .artefacts div{background:var(--panel);padding:22px}
  .artefacts h3{font-size:17px;color:var(--mint);margin-bottom:8px}
  .artefacts p{color:var(--muted);font-size:15px;line-height:1.5}

  /* method */
  .method{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
  .method dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
  .method .row{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
  .method dt{font-family:var(--display);font-weight:800;font-size:20px;color:var(--mint)}
  .method dd{margin:0;color:var(--muted);font-size:15px;line-height:1.55}

  /* gains */
  .gains{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .gain{background:var(--panel);padding:24px}
  .gain h3{font-size:17px;margin-bottom:8px;color:var(--mint)}
  .gain p{color:var(--muted);font-size:15px;line-height:1.5}

  /* people */
  .people p{max-width:70ch}
  .people .names{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,26px);line-height:1.4;margin-top:18px;max-width:34ch}
  .people .note{margin-top:14px;font-size:14px}

  .bios{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .bio{background:var(--panel);padding:24px;display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start}
  .bio .ph{width:72px;height:72px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--mint-deep),var(--olive));display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;color:var(--text);letter-spacing:.02em}
  .bio h3{font-size:19px;margin-bottom:4px}
  .bio-more{background:var(--ground-2)}
  .ph-more{background:transparent;border:1px dashed var(--line);color:var(--mint);font-size:30px;font-weight:400}
  .bio .role{color:var(--mint);font-size:13px;font-family:var(--mono);line-height:1.45;margin-bottom:10px}
  .bio p:not(.role){color:var(--muted);font-size:15px;line-height:1.5}
  .carousel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
  .track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
  .track::-webkit-scrollbar{display:none}
  .alum{flex:0 0 172px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:18px 16px;display:grid;gap:8px;justify-items:start;align-content:start}
  .alum img{width:70px;height:70px;border-radius:50%;object-fit:cover}
  .alum b{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25}
  .alum span{color:var(--muted);font-size:12.5px;line-height:1.4}
  .alum i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-top:auto}
  .cbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--mint);font-size:22px;cursor:pointer;line-height:1}
  .cbtn:hover{background:rgba(62,153,59,.14)}
  .gallery-label{display:block;margin-bottom:12px}
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:8px;margin:0 0 32px}
  .gallery img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
  .gallery img:first-child{grid-column:span 2;grid-row:span 2}
  .roster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
  .roster div{background:var(--ground-2);padding:22px}
  .roster .eyebrow{display:block;margin-bottom:10px}
  .roster p{color:var(--muted);font-size:15px;line-height:1.5}

  /* join */
  .join{background:linear-gradient(180deg,var(--ground) 0%,var(--panel) 100%)}
  .join-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .steps{display:grid;gap:0;border-top:1px solid var(--line)}
  .step{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
  .step span{font-family:var(--mono);color:var(--mint);font-size:13px;padding-top:4px}
  .step b{display:block;font-weight:600;margin-bottom:4px}
  .step p{color:var(--muted);font-size:15px;line-height:1.5}
  .box{border:1px solid var(--line);border-radius:14px;padding:28px;background:rgba(7,9,11,.5)}
  .box .big{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.2;margin-bottom:14px}
  .box p{color:var(--muted);font-size:15px;margin-bottom:22px}

  footer{border-top:1px solid var(--line-soft);padding:36px 0 48px}
  footer .wrap{display:grid;gap:24px}
  .partners{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--display);font-weight:700;font-size:14px;color:var(--muted)}
  .partners span{white-space:nowrap}
  footer .fine{font-size:13px;color:var(--muted);max-width:60ch}

  @media (max-width:900px){
    .hero-grid,.why-grid,.method,.join-grid{grid-template-columns:1fr;gap:36px}
    .facts{grid-template-columns:repeat(2,1fr)}
    .fact{border-left:0;border-top:1px solid var(--line)}
    .fact:nth-child(-n+2){border-top:0}
    .fact:nth-child(even){border-left:1px solid var(--line)}
    .four,.versus,.logics,.rhythm{grid-template-columns:1fr}
    .versus .no{border-right:0;border-bottom:1px solid var(--line)}
    .layers,.artefacts{grid-template-columns:1fr}
    .gains,.gains.three,.roster{grid-template-columns:1fr 1fr}
    .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
    .bios{grid-template-columns:1fr}
    .meet{grid-template-columns:1fr;gap:10px}
    section{padding:64px 0}
  }
  @media (max-width:560px){
    .facts,.gains,.gains.three,.roster{grid-template-columns:1fr}
    .logos{gap:16px}.logos img{height:26px}
    .bio{grid-template-columns:1fr}
    .fact{border-left:0!important;border-top:1px solid var(--line)}
    .fact:first-child{border-top:0}
    .method .row{grid-template-columns:1fr;gap:6px}
  }
  @media (prefers-reduced-motion:no-preference){
    .hero .wrap>*{animation:rise .7s ease both}
    .hero .facts{animation-delay:.15s}
    @keyframes rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
  }

img{max-width:100%}
[hidden]{display:none!important}