/* ============================================================
   Veoby — veoby.com
   Dark engineered-editorial. Instrument Serif display,
   Manrope body, JetBrains Mono for technical labels.
   ============================================================ */

:root{
  --ink:      #0B0E17;
  --ink-2:    #070911;
  --surface:  #111624;
  --raised:   #1A2032;
  --hairline: rgba(255,255,255,.075);
  --hairline-2: rgba(255,255,255,.13);

  --text:   #F4F6FB;
  --text-2: #9AA3B5;
  --text-3: #5E687D;

  --vumote: #5B9DF9;
  --veoday: #7F77DD;
  --signal: linear-gradient(90deg, var(--vumote), var(--veoday));

  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --gut: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
img,svg{ display:block; max-width:100%; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--raised); color:var(--text);
  padding:12px 20px; border-radius:0 0 10px 0; font-size:14px;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--vumote); outline-offset:3px; border-radius:4px; }

/* ── grain overlay ───────────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  opacity:.032; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── shared type ─────────────────────────────────────────── */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:1.03; }

h1{ font-size:clamp(46px, 8.4vw, 104px); }
h1 em{ color:transparent; background:var(--signal); -webkit-background-clip:text; background-clip:text; }

h2{ font-size:clamp(32px, 4.6vw, 56px); line-height:1.06; }
h2 em{ color:var(--text-3); }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:11px; line-height:1;
}
.eyebrow.center{ justify-content:center; }
.eyebrow .sep{ color:var(--text-3); opacity:.5; }
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--vumote); flex:none;
  box-shadow:0 0 0 4px rgba(91,157,249,.14);
  animation:pulse 2.6s var(--ease) infinite;
}
.eyebrow .rule{ width:34px; height:1px; background:var(--hairline-2); flex:none; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .eyebrow .dot{ animation:none } }

/* secondary eyebrow clause reads as noise once it wraps — drop it on narrow screens */
@media (max-width:560px){
  .eyebrow .sep, .eyebrow .sub-clause{ display:none; }
}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:14.5px; font-weight:600;
  padding:13px 24px; border-radius:999px;
  border:1px solid var(--hairline-2);
  transition:background .22s var(--ease), border-color .22s var(--ease),
             transform .22s var(--ease), color .22s var(--ease);
  white-space:nowrap;
}
.btn .arr{ transition:transform .25s var(--ease); font-size:13px; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arr{ transform:translate(2px,-2px); }
.btn-primary:hover .arr{ transform:translateY(3px); }

.btn-sm{ padding:9px 18px; font-size:13.5px; }

.btn-primary{ background:var(--text); color:var(--ink); border-color:var(--text); }
.btn-primary:hover{ background:#fff; }

.btn-ghost{ color:var(--text-2); }
.btn-ghost:hover{ color:var(--text); border-color:var(--hairline-2); background:rgba(255,255,255,.04); }

.btn-accent{
  background:var(--accent-soft); color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
}
.btn-accent:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent); }

/* ── nav ─────────────────────────────────────────────────── */
#nav{
  position:sticky; top:0; z-index:80;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(11,14,23,0);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
#nav.stuck{ background:rgba(11,14,23,.82); border-bottom-color:var(--hairline); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px var(--gut); }

.brand{ display:flex; align-items:center; gap:11px; }
.mark{ width:29px; height:29px; flex:none; color:var(--text); }
.brand-name{
  font-family:var(--serif); font-size:25px; letter-spacing:-.01em;
}

.nav-links{ display:flex; gap:32px; font-size:14.5px; color:var(--text-2); }
.nav-links a{ position:relative; transition:color .2s var(--ease); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--signal); transition:width .28s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }

@media (max-width:820px){ .nav-links{ display:none } }

/* ── hero ────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(74px,13vh,132px) 0 clamp(64px,9vh,104px); overflow:hidden; }
.hero-inner{ position:relative; z-index:2; }

/* signal field background */
.field{ position:absolute; inset:0; z-index:0; }
.field-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(115% 82% at 22% 4%, #000 12%, transparent 72%);
  -webkit-mask-image:radial-gradient(115% 82% at 22% 4%, #000 12%, transparent 72%);
  opacity:.75;
}
.field-sweep{
  position:absolute; top:-32%; left:-14%; width:78%; height:132%;
  background:
    radial-gradient(46% 42% at 32% 40%, rgba(91,157,249,.30), transparent 68%),
    radial-gradient(42% 46% at 66% 60%, rgba(127,119,221,.26), transparent 70%);
  filter:blur(52px);
  animation:drift 22s var(--ease) infinite alternate;
}
@keyframes drift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(26%,7%,0) scale(1.13); }
  100% { transform:translate3d(52%,-4%,0) scale(1.03); }
}
@media (prefers-reduced-motion:reduce){ .field-sweep{ animation:none } }

