/* ============================================ VVARB — the sales page only */
:root{
  --glow-up:#0c5a45;
  --glow-info:#123a6b;
  --glow-up-2:#0d3b30;
  --up-line:#1d5645;
  --line-strong:#22384a;
  --rail:#41566b;
  --card-up:#0f1a17;
  --card-info:#101825;
  --info-line:#24425f;
  --line-hover:#26404f;
  --up-bg:#123028;
  --brand-a:#0c3b2e;
  --brand-b:#071a15;
  --brand-line:#164c3b;
  --bar-bg:#0a1017;
  --nav-on:#0f2119;
  --warn-line:#4a3410;
  --warn-bg:#17120a;
  --chip-glass:rgba(8,12,18,.72);
  --tag-glass:rgba(10,23,18,.86);
  --pill-glass:rgba(18,48,40,.55);
  --hairline:rgba(255,255,255,.02);
}

/* --------------------------------------------------------------- light */
/*
 * The same layout in daylight. Only the palette changes: every colour above
 * comes from a token, so nothing here needs to repeat a rule — and the dark
 * theme is untouched by definition.
 */
:root[data-theme="light"]{
  --glow-up:#c8ede0;
  --glow-info:#cfe0f7;
  --glow-up-2:#d6f0e6;
  --up-line:#a5dcc8;
  --line-strong:#b8c5d2;
  --rail:#c2ccd8;
  --card-up:#eef8f4;
  --card-info:#eef3fa;
  --info-line:#a9c9f2;
  --line-hover:#b8c5d2;
  --up-bg:#e8f7f1;
  --brand-a:#0c3b2e;
  --brand-b:#071a15;
  --brand-line:#164c3b;
  --bar-bg:#ffffff;
  --nav-on:#e4f5ee;
  --warn-line:#e7cb92;
  --warn-bg:#fdf5e6;
  --chip-glass:rgba(255,255,255,.85);
  --tag-glass:rgba(232,247,241,.9);
  --pill-glass:rgba(232,247,241,.85);
  --hairline:rgba(15,23,32,.05);
}
/* Loaded on top of site.css. Everything here is presentation for the landing:
   the hero, the section rhythm, the screenshot frames and the motion. Nothing
   in here is used by the cabinet or the terminal. */

/* ------------------------------------------------------------------ motion */
/* One class does all the entrance animation. Elements start shifted and
   transparent, and an observer adds .in when they scroll into view. --d
   staggers a row without needing a class per position. */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.7,.3,1) var(--d,0s),
             transform .62s cubic-bezier(.22,.7,.3,1) var(--d,0s);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}

/* Motion is decoration here, so it is the first thing to go when the visitor
   has asked the system for less of it. */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-glow i{animation:none}
  html{scroll-behavior:auto}
  .shot.tilt:hover img{transform:none}
}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;padding:14px 0 0}
.hero-in{padding-bottom:10px}

/* Three slow drifting lights behind the headline. Blurred and low opacity, so
   they read as depth rather than as shapes. */
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-glow i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(80px);opacity:.5;
}
.hero-glow i:nth-child(1){
  width:520px;height:420px;left:-8%;top:-14%;
  background:radial-gradient(circle,var(--glow-up),transparent 68%);
  animation:drift1 22s ease-in-out infinite;
}
.hero-glow i:nth-child(2){
  width:460px;height:380px;right:-6%;top:-8%;
  background:radial-gradient(circle,var(--glow-info),transparent 68%);
  animation:drift2 27s ease-in-out infinite;
}
.hero-glow i:nth-child(3){
  width:400px;height:300px;left:44%;top:38%;
  background:radial-gradient(circle,var(--glow-up-2),transparent 70%);
  animation:drift3 31s ease-in-out infinite;opacity:.34;
}
@keyframes drift1{50%{transform:translate(70px,44px) scale(1.12)}}
@keyframes drift2{50%{transform:translate(-58px,52px) scale(1.08)}}
@keyframes drift3{50%{transform:translate(40px,-46px) scale(1.14)}}

.hero .wrap{position:relative;z-index:1}

.eyebrow{
  display:inline-block;padding:5px 12px;border-radius:20px;
  border:1px solid var(--up-line);background:var(--pill-glass);
  color:var(--up);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(30px,5.4vw,54px);line-height:1.1;letter-spacing:-.03em;
  max-width:15em;margin-bottom:16px;
}
.hero-lead{
  color:var(--txt-2);font-size:clamp(15px,1.7vw,18px);line-height:1.62;
  max-width:40em;
}
.hero-cta{margin-top:26px}
.btn.big{padding:14px 26px;font-size:15px;border-radius:12px}
.hero-note{margin-top:14px;color:var(--txt-3);font-size:12.5px}

