/* ════════════════════════════════════════════════════════════
   АЛХЕМИА — Центар за психологија
   Design system & stylesheet — DUAL THEME (light / dark)

   Theme resolution, three states:
     1. no [data-theme]          → follows prefers-color-scheme
     2. [data-theme="light"]     → forced light (wins over system dark)
     3. [data-theme="dark"]      → forced dark  (wins over system light)

   Every colour below is a token. Components never hardcode a hex, so
   both themes stay in sync automatically.
   ════════════════════════════════════════════════════════════ */

/* ── 1. BRAND CONSTANTS (identical in both themes) ─────────── */
:root{
  --ink-950:#02011F;
  --ink-900:#040239;          /* brand deep indigo */
  --plum:#432C68;
  --violet:#3C3099;

  --peri:#9299C6;             /* logo gradient, left stop  */
  --sage:#93B79B;             /* logo gradient, right stop */
  --peri-lt:#B4B9DC;
  --sage-lt:#B3D0B9;
  --lilac:#D8D8F5;
  --mist:#F2F0F8;

  /* accessible deep variants, for use on light grounds */
  --peri-deep:#5A63A8;
  --sage-deep:#4E8560;
  --peri-btn:#545DA4;
  --sage-btn:#4A7F5C;

  /* type */
  --f-display:"Kurale",Georgia,"Times New Roman",serif;
  --f-sans:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;

  --step--1:clamp(.8rem,.77rem + .16vw,.885rem);
  --step-0 :clamp(.95rem,.91rem + .2vw,1.06rem);
  --step-1 :clamp(1.08rem,1rem + .35vw,1.28rem);
  --step-2 :clamp(1.35rem,1.2rem + .7vw,1.85rem);
  --step-3 :clamp(1.8rem,1.45rem + 1.6vw,3rem);
  --step-4 :clamp(2.3rem,1.6rem + 3.2vw,4.6rem);
  --step-5 :clamp(2.9rem,1.7rem + 5.4vw,6.6rem);

  /* space & shape */
  --shell:1240px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,10vw,9.5rem);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --nav-h:78px;
}

