/* Veritas.mk marketing site
   Green monolith: deep forest full-bleed bands notching into white paper.
   No build step, no external requests, no webfonts. One stylesheet.
   Palette is lifted from the product itself so the screenshots sit natively. */

*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#080B08;
  --forest:#062A1E;
  --forest-2:#0A3A29;
  --forest-3:#10503A;
  --green:#0F7B5C;
  --green-lt:#35D89B;
  --lime:#B9F227;
  --paper:#F4F5F3;
  --white:#FFFFFF;
  --line:#E0E3DE;
  --line-dk:rgba(185,242,39,.16);
  --soft:#4C5548;
  --faint:#8A9487;
  --faint-dk:#7E9287;
  --hot:#E2483D;
  --warm:#B4690E;

  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",sans-serif;

  --pad:clamp(20px,5vw,64px);
  --notch:clamp(28px,4vw,56px);
  --maxw:1280px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:104px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{list-style:none;padding:0}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

.band{position:relative}
.band--paper{background:var(--paper)}
.band--white{background:var(--white)}
.band--forest{background:var(--forest);color:#E9F2EC}
.band--ink{background:var(--ink);color:#E9F2EC}

/* the notch: each band curls over the one above it */
.band--notch{
  border-radius:var(--notch) var(--notch) 0 0;
  margin-top:calc(var(--notch) * -1);
  z-index:2;
}
.pad-xl{padding-block:clamp(64px,9vw,132px)}
.pad-lg{padding-block:clamp(52px,7vw,104px)}
.pad-md{padding-block:clamp(36px,5vw,68px)}

/* ------------------------------------------------------------------ type */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--green);margin-bottom:18px;display:block;
}
.band--forest .eyebrow,.band--ink .eyebrow{color:var(--lime)}

.display{
  font-size:clamp(42px,7.4vw,92px);line-height:.96;letter-spacing:-.045em;
  font-weight:800;text-wrap:balance;
}
.h2{
  font-size:clamp(29px,4.4vw,54px);line-height:1.02;letter-spacing:-.038em;
  font-weight:800;text-wrap:balance;
}
.h3{font-size:clamp(19px,2vw,23px);line-height:1.2;letter-spacing:-.025em;font-weight:800}

.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--soft);max-width:56ch}
.band--forest .lede,.band--ink .lede{color:#B7CBBF}
.body{font-size:16.5px;line-height:1.6;color:var(--soft);max-width:54ch}
.band--forest .body{color:#B7CBBF}
.small{font-size:13.5px;line-height:1.5;color:var(--faint)}
.band--forest .small,.band--ink .small{color:var(--faint-dk)}

/* a lime rule that hangs off the left of a heading */
.ruled{position:relative;padding-left:22px}
.ruled::before{
  content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:5px;
  border-radius:3px;background:var(--lime);
}

/* ---------------------------------------------------------------- header
   A floating glass pill, not a bar. It sits over the forest hero and over the
   paper bands alike, so the glass is tinted forest rather than white: dark
   enough to hold white text on paper, light enough to read as glass on green.
   Dropdowns open on hover (desktop) and as accordions inside a sheet (mobile).
   One easing for everything that moves: a fast start that settles softly. */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}

.hdr{
  position:fixed;left:0;right:0;top:24px;z-index:80;
  padding-inline:16px;pointer-events:none;
  transition:top .7s var(--ease-out);
}
.hdr.is-scrolled{top:12px}
.hdr-pill{
  pointer-events:auto;position:relative;isolation:isolate;
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;gap:22px;
  padding:8px 8px 8px 24px;border-radius:999px;
}
/* The glass lives on a layer behind the pill, not on the pill itself: an
   element with backdrop-filter becomes the backdrop root for its children, so
   the dropdown's own blur would only ever see the pill, never the page. */
.hdr-pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(6,42,30,.66);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 0 0 1px rgba(185,242,39,.13),0 10px 34px -12px rgba(0,0,0,.45);
  transition:background-color .5s ease;
}
.hdr.is-scrolled .hdr-pill::before{background:rgba(6,42,30,.86)}
.brand{display:inline-flex;align-items:center;gap:9px;
  font-size:19px;font-weight:800;letter-spacing:-.035em;color:#fff;white-space:nowrap}
.brand i{color:var(--lime);font-style:normal}
/* The mark: a "V" drawn as a tick, kept from the Veritas branding. The square
   is forest even on a forest header, so it reads as a badge rather than
   dissolving into the bar; it is the same artwork as assets/favicon.svg. */
.brand .mk{width:26px;height:26px;flex:none;border-radius:8px;display:block;
  box-shadow:0 0 0 1px rgba(185,242,39,.20)}
.ft-brand .brand .mk{width:34px;height:34px;border-radius:10px}
.hdr .brand{font-size:19px}

.hdr-nav{display:flex;align-items:center;gap:26px;margin-left:10px}
.hdr-link,.hdr-trig{
  font:600 15px/1 var(--sans);color:#D6E4DB;white-space:nowrap;
  padding:14px 0;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .3s var(--ease-out);
}
.hdr-link:hover,.hdr-dd:hover .hdr-trig,.hdr-dd.is-open .hdr-trig,.hdr-trig[aria-expanded="true"]{color:var(--lime)}
.hdr-trig svg{width:12px;height:12px;transition:transform .35s var(--ease-out)}
.hdr-dd:hover .hdr-trig svg,.hdr-dd:focus-within .hdr-trig svg,.hdr-dd.is-open .hdr-trig svg{transform:rotate(180deg)}
.hdr-sp{flex:1}

/* the dropdown panel: invisible, not display:none, so opacity can animate */
/* Each panel hangs from its own trigger, so the mouse can travel straight down
   into it. site.js slides it sideways only as far as needed to stay on screen
   (--dd-x); without JavaScript it simply starts at the trigger's left edge. */
.hdr-dd{position:relative}
.hdr-panel{
  position:absolute;top:100%;left:0;width:680px;padding-top:12px;
  transform:translateX(var(--dd-x,-24px));
  visibility:hidden;pointer-events:none;
}
.hdr-panel--narrow{width:420px}
/* an invisible bridge under the trigger, so a diagonal path does not drop the hover */
.hdr-panel::before{content:"";position:absolute;left:0;right:0;top:-6px;height:18px}
.hdr-dd:hover .hdr-panel,.hdr-dd:focus-within .hdr-panel,.hdr-dd.is-open .hdr-panel{visibility:visible;pointer-events:auto}
.hdr-card{
  border-radius:18px;padding:12px;
  background:rgba(6,42,30,.94);
  -webkit-backdrop-filter:blur(32px) saturate(160%);backdrop-filter:blur(32px) saturate(160%);
  box-shadow:0 0 0 1px rgba(185,242,39,.14),0 24px 60px -24px rgba(0,0,0,.6);
  opacity:0;transition:opacity .3s var(--ease-out);
}
.hdr-dd:hover .hdr-card,.hdr-dd:focus-within .hdr-card,.hdr-dd.is-open .hdr-card{opacity:1}
.hdr-kicker{padding:4px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--line-dk)}
.hdr-kicker span{font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.hdr-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 4px}
.hdr-panel--narrow .hdr-grid{grid-template-columns:1fr}

