/* ==========================================================================
   P0T3RI RU — coming soon
   Material You 3 — white + soft pink, Google's M3 colour/shape/motion roles
   ========================================================================== */

/* ---------- TOKENS: Material You 3 ---------- */
:root{
  color-scheme:dark;

  /* --- M3 colour roles: primary = soft pink, tertiary = M3 lavender --- */
  --md-primary:#F4C2D0;              /* soft pink — brand, accents            */
  --md-on-primary:#4A2530;           /* ink for anything sitting on pink     */
  --md-primary-container:#6E3F4C;    /* pink container / tinted surfaces     */
  --md-on-primary-container:#FFDCE5;

  --md-tertiary:#D0BCFF;             /* M3 baseline tertiary                 */
  --md-on-tertiary:#381E72;
  --md-tertiary-container:#4F378B;
  --md-on-tertiary-container:#EADDFF;

  --md-secondary:#E6D6DC;
  --md-secondary-container:#4A3B40;
  --md-on-secondary-container:#F2E2E7;

  --md-error:#FFB4AB;
  --md-on-error:#690005;
  --md-error-container:#93000A;

  /* neutral roles */
  --md-background:#0F0D13;
  --md-on-background:#FFFFFF;
  --md-surface:#1D1B20;
  --md-surface-dim:#141218;
  --md-surface-bright:#332F39;
  --md-surface-1:#17151B;            /* lowest container                     */
  --md-surface-2:#211E26;
  --md-surface-3:#2B2831;
  --md-surface-4:#37333E;
  --md-surface-5:#423D4A;
  --md-on-surface:#FFFFFF;
  --md-on-surface-variant:#D7D1DC;
  --md-outline:#49454F;
  --md-outline-variant:#332F39;

  /* --- semantic aliases used by the stylesheet --- */
  --bg:var(--md-background);
  --bg-2:var(--md-surface-dim);
  --surface:var(--md-surface);
  --surface-2:rgba(255,255,255,.06);
  --line:var(--md-outline-variant);
  --line-2:var(--md-outline);
  --fg:var(--md-on-surface);
  --fg-2:var(--md-on-surface-variant);
  --fg-3:#A9A2B0;

  --brand:var(--md-primary);
  --brand-hi:#FFE0E8;
  --brand-deep:#C08D9C;
  --brand-glow:rgba(244,194,208,.20);
  --accent:var(--md-tertiary);
  --accent-glow:rgba(208,188,255,.20);
  --danger:var(--md-error);

  /* M3 state layers: primary tint at 8/10/16% */
  --state-hover:rgba(244,194,208,.08);
  --state-focus:rgba(244,194,208,.10);
  --state-press:rgba(244,194,208,.12);

  /* --- type ---
     One family everywhere. Google Sans has no Cyrillic, so the browser falls
     through per glyph: Latin in Google Sans, Cyrillic in Roboto. Keeping
     Unbounded in the stack made Latin and Cyrillic inside the SAME word come
     from different faces, which read as "the font isn't applied everywhere". */
  --f-display:"Google Sans",Roboto,system-ui,sans-serif;
  --f-sans:"Google Sans",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Google Sans",Roboto,system-ui,sans-serif;
  --f-icon:"Material Symbols Rounded";

  /* Material Symbols sizing — they are cut from a 24px optical box */
  --icon:20px;

  --t-caption:clamp(.68rem,.65rem + .12vw,.78rem);
  --t-small:clamp(.82rem,.79rem + .14vw,.92rem);
  --t-body:clamp(.98rem,.95rem + .15vw,1.08rem);
  --t-lg:clamp(1.08rem,1.02rem + .28vw,1.3rem);
  --t-h4:clamp(1.55rem,1.38rem + .78vw,2.3rem);
  --t-h3:clamp(2.1rem,1.65rem + 2.2vw,3.4rem);
  --t-h2:clamp(2.7rem,1.5rem + 5.4vw,6.4rem);

  /* spacing */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;

  /* M3 shape scale */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px;
  --r-xl:28px; --r-xxl:36px; --r-pill:999px;

  /* M3 motion: emphasised easing + spec durations */
  --e-out:cubic-bezier(.2,0,0,1);                 /* emphasised            */
  --e-soft:cubic-bezier(.05,.7,.1,1);             /* emphasised decelerate */
  --e-in-out:cubic-bezier(.3,0,.8,.15);           /* emphasised accelerate */
  --e-standard:cubic-bezier(.2,0,0,1);
  --t-fast:.2s;        /* short4  */
  --t-mid:.3s;         /* medium4 */
  --t-slow:.4s;        /* long4   */
  --t-xl:.5s;          /* extra-long4 */

  --shadow-card:0 24px 60px -28px rgba(0,0,0,.9);
  --maxw:1240px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden;height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--brand);color:var(--md-on-primary)}
