/* ==========================================================================
   Рагозин Эдуард — портфолио SA/BA & AI-интегратор
   Арт-дирекшн: «technical editorial» — тёплая бумага, чертёжная сетка,
   крупная типографика, кислотный акцент, тонкие линии и живые коннекторы.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --paper:      #F2EDE4;
  --paper-2:    #EAE4D8;
  --paper-3:    #E3DCCB;
  --white:      #FBF8F1;
  --ink:        #0C0F0D;
  --ink-2:      #171C18;
  --ink-soft:   #454B44;
  --muted:      #5E645B;
  --line:       rgba(12,15,13,.13);
  --line-2:     rgba(12,15,13,.26);
  --lime:       #D8FF3E;
  --lime-2:     #BFE82A;
  --pine:       #0B1512;
  --pine-2:     #111F1A;
  --rust:       #C4552F;

  --font-sans: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-display: 'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-mono: 'JetBrains Mono',Consolas,'Courier New',monospace;

  --nav-h: 78px;
  --pad: clamp(18px, 4.6vw, 64px);
  --maxw: 1400px;
  --tl-pad: clamp(22px, 3vw, 44px);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:clamp(15px,1.06vw,17px);
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(12,15,13,.045) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(12,15,13,.035) 0 1px, transparent 1px 96px);
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000 20%, transparent 85%);
}
.grain{
  position:fixed; inset:-50%; z-index:9990; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--lime);color:var(--ink)}

.mono{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:400}
.dim{color:var(--muted)}
em{font-style:italic}

.skip{
  position:fixed;top:-100px;left:16px;z-index:10000;background:var(--ink);color:var(--paper);
  padding:10px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{top:16px;outline:2px solid var(--lime)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.calc :focus-visible,.contact :focus-visible,.footer :focus-visible{outline-color:var(--lime)}

/* ---------- SHELL ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:1}
.section{position:relative;padding-block:clamp(76px,9.5vw,148px);border-top:1px solid var(--line);z-index:1}
.section > .wrap{position:relative}

/* монтажная риска на границе секций */
.section::after{
  content:"";position:absolute;top:-1px;left:var(--pad);width:56px;height:1px;background:var(--ink);
}

/* ---------- CURSOR + PROGRESS ---------- */
.cursor{position:fixed;top:0;left:0;z-index:9995;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:5px;height:5px;background:#fff}
.cursor__ring{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.55);
  transition:width .28s var(--ease-soft),height .28s var(--ease-soft),border-color .28s,background .28s;
}
.cursor.is-hot .cursor__ring{width:58px;height:58px;background:rgba(255,255,255,.12);border-color:transparent}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9994;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--ink);transform-origin:left}

