/* ============================================================================
   ВЕТЕРАН PRO — landing. Editorial Luxury: warm paper, espresso ink, olive +
   coral, e-Ukraine type, double-bezel cards, film grain, spring motion.
   ============================================================================ */

@font-face { font-family:'e-Ukraine'; src:url('../assets/fonts/e-Ukraine/e-Ukraine-Light.otf') format('opentype'); font-weight:300; font-display:swap; }
@font-face { font-family:'e-Ukraine'; src:url('../assets/fonts/e-Ukraine/e-Ukraine-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'e-Ukraine'; src:url('../assets/fonts/e-Ukraine/e-Ukraine-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'e-Ukraine'; src:url('../assets/fonts/e-Ukraine/e-Ukraine-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }

:root{
  --paper:#e8e3df; --paper-2:#f1ede8; --paper-3:#ddd6cf;
  --ink:#2b2723; --ink-soft:#6a625a; --ink-faint:#a39a90;
  --line:rgba(43,39,35,.12); --line-soft:rgba(43,39,35,.07);
  --olive:#6e6a36; --olive-2:#8f8a4d; --olive-fill:#c3bd80; --olive-soft:rgba(140,134,77,.14);
  --coral:#d9542e; --coral-2:#e8633a; --coral-soft:rgba(217,84,46,.1);
  --espresso:#211e18; --espresso-2:#15130f;
  --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.32,.72,0,1);
  --maxw:1180px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'e-Ukraine',system-ui,sans-serif;font-weight:400;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{position:relative;}

/* ---------- typography ---------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.02;}
.display{font-size:clamp(2.6rem,6.4vw,5rem);}
.h2{font-size:clamp(2rem,4.4vw,3.3rem);letter-spacing:-.02em;line-height:1.05;}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.01em;line-height:1.12;}
em{font-style:normal;color:var(--coral);}
.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-soft);line-height:1.55;max-width:62ch;}
.muted{color:var(--ink-soft);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.22em;color:var(--olive);background:var(--olive-soft);padding:7px 13px;border-radius:999px;border:1px solid rgba(140,134,77,.2);}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--olive-2);}

/* ---------- brand mark ---------- */
.logo{display:inline-flex;align-items:center;font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1;}
.logo .vt{color:var(--ink);}
.logo .pro{background:var(--olive-fill);color:#211e10;font-size:12px;padding:3px 6px 2px;border-radius:4px;margin-left:7px;transform:translateY(-2px);box-shadow:2px 2px 0 rgba(43,39,35,.25);}

/* ---------- nav (fluid island) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:center;padding:18px;transition:padding .5s var(--ease);}
.nav-inner{
  width:100%;max-width:var(--maxw);display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(241,237,232,.7);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line-soft);border-radius:999px;padding:11px 12px 11px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -18px rgba(43,39,35,.4);
  transition:all .5s var(--ease);
}
.nav.scrolled{padding:10px 18px;}
.nav.scrolled .nav-inner{background:rgba(241,237,232,.88);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 34px -16px rgba(43,39,35,.5);}
.nav-links{display:flex;gap:4px;}
.nav-links a{font-size:14.5px;color:var(--ink-soft);padding:8px 14px;border-radius:999px;font-weight:500;transition:all .3s var(--ease);}
.nav-links a:hover{color:var(--ink);background:rgba(43,39,35,.05);}
.nav-right{display:flex;align-items:center;gap:10px;}
.langtog{display:flex;background:rgba(43,39,35,.06);border-radius:999px;padding:3px;border:1px solid var(--line-soft);}
.langtog button{border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink-soft);padding:6px 11px;border-radius:999px;cursor:pointer;transition:all .3s var(--ease);}
.langtog button.on{background:var(--ink);color:var(--paper);}

/* pill CTA + button-in-button */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:inherit;font-weight:500;font-size:15px;cursor:pointer;border-radius:999px;padding:13px 14px 13px 22px;border:1px solid transparent;transition:transform .4s var(--ease2),background .3s,color .3s;}
.btn:active{transform:scale(.975);}
.btn .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:transform .4s var(--ease2);flex:0 0 auto;}
.btn:hover .ic{transform:translate(2px,-1px) scale(1.06);}
.btn.primary{background:var(--coral);color:#fff;}
.btn.primary .ic{background:rgba(255,255,255,.22);}
.btn.dark{background:var(--ink);color:var(--paper);}
.btn.dark .ic{background:rgba(255,255,255,.14);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost .ic{background:rgba(43,39,35,.08);}
.btn.sm{padding:9px 9px 9px 16px;font-size:13.5px;}
.btn.sm .ic{width:26px;height:26px;}

.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;position:relative;}
.burger span{position:absolute;left:11px;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all .4s var(--ease2);}
.burger span:nth-child(1){top:15px;} .burger span:nth-child(2){top:21px;} .burger span:nth-child(3){top:27px;}
.burger.x span:nth-child(1){top:21px;transform:rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){top:21px;transform:rotate(-45deg);}

.navsheet{position:fixed;inset:0;z-index:75;background:rgba(232,227,223,.96);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
body.nav-open .navsheet{opacity:1;pointer-events:auto;}
.navsheet a{font-size:30px;font-weight:700;letter-spacing:-.02em;padding:12px 0;color:var(--ink);transform:translateY(20px);opacity:0;transition:all .5s var(--ease);}
body.nav-open .navsheet a{transform:none;opacity:1;}
body.nav-open .navsheet a:nth-child(1){transition-delay:.08s;}
body.nav-open .navsheet a:nth-child(2){transition-delay:.14s;}
body.nav-open .navsheet a:nth-child(3){transition-delay:.2s;}
body.nav-open .navsheet a:nth-child(4){transition-delay:.26s;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms);}
.reveal.in{opacity:1;transform:none;filter:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none;}}

/* ---------- double-bezel panel ---------- */
.panel{background:rgba(43,39,35,.04);border:1px solid var(--line-soft);border-radius:30px;padding:7px;}
.panel-in{background:var(--paper-2);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 24px 50px -34px rgba(43,39,35,.4);}

/* ---------- HERO ---------- */
.hero{padding:140px 0 70px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.hero-left .display{margin:22px 0 0;}
.hero-left .lede{margin:24px 0 0;}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px;}
.hero-hint{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:13.5px;color:var(--ink-faint);}
.hero-hint .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(217,84,46,.5);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,84,46,.45);}70%{box-shadow:0 0 0 9px rgba(217,84,46,0);}100%{box-shadow:0 0 0 0 rgba(217,84,46,0);}}

