/* styles.css */
/* ======= ТЕМА / БАЗА ======= */
:root{
  --bg:#0e1016;
  --panel:#141926;
  --ink:#f2f5ff;
  --muted:#9aa6bf;
  --accent:#ffd166;      /* теплий акцент */
  --accent-2:#6ee7ff;    /* холодний акцент */
  --ring:rgba(110,231,255,.32);
  --r2:12px; --r3:20px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --speed:.28s cubic-bezier(.2,.7,.2,1);

  --ff:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ffd:"Playfair Display",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body.shell{
  min-height:100vh; color:var(--ink);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(110,231,255,.08), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,209,102,.08), transparent 60%),
    linear-gradient(180deg,#0d1118,#0e1016 65%, #0b0e14);
  font:16px/1.6 var(--ff);
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ======= СКІП ======= */
.skip{
  position:absolute; left:12px; top:-100px; padding:10px 16px; border-radius:10px;
  background:var(--accent-2); color:#001018; font-weight:700; z-index:999;
}
.skip:focus{top:12px}

/* ======= КОНТЕЙНЕР ======= */
.wrap{width:min(1140px,92vw); margin-inline:auto}

/* ======= ДОК / ХЕДЕР ======= */
.dock{
  position:sticky; top:0; z-index:900;
  background:rgba(12,14,20,.6); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:transform var(--speed), background var(--speed);
}
.dock--hide{ transform:translateY(-100%) }
.dock__row{min-height:86px; display:flex; align-items:center; justify-content:space-between}

.brand{display:inline-flex; gap:12px; align-items:center}
.brand__text{text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; opacity:.8}

.menu{position:relative; display:flex; align-items:center}
.menu__toggle{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:transparent; color:var(--ink); cursor:pointer;
}
.menu__icon{display:block;width:18px;height:2px;margin:0 auto;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
.menu__links{display:flex; gap:26px; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem}
.menu__link{color:rgba(255,255,255,.76); position:relative}
.menu__link:hover{color:var(--accent)}
.menu__cta{padding:.6rem 1rem; border:1px solid rgba(255,255,255,.22); border-radius:999px}
.menu__cta:hover{border-color:var(--accent); color:var(--accent)}

/* ======= HERO V2 ======= */
.hero-v2{padding:120px 0 96px}
.hero-v2__grid{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:64px; align-items:start}
.kicker{text-transform:uppercase; letter-spacing:.16em; color:var(--accent-2); font-size:.8rem; margin-bottom:12px}
.display{font-family:var(--ffd); font-size:clamp(2.4rem,4vw,3.4rem); line-height:1.12; margin:0 0 16px}
.sub{color:rgba(255,255,255,.78); margin-bottom:26px; max-width:560px}
.hero-v2__bar{display:flex; gap:12px; flex-wrap:wrap}
.hero-v2__aside{display:grid; gap:18px; padding:28px; border:1px solid rgba(255,255,255,.08); border-radius:var(--r3);
  background:linear-gradient(210deg, rgba(110,231,255,.1), rgba(255,209,102,.1))}
.crest{margin-inline:auto; filter:drop-shadow(0 10px 24px rgba(0,0,0,.4))}
.tile__title{text-transform:uppercase; letter-spacing:.1em; font-size:.9rem; color:rgba(255,255,255,.86)}
.tile__text{color:rgba(255,255,255,.74)}

/* ======= СЕКЦІЯ / ЗАГОЛОВКИ ======= */
.section{padding:96px 0}
.section__head{max-width:680px; margin-bottom:40px}
.h2{font-family:var(--ffd); font-size:clamp(1.8rem,3vw,2.4rem)}
.h3{font-size:1.2rem}
.muted{color:rgba(255,255,255,.7)}

/* ======= БЛОКИ ======= */
.tiles{display:grid; gap:22px}
.tiles--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.unit{padding:26px; border-radius:14px; background:rgba(16,20,30,.78); border:1px solid rgba(255,255,255,.08)}
.ticks{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; color:rgba(255,255,255,.8)}
.ticks li{position:relative; padding-left:18px}
.ticks li::before{content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%; background:var(--accent-2)}

/* ======= ЛЕЙНИ ======= */
.lanes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.lane{padding:22px; border:1px dashed rgba(255,255,255,.18); border-radius:14px; background:rgba(13,17,26,.6)}
.lane__title{font-weight:700}
.lane__text{color:rgba(255,255,255,.78)}

/* ======= КАРТКИ ВІТРИНА ======= */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.card{min-height:220px; padding:26px; border-radius:16px; background:linear-gradient(180deg, rgba(16,20,30,.9), rgba(16,20,30,.7));
  border:1px solid rgba(255,255,255,.08); transform:translateY(8px); opacity:.001; transition:transform var(--speed), opacity var(--speed); }
.card__tag{text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--muted)}
.card__title{margin:6px 0 8px; font-weight:700}
.card__text{color:rgba(255,255,255,.8)}
.card.is-visible{transform:translateY(0); opacity:1}

/* ======= ПРАЙС ======= */
.packs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.pack{padding:28px; border-radius:18px; background:rgba(16,20,30,.78); border:1px solid rgba(255,255,255,.08); display:grid; gap:12px}
.pack--focus{background:linear-gradient(210deg, rgba(255,209,102,.12), rgba(110,231,255,.12))}
.pack__name{font-family:var(--ffd); font-size:1.6rem}
.pack__lead{color:rgba(255,255,255,.78)}
.list{list-style:none; margin:0; padding:0; display:grid; gap:8px; color:rgba(255,255,255,.86)}

/* ======= FAQ ======= */
.accordion{display:grid; gap:12px}
.acc{border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(14,18,28,.7)}
.acc[open]{background:rgba(14,18,28,.9)}
.acc__head{cursor:pointer; padding:16px 18px; font-weight:700}
.acc__body{padding:0 18px 18px; color:rgba(255,255,255,.8)}

/* ======= КОНТАКТ ======= */
.contact__grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:40px; align-items:start; padding:34px; border-radius:20px;
  background:rgba(14,18,28,.86); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow)}
