/* ========== RESET ========== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }

/* ========== THEME (освіжив палітру для унікальності) ========== */
:root{
  --bg: #0a0d14;
  --panel: #0e1420;
  --ink: #101726;
  --text: #EAF2FF;
  --muted: #9FB0C6;
  --accent: #5EF1A8;        /* було блакитне, тепер мʼятне */
  --brand: #FF7AE5;         /* теплий контраст до accent */
  --ring: 0 0 0 4px rgba(94,241,168,.18);
  --radius: 16px;
  --shadow: 0 14px 44px rgba(5,10,20,.55);
  --f1: 'Inter', system-ui, sans-serif;
  --f2: 'Manrope', system-ui, sans-serif;
  --speed: .35s;
}

/* ========== BASE ========== */
html { scroll-behavior: smooth; }
body{
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(255,122,229,.16), transparent 60%) fixed,
    radial-gradient(800px 500px at 90% 120%, rgba(94,241,168,.12), transparent 55%) fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--f1);
  line-height: 1.65;
}
.container{ width: min(96%, 1180px); margin-inline: auto; }

.skip{ position:absolute; left:-999px; top:0; background:var(--brand); color:#051019; padding:.5rem .8rem; border-radius:8px; }
.skip:focus{ left:.6rem; top:.6rem; z-index:999; }

/* ========== NAV ========== */
.masthead{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(5,8,18,.75), rgba(5,8,18,.35));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.navbar{ height: 78px; display:flex; align-items:center; justify-content:space-between; }
.brandmark{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; }
.brandmark__svg{ height:28px; width:auto; color:#fff; }
.menu-toggle{ display:none; }
.hamburger{ display:none; width:32px; cursor:pointer; gap:6px; flex-direction:column; }
.hamburger span{ height:3px; border-radius:2px; background:var(--text); transition: transform var(--speed), opacity var(--speed); }

.navlist{ display:flex; align-items:center; gap:2rem; font-weight:600; }
.navlist a{ position:relative; color:var(--muted); }
.navlist a:hover{ color:var(--text); }
.navlist a::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-8px; width:0; height:2px; background:var(--accent);
  transition: width var(--speed);
}
.navlist a:hover::after{ width:40%; }

/* ========== BUTTONS ========== */
.btn{ display:inline-block; padding:.95rem 1.45rem; border-radius:var(--radius); font-weight:800; letter-spacing:.3px;
  transition: transform var(--speed), box-shadow var(--speed), background var(--speed), color var(--speed), border-color var(--speed);
  border:2px solid transparent;
}
.btn--filled{ background:linear-gradient(135deg, var(--brand), var(--accent)); color:#051019; box-shadow:0 0 0 rgba(0,0,0,0); }
.btn--filled:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 16px 34px rgba(94,241,168,.35); }
.btn--outline{ border-color:var(--text); color:var(--text); background:transparent; }
.btn--outline:hover{ background:var(--text); color:var(--bg); }
.btn--ghost{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn--ghost:hover{ background:var(--accent); color:#051019; }

.center{ margin: 2.2rem auto 0; display: table; }

/* ========== HERO ========== */
.hero-banner{ position:relative; overflow:clip; }
.hero__inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2.4rem; align-items:center; min-height: 88vh; padding: 4rem 0 2rem; }
.hero__title{ font: 800 clamp(2.4rem, 5.8vw, 5rem)/1.05 var(--f1); letter-spacing:-.5px; }
.hero__lead{ margin-top: 1rem; max-width: 62ch; color: var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
.hero__cta{ display:flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.hero__visual{ position:relative; aspect-ratio: 1 / 1; }
.blob{ position:absolute; border-radius:50%; filter: blur(24px); opacity:.9; mix-blend: screen; }
.blob--a{ width: 60%; height: 60%; top: 10%; left: 5%; background: radial-gradient(circle at 30% 30%, rgba(94,241,168,.75), transparent 60%); }
.blob--b{ width: 70%; height: 70%; bottom: -10%; right: -10%; background: radial-gradient(circle at 70% 40%, rgba(255,122,229,.55), transparent 60%); }
.blob--c{ width: 40%; height: 40%; top: 40%; right: 20%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 60%); }

/* ========== SECTIONS ========== */
.section{ padding: 6rem 0; }
.ink{ background: var(--ink); }
.title{ font: 800 clamp(1.8rem, 4.5vw, 3rem)/1.1 var(--f1); text-align: center; margin-bottom: .6rem; }
.title--left{ text-align:left; }
.subtitle{ text-align:center; color:var(--muted); margin-bottom: 2.2rem; letter-spacing:.2px; }

/* ========== GRID & CARDS ========== */
.grid{ display:grid; gap: 1.8rem; }
.four{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow);
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed), translate var(--speed);
}
.tile:hover{ transform: translateY(-8px); translate: 0 -2px; box-shadow: 0 22px 52px rgba(8,12,30,.55); border-color: rgba(255,255,255,.16); }
.tile__icon{ width: 48px; height: 48px; margin-bottom: .9rem; border-radius: 12px;
  background:
    conic-gradient(from 0deg, var(--accent), transparent 70%),
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
}

/* ========== GALLERY ========== */
.gallery{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.shot{ position:relative; overflow:hidden; border-radius: var(--radius); border:1px solid rgba(255,255,255,.1); }
.shot--wide{ grid-column: span 2; }
.shot img{ width:100%; height:100%; object-fit:cover; transition: transform .8s ease, filter .5s ease; filter:saturate(.9) contrast(1.02); }
.shot:hover img{ transform: scale(1.08); filter:saturate(1); }
.shot figcaption{ position:absolute; inset:auto 0 0; padding: 2rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.88)); font-weight: 700; transform: translateY(100%);
  transition: transform .45s ease;
}
.shot:hover figcaption{ transform: translateY(0); }