:focus-visible{outline:2px solid var(--md-primary);outline-offset:4px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}

/* skip link */
.skip-link{
  position:fixed;top:var(--s-3);left:var(--s-3);z-index:10000;
  padding:.85rem 1.4rem;
  border-radius:var(--r-pill);
  background:var(--md-primary);color:var(--md-on-primary);
  font-size:var(--t-small);font-weight:600;
  transform:translateY(-160%);
  transition:transform .35s var(--e-out);
}
.skip-link:focus-visible{transform:translateY(0);outline-offset:3px}

/* custom scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--md-background)}
::-webkit-scrollbar-thumb{background:var(--md-surface-4);border-radius:99px;border:3px solid var(--md-background)}
::-webkit-scrollbar-thumb:hover{background:var(--md-outline)}


/* ==========================================================================
   BACKGROUND FX
   ========================================================================== */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.fx__grid{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 30%,#000 0%,transparent 78%);
  opacity:0;
  transition:opacity 1.4s var(--e-soft) .2s;
}
.is-ready .fx__grid{opacity:1}
.fx__glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:0;transition:opacity 1.8s var(--e-soft)}
/* left = pastel rose, right = ash blue, plus a mint core on the left glow */
.fx__glow--a{
  width:min(60vw,760px);aspect-ratio:1;
  top:-24vh;left:-10vw;
  background:
    radial-gradient(circle at 58% 46%,rgba(255,255,255,.10),transparent 52%),
    radial-gradient(circle,rgba(244,194,208,.34),transparent 68%);
}
.fx__glow--b{
  width:min(52vw,620px);aspect-ratio:1;
  bottom:-20vh;right:-8vw;
  background:radial-gradient(circle,rgba(208,188,255,.20),transparent 68%);
}
.is-ready .fx__glow{opacity:1}
.is-ready .fx__glow--b{transition-delay:.3s}
.fx__noise{
  position:absolute;inset:0;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   CURSOR
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,.card{cursor:none}
}
.cursor{
  position:fixed;top:0;left:0;z-index:9998;
  width:30px;height:30px;
  margin:-15px 0 0 -15px;
  border:1px solid var(--md-primary);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  /* no mix-blend-mode: it inverted the label into illegibility on the
     pastel surfaces and made the ring read as a solid blocker */
  background:rgba(15,13,19,.5);
  /* Only `transform` may be will-change'd. Promoting width/height/margin
     forced a layout on every size change, which is what made the ring
     visibly stutter ("тепается") when it grew over a card. */
  will-change:transform;
}
.cursor.is-on{opacity:1}
.cursor__dot{
  position:absolute;top:50%;left:50%;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  background:var(--md-primary);
  border-radius:50%;
  transition:opacity .25s ease,transform .3s var(--e-out);
}
.cursor.is-link{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(244,194,208,.18)}
.cursor.is-link .cursor__dot{opacity:0;transform:scale(0)}
/* the "смотреть" ring was 80px — large enough to feel like a blocker over
   card content. 60px still reads clearly but stays out of the way. */
.cursor.is-view{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(208,188,255,.14);border-color:var(--md-tertiary)}
.cursor.is-view .cursor__dot{opacity:0;transform:scale(0)}
.cursor::after{
  content:attr(data-label);
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--f-sans);
  font-size:9.5px;font-weight:600;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;
  color:var(--md-tertiary);
  opacity:0;
  white-space:nowrap;
  transition:opacity .3s ease .12s;
}
.cursor.is-view::after{opacity:1}


/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-5);
  padding:var(--s-5) var(--s-6);
  transition:background .5s var(--e-soft),backdrop-filter .5s var(--e-soft),
             border-color .5s var(--e-soft),padding .5s var(--e-out);
  border-bottom:1px solid transparent;
  opacity:0;transform:translateY(-14px);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out),
             background .5s var(--e-soft),backdrop-filter .5s var(--e-soft),
             border-color .5s var(--e-soft),padding .5s var(--e-out);
}
.is-ready .header{opacity:1;transform:none;transition-delay:.15s}
/* Sticky bar, but only a faint one: on phones the old opaque rgba(0,0,0,.72)
   turned the bar into a solid black slab over the hero. */
.header.is-stuck{
  padding:var(--s-3) var(--s-6);
  background:rgba(15,13,19,.42);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom-color:rgba(215,209,220,.10);
}
/* scroll progress hairline pinned to the header's bottom edge */
.header__progress{
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}
.header__progress i{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,transparent,var(--md-primary) 18%,var(--md-primary) 82%,transparent);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .12s linear;
}
.header__logo{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;
  font-size:.95rem;line-height:1;
}
.header__right{display:flex;align-items:center;gap:var(--s-2)}

