/* Vantham landing page. Hand-written, no framework, no build step.
   Responsive via fluid type (clamp) and auto-fitting grids. */

:root{
  --blue:#3B82F6;
  --blue-dark:#2563EB;
  --ink:#1E2633;
  --ink-2:#39424F;
  --muted:#6B7280;
  --line:#E5E7EB;
  --paper:#FFFFFF;
  --paper-2:#F7F9FC;
  --radius:14px;
  --wrap:1120px;
  --shadow:0 1px 2px rgba(30,38,51,.05), 0 8px 24px rgba(30,38,51,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,32px)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px}
.brand img{width:auto; height:26px}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2.4vw,28px)}
.nav-links a{text-decoration:none; font-size:.94rem; font-weight:500; color:var(--ink-2)}
.nav-links a:hover{color:var(--blue)}
/* hide text links on small screens, keep the sign-in button */
@media (max-width:760px){ .nav-links a:not(.btn){display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72em 1.25em; border-radius:10px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-weight:600; font-size:.96rem; line-height:1;
  border:1px solid var(--blue);
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--blue-dark); border-color:var(--blue-dark)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:.58em 1em; font-size:.9rem}
.btn-lg{padding:.9em 1.5em; font-size:1rem}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-2); color:var(--ink); border-color:#D6DBE3}
.btn-invert{background:#fff; color:var(--ink); border-color:#fff}
.btn-invert:hover{background:#EEF2F7; color:var(--ink); border-color:#EEF2F7}
.btn-ghost-invert{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost-invert:hover{background:rgba(255,255,255,.1); color:#fff}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,72px); background:
  radial-gradient(1000px 420px at 12% -8%, rgba(59,130,246,.10), transparent 60%),
  radial-gradient(760px 340px at 92% 4%, rgba(59,130,246,.07), transparent 62%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 22px; padding:.45em 1em;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none}
h1{
  margin:0 0 14px;
  font-size:clamp(2.1rem,5vw,3.5rem);
  line-height:1.08; letter-spacing:-.02em; font-weight:700;
  /* "Learn. Test. Certify." must not wrap into three stacked words. */
  max-width:24ch; text-wrap:balance;
}
h1 .muted{color:var(--muted); font-weight:600}
/* The positioning line. Deliberately NOT h1-sized: when it was inside the h1 it
   rendered as three more giant grey lines and pushed the buttons off the fold. */
.subhead{
  margin:0 0 30px; max-width:26ch;
  font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.35;
  font-weight:500; color:var(--muted); letter-spacing:-.01em;
}
.lede{margin:0 0 30px; max-width:62ch; font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--ink-2)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.cta-row.center{justify-content:center}
.fineprint{margin:26px 0 0; font-size:.88rem; color:var(--muted); max-width:60ch}

/* ---------- hero two-column layout ---------- */
.hero-grid{
  display:grid; align-items:center; gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.hero-copy{min-width:0}
/* 520px was too big: at that scale the point cloud spread out and read as dust
   on the page rather than as one object. Smaller and denser reads as a sphere. */
.hero-visual{position:relative; aspect-ratio:1/1; width:100%; max-width:400px; margin-inline:auto}
.hero-visual canvas{display:block; width:100%; height:100%}
/* The globe is decoration. Below 900px the hero needs the full width for words,
   and a squeezed sphere reads as clutter, so it goes rather than shrinks. */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
}

/* The first screen ends with the top of the tour video showing (about the bottom sixth), so the
   video invites a scroll without pushing the headline down. Phones keep their natural height. */
@media (min-width:901px){
  .hero{min-height:calc(84vh - 68px); display:flex; align-items:center; box-sizing:border-box}
  .hero > .wrap{width:100%}
}

/* ---------- demo video and logos ---------- */
.demo{position:relative; padding:0 0 clamp(48px,7vw,88px)}
.player{position:relative; margin:0 auto; max-width:1040px; aspect-ratio:16/9; border-radius:20px; overflow:visible}
/* A soft brand glow behind the frame, so it sits on the page rather than on top of it. */
.player::before{content:""; position:absolute; inset:6% 4% -6%; z-index:0; border-radius:40px;
  background:radial-gradient(60% 60% at 30% 30%, rgba(59,130,246,.35), transparent 70%),
             radial-gradient(60% 60% at 75% 70%, rgba(99,102,241,.22), transparent 70%);
  filter:blur(38px)}
.player video{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover;
  border-radius:20px; background:#F7F9FF;
  box-shadow:0 0 0 1px rgba(30,38,51,.07), 0 2px 4px rgba(30,38,51,.05), 0 34px 80px -30px rgba(30,38,51,.45)}
.player-play{position:absolute; z-index:2; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px;
  border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 14px 34px -8px rgba(30,38,51,.45);
  transition:transform .2s ease, box-shadow .2s ease}
.player-play:hover{transform:scale(1.06); box-shadow:0 18px 40px -8px rgba(30,38,51,.5)}
.player-play:focus-visible{outline:3px solid var(--blue); outline-offset:4px}
.player-play svg{width:34px; height:34px; fill:var(--blue); margin-left:4px}
.player-ring{position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,.85);
  animation:player-pulse 2.2s ease-out infinite}
@keyframes player-pulse{from{transform:scale(.92); opacity:.9} to{transform:scale(1.35); opacity:0}}
.player-cap{position:absolute; z-index:2; right:18px; bottom:18px; margin:0}
.player-chip{display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(15,23,42,.78); color:#fff; font:inherit; font-size:.88rem; font-weight:600;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 10px 24px -10px rgba(15,23,42,.6);
  transition:background .2s ease, transform .2s ease}
.player-chip:hover{background:var(--blue); transform:translateY(-1px)}
.player-chip:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.player-chip svg{width:16px; height:16px; fill:currentColor}
.player-chip span{font-weight:500; opacity:.7; font-variant-numeric:tabular-nums}
/* While the silent preview runs, the big button would sit on the footage: the pill is the control. */
.player.is-preview .player-play{opacity:0; pointer-events:none; transform:scale(.8)}
.player.is-preview video{cursor:pointer}
.player.is-playing .player-play, .player.is-playing .player-cap{display:none}
@media (max-width:600px){ .player, .player video{border-radius:14px} .player-play{width:68px; height:68px; margin:-34px 0 0 -34px} .player-cap{right:8px; bottom:8px} .player-chip{padding:9px} .player-chip b, .player-chip span{display:none} }
.player-chip b{font-weight:600}

.logos{margin-top:clamp(40px,5vw,60px); text-align:center}
.logos-label{margin:0 0 22px; font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.logos-track{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(28px,5vw,68px)}
/* Height is set per logo by demo.js so every logo covers about the same area; this is the fallback. */
.logos-track img{height:48px; width:auto; max-width:190px; object-fit:contain; filter:grayscale(1); opacity:.6;
  transition:filter .25s ease, opacity .25s ease}
.logos-track img:hover{filter:none; opacity:1}
/* More than six logos: one slow line moving left, faded at both edges, paused on hover. */
.logos.is-marquee .logos-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.logos.is-marquee .logos-track{flex-wrap:nowrap; width:max-content; animation:logos-marquee var(--logos-speed,40s) linear infinite}
.logos.is-marquee .logos-viewport:hover .logos-track{animation-play-state:paused}
@keyframes logos-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .player-ring{animation:none}
  .logos.is-marquee .logos-track{animation:none; flex-wrap:wrap; width:auto}
}

/* ---------- bands ---------- */
.band{padding:clamp(52px,7.5vw,88px) 0; border-top:1px solid var(--line)}
.band.alt{background:var(--paper-2)}
h2{margin:0 0 14px; font-size:clamp(1.55rem,3.4vw,2.3rem); line-height:1.2; letter-spacing:-.015em; font-weight:700; max-width:24ch}
.sub{margin:0 0 34px; color:var(--muted); font-size:1.03rem; max-width:58ch}
h3{margin:0 0 8px; font-size:1.1rem; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 12px}

/* ---------- cards ---------- */
.cards{display:grid; gap:20px; margin-top:34px}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
/* 4 cards: force a balanced 2x2 on wide screens instead of 3 + an orphan */
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr))}
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow);
}
.card p{color:var(--ink-2); font-size:.97rem; margin:0}
.card p + p{margin-top:10px}
.card.flat{box-shadow:none}
.ico{
  width:42px; height:42px; border-radius:11px; margin-bottom:16px;
  display:grid; place-items:center;
  background:rgba(59,130,246,.10); color:var(--blue);
}
.ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tag{
  display:inline-block; margin-top:14px !important; padding:.3em .7em;
  border-radius:999px; background:rgba(59,130,246,.10); color:var(--blue-dark);
  font-size:.75rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- steps ---------- */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr));
  counter-reset:s;
}
.steps li{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px 22px;
}
.steps .num{
  display:grid; place-items:center;
  width:30px; height:30px; margin-bottom:14px;
  border-radius:9px; background:var(--ink); color:#fff;
  font-size:.85rem; font-weight:700;
}
.steps p{margin:0; color:var(--ink-2); font-size:.96rem}