/* ========== ABOUT ========== */
.about{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:2.2rem; align-items:center; }
.about__media img{ border-radius: var(--radius); box-shadow: var(--shadow); }
.pills{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem; }
.pill{ padding:.55rem 1.1rem; background:linear-gradient(135deg, var(--brand), var(--accent)); color:#051019; border-radius:999px; font: 800 .9rem var(--f2); }

/* ========== POSTS ========== */
.posts{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.post{ background: var(--panel); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  transition: transform var(--speed), box-shadow var(--speed);
}
.post:hover{ transform: translateY(-6px); box-shadow: 0 16px 36px rgba(8,12,28,.45); }
.post img{ aspect-ratio: 16/10; object-fit: cover; width: 100%; filter: grayscale(35%); transition: filter var(--speed); }
.post:hover img{ filter: grayscale(0); }
.post h3{ font-size: 1.05rem; margin: 1rem 1rem .3rem; }
.post time{ display:block; color: var(--accent); margin: 0 1rem 1.2rem; font-size: .92rem; }

/* ========== CONTACT ========== */
.contact{ background: radial-gradient(800px 500px at 80% -10%, rgba(255,122,229,.22), transparent 60%), var(--ink); text-align:center; }
.contact__inner{ max-width: 640px; margin-inline:auto; }
.form{ display:grid; gap: 1rem; margin-top: 1.2rem; }
.form input, .form textarea{
  width:100%; padding:1rem 1.1rem; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: var(--text); border-radius: var(--radius);
  transition: border-color var(--speed), background var(--speed), box-shadow var(--speed);
}
.form input:focus, .form textarea:focus{ border-color: var(--accent); box-shadow: var(--ring); }
.form ::placeholder{ color: rgba(234,242,255,.62); }
.sr-only{ position:absolute; left:-10000px; }

/* ========== THANKS PAGE (нові стилі) ========== */
.thanks{ min-height:100vh; display:grid; place-items:center; background: radial-gradient(700px 400px at 70% -10%, rgba(94,241,168,.18), transparent 60%), var(--bg); }
.thanks__box{
  text-align:center; padding: 2.2rem 2rem; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-radius: var(--radius); box-shadow: var(--shadow); max-width: 560px; width: min(92%, 560px);
}
.thanks__box h1{ font:800 clamp(1.6rem, 4vw, 2.2rem)/1.1 var(--f1); margin:1rem 0 .4rem; }
.thanks__box p{ color: var(--muted); margin-bottom: 1.2rem; }
.thanks__icon{ width:72px; height:72px; margin-inline:auto; color: var(--accent); }
.thanks__icon svg{ width:100%; height:100%; }
.thanks__icon{ animation: pop .6s ease; }
@keyframes pop{
  0%{ transform: scale(.6); opacity: 0; }
  100%{ transform: scale(1); opacity: 1; }
}

/* ========== FOOTER ========== */
.sitefoot{ background:#070b14; padding: 2rem 0; text-align:center; font-size:.95rem; border-top:1px solid rgba(255,255,255,.06); }
.to-top{ position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: #051019; font-size: 1.2rem;
  transition: transform var(--speed), box-shadow var(--speed);
}
.to-top:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(94,241,168,.35); }

/* ========== MEDIA ========== */
@media (max-width: 960px){
  .hero__inner{ grid-template-columns: 1fr; min-height: auto; padding-top: 6.2rem; }
  .hero__visual{ height: 420px; order: -1; }
  .navlist{
    position: fixed; inset: 78px 0 0; background: rgba(7,11,20,.98);
    flex-direction: column; align-items: center; padding-top: 1.5rem;
    transform: translateY(-120%); transition: transform var(--speed) ease;
  }
  .hamburger{ display:flex; }
  .menu-toggle:checked ~ .hamburger span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .menu-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .menu-toggle:checked ~ .hamburger span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
  .menu-toggle:checked ~ .navlist{ transform: none; }
  .shot--wide{ grid-column: span 1; }
}