/* ===== M3 segmented button (language) ===== */
.langswitch{
  position:relative;
  display:flex;
  padding:3px;
  border-radius:var(--r-pill);
  background:var(--md-surface-2);
  border:1px solid var(--md-outline-variant);
}
.langswitch__thumb{
  position:absolute;
  top:3px;bottom:3px;left:3px;
  width:calc(50% - 3px);
  border-radius:var(--r-pill);
  background:var(--md-primary);
  transition:transform var(--t-mid) var(--e-out);
}
.langswitch[data-active="en"] .langswitch__thumb{transform:translateX(100%)}
.langswitch__btn{
  position:relative;z-index:1;
  min-width:40px;min-height:32px;
  padding:.25rem .55rem;
  font-family:var(--f-sans);font-size:var(--t-caption);font-weight:600;
  letter-spacing:.06em;
  color:var(--md-on-surface-variant);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:color var(--t-fast) var(--e-standard);
}
.langswitch__btn.is-active{color:var(--md-on-primary)}
.langswitch__btn:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}

/* ===== hamburger =====
   Absolute lines rather than margin-stacked ones: with margin the offsets
   depend on the flex/grid gap, and the "X" came out as a chevron. */
.burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--md-surface-2);
  border:1px solid var(--md-outline-variant);
  padding:0;
  cursor:pointer;
  flex:none;
}
.burger span{
  position:absolute;
  left:50%;top:50%;
  width:18px;height:2px;
  margin:-1px 0 0 -9px;
  border-radius:2px;
  background:var(--md-on-surface);
  transform:translateY(-6px);
  transition:transform var(--t-mid) var(--e-out),opacity var(--t-fast) var(--e-standard);
}
.burger span:nth-child(2){transform:none}
.burger span:nth-child(3){transform:translateY(6px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--md-primary);outline-offset:3px}

/* mobile nav drawer */
.scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(15,13,19,.6);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity var(--t-mid) var(--e-standard);
}
.scrim.is-on{opacity:1}
.logo-mark{
  display:block;
  flex:0 0 auto;
  align-self:center;
  width:22px;height:22px;border-radius:7px;
  background:conic-gradient(from 210deg,var(--brand),var(--brand-hi),var(--brand-deep),var(--brand));
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 22px var(--brand-glow);
}
/* NB: a permanent spin makes the rotated corner box (up to ~31px) read as
   "misaligned" against the wordmark, so it only turns on hover. */
.header__logo:hover .logo-mark,
.footer__brand:hover .logo-mark{animation:markSpin 1.6s var(--e-out)}
@keyframes markSpin{to{transform:rotate(360deg)}}
.header__nav{display:flex;align-items:center;gap:var(--s-2)}
/* M3 navigation pill with a state layer */
.header__nav a{
  position:relative;
  display:flex;align-items:baseline;gap:.45rem;
  font-size:var(--t-small);
  color:var(--md-on-surface-variant);
  padding:.5rem .95rem;
  border-radius:var(--r-pill);
  overflow:hidden;
  transition:color var(--t-fast) var(--e-standard);
}
.header__nav a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transition:opacity var(--t-fast) var(--e-standard);
}
.header__nav a:hover{color:var(--md-on-surface)}
.header__nav a:hover::before{opacity:.09}
.header__nav a i{font-family:var(--f-mono);font-size:.66rem;font-style:normal;color:var(--md-primary);opacity:.75}
.header__nav a:focus-visible{color:var(--md-on-surface)}
.footer__top:focus-visible,.skip-link:focus-visible{outline:2px solid var(--md-primary);outline-offset:4px}
.btn:focus-visible{outline:2px solid var(--md-primary);outline-offset:4px}
.card:focus-visible{outline:2px solid var(--md-primary);outline-offset:4px}
.link:focus-visible{outline:2px solid var(--md-primary);outline-offset:-2px;border-radius:var(--r-sm)}
.card__handles a:focus-visible{outline:2px solid var(--md-primary);outline-offset:3px}
/* M3 filled button in the app bar */
.header__status{
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;gap:.55rem;
  min-height:40px;
  padding:.4rem 1.1rem;
  border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--md-on-primary);
  background:var(--md-primary);
  transition:box-shadow var(--t-fast) var(--e-standard);
}
.header__status::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transition:opacity var(--t-fast) var(--e-standard);
}
.header__status:hover{box-shadow:0 1px 3px rgba(0,0,0,.3)}
.header__status:hover::before{opacity:.14}
.header__status:focus-visible{outline:2px solid var(--md-primary);outline-offset:4px}
/* M3 loading / status indicator */
.pulse{
  position:relative;width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:none;
}
.pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;
  animation:pulseRing 2s var(--e-standard) infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.5);opacity:.7}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}