/* ---------- BUTTONS / LINKS ---------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--line-2);
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .35s var(--ease-soft),border-color .35s var(--ease-soft);
  will-change:transform;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--lime);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);z-index:-1;
}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{color:var(--ink);border-color:var(--ink)}
.btn:hover svg{transform:translateX(4px)}
.btn--lg{padding:16px 26px;font-size:11.5px}
.btn--sm{padding:10px 16px;font-size:10px}
.btn--ink{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink)}
.btn--ink::before{background:var(--lime)}
.btn--ink:hover{color:var(--ink)}
.btn--ghost{--bg:transparent;--fg:var(--ink)}
.btn:active{transform:translateY(1px)}

.corner-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:none;
  color:var(--ink-soft);background:none;border:0;border-bottom:1px solid var(--line-2);
  padding:0 0 2px;cursor:pointer;
  transition:color .25s,border-color .25s;
}
.corner-link:hover{color:var(--ink);border-color:var(--ink)}
.corner-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 9px;
  border:1px solid var(--line-2);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
}
.tag--live{background:var(--lime);border-color:var(--ink);color:var(--ink);font-weight:500}
.pulse-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none;
  animation:pulse 2.4s var(--ease-soft) infinite;
}
.tag--live .pulse-dot{background:var(--ink)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  transition:background .35s var(--ease-soft),border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{background:rgba(242,237,228,.86);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  height:var(--nav-h);display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{width:30px;height:30px;color:var(--ink);flex:none}
.brand__mark svg{width:100%;height:100%}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__text strong{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.brand__text .mono{font-size:9.5px;color:var(--muted);letter-spacing:.1em;margin-top:2px}

.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__links a{
  position:relative;padding:8px 13px;font-size:12.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;transition:color .25s;
}
.nav__links a i{font-family:var(--font-mono);font-style:normal;font-size:8px;color:var(--muted);letter-spacing:.06em;transition:color .25s}
.nav__links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__links a:hover i{color:var(--ink)}

.nav__side{display:flex;align-items:center;gap:14px;flex:none;margin-left:8px}
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);background:transparent;
  position:relative;cursor:pointer;padding:0;
}
.burger span{position:absolute;left:13px;right:13px;height:1px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:8900;background:var(--paper);
  padding:calc(var(--nav-h) + 24px) var(--pad) 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease),visibility 0s .6s;
  pointer-events:none;visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;transition:clip-path .6s var(--ease),visibility 0s 0s}
.menu__nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.menu__nav a{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:clamp(24px,7vw,38px);letter-spacing:-.03em;font-weight:500;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.menu__nav a i{font-family:var(--font-mono);font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.08em}
.menu.is-open .menu__nav a{opacity:1;transform:none}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.06s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.1s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.14s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.18s}
.menu.is-open .menu__nav a:nth-child(5){transition-delay:.22s}
.menu.is-open .menu__nav a:nth-child(6){transition-delay:.26s}
.menu.is-open .menu__nav a:nth-child(7){transition-delay:.3s}
.menu.is-open .menu__nav a:nth-child(8){transition-delay:.34s}
.menu__foot{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-top:24px}
.menu__foot .mono{color:var(--muted);margin-top:6px}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + clamp(28px,5vw,60px));
  padding-bottom:clamp(64px,8vw,96px);
  overflow:hidden;z-index:1;
}
.hero__canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__canvas canvas{width:100%;height:100%;opacity:.9}
.hero__rail{
  position:absolute;right:calc(var(--pad) * .35);top:50%;transform:translateY(-50%) rotate(90deg);
  transform-origin:center;color:var(--muted);font-size:9px;letter-spacing:.34em;
  white-space:nowrap;pointer-events:none;
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(40px,6vw,96px);align-items:center;
}
.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(22px,3vw,36px)}
.hero__eyebrow .mono{color:var(--ink-soft)}
.hero__eyebrow .tag{margin-left:4px}

.hero__title{
  font-size:clamp(34px,5vw,70px);
  line-height:1.0;letter-spacing:-.036em;font-weight:500;
  margin-bottom:clamp(22px,3vw,34px);
}
.hero__line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.1em}
.br-mob{display:none}
.hero__line-in{display:inline-block;position:relative;will-change:transform}
.hero__title em{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.14em;letter-spacing:-.015em;line-height:.9;
  padding-right:.04em;
}
html.js .hero__line-in{transform:translateY(130%)}
body.is-loaded .hero__line-in{transform:none;transition:transform 1.15s var(--ease)}
body.is-loaded .hero__line:nth-child(1) .hero__line-in{transition-delay:.05s}
body.is-loaded .hero__line:nth-child(2) .hero__line-in{transition-delay:.14s}
body.is-loaded .hero__line:nth-child(3) .hero__line-in{transition-delay:.23s}

.doodle{
  position:absolute;left:0;right:0;bottom:-.06em;width:100%;height:.20em;
  color:var(--lime-2);overflow:visible;
}
.doodle path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400}
body.is-loaded .doodle path{animation:draw 1.6s var(--ease) .9s forwards}
body.is-loaded .doodle path:last-child{animation-delay:1.05s;stroke-width:1.4}
@keyframes draw{to{stroke-dashoffset:0}}

.hero__lead{
  max-width:52ch;font-size:clamp(15px,1.18vw,17.5px);line-height:1.62;color:var(--ink-soft);
  margin-bottom:clamp(22px,2.6vw,30px);
}

.rotator{display:flex;align-items:center;gap:14px;margin-bottom:clamp(26px,3.4vw,38px);height:26px}
.rotator__label{color:var(--muted)}
.rotator__viewport{position:relative;height:26px;overflow:hidden;min-width:230px;border-left:1px solid var(--line-2);padding-left:14px}
.rotator__track{display:flex;flex-direction:column;transition:transform .7s var(--ease)}
.rotator__track b{
  height:26px;display:flex;align-items:center;font-weight:500;font-size:15px;
  letter-spacing:-.01em;white-space:nowrap;
}
.rotator__track b::after{content:"";display:inline-block;width:5px;height:5px;background:var(--lime);margin-left:8px;border-radius:50%}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(34px,4.4vw,52px)}
.hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.hero__stat{padding:16px 14px 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.hero__stat:last-child{border-right:0;padding-right:0}
.hero__stat dt{color:var(--muted);font-size:9px}
.hero__stat dd{font-size:clamp(19px,2vw,27px);font-weight:500;letter-spacing:-.045em;line-height:1;display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.hero__stat small{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--muted);font-weight:400;text-transform:lowercase}

/* hero blueprint card */
.hero__aside{position:relative}
.map{
  position:relative;background:var(--white);border:1px solid var(--line-2);
  padding:14px 14px 10px;
  box-shadow:14px 14px 0 -1px rgba(12,15,13,.05);
}
.map::after{
  content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none;opacity:.55;
}
.map__head{display:flex;justify-content:space-between;gap:10px;padding:2px 2px 10px;color:var(--ink-soft);font-size:9px}
.map__svg{width:100%;height:auto;color:var(--ink)}
.map__grid path{stroke:currentColor}
.map__branches path{stroke:currentColor}
.map__dots .map__dot{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.map__dot--accent{fill:var(--lime)!important;stroke:var(--ink)}
.map__labels text{font-family:var(--font-mono);text-transform:uppercase}
.map__k{font-size:12.5px;letter-spacing:.12em;fill:var(--ink);font-weight:500}
.map__k--accent{fill:var(--ink)}
.map__v{font-size:10.5px;letter-spacing:.01em;fill:var(--muted);text-transform:none}
.map__ticks path{stroke:currentColor}
.map__foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:8px;padding:9px 2px 2px;font-size:8.5px}

.map__travel{
  fill:var(--lime);stroke:var(--ink);stroke-width:.8;
}
.hero__note{margin-top:12px;color:var(--muted);font-size:10px;letter-spacing:.06em;text-align:right;max-width:66ch;text-transform:none}

.scroll-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);
  z-index:2;
}
.scroll-hint .mono{font-size:8px;letter-spacing:.3em}
.scroll-hint__line{width:1px;height:44px;background:linear-gradient(var(--line-2),transparent);position:relative;overflow:hidden}
.scroll-hint__line::after{
  content:"";position:absolute;top:0;left:0;width:1px;height:16px;background:var(--ink);
  animation:scrollDown 2.4s var(--ease-soft) infinite;
}
@keyframes scrollDown{0%{transform:translateY(-18px)}60%,100%{transform:translateY(46px)}}