/* each row fades up a beat after the one before it (delay set inline) */
.hdr-item{opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.hdr-dd:hover .hdr-item,.hdr-dd:focus-within .hdr-item,.hdr-dd.is-open .hdr-item{opacity:1;transform:none}
.hdr-item a{
  display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;
  transition:background-color .2s ease;
}
.hdr-item a:hover{background:rgba(185,242,39,.07)}
.hdr-ic{
  flex:none;width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(185,242,39,.1);color:var(--lime);
  transition:background-color .3s var(--ease-out),color .3s var(--ease-out);
}
.hdr-ic svg{width:18px;height:18px}
.hdr-item a:hover .hdr-ic{background:var(--lime);color:var(--forest)}
.hdr-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.hdr-tx b{font-size:15px;font-weight:700;letter-spacing:-.015em;color:#E9F2EC;
  transition:color .3s var(--ease-out)}
.hdr-item a:hover .hdr-tx b{color:var(--lime)}
.hdr-tx small{font-size:12.5px;line-height:1.35;color:#9DB3A6;margin-top:2px}
.hdr-arw{flex:none;width:14px;height:14px;color:var(--lime);opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.hdr-item a:hover .hdr-arw{opacity:1;transform:none}

.hdr-cta{display:flex;align-items:center;gap:10px}
.hdr-login{font:700 15px/1 var(--sans);color:var(--lime);padding:0 8px;transition:opacity .3s}
.hdr-login:hover{opacity:.8}

/* pill buttons with a light sweep crossing them on hover */
.pbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:999px;overflow:hidden;white-space:nowrap;
  font:700 15px/1 var(--sans);letter-spacing:-.01em;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.pbtn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-130%);transition:transform .7s ease-out;
}
.pbtn:hover{transform:translateY(-2px) scale(1.03)}
.pbtn:hover::after{transform:translateX(130%)}
.pbtn:active{transform:scale(.97)}
.pbtn--lime{background:var(--lime);color:var(--ink);box-shadow:0 6px 18px -8px rgba(185,242,39,.55)}
.pbtn--lime:hover{box-shadow:0 12px 28px -10px rgba(185,242,39,.7)}
.pbtn--line{color:var(--lime);box-shadow:inset 0 0 0 1.5px var(--lime)}
/* The quieter of the header's two calls: darker than the glass it sits on, so
   it reads as a button without competing with the lime Претплати се beside it. */
.pbtn--dark{background:var(--ink);color:#fff;box-shadow:0 0 0 1px rgba(185,242,39,.22)}
.pbtn--dark::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.pbtn--dark:hover{box-shadow:0 0 0 1px rgba(185,242,39,.45)}

.langsw{display:flex;gap:2px;background:rgba(255,255,255,.07);border-radius:999px;padding:3px}
.langsw button{
  font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:#8FA89A;padding:7px 10px;border-radius:999px;cursor:pointer;
}
.langsw button.on{background:var(--lime);color:var(--forest)}

/* mobile: burger, and a sheet that drops out of the pill */
.hdr-burger{
  display:none;width:40px;height:40px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.07);align-items:center;justify-content:center;
}
.hdr-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#E9F2EC;position:relative;
  transition:background .3s}
.hdr-burger span::before,.hdr-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:#E9F2EC;
  transition:transform .4s var(--ease-out),top .4s var(--ease-out)}
.hdr-burger span::before{top:-6px}.hdr-burger span::after{top:6px}
.hdr.is-open .hdr-burger span{background:transparent}
.hdr.is-open .hdr-burger span::before{top:0;transform:rotate(45deg)}
.hdr.is-open .hdr-burger span::after{top:0;transform:rotate(-45deg)}

.hdr-sheet{display:none}
@media(max-width:1100px){
  .hdr-nav,.hdr-cta .hdr-login,.hdr-cta .pbtn{display:none}
  .hdr-burger{display:inline-flex}
  .hdr-pill{padding:6px 6px 6px 20px;gap:10px}
  .hdr-sheet{
    display:block;pointer-events:auto;max-width:1180px;margin:10px auto 0;
    border-radius:24px;overflow:hidden;
    background:rgba(6,42,30,.94);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:0 0 0 1px rgba(185,242,39,.13),0 24px 60px -24px rgba(0,0,0,.6);
    max-height:0;opacity:0;transition:max-height .5s var(--ease-out),opacity .3s ease;
  }
  .hdr.is-open .hdr-sheet{max-height:calc(100vh - 110px);opacity:1;overflow-y:auto}
  .sheet-in{padding:10px 18px 20px}
  .sheet-row{border-bottom:1px solid var(--line-dk)}
  .sheet-row > a,.sheet-row > button{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:16px 4px;background:none;border:0;cursor:pointer;
    font:700 18px/1 var(--sans);color:#E9F2EC;text-align:left;
  }
  .sheet-row > button svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
  .sheet-row.is-open > button{color:var(--lime)}
  .sheet-row.is-open > button svg{transform:rotate(180deg)}
  .sheet-sub{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
  .sheet-sub a{display:flex;flex-direction:column;padding:10px 4px 10px 14px;border-left:2px solid var(--line-dk)}
  .sheet-sub a b{font-size:15.5px;color:#E9F2EC}
  .sheet-sub a small{font-size:13px;color:var(--faint-dk);margin-top:2px}
  .sheet-sub .sheet-pad{height:10px}
  .sheet-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .sheet-cta .pbtn{width:100%}
}
@media(max-width:420px){.hdr-pill .langsw{display:none}}

/* the fixed header floats over the first band, so that band makes room */
.hdr + .band{padding-top:calc(clamp(52px,7vw,104px) + 84px)}
.hdr + .hero{padding-top:calc(clamp(56px,8vw,104px) + 84px)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:800 15.5px/1 var(--sans);letter-spacing:-.015em;
  padding:15px 26px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .12s ease,background .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:#CBFF4A}
.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--green)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.85}
.btn--ghost:hover{opacity:1}
.btn--sm{padding:10px 17px;font-size:14px;border-radius:10px}
.btn .arw{font-family:var(--mono);font-weight:400}

/* ------------------------------------------------------------- verdict pill
   Borrowed straight from the product. It is the site's signature motif. */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  font:800 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  padding:8px 13px;border-radius:9px;white-space:nowrap;
}
.pill--go{background:var(--green);color:#fff}
.pill--warn{background:var(--warm);color:#fff}
.pill--no{background:var(--hot);color:#fff}
.pill--lime{background:var(--lime);color:var(--ink)}
.pill--out{background:transparent;color:var(--lime);box-shadow:inset 0 0 0 1.5px currentColor}

/* ------------------------------------------------------------------- hero */
.hero{padding-block:clamp(56px,8vw,104px) clamp(104px,14vw,210px);position:relative;overflow:hidden}
.hero::after{ /* a soft green bloom behind the shot */
  content:"";position:absolute;right:-10%;top:8%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(53,216,155,.16),transparent 62%);
  pointer-events:none;
}
.hero-grid{
  /* 6.4/5.6, not 5.2/6.8. The headline is now one long compound word
     ("Интелигенција!") where it used to be short ones ("се понуди."), and at
     the old ratio the text column was ~475px -- which caps .display at about
     60px before the word runs under the screenshot. Widening the text side is
     what lets the display type stay display-sized; the shot bleeds off the
     right edge anyway, so it loses nothing it was using. */
  display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);
  gap:clamp(32px,4vw,56px);align-items:center;position:relative;z-index:1;
}
/* The hero's own ceiling, in the stylesheet rather than an inline style on the
   h1, so .display keeps its full scale for every other page that uses it. */
.hero .display{font-size:clamp(38px,6.2vw,76px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-note{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint-dk)}

/* the app frame: screenshots float on the green, bleeding off the right edge */
.shot{
  border-radius:16px;overflow:hidden;background:var(--paper);
  box-shadow:0 2px 4px rgba(0,0,0,.12),0 40px 80px -30px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.14);
}
.shot img{width:100%;height:auto}
.shot--bleed{width:calc(100% + 14vw);max-width:none}
/* Source captures are crops, so they end mid-table. Dissolving the last strip
   reads as depth instead of as a screenshot that got cut off. */
.shot--fade{
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
  border-bottom:0;
}

/* ---------------------------------------------------------------- numbers */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dk);border-bottom:1px solid var(--line-dk);
}
.band--figs{padding-bottom:var(--notch)}
/* A band, not a row of boxes: it states four numbers between two hairlines on
   the way past, so it is short and centred rather than tall and left-aligned. */
