/* =========================================================
   Bioenerji Uzmanı — 2026 Tasarım Sistemi
   Premium / sakin / bütüncül wellness estetiği
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Hanken+Grotesk:wght@300..700&display=swap');

:root{
  --bg:#FAF8F3;
  --bg-2:#F2EEE5;
  --bg-3:#ECE6D9;
  --ink:#15241F;
  --ink-soft:#3F4B45;
  --ink-mute:#6E7A73;
  --emerald:#1E6E58;
  --emerald-2:#268A6C;
  --emerald-deep:#0F352B;
  --emerald-night:#0A241D;
  --sage:#CFE0D5;
  --gold:#BE9C46;
  --gold-2:#D8BE78;
  --gold-soft:#EFE2BE;
  --line:rgba(21,36,31,.12);
  --line-soft:rgba(21,36,31,.07);
  --white:#ffffff;
  --shadow-sm:0 1px 2px rgba(15,53,43,.05), 0 6px 18px rgba(15,53,43,.06);
  --shadow-md:0 10px 40px rgba(15,53,43,.10);
  --shadow-lg:0 30px 80px rgba(15,53,43,.16);
  --radius:18px;
  --radius-lg:28px;
  --maxw:1180px;
  --display:"Fraunces", Georgia, serif;
  --body:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  font-weight:380;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.1; letter-spacing:-.015em; margin:0}
p{margin:0 0 1.1em}
::selection{background:var(--emerald); color:#fff}

.container{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.section{padding:96px 0; position:relative}
.section--tight{padding:64px 0}
.center{text-align:center}

/* ---------- Eyebrow / başlık ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--body);
  font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--emerald);
}
.eyebrow::before{content:"✦"; color:var(--gold); font-size:.9em; transform:translateY(-1px)}
.eyebrow--center{justify-content:center}

h2.h{font-size:clamp(2rem,4.4vw,3.2rem); margin:.4em 0 .5em; letter-spacing:-.025em}
h2.h em{font-style:italic; color:var(--emerald)}
.lead{font-size:1.12rem; color:var(--ink-soft); max-width:62ch}
.lead--center{margin-left:auto; margin-right:auto}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--body); font-weight:600; font-size:.98rem;
  padding:15px 26px; border-radius:100px; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; transition:.3s var(--ease);
  letter-spacing:.01em;
}
.btn--primary{background:var(--emerald); color:#fff; box-shadow:0 10px 26px rgba(30,110,88,.30)}
.btn--primary:hover{background:var(--emerald-deep); transform:translateY(-2px); box-shadow:0 16px 34px rgba(30,110,88,.36)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--emerald); color:var(--emerald); transform:translateY(-2px)}
.btn--gold{background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#2a2206}
.btn--gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(190,156,70,.35)}
.btn--light{background:#fff; color:var(--emerald-deep)}
.btn--light:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}

/* =========================================================
   HEADER
   ========================================================= */