/* ── 2. LIGHT THEME TOKENS (the default) ───────────────────── */
:root{
  --bg:#F7F5FB;
  --bg-alt:#F1EEF9;
  --card:#FFFFFF;
  --panel:rgba(247,245,251,.78);
  --panel-solid:rgba(247,245,251,.97);
  --line:rgba(11,8,54,.10);
  --line-strong:rgba(11,8,54,.18);

  --text:#120E42;
  --text-soft:#4C4A70;
  --text-mute:#6E6B92;
  --accent:#4E8560;

  --grad:linear-gradient(100deg,var(--peri) 0%,#A8B4B8 48%,var(--sage) 100%);
  --grad-text:linear-gradient(100deg,var(--peri-deep) 0%,var(--sage-deep) 100%);
  --grad-btn:linear-gradient(100deg,var(--peri-btn) 0%,var(--sage-btn) 100%);
  --grad-soft:linear-gradient(100deg,rgba(146,153,198,.14),rgba(147,183,155,.14));
  --on-accent:#FFFFFF;

  --svg-a:#545DA4;
  --svg-b:#4A7F5C;

  --shadow:0 28px 64px -28px rgba(11,8,54,.30);
  --shadow-sm:0 10px 30px -16px rgba(11,8,54,.24);

  --blob-a:rgba(146,153,198,.50);
  --blob-b:rgba(147,183,155,.42);
  --blob-c:rgba(216,216,245,.75);
  --blob-op:.55;

  --grain-op:.028;
  --grain-blend:multiply;

  --hero-glow:rgba(255,255,255,.60);
  --feature-bg:linear-gradient(170deg,rgba(147,183,155,.13),#fff 58%);
  --feature-line:rgba(78,133,96,.34);

  --field-bg:#F7F5FB;
  --field-bg-focus:#FFFFFF;
  --danger:#C4626A;

  --img-sat:1;
  --logo-filter:none;
  --btn-shadow:0 10px 26px -14px rgba(74,127,92,.6);
  --btn-shadow-hover:0 16px 34px -14px rgba(74,127,92,.7);

  color-scheme:light;
}

/* ── 3. DARK THEME TOKENS ──────────────────────────────────── */
/* 3a. system preference, unless the user forced light */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#040239;
    --bg-alt:#070446;
    --card:rgba(255,255,255,.042);
    --panel:rgba(4,2,57,.72);
    --panel-solid:rgba(4,2,57,.97);
    --line:rgba(216,216,245,.13);
    --line-strong:rgba(216,216,245,.24);

    --text:#EDEBF7;
    --text-soft:rgba(237,235,247,.72);
    --text-mute:rgba(237,235,247,.52);
    --accent:#B3D0B9;

    --grad-text:linear-gradient(100deg,var(--peri) 0%,var(--sage) 100%);
    --grad-btn:linear-gradient(100deg,var(--peri) 0%,var(--sage) 100%);
    --grad-soft:linear-gradient(100deg,rgba(146,153,198,.16),rgba(147,183,155,.16));
    --on-accent:#04023A;

    --svg-a:#9299C6;
    --svg-b:#93B79B;

    --shadow:0 30px 70px -28px rgba(2,1,31,.85);
    --shadow-sm:0 14px 34px -20px rgba(2,1,31,.70);

    --blob-a:rgba(146,153,198,.65);
    --blob-b:rgba(147,183,155,.50);
    --blob-c:rgba(67,44,104,.75);
    --blob-op:.40;

    --grain-op:.032;
    --grain-blend:normal;

    --hero-glow:rgba(146,153,198,.13);
    --feature-bg:linear-gradient(170deg,rgba(147,183,155,.11),rgba(2,1,31,.5) 55%);
    --feature-line:rgba(147,183,155,.40);

    --field-bg:rgba(255,255,255,.03);
    --field-bg-focus:rgba(255,255,255,.05);
    --danger:#E8A0A0;

    --img-sat:.85;
    --logo-filter:brightness(0) invert(1);
    --btn-shadow:0 10px 26px -14px rgba(147,183,155,.45);
    --btn-shadow-hover:0 16px 34px -12px rgba(147,183,155,.6);

    color-scheme:dark;
  }
}

/* 3b. explicit dark, wins over a system light preference */
:root[data-theme="dark"]{
  --bg:#040239;
  --bg-alt:#070446;
  --card:rgba(255,255,255,.042);
  --panel:rgba(4,2,57,.72);
  --panel-solid:rgba(4,2,57,.97);
  --line:rgba(216,216,245,.13);
  --line-strong:rgba(216,216,245,.24);

  --text:#EDEBF7;
  --text-soft:rgba(237,235,247,.72);
  --text-mute:rgba(237,235,247,.52);
  --accent:#B3D0B9;

  --grad-text:linear-gradient(100deg,var(--peri) 0%,var(--sage) 100%);
  --grad-btn:linear-gradient(100deg,var(--peri) 0%,var(--sage) 100%);
  --grad-soft:linear-gradient(100deg,rgba(146,153,198,.16),rgba(147,183,155,.16));
  --on-accent:#04023A;

  --svg-a:#9299C6;
  --svg-b:#93B79B;

  --shadow:0 30px 70px -28px rgba(2,1,31,.85);
  --shadow-sm:0 14px 34px -20px rgba(2,1,31,.70);

  --blob-a:rgba(146,153,198,.65);
  --blob-b:rgba(147,183,155,.50);
  --blob-c:rgba(67,44,104,.75);
  --blob-op:.40;

  --grain-op:.032;
  --grain-blend:normal;

  --hero-glow:rgba(146,153,198,.13);
  --feature-bg:linear-gradient(170deg,rgba(147,183,155,.11),rgba(2,1,31,.5) 55%);
  --feature-line:rgba(147,183,155,.40);

  --field-bg:rgba(255,255,255,.03);
  --field-bg-focus:rgba(255,255,255,.05);
  --danger:#E8A0A0;

  --img-sat:.85;
  --logo-filter:brightness(0) invert(1);
  --btn-shadow:0 10px 26px -14px rgba(147,183,155,.45);
  --btn-shadow-hover:0 16px 34px -12px rgba(147,183,155,.6);

  color-scheme:dark;
}