.hero-stats{display:flex;gap:30px;margin-top:42px;padding-top:30px;border-top:1px solid var(--line);}
.hero-stats .st .n{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;}
.hero-stats .st .l{font-size:12.5px;color:var(--ink-soft);margin-top:7px;max-width:15ch;line-height:1.35;}

/* phone stage */
.stage{position:relative;display:flex;justify-content:center;align-items:center;}
.stage::before{content:"";position:absolute;width:115%;height:115%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,134,77,.22),transparent 70%);z-index:0;}
.phone{position:relative;z-index:1;width:332px;height:710px;border-radius:46px;background:#0b0a08;padding:9px;box-shadow:0 50px 90px -40px rgba(43,39,35,.65),0 0 0 1px rgba(43,39,35,.1);}
.phone iframe{width:100%;height:100%;border:0;border-radius:38px;background:#15130f;display:block;}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:110px;height:26px;background:#0b0a08;border-radius:0 0 16px 16px;z-index:2;}

/* ---------- section heading block ---------- */
.sec{padding:clamp(70px,10vw,128px) 0;}
.sec-head{max-width:760px;}
.sec-head .h2{margin:16px 0 0;}
.sec-head .lede{margin:20px 0 0;}
.center{margin-left:auto;margin-right:auto;text-align:center;}
.center .lede{margin-left:auto;margin-right:auto;}

/* ---------- shift (two columns) ---------- */
.shift-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:54px;}
.shift-card{border-radius:26px;padding:32px;border:1px solid var(--line);}
.shift-card.old{background:transparent;}
.shift-card.new{background:var(--espresso);color:var(--paper);border-color:transparent;box-shadow:0 30px 60px -34px rgba(33,30,24,.8);}
.shift-card .tag{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:500;}
.shift-card.old .tag{color:var(--ink-faint);}
.shift-card.new .tag{color:var(--olive-fill);}
.shift-card .h3{margin:12px 0 22px;}
.shift-card.new .h3 em{color:var(--olive-fill);}
.shift-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;}
.shift-list li{display:flex;gap:13px;font-size:15.5px;line-height:1.4;}
.shift-list li .mk{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;}
.shift-card.old .mk{background:rgba(43,39,35,.08);color:var(--ink-faint);}
.shift-card.new .mk{background:rgba(195,189,128,.18);color:var(--olive-fill);}
.shift-card.old li{color:var(--ink-soft);}