/* ---------- MARQUEE ---------- */
.marquee{
  position:relative;z-index:2;background:var(--pine);color:var(--paper);
  border-block:1px solid var(--pine);overflow:hidden;
  padding-block:13px;
}
.marquee__track{
  display:flex;align-items:center;gap:0;width:max-content;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding-inline:22px;white-space:nowrap;opacity:.92;
}
.marquee__track i{color:var(--lime);font-style:normal;font-size:9px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------- SECTION HEAD ---------- */
.sec-head{
  display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);
  column-gap:clamp(24px,4.5vw,64px);row-gap:clamp(18px,2.4vw,26px);
  margin-bottom:clamp(40px,5.4vw,76px);align-items:start;
}
.sec-head__meta{grid-column:1;display:flex;gap:14px;align-items:baseline;padding-top:.7em}
.sec-head__num{color:var(--ink);font-weight:500}
.sec-head__title{
  grid-column:2;grid-row:1;
  font-size:clamp(32px,4.3vw,60px);line-height:1.01;letter-spacing:-.035em;font-weight:500;
}
.sec-head__title em{
  font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.06em;
  letter-spacing:-.01em;
}
.sec-head__lead{
  grid-column:2;grid-row:2;max-width:60ch;
  font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--ink-soft);
}
.sec-head--wide .sec-head__aside{
  grid-column:2;grid-row:2;display:flex;gap:clamp(24px,4vw,56px);
  align-items:flex-end;justify-content:space-between;
}
.sec-head--wide .sec-head__lead{grid-row:auto;grid-column:auto;margin:0}

/* ---------- REVEAL ---------- */
html.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .95s var(--ease) var(--d,0s),transform .95s var(--ease) var(--d,0s);
}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- MANIFEST ---------- */
.manifest{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.manifest__body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.manifest__quote{position:relative;padding-right:clamp(0px,2vw,24px)}
.manifest__quote blockquote{
  font-family:var(--font-display);font-style:italic;font-size:clamp(24px,2.6vw,36px);
  line-height:1.22;letter-spacing:-.01em;
}
.manifest__quote blockquote::before{
  content:"";position:absolute;left:-.02em;top:-.55em;width:38px;height:1px;background:var(--ink);
}
.manifest__quote figcaption{margin-top:22px;color:var(--muted);font-size:9.5px}
.manifest__sig{
  display:block;margin-top:34px;font-family:var(--font-display);font-style:italic;
  font-size:clamp(26px,3vw,40px);color:var(--ink);opacity:.32;letter-spacing:.01em;transform:rotate(-2.4deg);
}
.manifest__cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-2)}
.pcol{padding:24px 22px 24px 0;border-bottom:1px solid var(--line);position:relative}
.pcol:nth-child(even){padding-left:24px;border-left:1px solid var(--line);padding-right:0}
.pcol__idx{color:var(--muted);font-size:9px;display:block;margin-bottom:10px}
.pcol h3{font-size:16px;font-weight:500;letter-spacing:-.015em;margin-bottom:8px}
.pcol p{font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.pcol::before{
  content:"";position:absolute;left:0;top:0;width:0;height:1px;background:var(--lime-2);transition:width .6s var(--ease);
}
.pcol:hover::before{width:100%}

.process{margin-top:clamp(48px,6vw,80px);position:relative}
.process__head{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2);color:var(--ink-soft)}
.process__track{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.process__step{
  position:relative;padding:26px 18px 0 0;display:flex;flex-direction:column;gap:6px;
}
.process__step::before{
  content:"";position:absolute;top:12px;left:0;right:0;height:1px;background:var(--line-2);
}
.process__step::after{
  content:"";position:absolute;top:8.5px;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--paper);border:1px solid var(--ink);z-index:1;transition:background .4s,transform .4s;
}
.process__step:hover::after{background:var(--lime);transform:scale(1.35)}
.process__num{color:var(--muted);font-size:9px}
.process__step b{font-size:15px;font-weight:500;letter-spacing:-.01em}
.process__step small{font-size:11.5px;color:var(--muted);line-height:1.4}
.process__beam{
  position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--lime-2);
  transition:width 1.6s var(--ease);
}
.process.is-in .process__beam{width:100%}

/* ---------- METRICS / BENTO ---------- */
.metrics{background:var(--paper)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,14px)}
.tile{
  grid-column:span 4;position:relative;display:flex;flex-direction:column;gap:8px;
  min-height:180px;padding:clamp(18px,2vw,26px);
  border:1px solid var(--line-2);background:rgba(251,248,241,.5);
  transition:background .45s var(--ease-soft),transform .45s var(--ease);
  overflow:hidden;
}
.tile:hover{background:var(--white);transform:translateY(-2px)}
.tile::before{
  content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;
  border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);
}
.tile:nth-child(1){grid-column:span 5;grid-row:span 2;min-height:0}
.tile:nth-child(2){grid-column:span 3}
.tile:nth-child(3){grid-column:span 4}
.tile:nth-child(4){grid-column:span 4}
.tile:nth-child(5){grid-column:span 3}
.tile:nth-child(6){grid-column:span 4}
.tile:nth-child(7){grid-column:span 4}
.tile:nth-child(8){grid-column:span 4}

.tile--lime{background:var(--lime);border-color:var(--ink);justify-content:space-between}
.tile--lime:hover{background:var(--lime)}
.tile--lime::before{border-color:var(--ink)}
.tile__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;color:var(--ink)}
.tile__top .mono{font-size:10px;color:var(--ink);opacity:.78;letter-spacing:.08em;max-width:24ch}
.tile__spark{width:104px;height:30px;flex:none;color:var(--ink);opacity:.85}
.tile__spark .spark{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.8s var(--ease) .2s}
.tile.is-in .tile__spark .spark{stroke-dashoffset:0}