/* ── 4. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  font-family:var(--f-sans);
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.72;
  color:var(--text-soft);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background .5s var(--ease),color .5s var(--ease);
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--sage);color:#0B0836}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* inline SVG gradient stops follow the active theme */
.gs-a{stop-color:var(--svg-a)}
.gs-b{stop-color:var(--svg-b)}

.skip{
  position:fixed;top:-100px;left:50%;transform:translateX(-50%);z-index:999;
  background:var(--accent);color:var(--on-accent);padding:.7rem 1.4rem;border-radius:0 0 12px 12px;
  font-weight:500;transition:top .3s var(--ease);
}
.skip:focus{top:0}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:rgba(146,153,198,.4);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(146,153,198,.7)}

/* ── 5. LAYOUT PRIMITIVES ──────────────────────────────────── */
.shell{width:min(100% - (var(--gutter)*2),var(--shell));margin-inline:auto}
.section{position:relative;padding-block:var(--sec-y)}

.section__head{max-width:820px;margin:0 auto clamp(2.8rem,6vw,5rem);text-align:center}
.section__head--split{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  max-width:none;text-align:left;flex-wrap:wrap;
}

/* ── 6. TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.1;letter-spacing:-.01em;color:var(--text)}

.h2{font-size:var(--step-3);line-height:1.14;margin-bottom:1.1rem}
.h2 em,.hero__title em,.grad-text{
  font-style:normal;
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

.lede{font-size:var(--step-1);color:var(--text-soft);font-weight:300;line-height:1.68}
.lede--center{margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.eyebrow__dot{
  width:6px;height:6px;border-radius:50%;background:var(--grad-btn);
  box-shadow:0 0 0 4px rgba(147,183,155,.20);flex:none;
}
.section__head .eyebrow{justify-content:center}

strong{font-weight:500;color:var(--text)}

/* ── 7. BUTTONS ────────────────────────────────────────────── */
.btn{
  --btn-py:.78rem; --btn-px:1.5rem;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:var(--btn-py) var(--btn-px);
  font-size:.9rem;font-weight:500;letter-spacing:.02em;
  border-radius:100px;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--lg{--btn-py:1rem;--btn-px:2rem;font-size:.95rem}
.btn--full{width:100%}

.btn--solid{
  color:var(--on-accent);background:var(--grad-btn);background-size:180% 100%;background-position:0% 50%;
  box-shadow:var(--btn-shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-position .6s var(--ease);
}
.btn--solid:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:var(--btn-shadow-hover)}
.btn--solid:active{transform:translateY(0)}

.btn--ghost{color:var(--text);border:1px solid var(--line-strong);background:var(--card)}
.btn--ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-btn);
  opacity:0;transition:opacity .4s var(--ease);
}
.btn--ghost:hover{color:var(--on-accent);border-color:transparent;transform:translateY(-2px)}
.btn--ghost:hover::before{opacity:1}

/* ── 8. THEME TOGGLE ───────────────────────────────────────── */
.themetoggle{
  position:relative;width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid var(--line-strong);background:var(--card);color:var(--text);
  display:grid;place-items:center;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.themetoggle:hover{transform:translateY(-2px);border-color:var(--accent)}
.themetoggle svg{
  width:19px;height:19px;grid-area:1/1;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
}
/* light active → offer the moon; dark active → offer the sun */
.themetoggle__sun{opacity:0;transform:rotate(-70deg) scale(.5)}
.themetoggle__moon{opacity:1;transform:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themetoggle__sun{opacity:1;transform:none}
  :root:not([data-theme="light"]) .themetoggle__moon{opacity:0;transform:rotate(70deg) scale(.5)}
}
:root[data-theme="dark"] .themetoggle__sun{opacity:1;transform:none}
:root[data-theme="dark"] .themetoggle__moon{opacity:0;transform:rotate(70deg) scale(.5)}

/* ── 9. AMBIENT BACKDROP ───────────────────────────────────── */
.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg);transition:background .5s var(--ease)}
.aurora__blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:var(--blob-op);transition:opacity .5s var(--ease)}
.aurora__blob--1{
  width:60vw;height:60vw;max-width:820px;max-height:820px;
  top:-18%;left:-12%;background:radial-gradient(circle,var(--blob-a),transparent 68%);
  animation:drift1 26s var(--ease-io) infinite alternate;
}
.aurora__blob--2{
  width:52vw;height:52vw;max-width:720px;max-height:720px;
  top:28%;right:-14%;background:radial-gradient(circle,var(--blob-b),transparent 68%);
  animation:drift2 32s var(--ease-io) infinite alternate;
}
.aurora__blob--3{
  width:56vw;height:56vw;max-width:760px;max-height:760px;
  bottom:-16%;left:22%;background:radial-gradient(circle,var(--blob-c),transparent 70%);
  animation:drift3 29s var(--ease-io) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(14%,12%,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-16%,-10%,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(10%,-14%,0) scale(1.2)}}

