/* styles.css — нова система токенів, інша композиція сіток і компоненти */

:root{
  --bg: #f6f7fb;
  --paper: #ffffff;
  --ink: #111317;
  --muted: #5d6472;
  --line: #e8ebf2;

  --brand: #5a7cff;
  --brand-2:#8ad6ff;
  --accent:#ffb757;
  --ok:#2fb777;
  --danger:#ef4d4d;

  --r: 16px;
  --shadow: 0 16px 40px rgba(17,19,23,.08);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

html[data-theme="dark"]{
  --bg:#0f1215;
  --paper:#151a20;
  --ink:#e7ecf2;
  --muted:#9aa5b5;
  --line:#243041;

  --brand:#72d57b;
  --brand-2:#9ee0b3;
  --accent:#ffd39b;
  --ok:#58d59c;
  --danger:#ff6b6b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.shell{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.65;
}

img{display:block; max-width:100%; height:auto}
.visually-hidden{position:absolute!important; width:1px; height:1px; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap}
.skip{position:absolute; left:-9999px; top:auto}
.skip:focus{left:1rem; top:1rem; background:var(--paper); padding:.5rem .75rem; border-radius:10px; box-shadow:var(--shadow)}

/* Layout */
.wrap{width:min(1120px,92vw); margin-inline:auto}
.rail{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.section{padding:clamp(2rem,6vw,4rem) 0}
.section.alt{background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.03))}

.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:min(6vw,3rem); align-items:center}
.grid-hero{display:grid; grid-template-columns:1fr 1fr; gap:min(6vw,3.5rem); align-items:center}

.header-row{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem}

/* Mast */
.mast{
  position:sticky; top:0; z-index:10; background:color-mix(in oklab, var(--paper) 96%, transparent);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(8px)
}
.brand, .brand--foot{display:flex; align-items:center; gap:.5rem; font-weight:800; text-decoration:none; color:var(--ink)}
.mark{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b140d; font-weight:900}
.brand-name{letter-spacing:.2px}

.menu-btn{display:none; background:transparent; border:0; padding:.5rem}
.menu-bars{display:block; width:22px; height:2px; background:var(--ink); box-shadow:0 6px 0 var(--ink), 0 -6px 0 var(--ink)}
.menu{display:flex; gap:1.2rem; list-style:none; padding:0; margin:0}
.menu a{color:var(--muted); text-decoration:none; font-weight:600}
.menu a:hover{color:var(--ink)}
.menu .cta{padding:.6rem 1rem; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b140d; font-weight:800}
.ghost{border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:.6rem 1rem; font-weight:700}
.ghost.sm{padding:.45rem .8rem}

/* Typo */
.display{
  font-family:var(--serif); font-weight:700; font-size:clamp(2.2rem,5.6vw,3.6rem); margin:0 0 .6rem;
}
.tone{color:var(--brand)}
.title{
  font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.2rem); margin:.2rem 0 .6rem;
}
.lead{color:var(--muted)}
.muted{color:var(--muted)}
.mini{font-size:.9rem}

/* Components */
.stack{display:flex; flex-direction:column; gap:1rem}
.cluster{display:flex; gap:.8rem; flex-wrap:wrap}
.button{display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.1rem; background:var(--ink); color:var(--paper); text-decoration:none; border-radius:999px; font-weight:800}
.button.block{width:100%}

.digits{display:flex; gap:2rem; list-style:none; padding:0; margin:0}
.digits strong{display:block; font-family:var(--serif); color:var(--accent); font-size:clamp(1.4rem,2.6vw,2rem)}
.digits span{color:var(--muted)}

.hero-visual{border-radius:20px; overflow:hidden; box-shadow:var(--shadow)}

.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.25rem; box-shadow:var(--shadow)
}
.media{position:relative}
.media .tag{
  position:absolute; right:12px; bottom:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b140d; font-weight:800; border-radius:999px; padding:.6rem .8rem
}

.auto-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem
}
.card{background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card.tall{grid-row:span 2}
.card .body{padding:1rem}
.card h3{margin:.2rem 0 .3rem}

.ribbon{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1rem}
.ribbon img{border-radius:10px; border:1px solid var(--line)}

.tracks{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.track{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:1rem; transition:transform .2s ease}
.track:hover{transform:translateY(-4px)}
.track .icon{font-size:1.6rem}

.process .steps{counter-reset: step; display:grid; gap:.6rem; padding-left:1.2rem}
.process .steps li{position:relative}
.process .steps li::marker{color:var(--brand)}
.process .steps li strong{font-weight:800}

.accordion .item{border:1px solid var(--line); border-radius:12px; background:var(--paper); margin:.6rem 0; overflow:hidden}
.accordion summary{cursor:pointer; list-style:none; padding:1rem; font-weight:700}
.accordion summary::-webkit-details-marker{display:none}
.accordion .ans{padding:0 1rem 1rem 1rem; color:var(--muted)}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; box-shadow:var(--shadow)
}
.field{display:flex; flex-direction:column; gap:.4rem}
.field--full{grid-column:1/-1}
.field input, .field textarea{
  border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; background:#fff; color:#111317; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease
}
html[data-theme="dark"] .field input, html[data-theme="dark"] .field textarea{
  background:#0c0f12; color:var(--ink)
}
.field input:focus, .field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 24%, transparent)}
.field [aria-invalid="true"]{border-color:var(--danger)}
.hp{position:absolute; left:-9999px}

/* Footer */
.foot{padding:2.2rem 0 2rem; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem; align-items:start}
.foot a{text-decoration:none; color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot-bottom{text-align:center; color:var(--muted); margin-top:1rem}

/* Responsive */
@media (max-width: 980px){
  .grid-2, .grid-hero{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .menu-btn{display:inline-block}
  .menu{
    position:fixed; inset:64px 0 auto 0; background:var(--paper);
    border-top:1px solid var(--line); display:none; flex-direction:column; gap:.4rem; padding:1rem 1.2rem
  }
  .menu.is-open{display:flex}
}