/* ------------------------------------------------------------- screenshots */
/* A screenshot of a dark interface on a dark page needs an edge, or it bleeds
   into the background and stops looking like a product. */
.shot{position:relative;margin:0}
.shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
}
.hero-shot{margin-top:38px}
.hero-shot img{
  border-color:var(--line-strong);
  box-shadow:0 30px 90px -30px rgba(0,229,160,.28), 0 0 0 1px var(--hairline);
}
.shot.small img{border-radius:11px}
.shot figcaption{
  margin-top:9px;color:var(--txt-3);font-size:12.5px;line-height:1.5;
}
/* A screenshot the visitor points at should react — barely. */
.shot.tilt img{transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s}
.shot.tilt:hover img{
  transform:translateY(-5px) scale(1.012);
  box-shadow:0 26px 60px -28px rgba(0,229,160,.32);
}

/* ----------------------------------------------------------------- slider */
/* Two screenshots in one frame: the same terminal in each of its modes. It
   advances on its own so both get seen, and stops the moment a visitor takes
   hold of it — an image that keeps moving under the cursor is a nuisance. */
.slider{position:relative;overflow:hidden;border-radius:14px}
.slider .slide{
  display:block;width:100%;height:auto;
  border:1px solid var(--line-strong);border-radius:14px;background:var(--panel);
  transition:opacity .55s ease;
}
/* Later slides sit on top of the first, which alone keeps the box's height. */
.slider .slide:not(:first-child){position:absolute;inset:0;height:100%;object-fit:cover;object-position:top}
.slider .slide{opacity:0}
.slider .slide.on{opacity:1}

.slide-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:56px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--chip-glass);color:var(--txt-2);
  font-size:24px;line-height:1;display:grid;place-items:center;
  opacity:0;transition:opacity .2s,color .2s,border-color .2s;z-index:2;
}
.slider:hover .slide-nav,.slide-nav:focus-visible{opacity:1}
.slide-nav:hover{color:var(--up);border-color:var(--up-line)}
.slide-nav.prev{left:10px}
.slide-nav.next{right:10px}

.slide-label{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:4px 11px;border-radius:20px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--up-line);background:var(--tag-glass);color:var(--up);
}
.slide-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
.slide-dots button{
  width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;
  border:0;background:var(--rail);transition:background .2s,width .2s;
}
.slide-dots button.on{background:var(--up);width:20px;border-radius:20px}

@media (max-width:640px){
  .slide-nav{opacity:1;width:32px;height:46px;font-size:20px}
}

/* --------------------------------------------------------------- sections */
.wrap section,section.wrap{scroll-margin-top:76px}
.sec-h{
  font-size:clamp(21px,3vw,31px);font-weight:700;letter-spacing:-.025em;
  margin:0 0 10px;
}
.sec-sub{color:var(--txt-2);max-width:44em;margin-bottom:30px}
section.wrap{padding-top:64px;padding-bottom:0}
section.wrap:last-of-type{padding-bottom:40px}

.kicker{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--up);
  margin-bottom:9px;
}

/* ---------------------------------------------------------------- counters */
.counts{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.count{background:var(--panel);padding:22px 18px;text-align:center}
.count b{
  display:block;font-size:clamp(26px,3.6vw,38px);font-weight:700;
  letter-spacing:-.03em;color:var(--up);font-variant-numeric:tabular-nums;
}
.count span{display:block;margin-top:4px;color:var(--txt-3);font-size:12.5px}

/* ------------------------------------------------------------ mode blocks */
/* The screenshots that used to sit beside these were the same table twice and
   said less than the words did. Two panels, side by side, with the futures one
   tinted differently so the eye keeps them apart. */
.modes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.mode{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--card-up),var(--panel) 55%);
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  transition:border-color .2s,transform .2s;
}
.mode:hover{border-color:var(--up-line);transform:translateY(-3px)}
/* The accent follows the mode, not the position — the order of these two
   panels has changed once already. */
.mode.perp{background:linear-gradient(160deg,var(--card-info),var(--panel) 55%)}
.mode.perp:hover{border-color:var(--info-line)}
/* A thin coloured edge along the top, so the two panels read as a pair of
   different things rather than as one repeated. */