.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none}
.scrollbar span{display:block;height:100%;width:0;background:var(--grad-btn);transition:width .1s linear}

/* ── 10. PRELOADER ─────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden}
/* The real Алхемиа mark, traced from the logo. The outline draws itself,
   the solid form fades in underneath, then the whole mark breathes while
   the page finishes loading. pathLength="100" lets the dash maths stay in
   readable 0-100 units regardless of the path's true length. */
.loader__mark{
  width:clamp(120px,26vw,168px);height:auto;overflow:visible;
  animation:markBreathe 2.8s var(--ease-io) 1.75s infinite;
}
.loader__draw{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:markDraw 1.3s var(--ease-io) forwards,
            markStrokeOut .5s var(--ease) 1.25s forwards;
}
.loader__fill{
  opacity:0;
  animation:markFill .65s var(--ease) 1s forwards;
}
@keyframes markDraw{to{stroke-dashoffset:0}}
@keyframes markStrokeOut{to{opacity:0}}
@keyframes markFill{to{opacity:1}}
@keyframes markBreathe{0%,100%{opacity:1}50%{opacity:.62}}

/* ── 11. NAV ───────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--panel);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -22px rgba(11,8,54,.5);
}
.nav.is-hidden{transform:translateY(-102%)}

.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
.nav__logo img{
  width:auto;height:38px;object-fit:contain;
  filter:var(--logo-filter);
  transition:opacity .3s var(--ease),filter .4s var(--ease);
}
.nav__logo:hover img{opacity:.7}

.nav__links{display:flex;align-items:center;gap:.35rem}
.nav__links > a{
  position:relative;padding:.55rem .9rem;font-size:.875rem;font-weight:400;
  color:var(--text-soft);border-radius:100px;transition:color .35s var(--ease);
}
.nav__links > a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.32rem;height:1px;
  background:var(--grad-btn);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links > a:hover,.nav__links > a.is-active{color:var(--text)}
.nav__links > a:hover::after,.nav__links > a.is-active::after{transform:scaleX(1)}
.nav__cta--mobile{display:none}

.nav__right{display:flex;align-items:center;gap:.65rem}

.burger{
  display:none;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-strong);position:relative;flex:none;background:var(--card);
}
.burger span{
  position:absolute;left:50%;width:17px;height:1.5px;background:var(--text);border-radius:2px;
  transform:translateX(-50%);transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){bottom:18px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateX(-50%) translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateX(-50%) translateY(-3.5px) rotate(-45deg)}

/* ── 12. HERO ──────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + 3rem);padding-bottom:5rem;overflow:hidden;
}
.hero__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1100px,120vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,var(--hero-glow) 0%,transparent 62%);
}
.hero__inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}

.hero__title{font-size:var(--step-5);line-height:1.02;letter-spacing:-.025em;margin-bottom:1.6rem}
.hero__title .line{display:block}

.hero__lede{max-width:660px;font-size:var(--step-1);color:var(--text-soft);font-weight:300}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2.4rem}

/* Equal-width columns, so the middle stat sits on the centre axis and lines
   up with the scroll indicator. A centred flex row would only centre the
   group, letting the middle item drift by half the outer-label difference. */