/* ===== Material Symbols ===== */
.ms{
  font-family:var(--f-icon);
  font-weight:400;
  font-style:normal;
  font-size:var(--icon);
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'liga';
  flex:none;
  user-select:none;
  vertical-align:middle;
}
.section__icon{color:var(--md-primary);margin-right:.4rem;font-size:1.05em}
.link__icon{color:var(--md-primary);font-size:var(--icon)}

/* ==========================================================================
   REVEAL SYSTEM
   zoom-up: element starts small + far + blurry, then eases up into place
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translate3d(0,56px,0) scale(.9);
  filter:blur(12px);
  transition:
    opacity var(--t-xl) var(--e-soft),
    transform var(--t-xl) var(--e-out),
    filter var(--t-xl) var(--e-soft);
  will-change:transform,opacity,filter;
}
.reveal.is-in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

/* Char-by-char entrance. Each WORD is its own overflow mask, so the effect
   survives line wrapping (hero__sub is 3 lines) instead of clipping every line
   after the first. Pure transform/opacity — animating `filter` across ~120
   inline-blocks is what made the hero stutter. */
.split-line{display:block}
.split-word{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  /* room for descenders (р, у, д) without letting the mask clip them */
  padding:.14em .04em .2em 0;
  margin:-.14em 0 -.2em;
}
.split-char{
  display:inline-block;
  transform:translate3d(0,115%,0) scale(.72);
  opacity:0;
  will-change:transform,opacity;
  transition:
    transform 1.15s var(--e-out),
    opacity .8s var(--e-out);
  transition-delay:calc(var(--i) * 26ms + var(--base,.12s));
}
.is-in .split-char{
  transform:translate3d(0,0,0) scale(1);
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .split-char{transform:none!important;opacity:1!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .split-word{overflow:visible!important}
}


/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--s-4);
  padding:calc(var(--s-10) + var(--s-6)) var(--s-6) var(--s-8);
  max-width:var(--maxw);
  margin-inline:auto;
  width:100%;
}
.hero__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:var(--t-h2);
  line-height:1.04;
  letter-spacing:-.03em;
  margin-left:-.03em;
}
.hero__title--accent{
  display:block;
  /* No -webkit-text-stroke anywhere: in Chrome it re-rasterises variable-font
     glyphs wider than their advances and the Cyrillic collides. Solid + glow. */
  color:var(--md-primary);
  letter-spacing:-.03em;
}
.hero__title{
  filter:drop-shadow(0 0 34px rgba(244,194,208,.34));
}
.hero__sub{
  max-width:44ch;
  color:var(--md-on-surface-variant);
  font-size:var(--t-lg);
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
  padding-top:var(--s-3);
}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  padding-top:var(--s-4);
}
/* M3 buttons: filled (40px min, full shape) + tonal state layer */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:48px;
  padding:.85rem 1.6rem;
  border-radius:var(--r-pill);
  font-size:var(--t-small);font-weight:500;letter-spacing:.01em;
  overflow:hidden;
  isolation:isolate;
  transition:box-shadow var(--t-fast) var(--e-standard),
             transform var(--t-mid) var(--e-standard);
  will-change:transform;
}
/* M3 state layer sits above the container, below the label */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transition:opacity var(--t-fast) var(--e-standard);
}
.btn:hover::after{opacity:.08}
.btn:active::after{opacity:.12}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-mid) var(--e-out)}
.btn--primary{
  background:var(--md-primary);color:var(--md-on-primary);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
}
.btn--primary:hover{box-shadow:0 2px 4px rgba(0,0,0,.3),0 4px 12px 4px rgba(0,0,0,.18)}
.btn--primary:hover svg{transform:translateX(4px)}
/* tonal: container colour instead of a plain outline */
.btn--ghost{
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
}
.btn--ghost:hover{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.btn:hover{transform:translateY(-1px)}


/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{
  position:relative;z-index:1;
  max-width:var(--maxw);
  margin-inline:auto;
  width:100%;
  padding:var(--s-10) var(--s-6);
}
.section__head{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:.5rem var(--s-5);
  padding-bottom:var(--s-5);
  margin-bottom:var(--s-6);
}
.section__index{
  grid-row:1 / span 2;
  align-self:start;
  font-family:var(--f-mono);font-size:var(--t-caption);
  letter-spacing:.16em;color:var(--md-primary);
  padding-top:.7rem;
}
.section__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:var(--t-h3);
  line-height:1.08;
  letter-spacing:-.025em;
}
.section__lead{
  color:var(--fg-3);
  font-size:var(--t-small);
  max-width:44ch;
}
@media (min-width:860px){
  .section__lead{grid-column:2;justify-self:end;text-align:right}
}