.channels{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px}
.channels a{font-weight:700}
.form{display:grid; gap:14px}
.f{display:grid; gap:8px}
.f span{font-size:.88rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.f input,.f textarea{
  width:100%; padding:14px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(8,11,18,.9); color:var(--ink); transition:box-shadow var(--speed), border-color var(--speed);
}
.f input:focus,.f textarea:focus{outline:0; box-shadow:0 0 0 3px var(--ring); border-color:transparent}
.f--wide{grid-column:1/-1}
.form__bar{display:flex; gap:12px; margin-top:6px; flex-wrap:wrap}

/* ======= КНОПКИ ======= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:999px;
  font-weight:800; letter-spacing:.03em; border:1px solid transparent; transition:transform var(--speed), box-shadow var(--speed), color var(--speed), border-color var(--speed)}
.btn--solid{background:linear-gradient(120deg, var(--accent), #ffe9ae); color:#201400; box-shadow:0 16px 40px rgba(255,209,102,.3)}
.btn--solid:hover{transform:translateY(-2px); box-shadow:0 22px 60px rgba(255,209,102,.45)}
.btn--ghost{border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.9); background:transparent}
.btn--ghost:hover{border-color:var(--accent-2); color:var(--accent-2)}
.btn--outline{border-color:rgba(255,255,255,.24); color:rgba(255,255,255,.92); background:transparent}
.btn--outline:hover{border-color:var(--accent); color:var(--accent)}

/* ======= ФУТЕР ======= */
.foot{padding:44px 0; border-top:1px solid rgba(255,255,255,.08); background:rgba(6,8,12,.86)}
.foot__row{display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.72)}
.top{padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.18)}
.top:hover{border-color:var(--accent-2); color:var(--accent-2)}

/* ======= THANKS ======= */
.thanks{
  min-height:100vh; display:grid; place-items:center;
  background:radial-gradient(600px 300px at 50% 0%, rgba(110,231,255,.22), transparent 60%),
             radial-gradient(700px 400px at 100% 0%, rgba(255,209,102,.22), transparent 55%),
             linear-gradient(180deg,#0e1016,#0b0f14);
}
.card{
  width:min(540px,90vw); padding:52px; border-radius:20px; background:rgba(12,16,26,.86);
  box-shadow:var(--shadow); text-align:center; display:grid; gap:18px
}
.card h1{font-family:var(--ffd); font-size:2.2rem}
.card p{color:rgba(255,255,255,.78)}

/* ======= РЕСПОНС ======= */
@media (max-width:1024px){
  .menu__toggle{display:inline-flex; align-items:center; justify-content:center}
  .menu__links{
    position:absolute; top:90px; right:2vw; width:min(320px,88vw); flex-direction:column; gap:16px; padding:22px;
    border-radius:16px; background:rgba(7,10,16,.96); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
    transform:scale(.96); transform-origin:top right; opacity:0; pointer-events:none
  }
  .menu__links.is-open{opacity:1; pointer-events:auto; transform:scale(1)}
  .tiles--three,.lanes,.cards,.packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .dock__row{min-height:70px}
  .hero-v2{padding:108px 0 80px}
  .hero-v2__grid{grid-template-columns:1fr}
  .hero-v2__aside{order:-1}
  .tiles--three,.lanes,.cards,.packs{grid-template-columns:1fr}
  .btn{width:100%}
  .foot__row{flex-direction:column; gap:12px; text-align:center}
}