/* styles.css — повністю нова стилістика */

/* ---------- Base ---------- */
:root{
  --bg:#0f1215;
  --surface:#151a20;
  --muted:#8c96a3;
  --text:#e7ecf2;
  --brand:#72d57b;
  --brand-2:#9ee0b3;
  --accent:#ffd39b;
  --danger:#ff6b6b;

  --radius:16px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 80% -10%,rgba(114,213,123,.12),transparent 60%), var(--bg);
  line-height:1.65;
}
img{max-width:100%;display:block}
.visually-hidden{position:absolute!important;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* ---------- Layout ---------- */
.container{width:min(1200px,92vw);margin-inline:auto}
.section-head{margin-bottom:1.25rem}
.section-title{
  font-family:"Cormorant Garamond",serif;
  font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:.2px
}
.lead{color:var(--muted)}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:10;
  background:color-mix(in oklab, var(--bg) 92%, black 8%);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .25s ease
}
.site-header[data-scrolled="true"]{box-shadow:0 8px 30px rgba(0,0,0,.35)}

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}
.logo{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--text)}
.logo__emoji{font-size:1.25rem}
.logo__text{font-weight:800; letter-spacing:.3px}

.nav__toggle{
  display:none; background:transparent; border:0; padding:.3rem; border-radius:8px;
}
.nav__bar{
  display:block; width:22px; height:2px; background:var(--text); margin:4px 0; transition:transform .25s ease,opacity .25s ease
}
.nav__list{display:flex; gap:2rem; list-style:none; padding:0; margin:0}
.nav__link{
  color:var(--muted); text-decoration:none; font-weight:600;
}
.nav__link:hover{color:var(--text)}
.nav__link--cta{
  padding:.55rem 1rem; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b140d; box-shadow:0 10px 30px rgba(114,213,123,.25)
}

/* ---------- Hero ---------- */
.hero{padding:clamp(2rem,6vw,4rem) 0 3rem}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:min(5vw,4rem); align-items:center}
.eyebrow{color:var(--brand-2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem}
.hero__title{
  font-family:"Cormorant Garamond",serif; font-weight:700;
  font-size:clamp(2.1rem,5.6vw,3.8rem); margin:.4rem 0 .8rem
}
.accent{color:var(--brand)}
.hero__lead{color:var(--muted); font-size:1.06rem}

.btn-row{display:flex; gap:.8rem; margin:1.2rem 0 1.6rem}
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; text-decoration:none; font-weight:700; letter-spacing:.2px}
.btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b140d; padding:0.9rem 1.2rem}
.btn--ghost{border:1px solid rgba(255,255,255,.14); color:var(--text); padding:0.86rem 1.1rem}
.btn--block{width:100%}

.metrics{display:flex; gap:2rem; list-style:none; padding:0; margin:0}
.metric strong{display:block; font-family:"Cormorant Garamond",serif; font-size:clamp(1.4rem,2.8vw,2rem); color:var(--accent)}
.metric span{color:var(--muted); font-size:.95rem}

.hero__visual{position:relative; height:440px}
.blob{position:absolute; filter:blur(60px); opacity:.7; border-radius:50%}
.b1{width:280px;height:280px;background:color-mix(in oklab,var(--brand),white 10%); top:10%; right:8%}
.b2{width:230px;height:230px;background:var(--accent); bottom:18%; left:18%}
.b3{width:180px;height:180px;background:var(--brand-2); top:48%; right:28%}

/* ---------- Work ---------- */
.work{padding:3.2rem 0}
.masonry{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem
}
.tile{position:relative; height:320px; border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.tile--tall{grid-row:span 2; height:auto}
.tile--wide{grid-column:span 2}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.tile:hover img{transform:scale(1.06)}
.tile__overlay{
  position:absolute; inset:auto 0 0 0; padding:1.1rem 1rem;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent 70%);
}
.tile__overlay h3{margin:0 0 .25rem; font-size:1.2rem}
.tile__overlay p{margin:0; color:#d7dde4; font-size:.95rem}

/* ---------- Capabilities ---------- */
.capabilities{padding:3.2rem 0; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;
}
.card{
  background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:1.4rem; transition:transform .2s ease, border-color .2s ease
}
.card:hover{transform:translateY(-4px); border-color:rgba(114,213,123,.35)}
.card__icon{font-size:2rem; margin-bottom:.5rem}
.card__title{margin:.3rem 0 .4rem; font-weight:700}
.card__text{color:var(--muted)}

/* ---------- Studio ---------- */
.studio{padding:3.2rem 0}
.studio__grid{display:grid; grid-template-columns:1fr 1fr; gap:min(5vw,3rem); align-items:center}
.studio__media{position:relative}
.studio__media img{border-radius:16px; box-shadow:var(--shadow)}
.pin{
  position:absolute; right:-14px; bottom:-14px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b140d; border-radius:999px; padding:.9rem 1.1rem; font-weight:800; box-shadow:0 20px 40px rgba(114,213,123,.35)
}
.bullets{display:flex; flex-direction:column; gap:1rem; padding:0; list-style:none}
.bullet{display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:flex-start}
.bullet__check{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b140d; font-weight:900
}

/* ---------- Species (materials) ---------- */
.species{padding:2.4rem 0; text-align:center}
.species__title{
  font-family:"Cormorant Garamond",serif; font-size:1.6rem; margin:0 0 1rem
}
.species__row{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}
.species__row img{border-radius:10px; transition:transform .2s ease}
.species__row img:hover{transform:scale(1.06)}

/* ---------- Brief / Contact ---------- */
.brief{padding:3.2rem 0}
.brief__grid{display:grid; grid-template-columns:1fr 1fr; gap:min(5vw,3rem)}
.contact-list{margin:1rem 0 0}
.contact-list__item{display:flex; gap:.8rem; margin:.3rem 0}
.contact-list dt{min-width:92px; color:var(--brand-2)}
.contact-list dd{margin:0}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:1.2rem
}
.field{display:flex; flex-direction:column; gap:.35rem}
.field--full{grid-column:1/-1}
.field__label{font-weight:600}
.field__control{
  background:#0c0f12; color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.9rem 1rem; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease
}
.field__control:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(114,213,123,.14)}
.field__control[aria-invalid="true"]{border-color:var(--danger)}
.form__note{grid-column:1/-1; color:var(--muted); font-size:.9rem}
.honeypot{position:absolute; left:-9999px}

/* ---------- Footer ---------- */
.site-footer{padding:2.2rem 0 2rem; border-top:1px solid rgba(255,255,255,.06)}
.footer__top{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem; align-items:start}
.footer__brand h3{margin:.2rem 0 .4rem; font-family:"Cormorant Garamond",serif}
.footer__brand p{color:var(--muted)}
.footer__nav, .footer__social{display:flex; flex-direction:column; gap:.6rem}
.footer__nav a, .footer__social a{color:var(--muted); text-decoration:none}
.footer__nav a:hover, .footer__social a:hover{color:var(--text)}
.footer__bottom{margin-top:1.4rem; text-align:center; color:var(--muted)}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero__grid, .studio__grid, .brief__grid{grid-template-columns:1fr}
  .tile--wide{grid-column:auto}
  .footer__top{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .nav__toggle{display:inline-block}
  .nav__list{
    position:fixed; inset:64px 0 auto 0; background:var(--surface);
    border-top:1px solid rgba(255,255,255,.06);
    display:none; flex-direction:column; gap:.4rem; padding:1rem 1.2rem
  }
  .nav__list.is-open{display:flex}
}