.topbar{
  background:var(--emerald-deep); color:#dfeee7;
  font-size:.82rem; letter-spacing:.02em;
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; min-height:40px; gap:16px; flex-wrap:wrap}
.topbar a{color:#eaf5ef; opacity:.92}
.topbar a:hover{opacity:1; color:var(--gold-2)}
.topbar .socials{display:flex; gap:16px}

header.site{position:sticky; top:0; z-index:60; background:rgba(250,248,243,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:20px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:1.32rem; letter-spacing:-.02em; color:var(--ink)}
.brand .mark{width:38px; height:38px; flex:none}
.brand b{font-weight:500}
.brand i{font-style:italic; color:var(--emerald)}

.menu{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.menu > li{position:relative}
.menu > li > a{
  display:block; padding:10px 14px; font-size:.92rem; font-weight:500;
  color:var(--ink-soft); border-radius:10px; transition:.2s; white-space:nowrap;
}
.menu > li > a:hover{color:var(--emerald); background:rgba(30,110,88,.07)}
.menu > li.has > a::after{content:"⌄"; margin-left:6px; font-size:.8em; opacity:.6; position:relative; top:-2px}
.submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:268px;
  background:#fff; border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:10px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.25s var(--ease); list-style:none; margin:0;
}
.menu > li.has:hover .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu a{display:block; padding:9px 14px; border-radius:10px; font-size:.9rem; color:var(--ink-soft)}
.submenu a:hover{background:var(--bg-2); color:var(--emerald)}
.nav-cta{display:flex; align-items:center; gap:10px}

.burger{display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* mobil menü paneli */
.mobile{position:fixed; inset:0 0 0 auto; width:min(86vw,380px); background:var(--bg); z-index:90; transform:translateX(100%); transition:.35s var(--ease); padding:24px; overflow-y:auto; box-shadow:var(--shadow-lg)}
.mobile.open{transform:translateX(0)}
.mobile .x{font-size:1.6rem; cursor:pointer; float:right; line-height:1}
.mobile ul{list-style:none; margin:18px 0 0; padding:0}
.mobile a{display:block; padding:12px 6px; border-bottom:1px solid var(--line-soft); font-weight:500}
.mobile .sub a{padding-left:22px; font-size:.92rem; color:var(--ink-soft); border:none}
.scrim{position:fixed; inset:0; background:rgba(10,36,29,.4); z-index:80; opacity:0; visibility:hidden; transition:.3s}
.scrim.open{opacity:1; visibility:visible}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; overflow:hidden; padding:78px 0 92px; isolation:isolate}
.hero .container{position:relative; z-index:2}
.aura{position:absolute; border-radius:50%; filter:blur(60px); z-index:0; opacity:.85; pointer-events:none}
.aura--1{width:560px; height:560px; top:-160px; right:-120px;
  background:radial-gradient(circle at 50% 50%, rgba(46,160,124,.45), transparent 65%);
  animation:drift 18s var(--ease) infinite alternate}
.aura--2{width:480px; height:480px; bottom:-180px; left:-140px;
  background:radial-gradient(circle at 50% 50%, rgba(216,190,120,.40), transparent 62%);
  animation:drift 22s var(--ease) infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)} to{transform:translate(40px,30px) scale(1.12)}}

.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem); letter-spacing:-.03em; margin:.35em 0 .4em}
.hero h1 em{font-style:italic; color:var(--emerald)}
.hero .lead{font-size:1.15rem; margin-bottom:1.8em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-tags{display:flex; gap:18px; margin-top:26px; flex-wrap:wrap; font-size:.86rem; color:var(--ink-mute)}
.hero-tags span{display:inline-flex; align-items:center; gap:7px}
.hero-tags span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--emerald-2)}

/* aura portre */
.portrait{position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,var(--emerald-deep),var(--emerald)); box-shadow:var(--shadow-lg)}
.portrait .ring{position:absolute; inset:0; z-index:2}
.portrait .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-family:var(--display); font-style:italic; font-size:1.1rem; text-align:center; padding:30px}
.portrait-badge{position:absolute; z-index:3; bottom:18px; left:18px; right:18px; background:rgba(250,248,243,.92); backdrop-filter:blur(8px); border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm)}
.portrait-badge .av{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold-2),var(--emerald)); flex:none}
.portrait-badge b{font-family:var(--display); font-size:1.02rem}
.portrait-badge small{display:block; color:var(--ink-mute); font-size:.8rem}

/* =========================================================
   STAT ŞERİDİ
   ========================================================= */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm)}
.stat{padding:30px 26px; text-align:center; border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:none}
.stat .n{font-family:var(--display); font-size:2.5rem; color:var(--emerald); letter-spacing:-.02em; line-height:1}
.stat .l{font-size:.84rem; color:var(--ink-mute); margin-top:8px; letter-spacing:.04em; text-transform:uppercase}

/* =========================================================
   KARTLAR
   ========================================================= */