.hero__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,3vw,2.5rem);
  margin-top:clamp(3rem,7vw,5.5rem);padding-top:2.2rem;
  border-top:1px solid var(--line);width:min(100%,720px);
}
.stat{text-align:center}
.stat__num{
  display:block;font-family:var(--f-display);font-size:clamp(1.9rem,4vw,2.7rem);line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.45rem;font-variant-numeric:tabular-nums;
}
.stat__label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}

.hero__scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.hero__scroll-line{
  width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--accent));
  position:relative;overflow:hidden;
}
.hero__scroll-line::after{
  content:"";position:absolute;top:-44px;left:0;width:100%;height:44px;
  background:linear-gradient(to bottom,transparent,var(--accent));
  animation:scrolldot 2.4s var(--ease-io) infinite;
}
@keyframes scrolldot{0%{top:-44px}60%,100%{top:44px}}
.hero__scroll-text{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-mute)}

/* ── 13. MARQUEE ───────────────────────────────────────────── */
.marquee{
  position:relative;overflow:hidden;padding:1.4rem 0;
  border-block:1px solid var(--line);background:var(--panel);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:2.2rem;width:max-content;animation:scrollx 42s linear infinite}
.marquee span{
  font-family:var(--f-display);font-size:clamp(1rem,2vw,1.45rem);
  color:var(--text-soft);white-space:nowrap;
}
.marquee i{color:var(--accent);font-style:normal;font-size:.72rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ── 14. ABOUT ─────────────────────────────────────────────── */
.about__grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.about__visual{position:relative}
.about__frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);background:var(--card);
  box-shadow:var(--shadow);
  transform-style:preserve-3d;transition:transform .6s var(--ease);
}
/* 3:4 portrait, matching the baked crop in about-visual.webp. Taller than a
   square so the visual column reads level with the text beside it. */
.about__frame img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center}
.about__frame-glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(146,153,198,.14),transparent 45%,rgba(147,183,155,.12));
}
.about__badge{
  position:absolute;right:-14px;bottom:-14px;width:96px;height:96px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow);
  animation:float 7s var(--ease-io) infinite alternate;
}
.about__badge svg{width:58px;height:auto}
@keyframes float{to{transform:translateY(-11px)}}

.about__body > * + *{margin-top:1.15rem}
.about__body p{color:var(--text-soft)}

.founder{
  padding:1.35rem;margin-top:1.9rem !important;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--grad-soft);
}
.founder__name{font-family:var(--f-display);font-size:1.2rem;color:var(--text) !important;line-height:1.3}
.founder__role{font-size:.82rem;color:var(--accent) !important;margin-top:.15rem;line-height:1.5;font-weight:400}
.founder__note{font-size:.85rem;margin-top:.5rem;line-height:1.6}