.mode::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--up)}
.mode.perp::before{background:var(--info)}
.mode h3{font-size:clamp(18px,2.2vw,23px);font-weight:700;letter-spacing:-.02em;margin-bottom:11px}
.mode p{color:var(--txt-2);margin-bottom:18px}
.kicker.alt{color:var(--info)}
.ticks.alt li::before{background:var(--info);box-shadow:0 0 0 4px rgba(77,157,255,.13)}

.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:26px;color:var(--txt-2);font-size:14px;line-height:1.55}
.ticks li::before{
  content:"";position:absolute;left:3px;top:.52em;
  width:9px;height:9px;border-radius:50%;
  background:var(--up);box-shadow:0 0 0 4px rgba(0,229,160,.13);
}

/* ------------------------------------------------------------------ steps */
.steps{
  list-style:none;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.step{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;
  transition:border-color .2s,transform .2s;
}
.step:hover{border-color:var(--line-hover);transform:translateY(-3px)}
.step-n{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--up-bg);border:1px solid var(--up-line);color:var(--up);
  font-weight:700;font-size:13px;margin-bottom:13px;
}
.step h3{font-size:15.5px;margin-bottom:8px}
.step p{color:var(--txt-3);font-size:13.5px;margin-bottom:16px}

/* --------------------------------------------------------------- features */
.feats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.feat{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  transition:border-color .2s,transform .2s,background .2s;
}
.feat:hover{border-color:var(--up-line);background:var(--panel-2);transform:translateY(-3px)}
.feat .ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));border:1px solid var(--brand-line);
  color:var(--up);font-size:15px;margin-bottom:13px;
}
.feat h3{font-size:14.5px;margin-bottom:7px}
.feat p{color:var(--txt-3);font-size:13.5px;line-height:1.55}

/* The three step pictures come from different parts of the interface and are
   different shapes. One box and a top-anchored crop makes them a set: each
   shows its own opening lines, which is the part that carries the meaning. */
.step-shot img{
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
  border-radius:11px;
}

/* ---------------------------------------------------------------- venues */
.venues{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.venue{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;transition:border-color .18s,transform .18s,background .18s;
}
.venue:hover{border-color:var(--up-line);background:var(--panel-2);transform:translateY(-2px)}
a.venue:hover{text-decoration:none}
.venue-dot{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));border:1px solid var(--brand-line);
  color:var(--up);font-size:11px;font-weight:700;
}
.venue-n{font-size:13.5px;font-weight:600;color:var(--txt);line-height:1.2}
.venue-go{
  margin-top:3px;display:flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--txt-3);transition:color .18s;
}
.venue-go svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.venue:hover .venue-go{color:var(--up)}

/* ------------------------------------------------------------------- demo */
.demo-box{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
}
.demo-bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--bar-bg);
}
.demo-tab{
  padding:7px 14px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--txt-2);font-size:13px;cursor:pointer;transition:.15s;
}
.demo-tab:hover{background:var(--panel-2);color:var(--txt)}
.demo-tab.on{background:var(--nav-on);border-color:var(--up-line);color:var(--up)}
.demo-badge{
  margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);
  padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.demo-stage{position:relative;height:760px;background:var(--bg)}
.demo-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
/* Hidden by opacity rather than display: a pane that is display:none stops
   laying out, and comes back with its table measured at zero width. */
.demo-frame.on{opacity:1;pointer-events:auto}
.demo-wait{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:30px;color:var(--txt-3);font-size:14px;z-index:2;background:var(--bg);
}

/* The terminal is a wide-screen instrument. Below that width it is replaced by
   a picture of itself instead of being crushed into something misleading. */
.demo-small{display:none;margin-top:0}
@media (max-width:900px){
  .demo-box{display:none}
  .demo-small{display:block}
}