.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px; transition:.3s var(--ease); box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(30,110,88,.25)}
.card .ico{width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:linear-gradient(140deg,var(--sage),#eaf3ed); margin-bottom:16px}
.card h3{font-size:1.32rem; margin-bottom:.4em; color:var(--ink)}
.card p{color:var(--ink-soft); font-size:.97rem; margin-bottom:.8em}
.card .more{font-weight:600; font-size:.9rem; color:var(--emerald); display:inline-flex; gap:6px; align-items:center}
.card .more:hover{gap:10px}

/* fayda kartları (numara yerine ikon) */
.benefit{background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px}
.benefit .ico{width:46px; height:46px; font-size:1.3rem; margin-bottom:14px; background:#fff; border:1px solid var(--line-soft); border-radius:12px; display:flex; align-items:center; justify-content:center}
.benefit h3{font-size:1.18rem; margin-bottom:.35em}
.benefit p{font-size:.93rem; color:var(--ink-soft); margin:0}

/* =========================================================
   SPLIT (görsel + metin)
   ========================================================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split--rev .split-media{order:2}
.split-media{aspect-ratio:5/4; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(150deg,var(--bg-3),var(--sage)); position:relative; box-shadow:var(--shadow-md)}
.split-media .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--emerald-deep); opacity:.5; font-family:var(--display); font-style:italic}

/* =========================================================
   SÜREÇ
   ========================================================= */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:s}
.step{position:relative; padding:30px 26px; background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.step .num{font-family:var(--display); font-size:1rem; color:var(--gold); border:1px solid var(--gold-soft); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; background:var(--bg)}
.step h3{font-size:1.18rem; margin-bottom:.4em}
.step p{font-size:.94rem; color:var(--ink-soft); margin:0}

/* =========================================================
   KOYU BÖLÜM
   ========================================================= */
.dark{background:var(--emerald-deep); color:#e7f1eb; position:relative; overflow:hidden}
.dark .eyebrow{color:var(--gold-2)}
.dark .eyebrow::before{color:var(--gold-2)}
.dark h2.h{color:#fff}
.dark h2.h em{color:var(--gold-2)}
.dark .lead{color:rgba(231,241,235,.8)}
.dark .aura--g{position:absolute; width:560px; height:560px; border-radius:50%; filter:blur(80px); background:radial-gradient(circle,rgba(190,156,70,.35),transparent 65%); top:-160px; right:-120px}

/* sertifikalar */
.cert{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:26px; text-align:center}
.cert .seal{width:66px; height:66px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(140deg,var(--gold-2),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:1.6rem}
.cert h3{font-size:1.1rem; color:#fff; margin-bottom:.3em}
.cert p{font-size:.86rem; color:rgba(231,241,235,.7); margin:0}
.portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; z-index:1}
.split-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 16%}
.cert{text-align:left; display:flex; flex-direction:column}
.cert .cert-img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; margin-bottom:18px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.28)}
.cert .tag{display:inline-block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-2); margin-bottom:7px; font-weight:600}
.cert h3{margin-bottom:.4em}

/* =========================================================
   YORUMLAR
   ========================================================= */
.quote{background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--gold); letter-spacing:2px; margin-bottom:12px}
.quote p{font-family:var(--display); font-style:italic; font-size:1.08rem; color:var(--ink); line-height:1.55}
.quote .who{display:flex; align-items:center; gap:12px; margin-top:16px}
.quote .who .av{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--sage),var(--gold-soft)); flex:none}
.quote .who b{font-size:.95rem} .quote .who small{display:block; color:var(--ink-mute); font-size:.82rem}

/* =========================================================
   CTA bandı
   ========================================================= */
.cta-band{background:linear-gradient(135deg,var(--emerald),var(--emerald-deep)); border-radius:var(--radius-lg); padding:60px 50px; text-align:center; color:#fff; position:relative; overflow:hidden}
.cta-band .aura--g{position:absolute; width:480px; height:480px; border-radius:50%; filter:blur(70px); background:radial-gradient(circle,rgba(216,190,120,.4),transparent 60%); bottom:-180px; right:-120px}
.cta-band h2{position:relative; font-size:clamp(1.8rem,4vw,2.8rem); color:#fff; margin-bottom:.5em}
.cta-band p{position:relative; color:rgba(255,255,255,.85); max-width:50ch; margin:0 auto 1.5em}
.cta-band .row{position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* =========================================================
   İÇERİK SAYFA (article)
   ========================================================= */
.page-hero{padding:64px 0 30px; position:relative; overflow:hidden}
.page-hero .aura--1{width:420px; height:420px; top:-160px; right:-100px}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.5rem); margin:.4em 0 .35em; max-width:18ch}
.page-hero h1 em{font-style:italic; color:var(--emerald)}
.crumbs{font-size:.82rem; color:var(--ink-mute)}
.crumbs a:hover{color:var(--emerald)}

.article{max-width:760px; margin:0 auto}
.article p{font-size:1.06rem; color:var(--ink-soft); margin-bottom:1.25em}
.article h2{font-size:1.75rem; margin:1.6em 0 .55em; color:var(--ink)}
.article h3{font-size:1.32rem; margin:1.4em 0 .45em; color:var(--ink)}
.article strong{color:var(--ink); font-weight:600}
.article ul,.article ol{margin:0 0 1.4em; padding-left:0; list-style:none}
.article ul li{position:relative; padding:6px 0 6px 30px; color:var(--ink-soft)}
.article ul li::before{content:"✦"; position:absolute; left:4px; color:var(--gold); font-size:.85em; top:9px}
.article ol{counter-reset:o}
.article ol li{position:relative; padding:6px 0 6px 38px; color:var(--ink-soft); counter-increment:o}
.article ol li::before{content:counter(o); position:absolute; left:0; top:7px; width:24px; height:24px; background:var(--emerald); color:#fff; border-radius:50%; font-size:.78rem; display:flex; align-items:center; justify-content:center; font-family:var(--display)}
.article blockquote{margin:1.6em 0; padding:22px 26px; background:var(--bg-2); border-left:3px solid var(--gold); border-radius:0 14px 14px 0; font-family:var(--display); font-style:italic; font-size:1.15rem; color:var(--ink)}
.pull{background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:26px 28px; margin:1.8em 0}
.pull h3{margin-bottom:.4em; font-size:1.2rem}
.pull p{margin:0; font-size:1rem}

/* FAQ accordion */
.faq{max-width:820px; margin:0 auto}
.faq details{border:1px solid var(--line-soft); border-radius:14px; background:#fff; margin-bottom:12px; box-shadow:var(--shadow-sm); overflow:hidden}
.faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--display); font-size:1.12rem; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--emerald); transition:.25s; font-family:var(--body)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 24px 22px; color:var(--ink-soft)}