.tile__label{color:var(--muted);font-size:10.5px}
.tile__value{
  display:flex;align-items:baseline;gap:8px;line-height:.92;letter-spacing:-.055em;
  font-weight:500;margin-top:auto;
}
.tile__value{font-size:clamp(32px,4.3vw,58px)}
.tile--xl .tile__value{font-size:clamp(48px,6.2vw,92px);letter-spacing:-.06em;margin-top:18px}
.tile__value .cnt{white-space:nowrap}
.tile__value--md{font-size:clamp(28px,3.4vw,44px)}
.tile__unit{font-family:var(--font-mono);font-size:clamp(9px,1vw,12px);letter-spacing:.02em;font-weight:400;text-transform:none;color:var(--ink-soft);white-space:nowrap}
.tile--lime .tile__unit{color:var(--ink);opacity:.7}
.tile__desc{font-size:12.5px;line-height:1.45;color:var(--ink-soft);max-width:34ch}
.tile--lime .tile__desc{color:var(--ink);opacity:.8;font-size:13.5px;max-width:38ch}
.tile__desc b{font-weight:600;color:var(--ink)}
.tile__foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(12,15,13,.22);padding-top:10px;margin-top:14px;font-size:8px;color:var(--ink);opacity:.7}
.tile__flow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;line-height:.95}
.tile__flow b{font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:-.05em}
.tile__flow span{font-family:var(--font-display);font-size:clamp(18px,2vw,26px);color:var(--ink-soft);font-style:italic}
.tile__flow small{font-size:9px;color:var(--muted);letter-spacing:.06em}
.metrics__note{
  margin-top:clamp(22px,3vw,34px);padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:10.5px;letter-spacing:.04em;line-height:1.7;text-transform:none;max-width:66ch;
}

/* ---------- CASES ---------- */
.cases{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 55%)}
.cases__counter{
  flex:none;border:1px solid var(--line-2);padding:9px 13px;font-size:10px;color:var(--muted);
  letter-spacing:.1em;background:var(--paper);
}
.cases__counter b{color:var(--ink);font-weight:500}
.cases__stack{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px)}
.case{
  position:sticky;top:calc(var(--nav-h) + 24px + (var(--i,0) * 6px));
  background:var(--white);border:1px solid var(--line-2);
  padding:clamp(20px,2.6vw,36px);
  transform-origin:center top;will-change:transform;
  box-shadow:0 0 0 1px rgba(242,237,228,.6),0 18px 40px -30px rgba(12,15,13,.5);
}
.case__head{
  display:flex;align-items:center;gap:clamp(12px,2.4vw,32px);
  padding-bottom:13px;margin-bottom:clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line);color:var(--ink-soft);
}
.case__head .dim{margin-left:auto}
.case__idx{color:var(--ink);font-weight:500;font-size:9px;letter-spacing:.16em}
.case__kind{font-size:9px;color:var(--muted)}
.case__main{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:clamp(24px,3.4vw,56px)}
.case__title{
  font-size:clamp(25px,3.1vw,44px);line-height:1.02;letter-spacing:-.035em;font-weight:500;
  margin-bottom:12px;
}
.case__title em{
  display:block;font-family:var(--font-display);font-weight:400;font-size:.62em;
  letter-spacing:0;line-height:1.1;color:var(--ink-soft);margin-top:6px;
}
.case__problem{font-size:13.6px;line-height:1.5;color:var(--ink-soft);max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chips li{
  border:1px solid var(--line);padding:4px 8px;font-family:var(--font-mono);
  font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.case__metric{
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  border-left:1px solid var(--line);padding-left:clamp(14px,2.4vw,32px);
}
.case__big{font-size:clamp(36px,4.4vw,64px);line-height:.88;letter-spacing:-.055em;font-weight:500;display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.case__big i{font-style:normal;font-family:var(--font-display);font-size:.36em;letter-spacing:0;margin-left:3px;white-space:nowrap}
.case__big--sm{font-size:clamp(23px,2.6vw,34px);margin-top:16px;color:var(--ink-soft)}
.case__metric-cap{color:var(--muted);font-size:10.5px;letter-spacing:.1em;margin:4px 0 0}
.case__grid{
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(20px,3.2vw,52px);
  margin-top:clamp(16px,2vw,24px);padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid var(--line);
}
.case__k{display:block;color:var(--muted);font-size:8px;margin-bottom:9px}
.case__block ul{display:grid;gap:6px}
.case__block li{position:relative;padding-left:13px;font-size:12.6px;line-height:1.45;color:var(--ink-soft);max-width:68ch}
.case__block li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:1px;background:var(--line-2)}
.case__res li::before{width:5px;height:5px;top:.52em;border-radius:50%;background:var(--lime);border:1px solid var(--ink)}
.case__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}

.cases__more{margin-top:clamp(40px,5vw,72px)}
.cases__more-head{
  display:flex;justify-content:space-between;gap:16px;
  padding-bottom:13px;border-bottom:1px solid var(--line-2);color:var(--ink-soft);
}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px);margin-top:clamp(8px,1vw,14px)}
.mini__card{
  display:flex;flex-direction:column;gap:9px;min-height:214px;
  border:1px solid var(--line);background:rgba(251,248,241,.45);
  padding:clamp(18px,2vw,24px);
  transition:background .45s var(--ease-soft),border-color .45s;
}
.mini__card:hover{background:var(--lime);border-color:var(--ink)}
.mini__tag{color:var(--muted);font-size:10px}
.mini__card:hover .mini__tag{color:rgba(12,15,13,.65)}
.mini__card h4{font-size:17px;font-weight:500;letter-spacing:-.02em}
.mini__card p{font-size:12.4px;line-height:1.5;color:var(--ink-soft);flex:1}
.mini__card:hover p{color:rgba(12,15,13,.78)}
.mini__out{color:var(--ink);font-size:8.5px;letter-spacing:.06em;border-top:1px solid var(--line);padding-top:9px;text-transform:none}
.mini__card:hover .mini__out{border-color:rgba(12,15,13,.25)}