/* ---------- tour (asymmetric phone gallery) ---------- */
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.shot{}
.shot .frame{background:rgba(43,39,35,.04);border:1px solid var(--line-soft);border-radius:30px;padding:8px;transition:transform .6s var(--ease);}
.shot:hover .frame{transform:translateY(-6px);}
.shot .frame img{border-radius:22px;width:100%;box-shadow:0 26px 50px -34px rgba(43,39,35,.55);}
.shot .cap{padding:20px 6px 0;}
.shot .cap .h3{font-size:1.15rem;}
.shot .cap p{margin:9px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.tour-foot{margin-top:46px;display:flex;justify-content:center;}

/* ---------- gamification bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:54px;}
.cell{border-radius:26px;padding:30px;border:1px solid var(--line);background:var(--paper-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.cell .ic{width:46px;height:46px;border-radius:14px;background:var(--olive-soft);color:var(--olive);display:grid;place-items:center;margin-bottom:18px;}
.cell .h3{font-size:1.2rem;}
.cell p{margin:10px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.cell.span6{grid-column:span 6;} .cell.span4{grid-column:span 4;} .cell.span8{grid-column:span 8;} .cell.span12{grid-column:span 12;}
.cell.dark{background:var(--espresso);color:var(--paper);border-color:transparent;}
.cell.dark p{color:rgba(245,241,234,.7);}
.cell.dark .ic{background:rgba(195,189,128,.16);color:var(--olive-fill);}
.levels{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.lvchip{display:flex;align-items:center;gap:10px;background:rgba(245,241,234,.06);border:1px solid rgba(245,241,234,.1);border-radius:999px;padding:8px 16px 8px 8px;font-size:14px;}
.lvchip .n{width:26px;height:26px;border-radius:50%;background:var(--olive-fill);color:#211e10;display:grid;place-items:center;font-weight:700;font-size:12px;}
.lvchip:nth-child(1) .n{background:var(--coral);color:#fff;}

/* ---------- architecture diagram ---------- */
.arch-wrap{margin-top:50px;}
.diagram{background:var(--espresso);border-radius:30px;padding:clamp(24px,4vw,46px);position:relative;overflow:hidden;box-shadow:0 40px 80px -44px rgba(33,30,24,.8);}
.diagram::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(140,134,77,.18),transparent 55%);}
.dgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.node{background:rgba(245,241,234,.05);border:1px solid rgba(245,241,234,.12);border-radius:16px;padding:16px;color:var(--paper);display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;line-height:1.25;min-height:64px;}
.node .ni{width:34px;height:34px;border-radius:10px;background:rgba(195,189,128,.16);color:var(--olive-fill);display:grid;place-items:center;flex:0 0 auto;}
.node.core{background:linear-gradient(150deg,rgba(217,84,46,.9),rgba(217,84,46,.7));border-color:transparent;}
.node.core .ni{background:rgba(255,255,255,.2);color:#fff;}
.node.span2{grid-column:span 2;}
.dlabel{color:var(--olive-fill);font-size:11px;text-transform:uppercase;letter-spacing:.18em;margin:22px 0 12px;font-weight:500;}
.dlabel:first-child{margin-top:0;}

.subsys{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px;}
.sub{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--paper-2);}
.sub .h3{font-size:1.1rem;display:flex;align-items:center;gap:10px;}
.sub .h3 .si{width:34px;height:34px;border-radius:10px;background:var(--olive-soft);color:var(--olive);display:grid;place-items:center;flex:0 0 auto;}
.sub p{margin:13px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.55;}
.stackline{margin-top:24px;font-size:14px;color:var(--ink-soft);background:rgba(43,39,35,.04);border:1px solid var(--line-soft);border-radius:16px;padding:16px 20px;line-height:1.5;}
.caveat{margin-top:18px;border-radius:22px;padding:26px;background:var(--coral-soft);border:1px solid rgba(217,84,46,.22);}
.caveat .h3{font-size:1.05rem;color:var(--coral);display:flex;align-items:center;gap:10px;}
.caveat p{margin:11px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.55;}