/* iletişim */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.contact-card{background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius); padding:24px; display:flex; gap:16px; align-items:flex-start; box-shadow:var(--shadow-sm); margin-bottom:14px}
.contact-card .ico{width:48px; height:48px; border-radius:12px; background:var(--sage); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none}
.contact-card b{display:block; font-family:var(--display); font-size:1.1rem}
.contact-card a,.contact-card span{color:var(--ink-soft); font-size:.95rem}
.form{background:#fff; border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md)}
.field{margin-bottom:16px}
.field label{display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft)}
.field input,.field textarea,.field select{width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:12px; font-family:var(--body); font-size:1rem; background:var(--bg); color:var(--ink); transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--emerald); box-shadow:0 0 0 4px rgba(30,110,88,.12); background:#fff}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{background:var(--emerald-night); color:#cfe0d6; padding:72px 0 28px; position:relative; overflow:hidden}
footer.site .aura--g{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(90px); background:radial-gradient(circle,rgba(30,110,88,.5),transparent 65%); top:-200px; left:-100px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; position:relative}
.foot-brand .brand{color:#fff; margin-bottom:14px}
.foot-brand .brand i{color:var(--gold-2)}
.foot-brand p{color:rgba(207,224,214,.75); font-size:.95rem; max-width:34ch}
.foot-col h4{font-family:var(--body); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-2); margin-bottom:16px}
.foot-col ul{list-style:none; margin:0; padding:0}
.foot-col li{margin-bottom:10px}
.foot-col a{color:rgba(207,224,214,.8); font-size:.94rem}
.foot-col a:hover{color:#fff}
.foot-bottom{position:relative; margin-top:54px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.84rem; color:rgba(207,224,214,.6)}
.disclaimer{position:relative; margin-top:20px; font-size:.78rem; color:rgba(207,224,214,.5); max-width:90ch; line-height:1.6}

/* =========================================================
   ANIMASYON / REVEAL
   ========================================================= */
.reveal{opacity:0; transform:translateY(24px); transition:.8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* whatsapp float */
.wa{position:fixed; bottom:22px; right:22px; z-index:70; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(37,211,102,.4); transition:.3s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px; height:30px; fill:#fff}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .nav{gap:12px}
  .menu{gap:0}
  .menu > li > a{padding:9px 10px; font-size:.88rem}
  .btn{padding:13px 20px; font-size:.92rem}
  .brand{font-size:1.2rem}
}
@media (max-width:1080px){
  .nav-cta .btn--ghost{display:none}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .portrait{max-width:420px; margin:0 auto}
  .split{grid-template-columns:1fr; gap:34px}
  .split--rev .split-media{order:0}
  .grid-3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .menu,.topbar .socials{display:none}
  .nav-cta .btn--ghost{display:none}
  .burger{display:flex}
}
@media (max-width:620px){
  body{font-size:16px}
  .section{padding:64px 0}
  .container{padding:0 20px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-band{padding:42px 24px}
  .hero{padding:48px 0 60px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}