/* ---------- SKILLS ---------- */
.skills{background:var(--paper)}
.tabs{margin-top:clamp(8px,1.4vw,18px)}
.tabs__list{
  display:grid;grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line-2);border-right:0;
}
.tab{
  display:flex;align-items:center;gap:8px;justify-content:flex-start;
  padding:15px clamp(10px,1.2vw,18px);
  background:transparent;border:0;border-right:1px solid var(--line-2);
  cursor:pointer;font-size:12.4px;letter-spacing:-.01em;text-align:left;
  transition:background .4s var(--ease-soft),color .4s;position:relative;
}
.tab .mono{color:var(--muted);font-size:8px;transition:color .3s}
.tab:hover{background:rgba(216,255,62,.28)}
.tab.is-active{background:var(--ink);color:var(--paper)}
.tab.is-active .mono{color:var(--lime)}
.tab.is-active:hover{background:var(--ink)}
.tabs__panels{position:relative}
.panel{display:none}
.panel.is-active{display:block;animation:panelIn .55s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel__body{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr);
  gap:clamp(28px,5vw,80px);padding-block:clamp(28px,3.4vw,46px);
  border-bottom:1px solid var(--line-2);
}
.panel__lead{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(19px,1.75vw,26px);line-height:1.32;letter-spacing:-.005em;
  max-width:42ch;margin-bottom:clamp(18px,2.2vw,26px);
}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  border:1px solid var(--line);padding:7px 11px;font-size:12.2px;color:var(--ink-soft);
  transition:background .3s var(--ease-soft),color .3s,border-color .3s,transform .3s;
}
.tags li:hover{background:var(--lime);color:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.panel__out{border-left:2px solid var(--lime-2);padding-left:clamp(16px,2vw,26px);align-self:start}
.panel__out .mono{color:var(--muted);display:block;margin-bottom:10px}
.panel__out p{font-size:13.6px;line-height:1.55;color:var(--ink-soft)}

.tools{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line-2)}
.tools__row{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.tools__row .mono{color:var(--muted);font-size:9.5px}
.tools__row p{font-size:12.8px;line-height:1.55;color:var(--ink-soft)}

/* ---------- EXPERIENCE ---------- */
.exp{background:var(--paper)}
.tl{position:relative;margin-top:clamp(8px,1.2vw,16px);margin-left:6px}
.tl__spine{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line-2);overflow:hidden}
.tl__progress{position:absolute;left:0;top:0;width:1px;height:0;background:var(--lime-2)}
.tl__item{position:relative;padding-left:var(--tl-pad);padding-bottom:clamp(30px,3.8vw,52px)}
.tl__item:last-child{padding-bottom:6px}
.tl__node{
  position:absolute;left:-4px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1px solid var(--ink);transition:background .4s,transform .4s;
}
.tl__item:hover .tl__node{background:var(--lime);transform:scale(1.3)}
.tl__when{display:flex;align-items:baseline;gap:10px;margin-bottom:7px;color:var(--ink)}
.tl__when b{font-size:12.5px;font-weight:500;letter-spacing:-.005em}
.tl__when span{font-size:10px;color:var(--muted);letter-spacing:.08em}
.tl__content h3{font-size:clamp(18px,1.85vw,25px);font-weight:500;letter-spacing:-.022em;line-height:1.2;margin-bottom:4px}
.tl__content h3 .dim{color:var(--muted);font-weight:400}
.tl__meta{color:var(--muted);font-size:10px;margin-bottom:12px;letter-spacing:.06em}
.tl__content ul{display:grid;gap:5px;max-width:70ch}
.tl__content li{position:relative;padding-left:14px;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.tl__content li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--line-2)}
.tl__stat{
  display:inline-block;margin-top:13px;padding-top:8px;border-top:1px solid var(--line);
  font-size:8px;letter-spacing:.09em;color:var(--ink);text-transform:none;
}
.edu{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(16px,3vw,40px);
  margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid var(--line-2);
}
.edu__label{color:var(--muted)}
.edu ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(24px,4vw,56px)}
.edu li{display:flex;flex-direction:column;gap:2px}
.edu li b{font-size:13px;font-weight:500}
.edu li span{font-size:11.5px;color:var(--muted);line-height:1.4}