.fig{padding:15px 18px;border-left:1px solid var(--line-dk);text-align:center}
.fig:first-child{border-left:0}
.fig b{
  display:block;font-size:clamp(21px,2.3vw,30px);font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.05;color:#fff;
}
.fig.hi b{color:var(--lime)}
.fig span{
  display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#9DB3A6;font-weight:600;line-height:1.35;
}

/* ------------------------------------------------------------------ cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:52px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:14px;
}
.band--forest .card{background:var(--forest-2);border-color:var(--line-dk)}
.card .q{
  font-size:clamp(19px,1.9vw,22px);font-weight:800;letter-spacing:-.025em;line-height:1.22;
}
.card .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--green);font-weight:700;
}
.band--forest .card .num{color:var(--lime)}

/* section head with a tall narrow shot pinned beside it */
.prod-head{
  display:grid;grid-template-columns:minmax(0,1fr) 232px;
  gap:clamp(28px,4vw,64px);align-items:start;
  margin-bottom:clamp(48px,6vw,84px);
}
.prod-head--solo{grid-template-columns:minmax(0,1fr)}
.prod-head--solo .lede{max-width:66ch}
.prod-aside .shot{box-shadow:0 2px 4px rgba(18,22,15,.06),0 24px 46px -26px rgba(18,22,15,.5);
  border-color:var(--line)}
.prod-aside figcaption{margin-top:12px;text-align:center}

/* ---------------------------------------------------------------- feature */
.feature{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(30px,4.5vw,68px);align-items:center;
}
.feature + .feature{margin-top:clamp(56px,7vw,104px)}
/* Flipping sides must flip the track widths too, otherwise the screenshot
   inherits the narrow copy column and shrinks to half the size. */
.feature--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature--flip .feature-copy{order:2}
.feature--flip .feature-shot{order:1}
.feature-copy .h2{margin-bottom:18px}
.ticks{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--soft)}
.band--forest .ticks li{color:#C3D6C9}
.ticks li::before{
  content:"→";font-family:var(--mono);font-size:14px;color:var(--green);flex:none;
  line-height:1.5;font-weight:700;
}
.band--forest .ticks li::before{color:var(--lime)}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}