.pillars{margin-top:1.9rem !important;display:grid;gap:.9rem}
.pillars li{
  display:flex;gap:.9rem;align-items:baseline;
  font-size:.94rem;color:var(--text-soft);
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.pillars li:last-child{border-bottom:0;padding-bottom:0}
.pillars span{font-family:var(--f-display);font-size:.82rem;color:var(--accent);flex:none;letter-spacing:.06em}

/* ── 15. THERAPY CARDS ─────────────────────────────────────── */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.tcard{
  padding:clamp(1.6rem,3vw,2.3rem);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.tcard:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.tcard__icon{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid var(--line);color:var(--accent);margin-bottom:1.3rem;
}
.tcard__icon svg{width:24px;height:24px}
.tcard h3{font-size:var(--step-2);margin-bottom:.6rem}
.tcard p{font-size:.94rem;color:var(--text-soft)}

/* ── 16. SERVICES ──────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;align-items:stretch}
.svc__card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.8rem,3vw,2.5rem);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);
  overflow:hidden;isolation:isolate;
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.svc__card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(146,153,198,.15),transparent 62%);
  transition:opacity .55s var(--ease);
}
.svc__card:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.svc__card:hover::before{opacity:1}

.svc__card--feature{border-color:var(--feature-line);background:var(--feature-bg)}
.svc__flag{
  position:absolute;top:1.3rem;right:1.3rem;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:.32rem .7rem;border-radius:100px;color:var(--on-accent);background:var(--grad-btn);
}
.svc__num{font-family:var(--f-display);font-size:.9rem;color:var(--accent);letter-spacing:.1em;margin-bottom:1.5rem;display:block}
.svc__head{margin-bottom:1rem}
.svc__head h3{font-size:var(--step-2);line-height:1.15;margin-bottom:.4rem}
.svc__tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.svc__desc{font-size:.94rem;color:var(--text-soft);margin-bottom:1.4rem}

.svc__list{display:grid;gap:.62rem;margin-bottom:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.svc__list li{position:relative;padding-left:1.5rem;font-size:.88rem;color:var(--text-soft)}
.svc__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--grad-btn);
}
.svc__link{
  margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  font-size:.86rem;font-weight:500;color:var(--accent);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease),gap .35s var(--ease);
}
.svc__link svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.svc__link:hover{color:var(--text);border-bottom-color:var(--accent);gap:.7rem}
.svc__link:hover svg{transform:translateX(3px)}

/* ── 17. AUDIENCE ──────────────────────────────────────────── */
.audience__inner{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
}
.audience__left .btn{margin-top:1.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;align-content:center}
.chips li{
  padding:.72rem 1.25rem;border-radius:100px;font-size:.88rem;
  border:1px solid var(--line);background:var(--card);color:var(--text-soft);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
  cursor:default;
}
.chips li:hover{transform:translateY(-3px);color:var(--on-accent);background:var(--grad-btn);border-color:transparent}

/* ── 18. APPROACH / STEPS ──────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.step{
  position:relative;padding:2rem 1.5rem 1.9rem;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.step::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-btn);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.step:hover::after{transform:scaleX(1)}
.step__no{
  display:block;font-family:var(--f-display);font-size:2.1rem;line-height:1;
  color:transparent;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;
  margin-bottom:1.1rem;
}
.step h3{font-size:1.22rem;margin-bottom:.55rem}
.step p{font-size:.9rem;color:var(--text-soft)}

/* ── 19. QUOTE ─────────────────────────────────────────────── */
.quote{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.quote blockquote{max-width:920px;margin-inline:auto;text-align:center}
.quote__mark{width:44px;height:30px;margin:0 auto 1.8rem;color:var(--accent);opacity:.9}
.quote p{
  font-family:var(--f-display);font-size:clamp(1.35rem,3.2vw,2.35rem);
  line-height:1.36;letter-spacing:-.01em;color:var(--text);
}
.quote cite{
  display:block;margin-top:1.8rem;font-style:normal;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
}

/* ── 20. JOURNAL ───────────────────────────────────────────── */
/* featured post on the left, compact index of the rest on the right */
.journal__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:1.15rem}
.post{
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.post:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.post__img{overflow:hidden;background:var(--bg-alt);aspect-ratio:16/10}
.post--feature .post__img{aspect-ratio:16/11}
.post__img img{
  width:100%;height:100%;object-fit:cover;filter:saturate(var(--img-sat));
  transition:transform .9s var(--ease),filter .5s var(--ease);
}
.post:hover .post__img img{transform:scale(1.06);filter:saturate(1)}
.post__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.post__meta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:.75rem}
.post__meta span{color:var(--accent);font-weight:500}
.post__body h3{font-size:1.28rem;line-height:1.25;margin-bottom:.6rem}
.post--feature .post__body h3{font-size:var(--step-2)}
.post__excerpt{font-size:.93rem;color:var(--text-soft);margin-bottom:1.2rem}
.post__cta{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:500;color:var(--accent)}
.post__cta svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.post:hover .post__cta svg{transform:translateX(4px)}

/* compact list beside the feature — rows share the feature's height */
.postlist{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-sm);
  transition:border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.postlist:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.postlist__item{display:flex;flex:1 1 0}
.postlist__item + .postlist__item{border-top:1px solid var(--line)}
.postlist__link{
  flex:1;display:flex;align-items:center;gap:1rem;
  padding:1.15rem 1.4rem;
  transition:background .45s var(--ease);
}
.postlist__link:hover{background:var(--bg-alt)}
.postlist__text{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.postlist__meta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.postlist__meta span{color:var(--accent);font-weight:500}
.postlist__title{
  font-family:var(--f-display);font-weight:400;font-size:1.02rem;line-height:1.3;letter-spacing:-.01em;
  color:var(--text);transition:color .4s var(--ease);
}
.postlist__link:hover .postlist__title{color:var(--accent)}
/* visible by default so it still reads on touch, where there is no hover */
.postlist__arrow{
  width:15px;height:15px;flex:none;color:var(--accent);opacity:.4;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.postlist__link:hover .postlist__arrow{opacity:1;transform:translateX(4px)}

/* ── 21. FAQ ───────────────────────────────────────────────── */
.faq__grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
.faq__aside{position:sticky;top:calc(var(--nav-h) + 2.5rem)}
.faq__aside p{color:var(--text-soft);margin-bottom:1.6rem}

.acc{display:grid;gap:.7rem}
.acc__item{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.acc__item.is-open{border-color:var(--feature-line);box-shadow:var(--shadow)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.15rem 1.4rem;text-align:left;
  font-size:1rem;font-weight:400;color:var(--text);
  transition:color .35s var(--ease);
}
.acc__q:hover{color:var(--accent)}
.acc__q i{position:relative;flex:none;width:20px;height:20px}
.acc__q i::before,.acc__q i::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--accent);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.acc__q i::before{width:13px;height:1.5px}
.acc__q i::after{width:1.5px;height:13px}
.acc__item.is-open .acc__q i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc__item.is-open .acc__a{grid-template-rows:1fr}
.acc__a > div{overflow:hidden}
.acc__a p{padding:0 1.4rem 1.35rem;font-size:.93rem;color:var(--text-soft)}

/* ── 22. CONTACT ───────────────────────────────────────────── */
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,4.5rem);align-items:start;
}
.contact__meta{display:grid;gap:1.15rem;margin-top:2.4rem}
.contact__meta li{display:flex;gap:1rem;align-items:flex-start}
.contact__ico{
  flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--accent);box-shadow:var(--shadow-sm);
}
.contact__ico svg{width:20px;height:20px}
.contact__meta strong{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);font-weight:500;margin-bottom:.15rem;
}
.contact__meta p{font-size:.95rem;color:var(--text)}