/* ---------- CALCULATOR ---------- */
.calc{
  background:var(--pine);color:var(--paper);border-top-color:rgba(255,255,255,.14);
  overflow:hidden;
}
.calc::before{
  content:"";position:absolute;right:-12%;top:-40%;width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(216,255,62,.10) 0%,transparent 62%);
  pointer-events:none;
}
.calc::after{background:var(--lime)}
.calc .sec-head__num{color:var(--paper)}
.calc .sec-head__title,.contact .sec-head__title{color:var(--paper)}
.calc .sec-head__title em,.contact .sec-head__title em{color:var(--lime)}
.calc .sec-head__lead,.contact .sec-head__lead{color:rgba(251,248,241,.72)}
.calc .dim{color:rgba(251,248,241,.5)}
.calc__wrap{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:start}
.calc__title{font-size:clamp(30px,3.7vw,54px);line-height:1.02;letter-spacing:-.038em;font-weight:500;margin:16px 0 20px}
.calc__title em{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.05em;color:var(--lime)}
.calc__lead{font-size:14.4px;line-height:1.62;color:rgba(251,248,241,.72);max-width:44ch}
.calc__formula{
  margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  font-size:8.5px;letter-spacing:.04em;line-height:2.1;color:rgba(251,248,241,.58);
  text-transform:none;
}
.calc__card{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.16);
  padding:clamp(20px,2.6vw,34px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);
}
.calc__controls{display:flex;flex-direction:column;gap:19px}
.range{display:flex;flex-direction:column;gap:9px}
.range__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(251,248,241,.62);
}
.range__row output{font-size:12px;color:var(--lime);letter-spacing:.01em;text-transform:none}
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;
  background:transparent;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:2px;background:linear-gradient(to right,var(--lime) var(--fill,50%),rgba(255,255,255,.2) var(--fill,50%));
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--lime);border:1px solid var(--ink);margin-top:-6px;
  box-shadow:0 0 0 4px rgba(216,255,62,.12);transition:box-shadow .3s;
}
input[type="range"]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(216,255,62,.18)}
input[type="range"]::-moz-range-track{height:2px;background:rgba(255,255,255,.2)}
input[type="range"]::-moz-range-progress{height:2px;background:var(--lime)}
input[type="range"]::-moz-range-thumb{width:13px;height:13px;border:1px solid var(--ink);border-radius:50%;background:var(--lime)}

.calc__hero{border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:16px;margin-bottom:16px}
.calc__hero .mono{color:rgba(251,248,241,.62);font-size:10px}
.calc__hero p{
  display:flex;align-items:baseline;gap:8px;margin:9px 0 6px;
  font-size:clamp(38px,4.6vw,62px);font-weight:500;letter-spacing:-.055em;line-height:1;
  color:var(--lime);
}
.calc__hero small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.03em;color:rgba(251,248,241,.55);font-weight:400}
.calc__pct{font-size:8.5px;letter-spacing:.14em;color:rgba(251,248,241,.66)}
.calc__table{display:grid;gap:8px}
.calc__table > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-bottom:1px dashed rgba(255,255,255,.12);padding-bottom:8px;
}
.calc__table dt{font-size:11.4px;color:rgba(251,248,241,.6);line-height:1.4}
.calc__table dd{font-size:13px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__table dd.accent{color:var(--lime)}
.calc__note{margin-top:15px;font-size:10.5px;letter-spacing:.02em;line-height:1.7;color:rgba(251,248,241,.7);text-transform:none}

/* ---------- ARTIFACTS ---------- */
.artifacts{background:var(--paper)}
.docs{margin-top:clamp(4px,1vw,14px);border-top:1px solid var(--line-2)}
.docs li{border-bottom:1px solid var(--line)}
.docs__row{
  width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 24px;
  gap:clamp(12px,2.4vw,32px);align-items:center;text-align:left;
  padding:clamp(15px,1.9vw,22px) 0;
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  transition:padding .4s var(--ease),background .4s var(--ease-soft),color .4s;
}
.docs__row:hover{background:var(--ink);color:var(--paper);padding-inline:18px}
.docs__row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.docs__row--file .docs__type{border-color:var(--ink);color:var(--ink)}
.docs__row--file:hover .docs__type{color:var(--lime);border-color:var(--lime)}
.docs__n{color:var(--muted);font-size:9px;transition:color .3s}
.docs__row:hover .docs__n{color:var(--lime)}
.docs__body{display:flex;flex-direction:column;gap:3px}
.docs__body b{font-size:clamp(14.5px,1.5vw,19px);font-weight:500;letter-spacing:-.022em;line-height:1.2}
.docs__body span{font-size:12px;color:var(--muted);line-height:1.4;transition:color .3s}
.docs__row:hover .docs__body span{color:rgba(251,248,241,.6)}
.docs__type{
  font-size:10px;color:var(--muted);border:1px solid var(--line);padding:3px 6px;
  transition:color .3s,border-color .3s;
}
.docs__row:hover .docs__type{color:rgba(251,248,241,.75);border-color:rgba(251,248,241,.28)}
.docs__arrow{justify-self:end;font-size:15px;transition:transform .4s var(--ease),color .3s}
.docs__row:hover .docs__arrow{transform:translateX(4px);color:var(--lime)}
.docs__note{margin-top:16px;color:var(--muted);font-size:10px;letter-spacing:.04em;text-transform:none;max-width:70ch}

/* ---------- ARTIFACT DIALOG ---------- */
.art{
  width:min(680px,calc(100vw - 28px));
  max-height:min(88vh,860px);
  padding:0;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:0 60px 120px -40px rgba(12,15,13,.55);
  overflow:auto;overscroll-behavior:contain;
}
.art::backdrop{background:rgba(11,21,18,.62)}
.art[open]{animation:artFade .28s var(--ease)}
.art__inner{padding:clamp(22px,3.2vw,36px);animation:artIn .5s var(--ease) both}
@keyframes artFade{from{opacity:0}to{opacity:1}}
@keyframes artIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.art__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.art__tag{color:var(--muted);font-size:9.5px}
.art__close{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);background:none;color:var(--ink);cursor:pointer;flex:none;transition:background .25s,color .25s,border-color .25s}
.art__close svg{width:14px;height:14px}
.art__close:hover{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.art__title{font-size:clamp(23px,3vw,33px);line-height:1.06;letter-spacing:-.03em;font-weight:500;margin-bottom:12px}
.art__title em{font-family:var(--font-display);font-style:italic;font-weight:400}
.art__text{font-size:14.2px;line-height:1.62;color:var(--ink-soft);max-width:62ch}
.art__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:22px 0 20px}
.art__metrics > div{background:var(--paper);padding:13px 14px;display:flex;flex-direction:column;gap:5px}
.art__metrics dt{font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);order:2}
.art__metrics dd{order:1;font-size:clamp(16px,1.9vw,21px);letter-spacing:-.03em;font-weight:500;line-height:1.12}
.art__list{display:grid;gap:8px}
.art__list li{position:relative;padding-left:16px;font-size:12.8px;line-height:1.5;color:var(--ink-soft)}
.art__list li::before{content:"";position:absolute;left:0;top:.64em;width:7px;height:1px;background:var(--ink)}
.art__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--line-2)}
.art__foot .mono{color:var(--muted);font-size:9.5px;max-width:34ch;line-height:1.6}
body.is-art-open{overflow:hidden}
@media (max-width:560px){
  .art__metrics{grid-template-columns:1fr 1fr}
  .art__metrics > div:last-child{grid-column:1 / -1}
  .art__foot .btn{width:100%;justify-content:center}
}