/* ==========================================================================
   ABOUT — «Потеря»
   ========================================================================== */
.about{
  display:grid;
  gap:var(--s-6);
  align-items:start;
}
@media (min-width:900px){
  .about{grid-template-columns:1.55fr 1fr;gap:var(--s-8)}
}
.about__text{
  position:relative;
  font-size:var(--t-lg);
  line-height:1.55;
  color:var(--fg-2);
  max-width:56ch;
  padding-left:clamp(2.75rem,1.6rem + 3vw,4.25rem);
}
.about__text b{color:var(--md-on-surface);font-weight:700}
.about__mark{
  position:absolute;
  left:0;
  top:-.22em;
  font-family:var(--f-display);
  font-size:clamp(2.2rem,1.4rem + 2.4vw,4.4rem);
  line-height:1;
  color:var(--brand);
  opacity:.3;
  pointer-events:none;
  user-select:none;
}
.about__dirs{display:flex;flex-direction:column;gap:var(--s-3)}
.about__dirs-label{
  font-family:var(--f-mono);font-size:var(--t-caption);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-3);
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  align-content:flex-start;
}
/* M3 assist chip */
.tag{
  display:inline-flex;align-items:center;
  min-height:40px;
  padding:.45rem 1rem;
  border:1px solid var(--md-outline);
  border-radius:var(--r-sm);
  background:transparent;
  font-size:var(--t-small);
  color:var(--md-on-surface-variant);
  transition:background-color var(--t-fast) var(--e-standard),
             border-color var(--t-fast) var(--e-standard),
             color var(--t-fast) var(--e-standard);
}
.tag:hover{
  background:var(--md-secondary-container);
  border-color:transparent;
  color:var(--md-on-secondary-container);
}


/* ==========================================================================
   LINK LIST
   ========================================================================== */
.links{border-top:0}
.link{
  position:relative;
  display:grid;
  /* num · icon · name · tag · arrow */
  grid-template-columns:auto auto 1fr auto auto;
  align-items:center;
  gap:var(--s-4);
  padding:var(--s-5) var(--s-3);
  transition:padding-inline var(--t-xl) var(--e-out),
             background-color var(--t-mid) var(--e-standard);
  isolation:isolate;
}
.link::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--brand-glow),transparent 62%);
  opacity:0;transition:opacity var(--t-mid) var(--e-standard);
}
/* M3 active indicator grows from the leading edge */
.link::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--md-primary);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--t-mid) var(--e-out);
  pointer-events:none;
}
.link:hover{padding-inline:var(--s-5) var(--s-4)}
.link:hover::before{opacity:1}
.link:hover::after{transform:scaleY(1)}
.link__num{
  font-family:var(--f-mono);font-size:var(--t-caption);
  color:var(--md-primary);opacity:.6;letter-spacing:.1em;
}
.link__name{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-h4);
  letter-spacing:-.02em;line-height:1.1;
  transition:color var(--t-mid) var(--e-standard);
}
.link:hover .link__name{color:var(--md-primary)}
.link__tag{
  font-size:var(--t-small);color:var(--fg-3);
  padding:.3rem .75rem;
  border:1px solid var(--md-outline-variant);
  border-radius:var(--r-sm);
  white-space:nowrap;
}
/* M3 icon button */
.link__arrow{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--md-surface-2);
  color:var(--md-on-surface-variant);
  pointer-events:none;
  transition:transform var(--t-mid) var(--e-out),
             background-color var(--t-fast) var(--e-standard),
             color var(--t-fast) var(--e-standard);
}
.link__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.link:hover .link__arrow{
  transform:rotate(45deg);
  background:var(--md-primary);
  color:var(--md-on-primary);
}


/* ==========================================================================
   PROJECT CARDS
   ========================================================================== */