/* ---------- competitors ---------- */
.comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:50px;}
.comp{border:1px solid var(--line);border-radius:22px;padding:26px;background:var(--paper-2);}
.comp .nm{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;}
.comp p{margin:10px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.comp-edge{grid-column:span 2;background:var(--espresso);color:var(--paper);border-radius:22px;padding:26px 30px;font-size:16px;line-height:1.5;display:flex;gap:16px;align-items:flex-start;}
.comp-edge .si{width:40px;height:40px;border-radius:12px;background:rgba(195,189,128,.16);color:var(--olive-fill);display:grid;place-items:center;flex:0 0 auto;}

/* ---------- scope ---------- */
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:50px;}
.scope-card{border-radius:26px;padding:30px;border:1px solid var(--line);background:var(--paper-2);}
.scope-card.out{background:transparent;}
.scope-card .h3{font-size:1.2rem;margin-bottom:20px;}
.scope-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.scope-list li{display:flex;gap:12px;font-size:15px;line-height:1.4;}
.scope-list li .mk{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:1px;}
.scope-card:not(.out) .mk{background:var(--coral-soft);color:var(--coral);}
.scope-card.out .mk{background:rgba(43,39,35,.06);color:var(--ink-faint);}
.scope-card.out li{color:var(--ink-soft);}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;}
.fact{border:1px solid var(--line);border-radius:20px;padding:24px;text-align:center;background:var(--paper-2);}
.fact .v{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--coral);}
.fact .l{font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);margin-top:8px;}
.scope-note{margin-top:20px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;max-width:90ch;}

/* ---------- risks ---------- */
.risk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:50px;}
.risk{display:flex;gap:16px;border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--paper-2);}
.risk .ri{width:38px;height:38px;border-radius:11px;background:var(--olive-soft);color:var(--olive);display:grid;place-items:center;flex:0 0 auto;}
.risk .h3{font-size:1.05rem;}
.risk p{margin:8px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.5;}

/* ---------- footer CTA ---------- */
.foot{padding:clamp(70px,9vw,120px) 0 60px;}
.foot-card{background:var(--espresso);border-radius:34px;padding:clamp(40px,6vw,72px);text-align:center;position:relative;overflow:hidden;color:var(--paper);box-shadow:0 50px 90px -50px rgba(33,30,24,.9);}
.foot-card::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 50% 0%,rgba(140,134,77,.2),transparent 60%);}
.foot-card .inner{position:relative;}
.foot-card .h2{color:var(--paper);}
.foot-card .lede{color:rgba(245,241,234,.72);margin:18px auto 0;}
.foot-card .btn{margin-top:32px;}
.foot-meta{margin-top:42px;text-align:center;font-size:13px;color:var(--ink-soft);line-height:1.6;}
.foot-disc{font-size:12px;color:var(--ink-faint);margin-top:10px;}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;}
.variant-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
.variant-switch .vs-label{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.16em;font-size:11px;margin-right:2px;}
.variant-switch .vs{padding:7px 13px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);font-weight:500;transition:all .3s var(--ease);}
.variant-switch .vs:hover{color:var(--ink);border-color:var(--ink);}
.variant-switch .vs.a{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px;}
  .stage{order:-1;}
  .tour-grid{grid-template-columns:1fr 1fr;}
  .subsys{grid-template-columns:1fr;}
  .cell.span6,.cell.span4,.cell.span8{grid-column:span 12;}
  .dgrid{grid-template-columns:repeat(2,1fr);}
  .node.span2{grid-column:span 2;}
}
@media (max-width:720px){
  .nav-links{display:none;}
  .burger{display:block;}
  .langtog{display:none;}
  .shift-grid,.scope-grid,.comp-grid,.risk-grid{grid-template-columns:1fr;}
  .comp-edge{grid-column:span 1;}
  .tour-grid{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap;gap:22px;}
  .hero-stats .st{min-width:42%;}
  .wrap{padding:0 20px;}
  .hero{padding:118px 0 50px;}
  .phone{width:300px;height:642px;}
}
@media (max-width:420px){
  .phone{width:88vw;height:188vw;max-height:660px;}
}