.field-fade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 52%, var(--ink) 97%);
}

h1{ margin-top:26px; }

.lede{
  margin-top:30px; max-width:58ch;
  font-size:clamp(16.5px,1.72vw,19px); color:var(--text-2); font-weight:300;
}

.hero-cta{ margin-top:38px; display:flex; gap:13px; flex-wrap:wrap; }

.facts{
  margin-top:clamp(52px,7vh,84px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hairline); border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.facts > div{ background:var(--ink); padding:22px 4px 20px; }
.facts dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
}
.facts dd{ margin-top:9px; font-size:15px; color:var(--text); font-weight:500; }
@media (max-width:700px){
  .facts{ grid-template-columns:1fr; }
  .facts > div{ padding:16px 0; }
}

/* ── ticker ──────────────────────────────────────────────── */
.ticker{
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  overflow:hidden; padding:15px 0; background:var(--ink-2);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:slide 42s linear infinite;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); white-space:nowrap;
}
.ticker-track i{ font-style:normal; color:var(--veoday); opacity:.55; font-size:8px; }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none } }

/* ── sections ────────────────────────────────────────────── */
.section{ padding:clamp(78px,11vh,134px) 0; position:relative; }
.section-alt{ background:var(--ink-2); border-block:1px solid var(--hairline); }

.sec-head{ margin-bottom:clamp(46px,6vh,72px); }
.sec-head h2{ margin-top:20px; }

/* ── product cards ───────────────────────────────────────── */
.product{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4.4vw,64px);
  align-items:center;
  padding:clamp(30px,4vw,52px);
  border:1px solid var(--hairline);
  border-radius:22px;
  background:
    radial-gradient(120% 145% at 100% 0%, var(--accent-soft), transparent 58%),
    var(--surface);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.product + .product{ margin-top:30px; }
.product:hover{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); }

.product::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.55;
}

.p-index{
  position:absolute; top:clamp(20px,2.6vw,34px); right:clamp(22px,2.8vw,38px);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--text-3);
}

.p-top{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.p-name{ font-size:clamp(34px,4vw,46px); }
.p-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  padding:5px 11px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.p-tagline{
  margin-top:14px; font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,2.1vw,24px); color:var(--text-2); line-height:1.3;
}
.p-desc{ margin-top:18px; color:var(--text-2); font-size:15.5px; font-weight:300; max-width:54ch; }

.p-feats{ margin-top:26px; list-style:none; display:grid; gap:13px; }
.p-feats li{
  position:relative; padding-left:22px; font-size:14.5px;
  color:var(--text-3); font-weight:300; line-height:1.58;
}
.p-feats li b{ color:var(--text); font-weight:600; }
.p-feats li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:2px; background:var(--accent); opacity:.9;
}

.p-note{
  margin-top:24px; padding:15px 17px;
  border-left:2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background:rgba(255,255,255,.028); border-radius:0 8px 8px 0;
  font-size:13px; color:var(--text-3); font-weight:300; line-height:1.6;
}

.p-foot{ margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.p-plat{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text-3); }

@media (max-width:940px){
  .product{ grid-template-columns:1fr; }
  .p-visual{ order:-1; }
}

/* ── product visual: Vumote nested displays ──────────────── */
.p-visual{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; }

.scr{
  position:absolute; border-radius:11px;
  border:1px solid var(--hairline-2);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  box-shadow:0 22px 48px rgba(0,0,0,.42);
  overflow:hidden;
}
.scr-bar{ position:absolute; top:0; left:0; right:0; height:19px; background:rgba(255,255,255,.05);
  border-bottom:1px solid var(--hairline); }
.scr-a{ width:74%; height:60%; transform:translate(-11%,-15%) rotate(-4deg); }
.scr-b{ width:46%; height:52%; transform:translate(34%,14%) rotate(5deg);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent);
  background:linear-gradient(150deg, var(--accent-soft), rgba(255,255,255,.014)); }