.cards{
  display:grid;
  gap:var(--s-4);
  grid-template-columns:1fr;
}
@media (min-width:680px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1040px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
/* M3 filled card: surface-container role + tonal surface tint + state layer */
.card{
  position:relative;
  display:flex;flex-direction:column;
  gap:var(--s-5);
  padding:var(--s-6);
  border:1px solid transparent;
  border-radius:var(--r-xl);
  background:var(--md-surface-1);
  background-image:
    linear-gradient(var(--state-hover),var(--state-hover));
  overflow:hidden;
  isolation:isolate;
  transition:
    transform var(--t-xl) var(--e-out),
    background-color var(--t-mid) var(--e-standard),
    box-shadow var(--t-xl) var(--e-out);
}
.card--wide{grid-column:1 / -1}
/* 2-col range: 5 cards fill evenly only if exactly one spans the full row */
@media (min-width:680px) and (max-width:1039px){
  .card--wide{grid-column:auto}
  .card--wide:first-child{grid-column:1 / -1}
}
/* pink surface tint, pointer-tracking lavender core */
.card__glow{
  position:absolute;inset:-30% -20% auto;height:80%;
  background:
    radial-gradient(ellipse at var(--mx,50%) var(--my,0%),rgba(208,188,255,.26),transparent 44%),
    radial-gradient(ellipse at var(--mx,50%) var(--my,0%),rgba(244,194,208,.40),transparent 64%);
  opacity:0;z-index:-1;
  transition:opacity var(--t-slow) var(--e-standard);
}
.card:hover,.card:focus-visible{
  transform:translateY(-6px);
  background-color:var(--md-surface-2);
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 2px 6px 2px rgba(0,0,0,.14),
    0 0 0 1px rgba(244,194,208,.30);
}
.card:hover .card__glow,.card:focus-visible .card__glow{opacity:1}
.card__top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
/* M3 assist chip */
.card__badge{
  font-family:var(--f-mono);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--md-on-primary-container);
  padding:.35rem .85rem;
  border-radius:var(--r-sm);
  background:var(--md-primary-container);
}
.card__badge--alt{
  color:var(--md-on-tertiary-container);
  background:var(--md-tertiary-container);
}
.card__idx{font-family:var(--f-mono);font-size:var(--t-caption);color:var(--fg-3);letter-spacing:.14em}
.card__body{display:flex;flex-direction:column;gap:var(--s-3)}
.card__title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.45rem,1.15rem + 1vw,2rem);
  letter-spacing:-.01em;line-height:1.1;
}
.card__desc{color:var(--fg-2);font-size:var(--t-body);line-height:1.65;max-width:52ch}
.card__foot{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;
  padding-top:var(--s-4);
}
.card__handles{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* M3 filter chip */
.card__handles a{
  font-family:var(--f-mono);font-size:var(--t-small);
  color:var(--md-on-surface-variant);
  min-height:40px;
  display:inline-flex;align-items:center;
  padding:.35rem 1rem;
  border:1px solid var(--md-outline);
  border-radius:var(--r-sm);
  background:transparent;
  transition:background-color var(--t-fast) var(--e-standard),
             border-color var(--t-fast) var(--e-standard),
             color var(--t-fast) var(--e-standard);
}
.card__handles a:hover{
  background:var(--md-secondary-container);
  border-color:transparent;
  color:var(--md-on-secondary-container);
}
.card__cta{
  font-family:var(--f-mono);font-size:var(--t-caption);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);
  display:inline-flex;align-items:center;gap:.5rem;
  transition:color var(--t-fast) var(--e-standard);
}
.card__cta::after{
  content:"→";
  transition:transform var(--t-mid) var(--e-out);
}
.card:hover .card__cta{color:var(--md-primary)}
.card:hover .card__cta::after{transform:translateX(5px)}


/* ==========================================================================
   CTA
   ========================================================================== */
.section--cta{padding-bottom:var(--s-9)}
/* M3 elevated container: no border, surface role + pink/lavender tint,
   shape scale XL. Content and ghost are siblings so the ghost can sit under
   the copy and bleed off the bottom edge like a watermark. */
.cta{
  position:relative;
  border:0;
  border-radius:var(--r-xxl);
  padding:0;
  background:
    radial-gradient(88% 110% at 4% 0%,rgba(244,194,208,.20),transparent 58%),
    radial-gradient(80% 100% at 100% 100%,rgba(208,188,255,.16),transparent 62%),
    var(--md-surface-1);
  box-shadow:
    0 1px 2px rgba(0,0,0,.30),
    0 2px 6px 2px rgba(0,0,0,.16),
    0 12px 28px -12px rgba(0,0,0,.5);
  overflow:hidden;
  isolation:isolate;
}
.cta__inner{
  position:relative;z-index:1;
  padding:clamp(2rem,1rem + 5vw,5rem) clamp(2rem,1rem + 5vw,5rem) 0;
}
.cta__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-sans);font-size:var(--t-caption);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--md-primary);
  margin-bottom:var(--s-3);
}
.cta__title{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-h3);
  line-height:1.08;letter-spacing:-.025em;
  margin-bottom:var(--s-4);
}
.cta__text{color:var(--md-on-surface-variant);max-width:40ch;margin-bottom:var(--s-6)}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}


/* ==========================================================================
   CTA GHOST — "P0T3RI RU" at the very bottom, full width, very faint.
   font-size is solved by JS so it always spans the column edge to edge.
   ========================================================================== */