.socials{display:flex;gap:.65rem;margin-top:2.2rem}
.socials a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--text-soft);background:var(--card);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),color .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
}
.socials a svg{width:19px;height:19px}
.socials a:hover{transform:translateY(-3px);color:var(--on-accent);background:var(--grad-btn);border-color:transparent}

.form{
  padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
  display:grid;gap:1.05rem;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}

.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;padding:1.35rem 1rem .6rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--field-bg);color:var(--text);font-size:.94rem;font-weight:300;
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--bg-alt);color:var(--text)}

.field label{
  position:absolute;left:1rem;top:1.02rem;
  font-size:.94rem;color:var(--text-mute);pointer-events:none;
  transform-origin:left top;
  transition:transform .3s var(--ease),color .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:var(--field-bg-focus);
  box-shadow:0 0 0 3px rgba(78,133,96,.13);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label{
  transform:translateY(-.72rem) scale(.76);color:var(--accent);
}
.field__chev{position:absolute;right:1rem;top:1.35rem;width:15px;height:15px;color:var(--text-mute);pointer-events:none}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{border-color:var(--danger)}

.check{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;margin-top:.2rem}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  flex:none;width:19px;height:19px;border-radius:5px;margin-top:.18rem;
  border:1px solid var(--line-strong);background:var(--field-bg);
  display:grid;place-items:center;transition:background .3s var(--ease),border-color .3s var(--ease);
}
.check__box::after{
  content:"";width:9px;height:5px;
  border-left:1.7px solid var(--on-accent);border-bottom:1.7px solid var(--on-accent);
  transform:rotate(-45deg) scale(0);transition:transform .3s var(--ease);margin-top:-2px;
}
.check input:checked + .check__box{background:var(--grad-btn);border-color:transparent}
.check input:checked + .check__box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible + .check__box{outline:2px solid var(--accent);outline-offset:2px}
.check__text{font-size:.82rem;color:var(--text-mute);line-height:1.6}

