/* ==========================================================================
   ایران دیزاینر — «غواصی در یک صخره‌مرجانی رنگی»
   اصول اجرا:
   • هیچ فیلتر SVG زنده‌ای در صفحه نداریم؛ بافت نور یک‌بار رستر می‌شود.
   • انیمیشن‌ها فقط transform و opacity  →  روی GPU.
   • بخش‌های خارج از دید با content-visibility رندر نمی‌شوند.
   ========================================================================== */

/* ── فونت ────────────────────────────────────────────────────────────────── */
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/Vazirmatn-800.woff2) format("woff2");font-weight:800;font-display:swap}


/* ── توکن‌ها ─────────────────────────────────────────────────────────────── */
:root{
  /* آبِ لاجوردی و شاد — هیچ‌جا سیاه نمی‌شود */
  --d0:#e2faff;
  --d1:#1a97cc;
  --d2:#0f81bf;
  --d3:#0a68b2;
  --d4:#0a52a6;
  --d5:#0d3f97;
  --d6:#102f84;
  --d7:#0b1f5e;

  /* رنگ‌های شاد صخرهٔ مرجانی */
  --glow:#3ff0cd;
  --glow-2:#59e0ff;
  --pop:#ff7a4d;
  --sun:#ffd35c;
  --mag:#ff69b4;
  --wa:#25d366;

  --ink:#f2fbff;
  --ink-dim:#c3ddee;
  --line:rgba(255,255,255,.18);
  --card:rgba(6,38,72,.44);

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --r-lg:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-deep:0 26px 70px -28px rgba(2,16,42,.8);
}


/* ── پایه ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:Vazirmatn,"IRANSans","Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .25vw,1.1rem);
  line-height:2.05;
  color:var(--ink);
  background:var(--d7);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
em{font-style:normal}

::selection{background:var(--glow);color:#04202c}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--glow);outline-offset:4px;border-radius:10px}

.skip-link{
  position:fixed;inset-inline-start:50%;top:-100px;transform:translateX(50%);
  z-index:999;padding:12px 22px;border-radius:0 0 14px 14px;
  background:var(--glow);color:#042;font-weight:700;transition:top .2s var(--ease);
}
.skip-link:focus{top:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:5}
.wrap--narrow{max-width:900px}
.wrap--start,.wrap--end{display:flex;max-width:1120px}
.wrap--start{justify-content:flex-start}
.wrap--end{justify-content:flex-end}


/* ── اجزای مشترک ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-weight:700;font-size:1rem;line-height:1;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--wa{background:var(--wa);color:#03251a;box-shadow:0 12px 28px -10px rgba(37,211,102,.65)}
.btn--wa:hover{background:#2ee878;box-shadow:0 18px 38px -12px rgba(37,211,102,.8)}
.btn--ghost{background:rgba(255,255,255,.13);border-color:var(--line);color:#fff}
.btn--ghost svg{fill:none;stroke:currentColor;stroke-width:2}
.btn--ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.42)}
.btn--sm{padding:10px 18px;font-size:.9rem}
.btn--sm svg{width:17px;height:17px}

/* کارت شیشه‌ای تیره — روی آبِ روشن و تیره هر دو خوانا می‌ماند */
.panel,.contact{
  position:relative;z-index:5;width:min(660px,100%);
  padding:clamp(26px,3.4vw,44px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 60%),var(--card);
  border:1px solid var(--line);
  backdrop-filter:blur(13px) saturate(130%);
  -webkit-backdrop-filter:blur(13px) saturate(130%);
  box-shadow:var(--shadow-deep);
}
.contact{width:100%}

