/* Nattech — nattech.am */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-cyrillic-wght-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-greek-wght-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Noto Sans Armenian';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-sans-armenian-armenian-wght-normal.woff2) format('woff2');unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:300;src:url(/assets/fonts/ibm-plex-mono-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:300;src:url(/assets/fonts/ibm-plex-mono-cyrillic-300-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Noto Sans Georgian';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-sans-georgian-ribbon.woff2) format('woff2');unicode-range:U+10D0,U+10D1,U+10D4,U+10DC,U+10E8}
@font-face{font-family:'Noto Sans Arabic';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/noto-sans-arabic-ribbon.woff2) format('woff2');unicode-range:U+0621,U+0622,U+0627,U+0628,U+0631,U+0634,U+0641,U+0646,U+06CC}

:root{
  --paper:#FAF9F7;--canvas:#F5F4F2;--ash:#E7E5E2;--basalt:#12110F;--graphite:#1F1D1B;--smolder:#2E2B28;
  --stone:#9A948C;--smoke:#6B655E;--copper:#C8743A;--copper-deep:#B5652C;--copper-ink:#9C5523;
  --font-sans:Inter,"Noto Sans Armenian","Helvetica Neue",Arial,sans-serif;
  --font-armenian:"Noto Sans Armenian",Inter,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
  --font-georgian:"Noto Sans Georgian",Inter,sans-serif;
  --font-arabic:"Noto Sans Arabic",Inter,sans-serif;
  --ease-build:cubic-bezier(0.2,0,0,1);--ease-signal:cubic-bezier(0.3,0,0.7,1);
  --dur-quick:160ms;--dur-base:400ms;--dur-build:1600ms;--dur-signal:6000ms;--dur-ribbon:80s;
  --gutter:clamp(16px,4.4vw,64px);--section:clamp(96px,11vw,160px);
}
.light{--surface:var(--paper);--surface-alt:var(--canvas);--line:var(--ash);--line-strong:var(--smoke);--ink:var(--basalt);--ink-muted:var(--smoke);--accent:var(--copper-deep);--accent-text:var(--copper-ink);background:var(--surface);color:var(--ink)}
.dark{--surface:var(--basalt);--surface-alt:var(--graphite);--line:var(--smolder);--line-strong:var(--stone);--ink:var(--paper);--ink-muted:var(--stone);--accent:var(--copper);--accent-text:var(--copper);background:var(--surface);color:var(--ink)}
.alt{background:var(--surface-alt)}
.hero{min-height:900px}
.hero-text{padding-bottom:300px}
.h-hero{max-width:9.5em}
body{margin:0;background:#12110F;color:#FAF9F7}
*{box-sizing:border-box}
p,h1,h2,h3{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--section) 0;position:relative;overflow:hidden}
.label{display:inline-flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:13px;line-height:1.4;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.label::before{content:"";flex:none;width:24px;height:2px;background:var(--accent)}
.display{font-size:clamp(56px,8.4vw,120px);line-height:.95;font-weight:600;letter-spacing:-.035em}
.headline{font-size:clamp(40px,5vw,72px);line-height:1.05;font-weight:600;letter-spacing:-.025em}
.title{font-size:clamp(30px,3vw,44px);line-height:1.12;font-weight:600;letter-spacing:-.015em}
.subtitle{font-size:clamp(22px,2vw,28px);line-height:1.25;font-weight:500;letter-spacing:-.01em}
.lead{font-size:clamp(20px,1.7vw,24px);line-height:1.45;letter-spacing:-.005em}
.body{font-size:17px;line-height:1.6}
.small{font-size:14px;line-height:1.5}
.data{font-family:var(--font-mono);font-size:15px;line-height:1.5;letter-spacing:.02em}
.muted{color:var(--ink-muted)}
.nav{display:flex}
.nav a{color:var(--ink-muted);text-decoration:none;transition:color var(--dur-quick) var(--ease-build)}
.nav a:hover{color:var(--ink)}
.link{text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:color var(--dur-quick) var(--ease-build),background-size var(--dur-base) var(--ease-build)}
.link:hover{color:var(--accent-text);background-size:100% 2px}

/* Сигнал */
.sig{position:absolute;inset:0;width:100%;height:100%;display:block}
.sig path{fill:none;stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke;animation:wave var(--dur-signal) var(--ease-signal) infinite;animation-delay:calc(var(--i,0) * 240ms)}
.mk-ink{fill:none;stroke:var(--ink);stroke-width:9}
.mk-ink path,.sig .mk-ink path{animation:none;stroke:var(--ink);stroke-width:9;vector-effect:none}
.mk-door,.sig .mk-door{fill:var(--accent);stroke:none;animation:glow var(--dur-signal) var(--ease-signal) infinite}
.mk-door-flat{fill:var(--accent)}
@keyframes wave{0%,24%,100%{stroke:var(--line)}8%{stroke:var(--accent)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 3px var(--accent))}50%{filter:drop-shadow(0 0 22px var(--accent))}}