.form__note{font-size:.86rem;text-align:center;min-height:1.2em;color:var(--accent)}
.form__note.is-error{color:var(--danger)}

/* ── 23. FOOTER ────────────────────────────────────────────── */
.footer{
  position:relative;padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:2rem;
  border-top:1px solid var(--line);background:var(--panel);backdrop-filter:blur(6px);
}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(2.5rem,5vw,4.5rem);padding-bottom:3rem;
}
.footer__brand img{height:48px;width:auto;margin-bottom:1.3rem;filter:var(--logo-filter);transition:filter .4s var(--ease)}
.footer__brand p{font-size:.92rem;color:var(--text-mute);max-width:38ch}

.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer__nav h4{
  font-family:var(--f-sans);font-size:.7rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;
}
.footer__nav a{
  display:block;font-size:.9rem;color:var(--text-mute);padding:.3rem 0;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.footer__nav a:hover{color:var(--text);transform:translateX(3px)}

.footer__cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.footer__cta p{font-family:var(--f-display);font-size:clamp(1.15rem,2.6vw,1.75rem);color:var(--text)}

.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;
  padding-top:2rem;font-size:.8rem;color:var(--text-mute);
}
.footer__disclaimer{opacity:.85}

/* ── 24. BACK TO TOP ───────────────────────────────────────── */
.totop{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:110;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(12px);
  border:1px solid var(--line-strong);color:var(--text);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .35s var(--ease),color .35s var(--ease);
}
.totop svg{width:17px;height:17px}
.totop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--grad-btn);color:var(--on-accent);border-color:transparent}

/* ── 25. REVEAL ANIMATION ──────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

/* ── 26. BLOG PAGE ─────────────────────────────────────────── */
.pagehead{
  padding-top:calc(var(--nav-h) + clamp(4rem,9vw,7rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);text-align:center;
}
.pagehead h1{font-size:var(--step-4);line-height:1.05;margin-bottom:1.1rem;letter-spacing:-.02em}
.pagehead .lede{max-width:620px;margin-inline:auto}

.crumbs{
  display:flex;justify-content:center;gap:.55rem;align-items:center;
  font-size:.78rem;color:var(--text-mute);margin-bottom:1.6rem;
}
.crumbs a{transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--accent)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}

/* ── 27. RESPONSIVE ────────────────────────────────────────── */
@media (max-width:1080px){
  .about__grid,.audience__inner,.faq__grid,.contact__grid{grid-template-columns:1fr}
  .faq__aside{position:static}
  /* narrower once stacked, so the taller 3:4 portrait stays in proportion */
  .about__visual{max-width:410px;margin-inline:auto}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .cards3,.svc{grid-template-columns:1fr}
  .journal__grid{grid-template-columns:1fr}
  /* stacked: rows size to their content instead of stretching to the feature */
  .postlist__item{flex:0 0 auto}

  .nav__cta{display:none}
  .nav__cta--mobile{display:inline-flex;margin-top:.8rem;width:100%}
  .burger{display:block}

  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    padding:1.5rem var(--gutter) 2.2rem;
    background:var(--panel-solid);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px -26px rgba(11,8,54,.5);
    transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  .nav__links.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__links > a{padding:.85rem .2rem;font-size:1.02rem;border-bottom:1px solid var(--line)}
  .nav__links > a::after{display:none}
  .nav__links > a.btn{border-bottom:0}
}

@media (max-width:640px){
  :root{--nav-h:68px}
  .steps{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  /* no min-width here: it would fight minmax(0,1fr) and overflow narrow screens */
  .hero__stats{gap:.9rem}
  .stat__label{font-size:.66rem;letter-spacing:.1em}
  .footer__nav{grid-template-columns:1fr 1fr;gap:1.6rem}
  .about__badge{width:76px;height:76px;right:-8px;bottom:-8px}
  .about__badge svg{width:44px;height:auto}
  .section__head--split{flex-direction:column;align-items:flex-start}
}

/* ── 28. MOTION PREFERENCES ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
  .aurora__blob{animation:none}
}

@media print{
  .nav,.totop,.loader,.aurora,.grain,.scrollbar,.marquee,.hero__scroll{display:none}
  body{background:#fff;color:#000}
}