/* ---------------------------------------------------------------- gallery */
.gal{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* --------------------------------------------------------------- try it */
.try{
  margin-top:22px;padding:30px 26px;border-radius:16px;text-align:center;
  border:1px solid var(--up-line);
  background:radial-gradient(600px 200px at 50% 0%, rgba(0,229,160,.10), transparent 70%), var(--panel);
}
.try h3{font-size:clamp(18px,2.2vw,23px);letter-spacing:-.02em;margin-bottom:10px}
.try p{color:var(--txt-2);max-width:44em;margin:0 auto 18px}
.try .fineprint{margin-left:auto;margin-right:auto}

/* ------------------------------------------------------------ media deal */
.media-note{
  margin-top:18px;padding:22px 24px;border-radius:14px;
  border:1px solid var(--line);border-left:3px solid var(--info);
  background:var(--panel);
}
.media-note h3{font-size:16px;margin-bottom:9px}
.media-note p{color:var(--txt-2);margin-bottom:16px;max-width:52em}

/* --------------------------------------------------------------- pricing */
.fineprint{margin-top:16px;color:var(--txt-3);font-size:12.5px;max-width:44em}
.big-num{
  font-size:30px;font-weight:700;color:var(--up);letter-spacing:-.03em;
  margin-bottom:8px;line-height:1;
}

/* -------------------------------------------------------------------- faq */
.faq{display:grid;gap:10px}
.faq details{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  transition:border-color .2s;
}
.faq details[open]{border-color:var(--up-line)}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 18px;
  font-size:15px;font-weight:600;color:var(--txt);
  display:flex;align-items:flex-start;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;color:var(--up);font-size:19px;line-height:1;
  transition:transform .25s;flex:0 0 auto;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 17px;color:var(--txt-2);font-size:14px;line-height:1.62}

/* ------------------------------------------------------- honest + closing */
.honest{
  border:1px solid var(--line);border-left:3px solid var(--warn);
  border-radius:12px;background:var(--panel);padding:24px;
}
.honest h2{font-size:17px;margin:0 0 10px}
.honest p{color:var(--txt-2);max-width:52em}

.closing{
  text-align:center;padding:52px 26px;border-radius:18px;
  border:1px solid var(--up-line);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(0,229,160,.11), transparent 70%),
    var(--panel);
}
.closing h2{font-size:clamp(21px,3vw,30px);letter-spacing:-.025em;margin:0 0 12px}
.closing p{color:var(--txt-2);max-width:38em;margin:0 auto}

/* ------------------------------------------------------------- responsive */
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:22px;margin-bottom:44px}
  .split.flip .split-txt{order:0}
}
@media (max-width:640px){
  section.wrap{padding-top:46px}
  .hero-shot{margin-top:26px}
  .hero-glow i{filter:blur(58px)}
  .closing{padding:36px 18px}
}

/* ------------------------------------------------------------------ tools */
/* Text on one side, the actual card from the product on the other. Alternating
   sides stops three of these in a row reading as one long column. */
.tool{
  display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;
  padding:30px 28px;margin-bottom:18px;
  background:linear-gradient(160deg,var(--card-up),var(--panel) 55%);
  border:1px solid var(--line);border-radius:16px;
  transition:border-color .2s;
}
.tool:hover{border-color:var(--up-line)}
.tool.flip{background:linear-gradient(160deg,var(--card-info),var(--panel) 55%)}
.tool.flip:hover{border-color:var(--info-line)}
.tool.flip .tool-txt{order:2}
.tool.flip .tool-shot{order:1}
.tool h3{font-size:22px;line-height:1.25;margin:6px 0 12px;letter-spacing:-.01em}
.tool p{color:var(--txt-2);font-size:14.5px;line-height:1.65;margin-bottom:18px}
.tool .ticks{margin-bottom:20px}
.tool-shot img{
  border-color:var(--line-strong);
  box-shadow:0 20px 60px -26px var(--shadow, rgba(0,0,0,.6));
}
.tool-more{
  display:inline-block;font-size:14px;font-weight:600;color:var(--up);
}
.tool-more:hover{text-decoration:underline}
.tool.flip .tool-more{color:var(--info)}

@media (max-width:860px){
  .tool{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .tool.flip .tool-txt{order:1}
  .tool.flip .tool-shot{order:2}
}

/* --------------------------------------------------------------- includes */
/* Side by side, because the question people actually have is what the money
   changes — not what the product does in general. */
.includes{
  display:grid;grid-template-columns:1fr 1.25fr;gap:16px;margin-top:26px;
}
.inc-col{
  padding:24px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
}
.inc-col.paid{
  border-color:var(--up-line);
  background:linear-gradient(160deg,var(--card-up),var(--panel) 60%);
}
.inc-h{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-3);margin-bottom:16px;
}
.inc-col.paid .inc-h{color:var(--up)}
@media (max-width:820px){ .includes{grid-template-columns:1fr} }