.depth-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:600;color:#0a2f4a;
  padding:7px 15px 7px 13px;border-radius:999px;
  background:linear-gradient(100deg,var(--glow),var(--glow-2));
  margin-bottom:20px;
}
.depth-tag i{width:7px;height:7px;border-radius:50%;background:#0a2f4a;flex:none;animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(10,47,74,.5)}70%,100%{box-shadow:0 0 0 9px rgba(10,47,74,0)}}

h1{font-size:clamp(1.48rem,.88rem + 2.4vw,2.8rem);font-weight:700;line-height:1.42;letter-spacing:-.01em;margin-bottom:22px;text-wrap:balance}
h2{font-size:clamp(1.4rem,.88rem + 2.08vw,2.32rem);font-weight:700;line-height:1.45;margin-bottom:16px;text-wrap:balance}
h1 em{background:linear-gradient(100deg,#ffe49a,#ffb45f 55%,#ff8a57);-webkit-background-clip:text;background-clip:text;color:transparent}
h2 em{background:linear-gradient(100deg,var(--sun),var(--pop) 55%,var(--mag));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--ink-dim);max-width:56ch}
.lead b{color:#fff;font-weight:700}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.86rem;font-weight:700;letter-spacing:.04em;color:#fff;margin-bottom:18px;
  padding:7px 17px 7px 14px;border-radius:999px;
  background:rgba(5,44,78,.42);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--sun);flex:none;animation:ping-sun 2.6s ease-out infinite}
@keyframes ping-sun{0%{box-shadow:0 0 0 0 rgba(255,211,92,.6)}70%,100%{box-shadow:0 0 0 10px rgba(255,211,92,0)}}

/* کارت‌های خدمت — کد کوتاه + عنوان + توضیح + چیپ */
.cards{display:grid;gap:14px;margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  position:relative;padding:18px 18px 16px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);transform:translateY(-3px)}
.card__code{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:26px;padding:0 9px;margin-bottom:11px;
  border-radius:8px;font-size:.72rem;font-weight:800;letter-spacing:.08em;
  color:#08263f;background:linear-gradient(135deg,var(--glow),var(--glow-2));
}
.card__code--2{background:linear-gradient(135deg,var(--sun),var(--pop))}
.card__code--3{background:linear-gradient(135deg,#7ee787,var(--glow))}
.card__code--4{background:linear-gradient(135deg,var(--mag),#b085ff)}
.card h3{font-size:1.02rem;font-weight:700;line-height:1.7;color:#fff;margin-bottom:4px}
.card p{font-size:.9rem;line-height:1.9;color:var(--ink-dim)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips li{
  font-size:.72rem;line-height:1.9;padding:1px 10px;border-radius:999px;
  color:rgba(232,245,255,.82);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

.split{display:grid;gap:8px 34px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.split__col h3{
  display:flex;align-items:center;gap:10px;font-size:1.06rem;font-weight:700;color:#fff;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12);
}
.split__col h3 svg{
  width:30px;height:30px;padding:5px;border-radius:9px;flex:none;
  fill:none;stroke:#06304f;stroke-width:1.9;background:linear-gradient(140deg,var(--glow),var(--glow-2));
}
.split__col:last-child h3 svg{background:linear-gradient(140deg,var(--sun),var(--pop))}
.ticks li{position:relative;padding-inline-start:24px;font-size:.95rem;line-height:1.95;color:var(--ink-dim)}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.85em;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--glow),var(--glow-2));
}
.split__col:last-child .ticks li::before{background:linear-gradient(135deg,var(--sun),var(--pop))}

.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .hero [data-reveal]:nth-child(2){transition-delay:.07s}
.js .hero [data-reveal]:nth-child(3){transition-delay:.14s}
.js .hero [data-reveal]:nth-child(4){transition-delay:.21s}


/* ── هدر، عمق‌سنج، دکمهٔ شناور ──────────────────────────────────────────── */
.topbar{
  position:fixed;inset-inline:0;top:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding-block:14px;
  padding-inline:max(16px,calc((100vw - var(--wrap))/2 + var(--pad)));
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.topbar::before{
  content:"";position:absolute;inset:0 0 -56px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,32,60,.42) 0%,rgba(3,32,60,.2) 55%,rgba(3,32,60,0) 100%);
  transition:opacity .35s var(--ease);
}
.is-scrolled .topbar{
  background:rgba(6,38,76,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.12);
}
.is-scrolled .topbar::before{opacity:0}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;color:#fff;text-shadow:0 1px 10px rgba(3,30,58,.55)}
.brand__mark{width:30px;height:30px;stroke:currentColor;fill:none;flex:none}
.brand__text b{color:var(--sun);font-weight:800}

.brand{justify-self:start}
.nav{display:flex;gap:4px;justify-self:center;font-size:.93rem}
.topbar > .btn{justify-self:end}
.nav a{padding:8px 13px;border-radius:999px;color:#e4f3fb;font-weight:500;text-shadow:0 1px 8px rgba(3,30,58,.55);transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.18);color:#fff}

/* ریل فصل‌ها */
.rail{
  position:fixed;z-index:50;inset-inline-end:max(10px,calc((100vw - var(--wrap))/2 + 10px));
  top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  pointer-events:none;
}
.rail__depth{display:flex;align-items:baseline;gap:5px;padding-inline-start:2px}
.rail__depth b{
  font-size:1.05rem;font-weight:800;color:var(--sun);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 10px rgba(3,30,58,.7);
}
.rail__depth small{font-size:.62rem;letter-spacing:.14em;color:rgba(255,255,255,.6)}

.rail__list{display:flex;flex-direction:column;gap:2px;counter-reset:ch}
.rail__list li{
  display:flex;align-items:center;gap:9px;height:22px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.45);
  transition:color .35s var(--ease);
}
.rail__list i{
  position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.3);
  transition:background-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
/* خط اتصال بین نقطه‌ها */
.rail__list li + li i::before{
  content:"";position:absolute;inset-inline-start:50%;bottom:100%;
  width:1px;height:13px;transform:translateX(50%);
  background:rgba(255,255,255,.22);
}
.rail__list span{
  max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;transition:max-width .4s var(--ease),opacity .3s var(--ease);
}
.rail__list li.is-active{color:#fff}
.rail__list li.is-active i{
  background:var(--sun);transform:scale(1.35);
  box-shadow:0 0 0 4px rgba(255,211,92,.22);
}
.rail__list li.is-active span{max-width:150px;opacity:1}

.wa-fab{
  position:fixed;z-index:60;
  inset-inline-start:max(16px,calc((100vw - var(--wrap))/2 + 16px));bottom:clamp(16px,3vw,30px);
  display:flex;align-items:center;gap:0;padding:15px;border-radius:999px;
  background:var(--wa);color:#03251a;box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:gap .3s var(--ease),padding .3s var(--ease),transform .25s var(--ease);
}
.wa-fab svg{width:26px;height:26px;fill:currentColor;flex:none}
.wa-fab__label{max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:.95rem;transition:max-width .35s var(--ease)}
.wa-fab:hover,.wa-fab:focus-visible{gap:9px;padding-inline-end:22px;transform:translateY(-3px)}
.wa-fab:hover .wa-fab__label,.wa-fab:focus-visible .wa-fab__label{max-width:180px}


/* ── مناطق عمق ──────────────────────────────────────────────────────────── */
.zone{
  position:relative;display:flex;align-items:center;
  min-height:100svh;padding-block:clamp(110px,14vh,180px);
  isolation:isolate;overflow:hidden;
}
/* بخش‌های خارج از دید اصلاً رندر نمی‌شوند — سبک‌ترین بردِ ممکن */
.zone:not(#hero){content-visibility:auto;contain-intrinsic-size:auto 100svh}

.zone--surface{
  background:linear-gradient(180deg,var(--d0) 0%,#7fd4ee 14%,#3bb4de 38%,#2099ce 66%,var(--d1) 100%);
  padding-top:clamp(230px,33vh,380px);
  padding-bottom:clamp(88px,12vh,150px);
}
.zone--shallow{background:linear-gradient(180deg,var(--d1) 0%,var(--d2) 100%)}
.zone--mid    {background:linear-gradient(180deg,var(--d2) 0%,var(--d3) 100%)}
.zone--deep   {background:linear-gradient(180deg,var(--d3) 0%,var(--d4) 100%)}
.zone--deeper {background:linear-gradient(180deg,var(--d4) 0%,var(--d5) 100%)}
.zone--abyss  {background:linear-gradient(180deg,var(--d5) 0%,var(--d6) 100%)}
.zone--floor  {
  background:linear-gradient(180deg,var(--d6) 0%,var(--d7) 100%);
  flex-direction:column;justify-content:center;padding-bottom:0;
}
.scene{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

.hero{max-width:900px;margin-inline:auto;text-align:start}
.hero .lead{color:#eefaff;text-align:start;text-shadow:0 1px 3px rgba(3,44,72,.55),0 2px 22px rgba(3,44,72,.6)}
.hero h1{text-align:start;text-shadow:0 4px 30px rgba(3,44,72,.4)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}


/* ── سطح آب: سه لایه موجِ نامنظم که کاشی‌وار تکرار می‌شود ───────────────── */
.surface{position:absolute;top:0;inset-inline-start:0;width:100%;height:clamp(230px,34vh,400px);z-index:2}
.surface__air{
  position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;
  background:linear-gradient(180deg,#f7feff 0%,#dff8ff 24%,#b6ecfb 48%,rgba(150,225,245,.5) 72%,rgba(120,205,235,0) 100%);
}
.surface__sunspot{
  position:absolute;top:-18%;inset-inline-start:22%;
  width:clamp(240px,34vw,560px);aspect-ratio:1.8/1;
  background:radial-gradient(ellipse at center,#fffef6 0%,#fff8dc 22%,rgba(255,246,205,.5) 44%,rgba(255,246,205,0) 72%);
  mix-blend-mode:screen;
  animation:sunspot 12s ease-in-out infinite alternate;
}
@keyframes sunspot{from{opacity:.65;transform:scale(1)}to{opacity:1;transform:scale(1.13) translateY(10px)}}

.surface__wave{
  position:absolute;inset-inline-start:-2px;bottom:0;
  width:calc(100% + 4px);height:var(--wh,64%);
}
.surface__wave--back{--wh:72%;fill:url(#g-wave-back);animation:waveSway 8s ease-in-out infinite alternate}
.surface__wave--mid {--wh:64%;fill:url(#g-wave-mid);animation:waveSway 6.5s ease-in-out -2s infinite alternate-reverse}
.surface__wave--front{--wh:56%;fill:url(#g-wave-front);animation:waveSway 5s ease-in-out -1s infinite alternate}
.surface__wave{will-change:transform;backface-visibility:hidden;transform-origin:center bottom}
/* مسیر افقی داخل SVG تکرار می‌شود؛ خود کادر فقط نوسان عمودی دارد. */
@keyframes waveSway{
  from{transform:translate3d(0,-2px,0) scaleY(.985)}
  to{transform:translate3d(0,3px,0) scaleY(1.015)}
}


/* ── شبکهٔ نور (کاستیک): بافت یک‌بار رستر می‌شود، بعد فقط جابه‌جا ────────── */
.caustics{
  position:absolute;top:0;inset-inline-start:0;width:100%;height:min(105vh,950px);z-index:3;
  mix-blend-mode:screen;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,rgba(0,0,0,.5) 52%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,rgba(0,0,0,.5) 52%,transparent 92%);
}
.caustics__l{
  position:absolute;top:-30%;inset-inline-start:-30%;width:170%;height:170%;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.042' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.88 0 0 0 0 1 0 0 0 0 1 2.7 0 0 0 -1.3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='1.9' amplitude='1.6'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='0.55'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23c)'/%3E%3C/svg%3E");
}
.caustics__l--a{background-size:520px 520px;opacity:.22;animation:causticA 24s linear infinite}
.caustics__l--b{background-size:840px 840px;opacity:.13;animation:causticB 37s linear infinite}
@keyframes causticA{from{transform:translate3d(0,0,0)}to{transform:translate3d(520px,312px,0)}}
@keyframes causticB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-840px,504px,0)}}


/* ── ستون‌های نور: فقط گرادیان، بدون blur ───────────────────────────────── */
.godrays{position:absolute;top:0;inset-inline-start:0;width:100%;height:min(115vh,1050px);z-index:2;mix-blend-mode:screen;overflow:hidden}
.godray{
  position:absolute;inset-inline-start:var(--l);top:-10%;
  width:var(--w);height:116%;
  background:
    linear-gradient(180deg,rgba(232,250,255,.6) 0%,rgba(198,240,255,.24) 34%,rgba(170,230,255,.06) 64%,transparent 86%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  transform-origin:top center;
  opacity:var(--o);
  animation:godray 16s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}
@keyframes godray{
  from{transform:rotate(calc(var(--r) - 4deg)) scaleX(.78);opacity:calc(var(--o) * .45)}
  to{transform:rotate(calc(var(--r) + 3deg)) scaleX(1.28);opacity:var(--o)}
}
.godrays--faint{opacity:.4}

/* سکشن طراحی ادامهٔ مستقیم هیرو است و منبع نور مستقل ندارد. */
.zone--shallow .godrays,
.zone--shallow .caustics{display:none!important}


/* ── موجودات ────────────────────────────────────────────────────────────── */
.lane{
  position:absolute;top:var(--y);inset-inline-start:0;
  animation:swim var(--dur) linear infinite;
  animation-delay:var(--delay,0s);
}
@keyframes swim{from{transform:translate3d(-130vw,0,0)}to{transform:translate3d(40vw,0,0)}}
/* موجودات رو به چپ کشیده شده‌اند؛ مسیرِ چپ‌به‌راست باید آینه شود */
.lane .crit{scale:-1 1}
.lane--rev{animation-name:swim-rev}
.lane--rev .crit{scale:1 1}
@keyframes swim-rev{from{transform:translate3d(40vw,0,0)}to{transform:translate3d(-130vw,0,0)}}

.bob{display:block;animation:bob 4.6s ease-in-out infinite alternate}
.bob--slow{animation-duration:9s}
@keyframes bob{from{transform:translateY(-10px) rotate(-1.6deg)}to{transform:translateY(10px) rotate(1.6deg)}}

.crit{width:var(--w,120px);height:auto}
/* سایه فقط روی چند موجود بزرگ — نه روی همه */
.crit--hero{filter:drop-shadow(0 16px 26px rgba(2,24,52,.35))}
/* لایهٔ دور: کوچک و کم‌رنگ، بدون blur */
.crit--far{opacity:.42}

.school .bob{position:relative;width:300px;height:160px}
.school .crit{position:absolute;inset-inline-start:var(--ox,0);top:calc(50px + var(--oy,0px))}

.drift{
  position:absolute;top:var(--y);inset-inline-start:var(--x);
  animation:drift var(--dur) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
}
@keyframes drift{
  from{transform:translate3d(0,30px,0) rotate(-5deg)}
  to{transform:translate3d(40px,-34px,0) rotate(5deg)}
}
.jelly{animation:jelly 5.5s ease-in-out infinite alternate}
@keyframes jelly{from{opacity:.72;transform:scaleY(.96)}to{opacity:1;transform:scaleY(1.04)}}

.angler-lane{z-index:2}
.angler{filter:drop-shadow(0 0 44px rgba(255,205,120,.35))}

.kelp{
  position:absolute;bottom:-14px;inset-inline-start:var(--x);z-index:2;
  transform-origin:bottom center;
  animation:sway 7.5s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}
.kelp svg{height:var(--h,240px);width:auto}
@keyframes sway{from{transform:rotate(-6deg) skewX(2deg)}to{transform:rotate(6deg) skewX(-2deg)}}

.coral{
  position:absolute;bottom:6px;inset-inline-start:var(--x);z-index:2;width:var(--w,140px);
  color:var(--c,#ff7a4d);
  animation:sway 13s ease-in-out infinite alternate;animation-delay:var(--d,0s);
}
.coral svg{width:100%;height:auto}
.coral--pink  {--c:#ff69b4}
.coral--orange{--c:#ff8a3d}
.coral--violet{--c:#b085ff}
.coral--teal  {--c:#3ff0cd}


/* تپهٔ صخره‌ای که مرجان و جلبک روی آن می‌نشیند */
.ledge{position:absolute;inset-inline-start:-2px;bottom:0;width:calc(100% + 4px);height:clamp(110px,17vh,210px);z-index:2}
.ledge > svg{position:absolute;inset-inline-start:0;bottom:0;width:100%;height:100%}
.ledge--shallow{color:#0a5382}
.ledge--mid{color:#073a63}
.ledge .coral{bottom:34px}
.ledge .kelp{bottom:44px}

/* ── ذرات ───────────────────────────────────────────────────────────────── */
.fx-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.bubble{
  position:absolute;bottom:-6vh;inset-inline-start:var(--x);
  width:var(--size);height:var(--size);border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),rgba(255,255,255,.1) 60%,transparent 74%);
  animation:rise var(--dur) linear infinite;animation-delay:var(--delay,0s);
}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.8}
  88%{opacity:.5}
  100%{transform:translate3d(var(--dx),-112vh,0) scale(1.2);opacity:0}
}

.snow{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.7px 1.7px at 12% 18%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.2px 1.2px at 28% 62%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.9px 1.9px at 44% 32%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.1px 1.1px at 58% 78%,rgba(255,255,255,.34),transparent),
    radial-gradient(1.8px 1.8px at 71% 12%,rgba(255,255,255,.48),transparent),
    radial-gradient(1.3px 1.3px at 84% 54%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.6px 1.6px at 94% 84%,rgba(255,255,255,.44),transparent),
    radial-gradient(1.2px 1.2px at 6% 88%,rgba(255,255,255,.34),transparent);
  background-size:100% 50%;opacity:.45;animation:snow 30s linear infinite;
}
.snow--dense{opacity:.7;animation-duration:38s}
@keyframes snow{from{background-position:0 -50%}to{background-position:0 100%}}

.bio-dots{
  position:absolute;inset:0;
  background-image:
    radial-gradient(2.6px 2.6px at 18% 28%,rgba(63,240,205,.9),transparent),
    radial-gradient(2.2px 2.2px at 46% 72%,rgba(255,105,180,.75),transparent),
    radial-gradient(2.8px 2.8px at 78% 40%,rgba(89,224,255,.85),transparent),
    radial-gradient(2px 2px   at 62% 14%,rgba(255,211,92,.7),transparent),
    radial-gradient(2.4px 2.4px at 30% 88%,rgba(176,133,255,.7),transparent);
  animation:bio 7s ease-in-out infinite alternate;
}
@keyframes bio{from{opacity:.3}to{opacity:.95}}

/* وینیت خیلی ملایم — فقط برای تمرکز، نه برای تیرگی */
.grade{
  position:fixed;inset:0;z-index:44;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(4,26,60,.22) 100%);
}


/* ── کف اقیانوس، کارت تماس و فوتر ───────────────────────────────────────── */
.depth-tag--floor{background:linear-gradient(100deg,var(--sun),var(--pop))}
.contact{text-align:start}
.contact .lead{max-width:62ch}

.card-contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,4vw,42px);
  margin-top:34px;padding-top:32px;border-top:1px solid rgba(255,255,255,.12);
}
.avatar{position:relative;flex:none;width:clamp(122px,17vw,168px);aspect-ratio:1}
.avatar img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:3px solid transparent;
  background:linear-gradient(140deg,var(--sun),var(--pop) 50%,var(--mag)) border-box;
  box-shadow:0 0 38px -6px rgba(255,168,92,.5),0 18px 36px -14px rgba(0,0,0,.7);
}
.avatar__ring{position:absolute;inset:-11px;border-radius:50%;border:1px solid rgba(255,190,110,.4);animation:halo 4.5s ease-out infinite}
@keyframes halo{0%{transform:scale(.94);opacity:.9}100%{transform:scale(1.15);opacity:0}}

.card-contact__body{flex:1 1 300px;min-width:0}
.who{margin-bottom:16px;line-height:1.7}
.who b{display:block;font-size:1.32rem;font-weight:800;color:#fff}
.who span{color:var(--ink-dim);font-size:.94rem}

.phone{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px}
.phone svg{width:26px;height:26px;fill:var(--wa);flex:none}
.phone__num{
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.15rem);font-weight:800;letter-spacing:.04em;
  color:#fff;font-variant-numeric:tabular-nums;transition:color .25s var(--ease);
}
.phone:hover .phone__num{color:var(--sun)}
.contact__actions{display:flex;flex-wrap:wrap;gap:13px}
.note{margin-top:18px;font-size:.86rem;color:rgba(195,221,238,.75);line-height:1.9}

/* فوتر روی ماسه، لای جلبک‌زار و مرجان‌ها */
.footer{
  position:relative;z-index:5;width:100%;
  margin-top:clamp(56px,9vh,110px);
  padding-block:clamp(190px,26vh,300px) 34px;
  isolation:isolate;
}
.footer__scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.footer__bed{position:absolute;inset-inline-start:0;bottom:0;width:100%;height:64%}
.footer__scene .kelp{bottom:14px}
.footer__scene .coral{bottom:18px}
.footer__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 28px;
  padding:20px clamp(20px,3vw,30px);border-radius:20px;
  background:rgba(6,26,62,.55);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.84rem;color:rgba(214,232,244,.85);
}
.footer__meta{display:grid;gap:5px;min-width:0}
.footer__copyright{color:rgba(232,243,250,.9)}
.footer__credit{color:rgba(195,221,238,.72)}
.footer__credit a{
  color:var(--sun);font-weight:700;white-space:nowrap;
  transition:color .25s var(--ease);
}
.footer__credit a:hover{color:#fff}
.footer__legal{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
.footer__legal a{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 13px;
  border-radius:999px;color:rgba(226,240,249,.88);font-size:.8rem;font-weight:650;
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.footer__legal a:hover,.footer__legal a:focus-visible{
  color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transform:translateY(-1px);
}

/* ── صفحات حقوقی ───────────────────────────────────────────────────────── */
.legal-body{background:linear-gradient(180deg,var(--d3),var(--d6) 62%,var(--d7));min-height:100svh}
.legal-header{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(var(--wrap),100%);margin-inline:auto;padding:22px var(--pad);
}
.legal-brand{font-size:1.12rem;font-weight:800;color:#fff}
.legal-brand b{color:var(--sun)}
.legal-back{
  padding:9px 16px;border-radius:999px;color:#fff;font-size:.88rem;font-weight:700;
  background:rgba(5,44,78,.48);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.legal-page{position:relative;z-index:1;width:min(920px,100%);margin-inline:auto;padding:28px var(--pad) 80px}
.legal-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 20% 10%,rgba(89,224,255,.2),transparent 30%),radial-gradient(circle at 80% 55%,rgba(63,240,205,.1),transparent 34%);
}
.legal-card{
  padding:clamp(26px,5vw,58px);border-radius:var(--r-lg);
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 60%),rgba(6,38,72,.62);
  border:1px solid var(--line);box-shadow:var(--shadow-deep);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.legal-kicker{display:inline-block;margin-bottom:14px;color:var(--sun);font-size:.84rem;font-weight:800}
.legal-card h1{margin-bottom:12px}
.legal-updated{margin-bottom:34px;color:rgba(195,221,238,.72);font-size:.82rem}
.legal-section{padding-block:22px;border-top:1px solid rgba(255,255,255,.12)}
.legal-section h2{margin-bottom:9px;font-size:clamp(1.05rem,.95rem + .55vw,1.35rem);color:#fff}
.legal-section p,.legal-section li{color:var(--ink-dim);font-size:.94rem;line-height:2}
.legal-section ul{display:grid;gap:5px;margin-top:9px}
.legal-section li{position:relative;padding-inline-start:20px}
.legal-section li::before{content:"";position:absolute;inset-inline-start:0;top:.9em;width:7px;height:7px;border-radius:50%;background:var(--glow)}
.legal-section a{color:var(--sun);border-bottom:1px solid rgba(255,211,92,.45)}
.legal-page__footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;color:rgba(214,232,244,.7);font-size:.8rem}
.legal-page__footer a{color:var(--sun)}

.scroll-cue{
  position:absolute;bottom:clamp(34px,7vh,80px);
  inset-inline-start:auto;inset-inline-end:max(28px,calc((100vw - var(--wrap))/2 + 24px));transform:none;
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px;
  color:#fff;text-shadow:0 2px 12px rgba(3,40,70,.6);
  animation:cue 2.6s ease-in-out infinite;
}
.scroll-cue__mouse{width:25px;height:41px;border-radius:14px;border:2px solid currentColor;opacity:.75;display:flex;justify-content:center;padding-top:7px}
.scroll-cue__mouse i{width:3px;height:8px;border-radius:2px;background:currentColor;animation:cue-dot 2.2s ease-in-out infinite}
.scroll-cue__txt{font-size:.78rem;font-weight:600;letter-spacing:.04em;opacity:.9}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cue-center{0%,100%{transform:translateX(50%) translateY(0)}50%{transform:translateX(50%) translateY(9px)}}
@keyframes cue-dot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}


/* ── رویداد هر فصل: با ورود به سکشن یک‌بار اجرا می‌شود ─────────────────── */
.event{position:absolute;inset:0;opacity:0;pointer-events:none}
.is-live .event{opacity:1}

/* ۰۲ — دستهٔ ماهی زرد از کادر رد می‌شود */
.event--school{top:38%;inset-inline-start:0;height:0}
.event--school .crit{
  position:absolute;inset-inline-start:var(--ox,0);top:var(--oy,0);
  opacity:0;
}
.is-live .event--school .crit{
  animation:schoolPass 7s cubic-bezier(.36,.1,.28,1) .35s both;
}
@keyframes schoolPass{
  0%  {transform:translate3d(-120vw,0,0) rotate(-4deg) scaleX(-1);opacity:0}
  12% {opacity:1}
  86% {opacity:1}
  100%{transform:translate3d(70vw,-40px,0) rotate(3deg) scaleX(-1);opacity:0}
}

/* ۰۳ — شکوفهٔ عروس‌های دریایی از پایین بالا می‌آید */
.event--bloom .crit{position:absolute;inset-inline-start:var(--bx);bottom:-40%;opacity:0}
.is-live .event--bloom .crit{animation:bloomRise 9s cubic-bezier(.32,.2,.3,1) var(--bd,0s) both}
@keyframes bloomRise{
  0%  {transform:translate3d(0,20%,0) scale(.85);opacity:0}
  18% {opacity:.9}
  100%{transform:translate3d(-30px,-165%,0) scale(1);opacity:0}
}

/* ۰۴ — نهنگ یک‌بار تمام کادر را طی می‌کند */
.event--whale{top:16%;height:0}
.event--whale .crit{position:absolute;inset-inline-start:0;opacity:0}
.is-live .event--whale .crit{animation:whalePass 26s linear 1.2s both}
@keyframes whalePass{
  0%  {transform:translate3d(45vw,0,0) rotate(2deg);opacity:0}
  10% {opacity:1}
  88% {opacity:1}
  100%{transform:translate3d(-130vw,60px,0) rotate(-2deg);opacity:0}
}

/* ۰۵ — نور زیستی روشن می‌شود */
.event--spark{opacity:0}
.is-live .event--spark{animation:sparkOn 2.4s var(--ease) .3s both,bio 7s ease-in-out 2.7s infinite alternate}
@keyframes sparkOn{
  0%  {opacity:0;transform:scale(1.12)}
  60% {opacity:1}
  100%{opacity:.8;transform:scale(1)}
}

/* ۰۶ — چراغ ماهی لوسیفر روشن می‌شود و کادر را نور می‌دهد */
.event--lure{top:auto;bottom:6%;inset-inline-start:6%;inset-inline-end:auto;height:auto}
.event--lure .angler{opacity:0}
.is-live .event--lure .angler{animation:anglerIn 4s var(--ease) .4s both,drift 26s ease-in-out 4.4s infinite alternate}
@keyframes anglerIn{
  0%  {opacity:0;transform:translate3d(-14vw,26px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
.lure-flare{
  position:absolute;top:8%;inset-inline-start:84%;
  width:min(72vw,760px);aspect-ratio:1;transform:translate(50%,-50%);
  border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,216,143,.5) 0%,rgba(255,196,110,.18) 32%,rgba(255,180,90,0) 66%);
  mix-blend-mode:screen;
}
.is-live .lure-flare{animation:flareOn 2.2s var(--ease) 1.6s both,flarePulse 5s ease-in-out 3.8s infinite alternate}
@keyframes flareOn{from{opacity:0;transform:translate(50%,-50%) scale(.4)}to{opacity:1;transform:translate(50%,-50%) scale(1)}}
@keyframes flarePulse{from{opacity:.55}to{opacity:1}}

/* ۰۱ — ستون‌های نور با ورود روشن می‌شوند */
.zone--surface .godray{opacity:0}
.is-live .godray{animation:godray 16s ease-in-out infinite alternate;animation-delay:var(--d,0s)}


/* ── نشانگر موس: غواص ──────────────────────────────────────────────────── */
.has-diver,
.has-diver a,
.has-diver button,
.has-diver .zone{cursor:none}
.diver{
  /* مختصات از clientX/clientY می‌آید، پس باید فیزیکی باشد نه منطقی */
  position:fixed;top:0;left:0;right:auto;z-index:70;
  width:clamp(56px,5vw,84px);pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 8px 14px rgba(2,20,45,.45));
}
.diver svg{width:100%;height:auto}
.diver__fins{transform-origin:44px 55px;animation:kick 1.1s ease-in-out infinite alternate}
@keyframes kick{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
/* حباب‌های ریزِ رگولاتور */
.diver::after{
  content:"";position:absolute;top:20%;right:8%;
  width:8px;height:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.65);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.8),rgba(255,255,255,.1) 60%,transparent);
  animation:diverBubble 2.1s ease-out infinite;
}
@keyframes diverBubble{
  0%  {transform:translate(0,0) scale(.4);opacity:0}
  25% {opacity:.9}
  100%{transform:translate(6px,-46px) scale(1.15);opacity:0}
}
/* واکنش کلیک */
.diver svg{transform-origin:62% 55%}
.diver--kick svg{animation:diverKick .5s cubic-bezier(.3,1.5,.4,1)}
@keyframes diverKick{
  0%  {transform:scale(1) rotate(0)}
  28% {transform:scale(1.22) rotate(-9deg)}
  60% {transform:scale(.96) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}
.diver--kick .diver__fins{animation-duration:.2s}

.tap-ring{
  position:fixed;left:0;top:0;z-index:69;pointer-events:none;
  width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);
  animation:tapRing .62s ease-out forwards;
}
@keyframes tapRing{
  from{scale:.3;opacity:.9}
  to{scale:3.6;opacity:0}
}
.pop{
  position:fixed;z-index:69;pointer-events:none;border-radius:50%;
  margin:-6px 0 0 -6px;
  border:1px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.85),rgba(255,255,255,.12) 60%,transparent 74%);
  animation:popUp .95s ease-out forwards;
}
@keyframes popUp{
  0%  {transform:translate(0,0) scale(.4);opacity:0}
  15% {opacity:.95}
  100%{transform:translate(var(--px),var(--py)) scale(1.1);opacity:0}
}

/* ── کلید صدا ──────────────────────────────────────────────────────────── */
.sound-toggle{
  position:fixed;z-index:60;
  inset-inline-start:max(16px,calc((100vw - var(--wrap))/2 + 16px));
  bottom:calc(clamp(16px,3vw,30px) + 70px);
  display:inline-flex;align-items:center;gap:0;
  padding:15px;border:0;border-radius:999px;
  font:inherit;font-size:.95rem;font-weight:700;color:#fff;
  background:rgba(5,44,78,.82);
  box-shadow:0 14px 34px -10px rgba(2,20,55,.72),inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
  transition:gap .3s var(--ease),padding .3s var(--ease),transform .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),filter .25s var(--ease);
}
.sound-toggle::after{
  content:"";position:absolute;inset-block-start:8px;inset-inline-end:8px;
  width:7px;height:7px;border-radius:50%;background:#ff8c63;
  box-shadow:0 0 0 3px rgba(255,140,99,.17);
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.sound-toggle:hover,.sound-toggle:focus-visible{gap:9px;padding-inline-end:22px;transform:translateY(-3px)}
.sound-toggle svg{width:26px;height:26px;flex:none}
.sound-toggle__txt{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--ease)}
.sound-toggle:hover .sound-toggle__txt,.sound-toggle:focus-visible .sound-toggle__txt{max-width:100px}
.sound-toggle .i-sound__on,.sound-toggle .i-sound__off,.sound-toggle .i-sound__spk{transition:opacity .25s var(--ease),color .25s var(--ease)}
.sound-toggle .i-sound__on{opacity:0}
.sound-toggle .i-sound__off{opacity:1;color:#ff8c63}
.sound-toggle[aria-pressed="false"]{
  color:rgba(223,231,237,.78);background:rgba(43,55,67,.9);filter:saturate(.72);
  box-shadow:0 12px 30px -10px rgba(2,20,55,.62),inset 0 0 0 1px rgba(255,255,255,.13),0 0 0 3px rgba(255,140,99,.11);
}
.sound-toggle[aria-pressed="false"]:hover,.sound-toggle[aria-pressed="false"]:focus-visible{background:rgba(55,67,79,.95);filter:saturate(.9)}
.sound-toggle[aria-pressed="false"] .i-sound__spk{opacity:.68}
.sound-toggle[aria-pressed="true"]{
  color:#fff;background:rgba(5,44,78,.9);filter:saturate(1);
  box-shadow:0 14px 34px -10px rgba(2,20,55,.72),inset 0 0 0 1px rgba(255,255,255,.26),0 0 0 3px rgba(63,240,205,.22);
}
.sound-toggle[aria-pressed="true"]:hover,.sound-toggle[aria-pressed="true"]:focus-visible{background:rgba(9,67,110,.94)}
.sound-toggle[aria-pressed="true"]::after{background:var(--glow);box-shadow:0 0 0 3px rgba(63,240,205,.2),0 0 12px rgba(63,240,205,.72);transform:scale(1.08)}
.sound-toggle[aria-pressed="true"] .i-sound__on{opacity:1;color:var(--glow)}
.sound-toggle[aria-pressed="true"] .i-sound__off{opacity:0}

/* ── پارالاکس بدون جاوااسکریپت ──────────────────────────────────────────── */
@keyframes par{from{translate:0 var(--par-from,60px)}to{translate:0 var(--par-to,-60px)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .lane.par{
      animation-name:swim,par;
      animation-duration:var(--dur),auto;
      animation-timing-function:linear,linear;
      animation-iteration-count:infinite,1;
      animation-fill-mode:none,both;
      animation-delay:var(--delay,0s),0s;
      animation-timeline:auto,view();
      animation-range:normal,cover 0% cover 100%;
    }
    .lane--rev.par{animation-name:swim-rev,par}
    .drift.par{
      animation-name:drift,par;
      animation-duration:var(--dur),auto;
      animation-timing-function:ease-in-out,linear;
      animation-iteration-count:infinite,1;
      animation-direction:alternate,normal;
      animation-fill-mode:none,both;
      animation-delay:var(--delay,0s),0s;
      animation-timeline:auto,view();
      animation-range:normal,cover 0% cover 100%;
    }
  }
}


/* ── واکنش‌گرایی ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .nav{display:none}
  .topbar{display:flex;justify-content:space-between}

}
@media (max-width:900px){
  .panel,.contact{width:100%}
  .wrap--start,.wrap--end{justify-content:center}
  .rail{inset-inline-end:8px}
  .rail__list span{display:none}
  .scroll-cue{inset-inline-start:50%;inset-inline-end:auto;animation-name:cue-center}
}
@media (max-width:680px){
  :root{--r-lg:20px}
  body{line-height:1.95}
  .rail{display:none}
  .diver{display:none}
  .sound-toggle__txt{display:none}
  .wa-fab__label{display:none}
  .zone{padding-block:clamp(96px,12vh,130px)}
  .zone--surface{padding-top:clamp(200px,32vh,300px)}
  .surface{height:clamp(180px,28vh,280px)}
  .caustics__l--b,.godray:nth-child(n+4){display:none}   /* سبک‌سازی روی موبایل */
  .cards{grid-template-columns:1fr;gap:11px}
  .hero__cta .btn,.contact__actions .btn{flex:1 1 100%;justify-content:center}
  .school,.crit--far{opacity:.4}
  .card-contact{justify-content:center;text-align:center;flex-direction:column}
  .phone{margin-inline:auto}
  .contact__actions{justify-content:center}
  .footer__in{grid-template-columns:1fr;gap:14px;padding:19px 16px;text-align:center}
  .footer__meta{gap:7px}
  .footer__copyright{line-height:1.85}
  .footer__credit{line-height:1.9}
  .footer__legal{
    width:100%;justify-content:center;gap:8px;padding-top:13px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .footer__legal a{flex:1 1 0;max-width:142px;min-height:42px;padding-inline:10px}
  .footer{padding-block:clamp(150px,22vh,200px) 26px}
}

@media (hover:none){.btn:hover{transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
}

@media print{
  .fx-layer,.rail,.wa-fab,.sound-toggle,.diver,.scene,.surface,.scroll-cue,.topbar,.grade,.footer__scene{display:none}
  body{background:#fff;color:#000}
  .panel,.contact,.footer__in{border:1px solid #ccc;background:none;box-shadow:none;backdrop-filter:none;color:#000}
  h1 em,h2 em{color:#c2410c;-webkit-text-fill-color:#c2410c}
  .lead,.card p,.ticks li,.who span{color:#333}
  .card h3,.who b,.split__col h3{color:#000}
  .card{border:1px solid #ddd;background:none}
}