/* ---------- closer ---------- */
.closer{
  padding:clamp(58px,8vw,96px) 0;
  background:linear-gradient(160deg,#1E2633 0%,#2A3444 55%,#33415A 100%);
  color:#fff; text-align:center;
}
.closer h2{margin-inline:auto; max-width:22ch}
.closer p{margin:0 auto 28px; max-width:56ch; color:rgba(255,255,255,.76); font-size:1.04rem}

/* ---------- enquiry form (on the dark closer band) ---------- */
.enquiry{max-width:720px; margin:0 auto; text-align:left}
.enquiry-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin-bottom:20px}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1 / -1}
.field > span{font-size:.86rem; font-weight:600; color:rgba(255,255,255,.82)}
.field > span em{font-style:normal; font-weight:500; color:rgba(255,255,255,.5)}
.enquiry input,.enquiry textarea{
  font:inherit; font-size:.98rem; color:#fff;
  padding:.72em .9em; border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  transition:border-color .15s ease, background .15s ease;
}
.enquiry textarea{resize:vertical; min-height:88px}
.enquiry input:focus,.enquiry textarea:focus{
  outline:none; border-color:#fff; background:rgba(255,255,255,.14);
}
.enquiry button[disabled]{opacity:.6; cursor:default}
/* Honeypot: off-screen rather than display:none, since some bots skip hidden
   fields but do fill positioned ones. Kept out of the tab order in the markup. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.enquiry-note{margin:14px 0 0; text-align:center; font-size:.94rem; min-height:1.4em; color:rgba(255,255,255,.8)}
.enquiry-note.good{color:#A7F3D0; font-weight:600}
.enquiry-note.bad{color:#FCA5A5; font-weight:600}
.center-text{text-align:center; margin-inline:auto}
.closer .fineprint{color:rgba(255,255,255,.6)}
.closer .fineprint a{color:#fff}

/* ---------- footer ---------- */
.foot{padding:30px 0; border-top:1px solid var(--line); background:var(--paper)}
.foot-inner{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; justify-content:space-between}
.foot p{margin:0; font-size:.9rem; color:var(--muted)}
.foot .dim{display:flex; flex-wrap:wrap; gap:18px}
.foot .dim a{text-decoration:none; color:var(--ink-2); font-weight:500}
.foot .dim a:hover{color:var(--blue)}