/* ---------- CONTACT ---------- */
.contact{
  background:var(--ink);color:var(--paper);border-top-color:rgba(255,255,255,.14);
  position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;left:-10%;bottom:-30%;width:60vw;height:60vw;max-width:800px;max-height:800px;
  background:radial-gradient(circle,rgba(216,255,62,.08) 0%,transparent 60%);
  pointer-events:none;
}
.contact::after{background:var(--lime)}
.contact .sec-head__num{color:var(--paper)}
.contact .dim{color:rgba(251,248,241,.5)}
.contact__top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(26px,3.6vw,46px)}
.contact__top .sec-head__meta{padding-top:0}
.contact__title{
  font-size:clamp(38px,7vw,112px);line-height:.94;letter-spacing:-.045em;font-weight:500;
  margin-bottom:clamp(32px,4.6vw,60px);
}
.contact__title em{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.03em;color:var(--lime)}
.contact__grid{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18);
}
.contact__item{
  position:relative;display:flex;flex-direction:column;gap:7px;
  padding:clamp(20px,2.6vw,32px);
  border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);
  transition:background .45s var(--ease-soft),color .45s;
}
.contact__item .mono{color:rgba(251,248,241,.6);font-size:9.5px;transition:color .3s}
.contact__item b{font-size:clamp(15px,1.9vw,25px);font-weight:400;letter-spacing:-.022em}
.contact__item:hover{background:var(--lime);color:var(--ink)}
.contact__item:hover .mono{color:rgba(12,15,13,.6)}
.contact__arrow{
  position:absolute;right:clamp(16px,2.2vw,28px);top:clamp(16px,2.2vw,28px);
  font-size:15px;opacity:.35;transition:transform .4s var(--ease),opacity .4s;
}
.contact__item:hover .contact__arrow{transform:translate(3px,-3px);opacity:1}
.contact__foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(24px,3.2vw,38px)}
.contact__note{font-size:12.8px;color:rgba(251,248,241,.66);max-width:46ch;line-height:1.6}
.contact__demos{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.contact__demos .corner-link{color:rgba(251,248,241,.72);border-color:rgba(251,248,241,.22)}
.contact__demos .corner-link:hover{color:var(--lime);border-color:var(--lime)}
.contact .tag--live{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--ink);color:var(--paper);border-top:1px solid rgba(255,255,255,.12);
  padding-top:clamp(30px,4vw,52px);position:relative;z-index:1;
}
.footer__inner{
  display:grid;grid-template-columns:1.2fr auto;gap:clamp(22px,4vw,56px);
  align-items:start;padding-bottom:clamp(22px,3vw,34px);
}
.footer__brand{display:flex;gap:12px;align-items:flex-start}
.footer__brand .brand__mark{color:var(--paper);width:26px;height:26px}
.footer__brand > span:last-child{display:flex;flex-direction:column;gap:2px}
.footer__brand b{font-size:13px;font-weight:500}
.footer__brand .mono{color:rgba(251,248,241,.6);font-size:9.5px}
.footer__nav{display:flex;flex-wrap:wrap;gap:18px;justify-self:end}
.footer__nav a{font-size:11.8px;color:rgba(251,248,241,.58);transition:color .25s}
.footer__nav a:hover{color:var(--lime)}
.footer__meta{
  grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding-top:15px;
  color:rgba(251,248,241,.6);font-size:8px;letter-spacing:.08em;
}
.footer__meta .corner-link{color:rgba(251,248,241,.7);border-color:rgba(251,248,241,.2)}
.footer__meta .corner-link:hover{color:var(--lime);border-color:var(--lime)}
.footer__note{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--pad) clamp(18px,3vw,28px);
  color:rgba(251,248,241,.72);font-size:10.5px;letter-spacing:.04em;text-transform:none;line-height:1.7;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1240px){
  .nav__links a{padding-inline:10px;font-size:12px}
  .nav__links a i{display:none}
}
@media (max-width:1100px){
  .nav__links{display:none}
  .burger{display:block}
  .hero__grid{grid-template-columns:1fr}
  .hero__aside{display:none}
  .hero__rail{display:none}
  .sec-head{grid-template-columns:minmax(100px,150px) minmax(0,1fr)}
  .bento .tile:nth-child(1){grid-column:span 6}
  .bento .tile:nth-child(2){grid-column:span 6}
  .bento .tile:nth-child(3){grid-column:span 6}
  .bento .tile:nth-child(4){grid-column:span 6}
  .bento .tile:nth-child(5){grid-column:span 6}
  .bento .tile:nth-child(6){grid-column:span 6}
  .bento .tile:nth-child(7){grid-column:span 6}
  .bento .tile:nth-child(8){grid-column:span 6}
  .bento .tile:nth-child(1){grid-row:span 1}
  .tabs__list{grid-template-columns:repeat(3,1fr)}
  .tab:nth-child(3){border-right:0}
  .tab:nth-child(-n+3){border-bottom:1px solid var(--line-2)}
  .calc__card{grid-template-columns:1fr;gap:26px}
  .calc__controls{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
}
@media (max-width:940px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 48px);padding-bottom:72px}
  .hero__stats{grid-template-columns:1fr 1fr;border-top:0}
  .hero__stat{border-top:1px solid var(--line-2);padding-block:14px 0}
  .hero__stat:nth-child(2n){border-right:0}
  .scroll-hint{display:none}
  .manifest__body{grid-template-columns:1fr;gap:36px}
  .manifest__cols{grid-template-columns:1fr}
  .pcol:nth-child(even){padding-left:0;border-left:0}
  .process__track{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .process__step{padding-top:24px}
  .panel__body{grid-template-columns:1fr;gap:26px}
  .case__main{grid-template-columns:1fr;gap:18px}
  .case__metric{
    flex-direction:row;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;
    border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px;text-align:left;gap:10px;
  }
  .case__metric-cap{margin:0 14px 0 0}
  .case__big--sm{margin-top:0}
  .case__grid{grid-template-columns:1fr;gap:20px}
  .mini{grid-template-columns:1fr}
  .calc__wrap{grid-template-columns:1fr;gap:32px}
  .calc__lead{max-width:none}
  .tl__content ul{max-width:none}
  .edu{grid-template-columns:1fr;gap:16px}
  .edu ul{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .footer__nav{justify-self:start}
  .sec-head--wide .sec-head__aside{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:760px){
  .nav__side .btn{display:none}
  .corner-link{display:inline-flex;min-height:44px;align-items:center;border-bottom:0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-2)}
  .footer__nav a{padding-block:12px;font-size:13px;min-height:44px;display:inline-flex;align-items:center}
  .brand{padding-block:8px}
  .docs__arrow{padding-block:10px}
  .sec-head{grid-template-columns:1fr;row-gap:14px}
  .sec-head__meta{padding-top:0}
  .sec-head__title,.sec-head__lead,.sec-head--wide .sec-head__aside{grid-column:1}
  .sec-head__lead{grid-row:auto}
  .sec-head--wide .sec-head__aside{grid-row:auto}
  .bento .tile,.bento .tile:nth-child(n){grid-column:span 12;min-height:auto}
  .tile__value{font-size:clamp(34px,9vw,52px)}
  .tabs__list{grid-template-columns:1fr 1fr}
  .tab{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font-size:11.5px}
  .tab:nth-child(2n){border-right:0}
  .tab:nth-last-child(-n+2){border-bottom:0}
  .case{position:relative;top:auto!important;transform:none!important}
  .cases__stack{gap:14px}
  .case__head{flex-wrap:wrap;gap:8px 14px}
  .case__head .dim{margin-left:0}
  .tools__row{grid-template-columns:1fr;gap:4px}
  .range__row{font-size:8px}
  .calc__controls{grid-template-columns:1fr}
  .docs a{grid-template-columns:28px minmax(0,1fr) 20px;gap:12px}
  .docs__type{display:none}
  .contact__title{font-size:clamp(34px,11vw,64px)}
  .contact__top{flex-wrap:wrap}
  .footer__meta{flex-direction:column}
  .sec-head__title{font-size:clamp(28px,7.4vw,40px)}
  .manifest__quote blockquote{font-size:clamp(21px,5.6vw,28px)}
  .process__track{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  :root{--pad:18px;--nav-h:66px}
  .brand__text .mono{display:none}
  .hero__title{font-size:clamp(27px,8.8vw,36px)}
  .br-mob{display:inline}
  .hero__stats{grid-template-columns:1fr 1fr}
  .hero__cta .btn{width:100%;justify-content:center}
  .case{padding:18px 16px}
  .case__big{font-size:clamp(32px,11vw,44px)}
  .calc__hero p{font-size:clamp(34px,11vw,48px)}
  .contact__item b{font-size:14px;word-break:break-word}
  .hero__rail{display:none}
}

/* ---------- MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .marquee__track{animation:none;transform:none}
  html.js [data-reveal],
  html.js .hero__line-in{opacity:1!important;transform:none!important}
  .doodle path{stroke-dashoffset:0!important}
  .tile__spark .spark{stroke-dashoffset:0!important}
  .cursor{display:none}
  .scroll-hint__line::after{display:none}
}

/* ---------- ANCHORS / SHADE ---------- */
section[id],main[id],div[id]{scroll-margin-top:calc(var(--nav-h) + 10px)}
body.is-menu-open{overflow:hidden}
.case::after{
  content:"";position:absolute;inset:0;background:var(--paper-2);
  opacity:var(--shade,0);pointer-events:none;z-index:3;transition:opacity .15s linear;
}
/* стопка кейсов: не залипаем, если окно низкое или колонка одна */
@media (max-width:1100px), (max-height:740px){
  .case{position:relative;top:auto!important;transform:none!important}
  .case::after{display:none}
}
/* ползунки: высота зоны касания 44px при видимом треке 2px */
.range input[type="range"]{height:44px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#main:focus{outline:none}

/* ---------- FALLBACK: no JS ---------- */
html:not(.js) .panel{display:block}
html:not(.js) .tabs__list{display:none}
html:not(.js) .burger{display:none}
html:not(.js) .nav__links{display:flex;flex-wrap:wrap;gap:10px 16px}
html:not(.js) .menu{display:none}
html:not(.js) .panel__body{border-bottom:1px solid var(--line)}