/* a pulled-out statistic inside a feature block */
.stat{
  margin-top:30px;padding:20px 22px;border-radius:14px;
  background:var(--forest);color:#E9F2EC;display:flex;gap:18px;align-items:baseline;
}
.band--forest .stat{background:rgba(185,242,39,.09)}
.stat b{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.04em;color:var(--lime);line-height:1}
.stat span{font-size:14.5px;line-height:1.4;color:#B7CBBF}

/* ------------------------------------------------------------------ steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:56px}
.step{border-top:2px solid var(--lime);padding-top:22px}
.step .n{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--lime);
  font-weight:700;display:block;margin-bottom:14px;
}
.step .h3{margin-bottom:12px}

/* -------------------------------------------------------------- CTA block */
.cta{
  background:var(--lime);color:var(--ink);border-radius:clamp(20px,2.6vw,32px);
  padding:clamp(38px,5.5vw,76px) clamp(26px,4.5vw,68px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.cta .h2{max-width:14ch}
.cta .body{color:#243021;max-width:44ch}
.cta-form{display:flex;flex-direction:column;gap:12px}
.cta-form input{
  font:16px/1 var(--sans);padding:17px 18px;border-radius:12px;
  border:1.5px solid rgba(8,11,8,.28);background:rgba(255,255,255,.62);color:var(--ink);width:100%;
}
.cta-form input::placeholder{color:#5A6555}
.cta-form input:focus{outline:2px solid var(--ink);outline-offset:1px;background:#fff}
.cta-form .btn{width:100%}
.cta-form .small{color:#3B4838}

/* ---------------------------------------------------------------- pricing */
/* stretch, not start: equal card heights let margin-top:auto bottom-align every CTA */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:56px;align-items:stretch}
.tier{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px 32px;display:flex;flex-direction:column;height:100%;
}
.tier--hero{background:var(--forest);border-color:var(--forest);color:#E9F2EC;position:relative}
.tier--hero .price b{color:var(--lime)}
.tier--hero .tier-feat li{color:#C3D6C9}
.tier--hero .tier-feat li::before{color:var(--lime)}
.tier-tag{
  position:absolute;top:-13px;left:28px;
  font:800 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  background:var(--lime);color:var(--ink);padding:8px 12px;border-radius:8px;
}
.tier-name{
  font:800 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green);
}
.tier--hero .tier-name{color:var(--lime)}
.price{margin:20px 0 6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font-size:clamp(34px,3.8vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1}
.price i{font-style:normal;font-size:14.5px;color:var(--faint)}
.tier--hero .price i{color:var(--faint-dk)}
.tier .body{font-size:15px;margin-top:10px;min-height:3em}
.tier--hero .body{color:#B7CBBF}
.tier-feat{margin:24px 0 28px;display:flex;flex-direction:column;gap:11px}
.tier-feat li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--soft)}
.tier-feat li::before{content:"✓";font-size:13px;color:var(--green);flex:none;font-weight:800;line-height:1.5}
.tier-feat li.tier-all{font-weight:700;color:var(--ink)}
.tier-feat li.tier-all::before{content:"+"}
.tier--hero .tier-feat li.tier-all{color:#fff}
.tier .btn{margin-top:auto;width:100%}


/* ---------------------------------------------------------------- compare */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,40px);margin-top:52px}
.faq .h3{margin-bottom:10px}

/* ----------------------------------------------------------------- footer */
.ft{position:relative;background:var(--ink);color:#B7CBBF;z-index:2;
  border-radius:var(--notch) var(--notch) 0 0;margin-top:calc(var(--notch) * -1);overflow:hidden}
.ft-glow{height:1px;background:linear-gradient(90deg,transparent,rgba(185,242,39,.7),transparent)}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,88px) var(--pad) 28px}
.ft-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(28px,3.4vw,48px)}
.ft-brand{grid-column:span 5;display:flex;flex-direction:column;gap:22px}
.ft-brand .brand{font-size:26px}
.ft-brand p{font-size:14.5px;line-height:1.6;color:#9DB3A6;max-width:44ch}
.ft-kicker{font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6F8578}
.ft-badges{display:flex;gap:8px;flex-wrap:wrap}
.ft-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  font:600 12.5px/1 var(--sans);color:#C3D6C9;
  box-shadow:inset 0 0 0 1px rgba(185,242,39,.18);
  transition:color .3s,box-shadow .3s,transform .3s var(--ease-out),background-color .3s;
}
.ft-badge:hover{color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime);background:rgba(185,242,39,.06);transform:translateY(-2px)}
.ft-badge svg{width:14px;height:14px}
.ft-col{grid-column:span 2;display:flex;flex-direction:column;gap:18px}
.ft-col--wide{grid-column:span 3}
.ft-col h4{margin:0;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ft-col ul{display:flex;flex-direction:column;gap:11px}
.ft-a{position:relative;display:inline-block;width:fit-content;font-size:14.5px;color:#9DB3A6;transition:color .3s}
.ft-a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--lime);
  transition:width .3s ease-out}
.ft-a:hover{color:#fff}
.ft-a:hover::after{width:100%}
.ft-mail{font-size:clamp(17px,1.6vw,19px);font-weight:700;letter-spacing:-.02em;color:#fff;width:fit-content;transition:color .3s}
.ft-mail:hover{color:var(--lime)}
.ft-col p{font-size:14px;line-height:1.55;color:#9DB3A6;max-width:30ch}
.ft-col .pbtn{align-self:flex-start;height:42px}
.ft-note{margin-top:clamp(48px,6vw,72px);padding-top:26px;border-top:1px solid rgba(185,242,39,.1);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ft-note p{font-size:13px;line-height:1.55;color:#7E9287;max-width:90ch}
.ft-seal{flex:none;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(185,242,39,.08);color:var(--lime)}
.ft-seal svg{width:22px;height:22px}
.ft-base{margin-top:22px;padding-top:18px;border-top:1px solid rgba(185,242,39,.1);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#6F8578}
.ft-base b{color:var(--lime);font-weight:600}
.ft-base a{color:#9DB3A6}.ft-base a:hover{color:#fff}
@media(max-width:1000px){
  .ft-brand{grid-column:1 / -1}
  .ft-col,.ft-col--wide{grid-column:span 6}
}
@media(max-width:520px){.ft-col,.ft-col--wide{grid-column:1 / -1}}

/* ----------------------------------------------------------------- cookies
   Only strictly necessary storage is used, so this informs rather than asks:
   one acknowledgement, and a link to what exactly is stored. */
.ck{
  position:fixed;left:16px;bottom:16px;z-index:90;width:min(360px,calc(100vw - 32px));
  padding:18px 18px 16px;border-radius:20px;color:#E9F2EC;
  background:rgba(6,42,30,.92);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 0 0 1px rgba(185,242,39,.16),0 24px 50px -20px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);
}
.ck.is-in{opacity:1;transform:none;pointer-events:auto}
.hdr.is-open ~ .ck{opacity:0;pointer-events:none}
.ck-h{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:-.015em}
.ck-h svg{width:20px;height:20px;color:var(--lime);flex:none}
.ck p{font-size:13.5px;line-height:1.5;color:#B7CBBF;margin:8px 0 14px}
.ck-row{display:flex;align-items:center;gap:10px}
.ck-row .pbtn{height:38px;padding:0 18px;font-size:14px}
.ck-row a.ck-more{font-size:13.5px;color:#C3D6C9;text-decoration:underline;text-underline-offset:3px}
.ck-row a.ck-more:hover{color:var(--lime)}

/* ------------------------------------------------------------------ video */
.reel{position:relative;border-radius:18px;overflow:hidden;background:#0A0F0B;
  box-shadow:0 0 0 1px rgba(185,242,39,.14),0 2px 4px rgba(0,0,0,.12),0 40px 80px -30px rgba(0,0,0,.6);
  aspect-ratio:16 / 10}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The reel is wider than the column it sits in, and runs off the right edge --
   which is what .hero's own overflow:hidden is there for. It keeps the video at
   the size it had before the text column was widened for the headline, instead
   of the two competing for the same pixels. */
.hero .feature-shot{width:calc(100% + clamp(48px,11vw,220px))}
@media(max-width:1000px){.hero .feature-shot{width:100%}}

/* ------------------------------------------------------------ responsive */
@media(max-width:1000px){
  .hero-grid,.feature,.cta{grid-template-columns:minmax(0,1fr)}
  .feature--flip .feature-copy,.feature--flip .feature-shot{order:initial}
  .shot--bleed{width:100%}
  .figures{grid-template-columns:repeat(2,1fr)}
  .fig{border-left:0;border-top:1px solid var(--line-dk)}
  .fig:nth-child(odd){border-right:1px solid var(--line-dk)}
  .cards,.steps,.tiers,.faq{grid-template-columns:minmax(0,1fr)}
  .prod-head{grid-template-columns:minmax(0,1fr)}
  .prod-aside{display:none}
  .cta .h2{max-width:none}
  .hero::after{display:none}
}
@media(max-width:640px){
  .figures{grid-template-columns:1fr}
  .fig:nth-child(odd){border-right:0}
  .btn{width:100%}
  .hero-cta .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ===========================================================================
   Checkout modal. Opened from a tier's "Претплати се" button; see
   assets/checkout.js. The dialog is plain markup hidden with [hidden], so with
   no JavaScript the page is exactly what it was before this existed.
   =========================================================================== */
.co[hidden]{display:none}
.co{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px}
.co-back{position:absolute;inset:0;background:rgba(6,11,8,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.co-box{position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 40px);
  overflow:auto;background:var(--white);border-radius:22px;padding:30px 28px 26px;
  box-shadow:0 30px 80px -24px rgba(6,11,8,.6);
  animation:co-in .22s cubic-bezier(.2,.8,.3,1)}
@keyframes co-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.co-box{animation:none}}
.co-x{position:absolute;top:14px;right:16px;width:32px;height:32px;border:0;
  border-radius:9px;background:transparent;color:var(--faint);font-size:24px;
  line-height:1;cursor:pointer}
.co-x:hover{background:var(--paper);color:var(--ink)}
.co-box .h2{font-size:24px;letter-spacing:-.03em;margin:0 32px 0 0}
.co-lede{margin:9px 0 0;font-size:14px;line-height:1.5;color:var(--soft)}

/* The package, restated. Green enough to be the anchor of the dialog without
   using the lime, which belongs to the button underneath it. */
.co-pick{margin:20px 0 22px;padding:15px 17px;border-radius:15px;
  background:var(--forest);color:#E9F2EC}
.co-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8FA89A}
.co-tier{display:block;margin:7px 0 10px;font-size:21px;font-weight:800;
  letter-spacing:-.025em;color:var(--lime)}
.co-amt b{font-size:25px;font-weight:800;letter-spacing:-.03em}
.co-amt i{font-style:normal;font-size:13px;color:#B7CBBF}
.co-eur{display:block;margin-top:4px;font-size:13px;color:#9DB3A6}

.co-lab{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.co-in{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--white);color:var(--ink);font:500 15px/1.3 var(--sans)}
.co-in:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(15,123,92,.18)}
.co-go{width:100%;margin-top:14px;justify-content:center}
.co-fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--faint)}
/* The business-capacity confirmation. Above the button, not under it: it is a
   thing the buyer states, not fine print about what happens next. */
.co-b2b{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;
  font-size:12.5px;line-height:1.5;color:var(--muted);cursor:pointer}
.co-b2b input{flex:none;margin-top:2px;width:16px;height:16px;accent-color:var(--accent)}

.co-sep{display:flex;align-items:center;gap:12px;margin:20px 0 14px;
  color:var(--faint);font-size:12.5px}
.co-sep::before,.co-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.co-g{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  padding:11px 16px;border:1px solid var(--line);border-radius:11px;
  color:var(--ink);font:600 14.5px/1.2 var(--sans);text-decoration:none}
.co-g:hover{border-color:var(--faint);background:var(--paper)}
.co-g svg{width:18px;height:18px;flex:none}
.co-alt[hidden]{display:none}

@media(max-width:480px){.co{padding:0;align-items:flex-end}
  .co-box{max-width:none;border-radius:22px 22px 0 0;max-height:92dvh}}

/* The company's legal identity, spelled out in the footer. A card acquirer's
   review looks for exactly this -- registered name, registered address, and a
   reachable phone -- on every page, which is why it lives in the shared
   footer rather than only on the legal pages. */
.ft-legal{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line-dk);
  font-size:12.5px;line-height:1.7;color:#8FA89A}
.ft-legal a{color:#B7CBBF;text-decoration:none}
.ft-legal a:hover{color:#E9F2EC;text-decoration:underline}

/* ===========================================================================
   Pricing: the billing-period toggle, and the feature table.
   =========================================================================== */

/* Both prices are in the markup; this decides which is on screen. Annual is
   the default, so it is what a reader with no JavaScript sees -- the toggle
   only adds .is-monthly, it is never what makes a price appear. */
.p-mo{display:none}
.tiers.is-monthly .p-yr{display:none}
.tiers.is-monthly .p-mo{display:block}

/* The term, stated once under the toggle: the two buttons are a payment
   schedule, not two lengths of subscription, and the page said nothing
   about which until a customer reached the cancellation clause. */
.ptog-term{margin:-22px auto 34px;text-align:center;font-size:14px;color:var(--soft)}
.ptog{display:flex;align-items:center;gap:6px;width:max-content;margin:0 auto 34px;
  padding:5px;border-radius:999px;background:var(--white);border:1px solid var(--line)}
.ptog-b{border:0;background:transparent;cursor:pointer;padding:9px 20px;border-radius:999px;
  font:700 14px/1 var(--sans);color:var(--soft);transition:background .16s,color .16s}
.ptog-b:hover{color:var(--ink)}
.ptog-b.is-on{background:var(--forest);color:#E9F2EC}
/* Sits on the Yearly button, not beside the pair: floating between the two it
   read as a claim about both periods, and it is only true of one. */
.ptog-save{position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  white-space:nowrap;padding:3px 9px;border-radius:999px;
  background:var(--lime);color:var(--forest);
  font:800 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transition:opacity .25s var(--ease-out);pointer-events:none}
/* Only while Yearly is the chosen period. */
.ptog-b[data-period="year"].is-on .ptog-save{opacity:1}
.ptog-b{position:relative}
@media(max-width:520px){.ptog{width:100%;justify-content:center;flex-wrap:wrap}
  .ptog-save{top:-10px}}

/* The denar figure and the "or the other period" line under each price. The
   denar line is the one an invoice is actually raised in, so it is stated on
   the card and not only in the checkout. */
.p-mkd{margin:6px 0 0;font:600 14px/1.4 var(--sans);color:var(--soft)}
.p-alt{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--faint)}
.tier--hero .p-mkd{color:#B7CBBF}
.tier--hero .p-alt{color:#9DB3A6}

/* The comparison table. It scrolls sideways on a narrow screen rather than
   wrapping: a cell that wraps to three lines stops being scannable, which is
   the only thing this table is for. */
.ftab-wrap{margin-top:clamp(56px,7vw,96px)}
.ftab-scroll{margin-top:26px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:18px;background:var(--white)}
.ftab{width:100%;min-width:620px;border-collapse:collapse;font-size:14.5px}
.ftab th,.ftab td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.ftab thead th{position:sticky;top:0;background:var(--forest);color:#E9F2EC;
  font:700 13.5px/1.3 var(--sans);letter-spacing:-.01em;border-bottom:0}
.ftab thead th:first-child{border-radius:18px 0 0 0}
.ftab thead th:last-child{border-radius:0 18px 0 0}
.ftab thead th.hero{background:var(--forest-3)}
.ftab tbody tr:last-child th,.ftab tbody tr:last-child td{border-bottom:0}
.ftab tbody tr:nth-child(even){background:var(--paper)}
.ftab tbody th{font-weight:600;color:var(--ink);line-height:1.4}
.ftab td{text-align:center;width:120px;white-space:nowrap}
/* Each tier gets its own tint down the whole column, so an eye tracking one
   package does not have to keep finding its place against the header. Про is
   the recommended one and is the strongest of the three. */
.ftab tbody td:nth-child(2){background:rgba(15,123,92,.035)}
.ftab tbody td:nth-child(3){background:rgba(15,123,92,.10);
  box-shadow:inset 1px 0 0 rgba(15,123,92,.18),inset -1px 0 0 rgba(15,123,92,.18)}
.ftab tbody td:nth-child(4){background:rgba(6,42,30,.05)}
.ftab tbody tr:last-child td:nth-child(3){border-radius:0 0 4px 4px}
.ftab .yes{color:var(--green);font-size:18px;font-weight:800}
.ftab .no{color:#C3CCC0;font-size:18px;font-weight:800}
/* Прашај AI is the reason to take Про, so the row says so rather than sitting
   in the same grey as "number of users". */
.ftab tbody tr.hi th{background:var(--forest);color:#fff;font-weight:800;
  border-bottom-color:var(--forest-3)}
.ftab tbody tr.hi th::after{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--lime);margin-left:9px;vertical-align:.08em}
.ftab tbody tr.hi td{background:rgba(185,242,39,.16)}
.ftab tbody tr.hi td:nth-child(3){background:rgba(185,242,39,.30)}
.ftab tbody tr.hi .yes{color:#0A5942}
.ftab tbody tr.hi .no{color:#9AA79A}
.ftab .txt{font-weight:700;color:var(--ink)}
.ftab .soon span{display:inline-block;padding:3px 9px;border-radius:999px;
  background:#FBEEDA;color:var(--warm);font:700 11px/1.4 var(--sans)}
@media(max-width:560px){.ftab th,.ftab td{padding:11px 12px}
  .ftab td{width:88px}}

/* ------------------------------------------------------------- ask AI demo
   A full screen with one thing on it. The section plays itself once, when it
   scrolls into view; before that it sits at its finished state so that with
   scripting off the visitor still reads a real question and a real answer
   rather than an empty box. */
.askdemo{
  position:relative;overflow:hidden;background:var(--forest);color:#E9F2EC;
  min-height:100svh;display:grid;place-items:center;
  padding-block:clamp(72px,10vw,120px);
}
.askdemo-aura{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52rem 34rem at 12% -6%, rgba(53,216,155,.20), transparent 62%),
    radial-gradient(44rem 30rem at 92% 6%, rgba(84,178,224,.16), transparent 64%),
    radial-gradient(40rem 28rem at 50% 108%, rgba(185,242,39,.14), transparent 62%);
}
.askdemo-in{position:relative;width:min(860px,100%);padding-inline:var(--pad);text-align:center}
.askdemo .eyebrow{color:var(--lime)}
.askdemo-h{
  font-size:clamp(28px,4.2vw,52px);line-height:1.04;letter-spacing:-.04em;font-weight:800;
  margin-bottom:clamp(28px,4vw,44px);
}

/* the box */
@property --asksnake{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ask-snake{to{--asksnake:360deg}}
.askbox{
  position:relative;border-radius:16px;padding:2px;text-align:left;
  background:conic-gradient(from var(--asksnake),
    transparent 0 60%, var(--green-lt) 74%, var(--lime) 83%, #54B2E0 90%, transparent 97%);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.75);
}
/* Only while it is thinking. A ring that spins for ever is decoration; one that
   starts when the question lands and stops when the answer does is a state. */
.askbox.is-idle{background:rgba(255,255,255,.14)}
.askbox.is-thinking{animation:ask-snake 1.5s linear infinite}
.askbox-q,.askbox-state{background:#07211A;border-radius:14px}
.askbox-q{
  padding:22px 24px;font-size:clamp(16px,1.7vw,20px);line-height:1.45;
  min-height:calc(2.9em + 44px);color:#EAF3ED;
}
.askcur{
  display:inline-block;width:2px;height:1.05em;vertical-align:-.16em;margin-left:2px;
  background:var(--lime);animation:ask-blink 1s steps(1) infinite;
}
@keyframes ask-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.askbox-q.is-done .askcur{display:none}
.askbox-state{
  display:flex;align-items:center;gap:10px;margin-top:2px;padding:12px 24px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-lt);border-radius:0 0 14px 14px;
}
/* display:flex on .askbox-state beats [hidden]'s display:none, so the thinking
   row stayed on screen under the finished answer. */
.askbox-state[hidden]{display:none}
.askdots{display:inline-flex;gap:4px}
.askdots i{width:5px;height:5px;border-radius:50%;background:var(--green-lt);display:block;
  animation:ask-dot 1.1s ease-in-out infinite}
.askdots i:nth-child(2){animation-delay:.15s}
.askdots i:nth-child(3){animation-delay:.3s}
@keyframes ask-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* the answer */
.askans{
  margin-top:22px;text-align:left;border-radius:16px;padding:24px 26px;
  background:rgba(255,255,255,.05);border:1px solid rgba(185,242,39,.16);
  font-size:clamp(15px,1.5vw,17px);line-height:1.62;color:#C7DBCE;
}
.askans p{margin:0 0 12px}
.askans p:last-child{margin-bottom:0}
.askans b{color:#fff}
.askans .n{color:var(--lime);font-weight:700;font-variant-numeric:tabular-nums}
/* Real vendors win real contracts and it is all public record, but a marketing
   page is not the place to name them: on a screenshot nobody reads the name,
   in a sentence everybody does. Blurred rather than replaced with "Фирма А",
   so the shape of a real answer survives. The text is still in the DOM, so it
   is left out of the accessibility tree instead of being read out clearly to
   exactly the visitors who cannot see the blur. */
.askans .blurname{
  filter:blur(4.5px);opacity:.85;user-select:none;
  color:#DCEFE2;font-weight:600;white-space:nowrap;
}
.askans.is-typing::after{
  content:"";display:inline-block;width:2px;height:1.05em;vertical-align:-.16em;
  margin-left:1px;background:var(--lime);animation:ask-blink 1s steps(1) infinite;
}
/* The question box is already fixed-height; this keeps the whole section from
   resizing when the script swaps one turn for the other. */
.askans{transition:min-height .25s ease}
@media(max-width:640px){.askdemo{min-height:auto}}
@media(prefers-reduced-motion:reduce){
  .askbox.is-thinking{animation:none}
  .askcur,.askans.is-typing::after,.askdots i{animation:none}
}

/* A feature-sized reel: same frame as the hero's, sized by its column. */
.reel--feat{aspect-ratio:auto;height:auto}
.reel--feat video{position:static;width:100%;height:auto;display:block}

/* ------------------------------------------------- open tenders, animated
   Stands in for a screenshot on a section that is about deciding rather than
   about a screen. A list of tenders with a scan running down it; the ones that
   are yours light up as it passes. No image request, no video, and it holds
   still for anyone who asked for that. */
.tenderviz{
  position:relative;overflow:hidden;border-radius:18px;padding:26px 24px;
  background:linear-gradient(160deg,#07211A,#041410);
  box-shadow:0 0 0 1px rgba(185,242,39,.14),0 40px 80px -34px rgba(0,0,0,.6);
}
.tv-glow{
  position:absolute;inset:-30% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(53,216,155,.22),transparent 70%);
}
.tv-stack{position:relative;display:flex;flex-direction:column;gap:11px}
.tv-row{display:flex;align-items:center;gap:11px;opacity:.5;transition:opacity .4s ease}
.tv-dot{width:7px;height:7px;border-radius:50%;background:#3E5A4C;flex:none}
.tv-bar{
  height:9px;border-radius:999px;width:var(--w);
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
}
.tv-tag{
  font:800 9px/1 var(--mono);letter-spacing:.12em;padding:3px 7px;border-radius:5px;
  background:var(--lime);color:var(--forest);opacity:0;transition:opacity .4s ease;
}
/* Each matching row lights a beat after the one before it, so the scan reads
   as finding them rather than as three lamps on a timer. */
.tv-row--hit{animation:tv-hit 5.5s ease-in-out infinite}
.tv-row--hit .tv-dot{background:var(--lime)}
.tv-row--hit .tv-bar{background:linear-gradient(90deg,var(--green-lt),rgba(53,216,155,.25))}
.tv-row--hit .tv-tag{animation:tv-tag 5.5s ease-in-out infinite}
.tv-stack .tv-row--hit:nth-of-type(3){animation-delay:.5s}
.tv-stack .tv-row--hit:nth-of-type(3) .tv-tag{animation-delay:.5s}
.tv-stack .tv-row--hit:nth-of-type(6){animation-delay:1s}
.tv-stack .tv-row--hit:nth-of-type(6) .tv-tag{animation-delay:1s}
@keyframes tv-hit{0%,12%{opacity:.5}22%,72%{opacity:1}88%,100%{opacity:.5}}
@keyframes tv-tag{0%,14%{opacity:0}24%,70%{opacity:1}86%,100%{opacity:0}}
/* the scan line */
.tv-scan{
  position:absolute;left:0;right:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(185,242,39,.13),transparent);
  animation:tv-scan 5.5s ease-in-out infinite;
}
@keyframes tv-scan{0%{top:-40%}55%{top:102%}100%{top:102%}}
@media(prefers-reduced-motion:reduce){
  .tv-row--hit,.tv-row--hit .tv-tag,.tv-scan{animation:none}
  .tv-row--hit{opacity:1}.tv-row--hit .tv-tag{opacity:1}.tv-scan{display:none}
}

/* The demo form's honeypot. Off-screen rather than display:none, because a
   bot that skips hidden fields would skip this one too -- the point is that it
   is invisible to a person and perfectly fillable by a script. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------ onboarding, animated
   The same family as .tenderviz below-of: a dark panel that acts out what the
   copy beside it says, in CSS only. Here: a field being typed into, and the
   categories that answer it being picked one after another. A screenshot of
   the real onboarding form showed a form; this shows the choosing, which is
   what the section is about. */
.onbviz{
  position:relative;overflow:hidden;border-radius:18px;padding:26px 24px;
  background:linear-gradient(160deg,#07211A,#041410);
  box-shadow:0 0 0 1px rgba(185,242,39,.14),0 40px 80px -34px rgba(0,0,0,.6);
}
.ob-glow{
  position:absolute;inset:-30% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(53,216,155,.22),transparent 70%);
}
.ob-in{position:relative}
.ob-field{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(185,242,39,.18);
}
.ob-mag{width:13px;height:13px;flex:none;border:1.6px solid #6F8C7D;border-radius:50%;
  position:relative}
.ob-mag::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:1.6px;
  background:#6F8C7D;transform:rotate(45deg)}
/* The word types itself by revealing one character at a time -- a steps()
   animation on width, which is why the text is monospace: with a proportional
   face the caret would drift off the last letter. */
.ob-typed{
  font:700 13px/1 var(--mono);color:#DCEBE2;white-space:nowrap;overflow:hidden;
  animation:ob-type 7s steps(11) infinite;
}
.ob-caret{width:1.5px;height:14px;background:var(--lime);animation:ob-caret 1s steps(2) infinite}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ob-chip{
  font:700 11px/1 var(--sans);letter-spacing:.01em;padding:7px 11px;border-radius:999px;
  color:#9FB6A9;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  opacity:.55;
}
/* Picked one at a time rather than all at once: three chips lighting together
   reads as a state, one after another reads as somebody choosing. */
.ob-chip--on{animation:ob-pick 7s ease-in-out infinite}
.ob-chips .ob-chip--on:nth-of-type(2){animation-delay:.45s}
.ob-chips .ob-chip--on:nth-of-type(4){animation-delay:.9s}
.ob-chips .ob-chip--on:nth-of-type(6){animation-delay:1.35s}
/* What the choosing is for, in one line: the whole year on the left, what is
   left of it after the chips on the right. It is the section's claim as a
   number rather than as an adjective. */
.ob-foot{
  display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;
}
.ob-all{font:700 12px/1 var(--mono);color:#62806F;text-decoration:line-through;
  text-decoration-color:rgba(98,128,111,.5)}
.ob-arrow{font:700 13px/1 var(--mono);color:#62806F}
.ob-mine{
  display:inline-flex;align-items:center;gap:7px;font:800 13px/1 var(--mono);
  color:var(--lime);animation:ob-mine 7s ease-in-out infinite;
}
.ob-tick{
  width:16px;height:16px;flex:none;border-radius:50%;background:var(--lime);
  position:relative;
}
.ob-tick::after{content:"";position:absolute;left:5px;top:4px;width:4px;height:7px;
  border:solid var(--forest);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
@keyframes ob-type{0%{width:0}22%,74%{width:6.6em}86%,100%{width:0}}
@keyframes ob-caret{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes ob-pick{
  0%,26%{opacity:.55;color:#9FB6A9;background:rgba(255,255,255,.05);
         border-color:rgba(255,255,255,.09)}
  36%,78%{opacity:1;color:var(--forest);background:var(--lime);border-color:var(--lime)}
  90%,100%{opacity:.55;color:#9FB6A9;background:rgba(255,255,255,.05);
           border-color:rgba(255,255,255,.09)}
}
@keyframes ob-mine{0%,40%{opacity:0;transform:translateX(-6px)}
  52%,84%{opacity:1;transform:translateX(0)}94%,100%{opacity:0;transform:translateX(-6px)}}
@media(prefers-reduced-motion:reduce){
  .ob-typed,.ob-caret,.ob-chip--on,.ob-mine{animation:none}
  .ob-typed{width:auto}
  .ob-chip--on{opacity:1;color:var(--forest);background:var(--lime);border-color:var(--lime)}
  .ob-mine{opacity:1;transform:none}
}

/* -------------------------------------------------- calendar, animated
   Twelve months as bars that fill in, and one planned item rising out of the
   month it sits in and turning into a tender. That is the whole claim of the
   section -- you see it months before it is an оглас -- and a still of the
   calendar screen could not make it. */
.calviz{
  position:relative;overflow:hidden;border-radius:18px;padding:26px 24px 22px;
  background:linear-gradient(160deg,#07211A,#041410);
  box-shadow:0 0 0 1px rgba(185,242,39,.14),0 40px 80px -34px rgba(0,0,0,.6);
}
.cv-glow{
  position:absolute;inset:-30% -10% auto -10%;height:70%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,rgba(53,216,155,.22),transparent 70%);
}
.cv-in{position:relative}
/* The card first: it sits above the bars and is what the eye should land on. */
.cv-card{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(185,242,39,.2);
  animation:cv-card 8s ease-in-out infinite;
}
.cv-card b{font:800 12px/1.3 var(--sans);color:#EAF4EE;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-card i{font:700 11px/1 var(--mono);color:var(--green-lt);font-style:normal;flex:none}
.cv-tag{
  font:800 9px/1 var(--mono);letter-spacing:.12em;padding:3px 7px;border-radius:5px;flex:none;
  background:rgba(53,216,155,.2);color:var(--green-lt);
}
/* The second tag is the same chip in the same place; it fades in over the
   first, so the item is seen turning into a tender rather than two chips
   appearing side by side. */
/* One slot, two chips stacked in it, so the item is seen turning into a
   tender rather than wearing two labels at once. The slot is as wide as the
   wider word, or the line would jump when they swap. */
.cv-tags{position:relative;flex:none;width:52px;height:15px}
.cv-tags .cv-tag{position:absolute;left:0;top:0}
.cv-tag--plan{animation:cv-plan 8s ease-in-out infinite}
.cv-tag--live{background:var(--lime);color:var(--forest);opacity:0;
  animation:cv-live 8s ease-in-out infinite}
.cv-months{display:flex;align-items:flex-end;gap:6px;margin-top:20px;height:74px}
.cv-m{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;height:100%}
.cv-m span{
  display:block;border-radius:4px 4px 0 0;height:var(--h);
  background:linear-gradient(180deg,rgba(53,216,155,.55),rgba(53,216,155,.14));
  transform-origin:bottom;animation:cv-grow 8s ease-out infinite;
}
.cv-m i{font:700 8.5px/1 var(--mono);color:#62806F;text-align:center;font-style:normal}
.cv-m--now span{background:linear-gradient(180deg,var(--lime),rgba(185,242,39,.3))}
.cv-m--now i{color:var(--lime)}
.cv-months .cv-m:nth-child(1) span{animation-delay:0s}
.cv-months .cv-m:nth-child(2) span{animation-delay:.06s}
.cv-months .cv-m:nth-child(3) span{animation-delay:.12s}
.cv-months .cv-m:nth-child(4) span{animation-delay:.18s}
.cv-months .cv-m:nth-child(5) span{animation-delay:.24s}
.cv-months .cv-m:nth-child(6) span{animation-delay:.3s}
.cv-months .cv-m:nth-child(7) span{animation-delay:.36s}
.cv-months .cv-m:nth-child(8) span{animation-delay:.42s}
.cv-months .cv-m:nth-child(9) span{animation-delay:.48s}
.cv-months .cv-m:nth-child(10) span{animation-delay:.54s}
.cv-months .cv-m:nth-child(11) span{animation-delay:.6s}
.cv-months .cv-m:nth-child(12) span{animation-delay:.66s}
@keyframes cv-grow{0%{transform:scaleY(0)}18%,82%{transform:scaleY(1)}100%{transform:scaleY(1)}}
@keyframes cv-card{0%,8%{opacity:0;transform:translateY(8px)}
  20%,88%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
@keyframes cv-plan{0%,52%{opacity:1}62%,88%{opacity:0}100%{opacity:1}}
@keyframes cv-live{0%,52%{opacity:0}62%,88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .cv-card,.cv-tag--plan,.cv-tag--live,.cv-m span{animation:none}
  .cv-card{opacity:1;transform:none}.cv-tag--live{display:none}.cv-tag--plan{opacity:1}
  .cv-m span{transform:none}
}

/* Turn two, as it reads when the script does not run: a plain question above a
   plain answer, under the box. The script removes it from the flow and cycles
   it through the box instead. */
.askturn{margin-top:22px;text-align:left}
.askturn-q{
  margin:0 0 10px;padding:18px 24px;border-radius:14px;
  background:#07211A;border:1px solid rgba(255,255,255,.14);
  font-size:clamp(16px,1.7vw,20px);line-height:1.45;color:#EAF3ED;
}

/* ---------------------------------------------------------------- contact
   A dialog, not a page. There is no contact form on this site and adding one
   would mean a route, a mailbox and a spam problem for what is two lines of
   detail. Both entry points keep their mailto:, so with scripting off the link
   still does the obvious thing. */
.cdlg{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.cdlg[hidden]{display:none}
.cdlg-bg{position:absolute;inset:0;background:rgba(6,20,14,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cdlg-box{
  position:relative;width:min(440px,100%);border-radius:20px;padding:30px 28px 26px;
  background:linear-gradient(160deg,#0A3A29,#062A1E 72%);color:#E9F2EC;
  box-shadow:0 0 0 1px rgba(185,242,39,.20),0 40px 90px -30px rgba(0,0,0,.7);
  animation:cdlg-in .28s var(--ease-out) both;
}
@keyframes cdlg-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1}}
.cdlg-x{position:absolute;right:14px;top:12px;width:32px;height:32px;border:0;
  border-radius:9px;background:rgba(255,255,255,.08);color:#E9F2EC;font-size:20px;
  line-height:1;cursor:pointer}
.cdlg-x:hover{background:rgba(255,255,255,.16)}
.cdlg .eyebrow{color:var(--lime);margin-bottom:10px}
.cdlg-h{font-size:clamp(22px,3vw,28px);line-height:1.1;letter-spacing:-.035em;font-weight:800}
.cdlg-p{margin-top:12px;font-size:14.5px;line-height:1.5;color:#B7CBBF}
.cdlg-row{display:flex;align-items:center;gap:13px;margin-top:14px;padding:13px 15px;
  border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);transition:border-color .2s,background .2s}
.cdlg-row:hover{background:rgba(255,255,255,.11);border-color:var(--lime);text-decoration:none}
.cdlg-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(185,242,39,.16);color:var(--lime);font-size:16px}
.cdlg-row b{display:block;font-size:15px;letter-spacing:-.01em}
.cdlg-row small{display:block;margin-top:2px;font-size:12px;color:#9DB3A6}
.cdlg-cta{width:100%;margin-top:18px;justify-content:center}
@media(prefers-reduced-motion:reduce){.cdlg-box{animation:none}}


/* The annual card quotes a per-month figure, so the modal states the term.
   Empty for the monthly package, and :empty keeps it from reserving a line. */
.co-term{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:#5C6F66}
.co-term:empty{display:none}