/* Медная жила */
.wire{position:relative;height:1px;background:var(--line-strong);overflow:hidden}
.wire::after{content:"";position:absolute;top:0;bottom:0;left:-24%;width:24%;background:linear-gradient(90deg,transparent,var(--accent));animation:current var(--dur-signal) linear infinite}
.wire-v{width:1px;height:auto}
.wire-v::after{left:0;right:0;width:auto;top:-24%;height:24%;background:linear-gradient(180deg,transparent,var(--accent));animation-name:current-v}
@keyframes current{to{left:100%}}
@keyframes current-v{to{top:100%}}

/* Бегущая строка */
.ribbon{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.ribbon-track{display:inline-flex;align-items:center;gap:48px;padding-right:48px;animation:ribbon var(--dur-ribbon) linear infinite}
.ribbon-track span.w{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.015em;color:var(--ink-muted)}
.ribbon-track span.d{width:8px;height:8px;border-radius:9999px;background:var(--accent);flex:none}
@keyframes ribbon{to{transform:translateX(-50%)}}

/* Буква и пиксель */
@property --split{syntax:"<percentage>";inherits:true;initial-value:50%}
.glyph{position:relative;display:inline-grid;font-family:var(--font-armenian);font-weight:600;line-height:1;--split:50%}
.glyph>span{grid-area:1/1}
.g-cut{color:transparent;-webkit-text-stroke:1px var(--line-strong);-webkit-mask-image:linear-gradient(90deg,#000 var(--split),transparent var(--split));mask-image:linear-gradient(90deg,#000 var(--split),transparent var(--split))}
.g-pix{color:transparent;background-image:radial-gradient(circle,var(--ink) 1.6px,transparent 1.9px);background-size:8px 8px;-webkit-background-clip:text;background-clip:text;-webkit-mask-image:linear-gradient(90deg,transparent var(--split),#000 var(--split));mask-image:linear-gradient(90deg,transparent var(--split),#000 var(--split))}
.g-seam{position:absolute;top:4%;bottom:4%;left:var(--split);width:2px;background:var(--accent)}
.glyph-live{animation:split calc(var(--dur-signal) * 2) var(--ease-signal) infinite alternate}
@keyframes split{from{--split:30%}to{--split:70%}}

/* Арка */
.arch{position:relative;overflow:hidden;aspect-ratio:3/4;border-radius:9999px 9999px 0 0;background:var(--surface-alt);display:flex;align-items:center;justify-content:center}
.dots{background-image:radial-gradient(circle,var(--ink-muted) 1px,transparent 1.4px);background-size:8px 8px}


/* Путь: от алфавита до ИИ */
.path-wrap{margin-top:clamp(96px,11vw,160px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:start}
.path-head{position:sticky;top:64px;display:flex;flex-direction:column;gap:20px}
.path{list-style:none;margin:0;padding:0;position:relative;--spine:clamp(96px,10vw,150px)}
.path-line{position:absolute;top:12px;bottom:12px;left:calc(var(--spine) + 23px);width:2px;background:var(--line)}
@media (max-width:900px){.path-line{--spine:0px !important}}
.path-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top}
.step{display:grid;grid-template-columns:var(--spine) 48px minmax(0,1fr);align-items:start;padding:0 0 clamp(40px,5vw,64px)}
.step:last-child{padding-bottom:0}
.step-year{font-family:var(--font-mono);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:.9;letter-spacing:-.04em;text-align:right;padding-right:clamp(16px,2.4vw,32px)}
.step-node{position:relative;justify-self:center;margin-top:6px;width:14px;height:18px;border:2px solid var(--line-strong);border-bottom:0;border-radius:9999px 9999px 0 0;background:var(--surface);z-index:1}
.step-body{display:flex;flex-direction:column;gap:10px;max-width:640px;padding-left:clamp(8px,1.6vw,24px)}
.step-next .step-year{color:var(--accent-text)}
.step-next .step-node{background:var(--accent);border-color:var(--accent)}

/* Ценности */
.vrow{position:relative;display:grid;grid-template-columns:96px minmax(0,5fr) minmax(0,6fr);gap:24px;padding:36px 0;border-top:1px solid var(--line)}
.cond{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,3vw,40px)}
.cond-mid{display:flex;align-items:center;gap:clamp(16px,3vw,40px);width:clamp(120px,40vw,640px)}
.cond-end{text-align:right}
.vrow::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--accent);transition:width var(--dur-base) var(--ease-build)}
.vrow:hover::before{width:100%}

/* Прорисовка */
.draw{stroke-dasharray:1;stroke-dashoffset:0}

/* Анимации по скроллу: только где браузер их поддерживает. В покое всё видно. */
@supports (animation-timeline: view()){
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .ink-in{animation:inkin linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  .draw{animation:drawk linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  .fill-x{transform-origin:left;animation:fillx linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  .path-fill{animation:filly linear both;animation-timeline:view();animation-range:cover 20% cover 70%}
}
@keyframes rise{from{opacity:.15;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes inkin{from{color:var(--line-strong)}to{color:var(--ink)}}
@keyframes drawk{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes filly{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion: reduce){
  .sig path,.mk-door,.wire::after,.ribbon-track,.glyph-live{animation:none}
}
@media (max-width: 900px){
  .vrow{grid-template-columns:56px minmax(0,1fr)}
  .vrow .vdesc{grid-column:2}
  .path-wrap{grid-template-columns:minmax(0,1fr);gap:48px}
  .path-head{position:static}
  .path{--spine:0px}
  .path-line{left:23px}
  .step{grid-template-columns:48px minmax(0,1fr);row-gap:8px}
  .step-year{grid-column:2;grid-row:1;text-align:left;padding:0 0 0 clamp(8px,1.6vw,24px);font-size:36px}
  .step-node{grid-column:1;grid-row:1}
  .step-body{grid-column:2}
  .nav{display:none}
}
@media (max-width: 700px){
  .cond{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cond-mid{width:100%}
  .cond-end{text-align:center}
  .hero{min-height:0}
  .hero-text{padding-bottom:220px}
  .sig{top:auto;height:560px}
  .hero-meta{visibility:hidden}
  .foot-r{align-items:flex-start!important;text-align:left!important}
}

:root{--font-mono:"IBM Plex Mono","Noto Sans Armenian","Courier New",monospace}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--copper);color:var(--basalt)}
.skip{position:absolute;left:16px;top:-64px;z-index:10;padding:10px 16px;background:var(--copper);color:var(--basalt);font-size:14px;text-decoration:none}
.skip:focus{top:16px}
.mline{font-size:clamp(30px,3.6vw,52px);line-height:1.15;font-weight:500;letter-spacing:-.02em}
.lang a{color:var(--ink-muted);text-decoration:none;transition:color var(--dur-quick) var(--ease-build)}
.lang a:hover,.lang a[aria-current]{color:var(--ink)}
/* Армянский набор: без отрицательного трекинга, на ступень меньше, выше интерлиньяж */
html[lang="hy"] .display,html[lang="hy"] .headline,html[lang="hy"] .title,html[lang="hy"] .subtitle,html[lang="hy"] .lead,html[lang="hy"] .mline{letter-spacing:0}
html[lang="hy"] .display{font-size:clamp(44px,6.6vw,96px);line-height:1.04}
html[lang="hy"] .headline{font-size:clamp(32px,4.2vw,60px);line-height:1.12}
html[lang="hy"] .title{font-size:clamp(26px,2.6vw,38px);line-height:1.22}
html[lang="hy"] .mline{font-size:clamp(26px,3vw,44px);line-height:1.25}
html[lang="hy"] .body{line-height:1.7}
html[lang="hy"] .h-hero{max-width:12em}
html[lang="hy"] .label{letter-spacing:.06em}
/* Правовые страницы */
.doc{max-width:760px}
.doc h1{margin:0}
.doc h2{font-size:clamp(22px,2vw,28px);line-height:1.25;font-weight:600;letter-spacing:-.01em;margin:56px 0 16px}
.doc p{font-size:17px;line-height:1.7;margin:0 0 16px;color:var(--ink)}
.doc p.meta{color:var(--ink-muted);font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;margin-top:24px}
.doc a.link{color:var(--accent-text)}