.cta__ghost{
  position:relative;
  z-index:0;
  width:100%;
  /* your spec: `clamp(4.5rem,rem + 9vw,12rem)` — `rem` has no number so the
     middle term is invalid and the whole clamp collapses to 4.5rem, which is
     why it never grew. Same shape, valid number, so it actually scales. */
  margin-top:clamp(4.5rem,1rem + 9vw,12rem);
  pointer-events:none;
  user-select:none;
  mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}
.cta__ghost-row{
  display:block;
  overflow:hidden;
  font-family:var(--f-display);
  font-weight:700;
  line-height:.7;
  letter-spacing:-.03em;
  white-space:nowrap;
  width:100%;
  color:rgba(244,194,208,.16);
}


/* ==========================================================================
   FOOTER SECRET — "ПО ТЕ РЯ" on ONE full-width line, letters zigzagging.
   ========================================================================== */
.secret{
  position:relative;
  width:100%;
  margin-top:var(--s-4);
  padding-bottom:var(--s-3);
  pointer-events:none;
  user-select:none;
}
/* justify + zig offsets produce the Z; the row keeps 1.3 line-height so the
   tallest stepped letter never clips against the section below */
.secret__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  width:100%;
  line-height:1.3;
  padding-bottom:.06em;
}
.secret__letter{
  display:block;
  font-family:var(--f-display);
  font-weight:700;
  line-height:1;
  /* --zig is the alternating vertical offset that makes the zigzag;
     --i also drives the levitation phase offset so the letters drift
     out of sync instead of pumping as one rigid block */
  transform:translateY(calc(var(--zig,0) * 1em)) scale(.9);
  opacity:0;
  color:var(--md-primary);
  transition:
    transform 1.2s var(--e-out),
    opacity .9s var(--e-out),
    color .4s var(--e-standard);
  transition-delay:calc(var(--i,0) * 60ms);
}
.secret.is-in .secret__letter{
  transform:translateY(calc(var(--zig,0) * 1em)) scale(1);
  opacity:1;
}
/* levitate: a slow float loop once the entrance is done. transform-only and
   driven by opacity/transform (both compositor-friendly) so it never stutters
   even while the rest of the page scrolls. */
.secret.is-in .secret__letter{
  animation:levitate 6s ease-in-out infinite alternate;
  animation-delay:calc(var(--i,0) * 220ms + 1.4s);
}
@keyframes levitate{
  from{transform:translateY(calc(var(--zig,0) * 1em)) scale(1)}
  to{transform:translateY(calc(var(--zig,0) * 1em - .055em)) scale(1.015)}
}
.secret:hover .secret__letter{color:var(--md-tertiary)}