/* ---------- flow diagram ---------- */
.flowband{background:var(--paper-2)}
.flow{display:block; width:100%; height:auto; max-width:1040px; margin-inline:auto}
.flowcap{margin:18px auto 0; text-align:center; color:var(--muted); font-size:.95rem; max-width:56ch}
/* below ~620px the 4-across diagram is unreadable, so drop it and keep the caption */
@media (max-width:620px){
  .flow{display:none}
  .flowband{padding-block:clamp(32px,7vw,48px)}
  .flowcap{margin-top:0; font-size:1rem; color:var(--ink-2)}
}

/* ---------- certificate verification page ---------- */
.verify-hero h1{max-width:24ch}
.verify-form{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; max-width:560px}
.verify-form input[type=text]{
  flex:1 1 240px; min-width:0;
  padding:.85em 1em;
  border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  letter-spacing:.04em;
}
.verify-form input[type=text]::placeholder{color:var(--muted); letter-spacing:0}
.verify-form input[type=text]:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}

/* ---------- certificate verification result ---------- */
.vresult{margin:26px 0 0;
  /* The nav is sticky, so anything scrolled to must clear it or its top is hidden
     underneath. Without this the "Verified" badge scrolls out of sight. */
  scroll-margin-top:92px}
.vcard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow); max-width:760px;
}
.vcard-ok{border-color:#A7D5B0; border-top:4px solid #16A34A}
.vcard-bad{border-color:#F0B4B4; border-top:4px solid #DC2626}
.vbadge{
  display:inline-block; margin:0 0 12px; padding:.32em .85em;
  border-radius:999px; background:#DCFCE7; color:#166534;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.vbadge-bad{background:#FEE2E2; color:#991B1B}
.vcard-warn{border-color:#F5D19A; border-top:4px solid #D97706}
.vbadge-warn{background:#FEF3C7; color:#92400E}
.vlead{margin:0 0 18px; color:var(--ink-2)}
/* Definition list rather than a table: these are facts about one document, and a
   two-column dl reflows sanely on a phone where a table does not. */
.vfacts{display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:0 0 22px}
.vfacts dt{color:var(--muted); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.vfacts dd{margin:0; color:var(--ink); font-weight:500}
.vfacts dd.vname{font-size:1.25rem; font-weight:700; letter-spacing:-.01em}
.vfacts code{font-family:ui-monospace,Menlo,monospace; background:var(--paper-2); padding:.15em .45em; border-radius:5px; letter-spacing:.05em}
.vpdf{margin-top:20px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper-2)}
.vpdf img{display:block; width:100%; height:auto; border:0}
.vactions{margin-top:20px}
@media (max-width:620px){
  /* The preview is an image now, so it works at phone width and stays visible. It
     used to be an embedded PDF, which mobile browsers refuse to render, and was
     hidden here for that reason. */
  .vfacts{grid-template-columns:1fr; gap:4px 0}
  .vfacts dd{margin-bottom:10px}
}

/* ---------- a11y + motion ---------- */
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}