.scr-c{ width:20%; height:12%; transform:translate(-52%,52%) rotate(-8deg); border-radius:6px; }

.beam{
  position:absolute; width:62%; height:1px; top:46%; left:14%;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.5; animation:beam 3.4s var(--ease) infinite;
}
@keyframes beam{ 0%,100%{ opacity:.16; transform:scaleX(.7) } 50%{ opacity:.62; transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){ .beam{ animation:none } }

/* ── product visual: Veoday guide grid ───────────────────── */
.guide{ width:100%; display:grid; gap:9px; padding:6px; }
.g-row{ display:flex; gap:7px; align-items:center; }
.g-ch{ width:13%; height:26px; border-radius:5px; background:rgba(255,255,255,.07); flex:none; }
.g-cell{
  height:26px; border-radius:5px;
  background:rgba(255,255,255,.045); border:1px solid var(--hairline);
}
.g-cell.w2{ flex:2 } .g-cell.w3{ flex:3 } .g-cell.w4{ flex:4 }
.g-cell.on{
  background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 46%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--accent) 20%, transparent);
}
.playhead{
  position:absolute; top:4%; bottom:4%; left:44%; width:2px;
  background:linear-gradient(to bottom, transparent, var(--accent), transparent);
  animation:play 7s linear infinite;
}
@keyframes play{ 0%{ left:20% } 100%{ left:92% } }
@media (prefers-reduced-motion:reduce){ .playhead{ animation:none } }

/* ── principles ──────────────────────────────────────────── */
.prin{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:16px; overflow:hidden; }
.prin-item{ background:var(--ink-2); padding:clamp(28px,3.4vw,44px); transition:background .3s var(--ease); }
.prin-item:hover{ background:var(--surface); }
.prin-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--text-3);
}
.prin-item h3{ margin-top:18px; font-size:clamp(23px,2.5vw,29px); }
.prin-item p{ margin-top:14px; color:var(--text-3); font-size:14.5px; font-weight:300; max-width:44ch; }
@media (max-width:820px){ .prin{ grid-template-columns:1fr } }

/* ── studio ──────────────────────────────────────────────── */
.studio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.studio h2{ margin-top:20px; }
.studio-txt p{ color:var(--text-2); font-size:16px; font-weight:300; }
.studio-txt p + p{ margin-top:19px; }
@media (max-width:880px){ .studio{ grid-template-columns:1fr } }

/* ── contact ─────────────────────────────────────────────── */
.contact{
  background:
    radial-gradient(88% 116% at 50% 0%, rgba(127,119,221,.11), transparent 62%),
    var(--ink-2);
  border-top:1px solid var(--hairline);
}
.contact-inner{ text-align:center; max-width:680px; }
.contact h2{ margin-top:22px; }
.contact-sub{ margin-top:22px; color:var(--text-2); font-size:16px; font-weight:300; }

.mailto{
  display:inline-block; margin-top:34px;
  font-family:var(--serif); font-size:clamp(26px,4vw,40px);
  color:transparent; background:var(--signal);
  -webkit-background-clip:text; background-clip:text;
  border-bottom:1px solid var(--hairline-2); padding-bottom:5px;
  transition:border-color .25s var(--ease);
}
.mailto:hover{ border-bottom-color:var(--veoday); }

.contact-alt{ margin-top:30px; font-size:13.5px; color:var(--text-3); }
.contact-alt a{ color:var(--text-2); border-bottom:1px solid var(--hairline-2); }
.contact-alt a:hover{ color:var(--text); }
.contact-alt .sep{ margin:0 8px; opacity:.5; }

/* ── footer ──────────────────────────────────────────────── */
footer{ border-top:1px solid var(--hairline); padding:38px 0; }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:21px; }
.foot-brand .mark{ width:25px; height:25px; }
.foot-links{ display:flex; gap:26px; font-size:14px; color:var(--text-2); }
.foot-links a:hover{ color:var(--text); }
.foot-copy{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-3); }
@media (max-width:760px){ .foot-inner{ flex-direction:column; text-align:center; } }

/* ── scroll reveal ───────────────────────────────────────── */
/* Gated on .js so the page stays fully visible if JS never runs. */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .78s var(--ease) var(--d,0s), transform .78s var(--ease) var(--d,0s);
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; }
}