.secret__hint{
  display:block;
  margin-top:var(--s-4);
  font-family:var(--f-sans);
  font-weight:500;
  font-size:var(--t-caption);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--fg-3);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s var(--e-out) .45s,transform .9s var(--e-out) .45s;
}
.secret.is-in .secret__hint{opacity:1;transform:none}
/* same levitation, half the amplitude and a slower period */
.secret__hint span{
  display:inline-block;
  transform:translateY(calc(var(--zig,0) * .3em));
  transition:transform .7s var(--e-out);
  transition-delay:calc(var(--i,0) * 35ms + .35s);
}
.secret.is-in .secret__hint span{
  animation:levitateHint 7s ease-in-out infinite alternate;
  animation-delay:calc(var(--i,0) * 180ms + 1.6s);
}
@keyframes levitateHint{
  from{transform:translateY(calc(var(--zig,0) * .3em))}
  to{transform:translateY(calc(var(--zig,0) * .3em - .28em))}
}
.secret.is-in .secret__hint span{transform:translateY(calc(var(--zig,0) * .34em) * -1)}
.secret__hint{
  display:block;
  text-align:left;
  margin-top:var(--s-4);
  font-family:var(--f-sans);
  font-weight:500;
  font-size:var(--t-caption);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--fg-3);
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1s var(--e-out) .5s,transform 1s var(--e-out) .5s;
}
.secret.is-in .secret__hint{opacity:1;transform:none}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  gap:var(--s-5);
  padding:var(--s-6);
  border-top:0;
  max-width:var(--maxw);margin-inline:auto;width:100%;
}
.footer__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;width:100%;
}
.footer__brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-weight:600;font-size:.9rem;line-height:1;
}
.footer__note{font-size:var(--t-small);color:var(--fg-3)}
.footer__top{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:40px;padding:.3rem .9rem;
  border-radius:var(--r-pill);
  background:var(--md-surface-2);
  font-family:var(--f-sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--md-on-surface-variant);
  transition:background-color var(--t-fast) var(--e-standard),
             color var(--t-fast) var(--e-standard);
}
.footer__top:hover{background:var(--md-primary);color:var(--md-on-primary)}
/* secret sits below the footer row, full-bleed inside the footer column */
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .burger{display:block}
  .section__head{grid-template-columns:1fr}
  .section__index{grid-row:auto}
  .section__lead{grid-column:1;text-align:left;justify-self:start}
  .burger{display:grid}
  .header__status{display:none}
  .header__nav{
    position:fixed;
    inset:0 0 auto 0;
    top:0;
    z-index:95;
    flex-direction:column;
    align-items:stretch;
    gap:var(--s-2);
    padding:calc(var(--s-9) + var(--s-4)) var(--s-5) var(--s-6);
    background:var(--md-surface-1);
    border-radius:0 0 var(--r-xxl) var(--r-xxl);
    box-shadow:0 20px 50px -20px rgba(0,0,0,.7);
    transform:translateY(-102%);
    visibility:hidden;
    transition:transform var(--t-xl) var(--e-out),visibility var(--t-xl);
  }
  .header__nav.is-open{transform:none;visibility:visible}
  .header__nav a{
    justify-content:flex-start;
    gap:.6rem;
    padding:1rem 1.1rem;
    min-height:56px;
    font-size:var(--t-lg);
    font-weight:500;
    border-radius:var(--r-lg);
    background:var(--md-surface-2);
  }
  .header__nav a i{font-size:var(--t-caption)}
  /* keep the logo and controls above the drawer */
  .header__logo,.header__right{position:relative;z-index:96}
  .langswitch{background:var(--md-surface-2)}
  body.is-locked{overflow:hidden}
}
@media (max-width:640px){
  .header{padding:var(--s-4) var(--s-5)}
  .header.is-stuck{padding:.6rem var(--s-5)}
  .hero{padding:calc(var(--s-9)) var(--s-5) var(--s-8)}
  .section{padding:var(--s-8) var(--s-5)}
  .section--cta{padding-bottom:var(--s-7)}
  .cta{border-radius:var(--r-xl)}
  .cta__inner{padding:var(--s-6) var(--s-5) 0}

  /* stacked full-width buttons: 48px tall, comfortable tap targets */
  .hero__actions,.cta__actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center;min-height:52px;padding:.9rem 1.4rem}
  .btn--primary{flex:1 1 auto}
  .header__status{justify-content:center}

  .about{grid-template-columns:1fr}
  .about__text{padding-left:2.1rem}
  .tags{gap:var(--s-2)}
  .tag{min-height:44px}

  .link{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"icon name arrow" "icon tag arrow";
    align-items:center;
    gap:.15rem .85rem;
    padding:1rem .25rem;
  }
  .link__num{display:none}
  .link__icon{grid-area:icon;font-size:22px}
  .link__name{grid-area:name;font-size:1.28rem}
  .link__tag{grid-area:tag;justify-self:start;padding-left:0;border:0;font-size:var(--t-caption)}
  .link__arrow{grid-area:arrow;justify-self:end;width:44px;height:44px}
  .link:hover{padding-inline:.25rem}

  .card{padding:var(--s-5);gap:var(--s-4)}
  .card__foot{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .card__handles a{justify-content:center}
  .card__cta{justify-content:center;min-height:44px;border-radius:var(--r-pill);
            background:var(--md-surface-2);padding:.4rem 1rem}

  .footer{padding:var(--s-5) var(--s-5) var(--s-6);flex-direction:column;align-items:flex-start}
  .secret{margin-top:var(--s-6)}
}
@media (max-width:400px){
  .langswitch__btn{min-width:36px}
  .burger{width:42px;height:42px}
}
@media (hover:none){
  /* touch devices get the native cursor back, the ring is meaningless there */
  .cursor{display:none!important}
  body{cursor:auto!important}
  a,button,.card{cursor:auto!important}
  .card:hover{transform:none}
  .link__arrow{transform:none!important}
}
@media (scripting:none){
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .split-char{opacity:1!important;transform:none!important}
  .cta__ghost-row{opacity:1!important;transform:none!important}
  .secret__letter{opacity:1!important;transform:none!important}
  .secret__hint{opacity:1!important;transform:none!important}
  .header{opacity:1!important;transform:none!important}
}
/* guard script: print yields a blank sheet rather than destroying the page */
@media print{
  html[data-print-blocked] body{visibility:hidden}
  html[data-print-blocked] body::after{
    content:"P0T3RI RU";
    visibility:visible;
    display:block;
    font:700 44px/1.25 "Google Sans",Roboto,system-ui,sans-serif;
    color:#2B2533;
    padding:2rem;
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cursor{display:none}
  body{cursor:auto}
}