/* VAIY - home page styles. Foundations live in brand.css */

/* page structure (moved out of brand.css: home-specific) */
.rule{ height:1px; background:var(--line); }
section{ padding:clamp(72px,9vw,128px) 0; }
footer{
  border-top:1px solid var(--line); padding:34px 0 70px;
  font-size:13.5px; color:var(--mute);
  display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap;
}

.art{ display:block; width:100%; height:auto; }
.artwrap{ position:relative; }
.artwrap.bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hero{ padding:clamp(48px,6vw,86px) 32px 0; }
@media (max-width:700px){ .hero{ padding-left:20px; padding-right:20px; } }
.hero h1{ max-width:22ch; }
.hero-top{ display:grid; grid-template-columns:1fr; gap:34px; align-items:end; }
@media (min-width:1000px){ .hero-top{ grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr); gap:48px; } }
.hero-art{ margin:0 0 -6%; }
.hero-art img{ display:block; width:100%; height:auto; }
.hero-foot{ margin:clamp(28px,3vw,44px) 0 clamp(40px,5vw,68px); display:grid; grid-template-columns:1fr; gap:28px; align-items:end; }
@media (min-width:940px){ .hero-foot{ grid-template-columns:minmax(0,1fr) auto; gap:60px; } }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:13px; align-items:center; }
.hero-ctas .cta-note{ font-size:12.5px; color:var(--mute); line-height:1.5; flex:1 1 100%; margin-top:2px; }
@media (min-width:940px){ .hero-ctas{ max-width:390px; } }
.hero-art{ margin:clamp(34px,4vw,58px) 0 0; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hero-art img{ display:block; width:100%; height:auto; }
.why-right{ display:flex; flex-direction:column; }
.ctx-art{ margin:40px 0 0; max-width:420px; align-self:flex-end; }
@media (min-width:960px){ .ctx-art{ margin-top:56px; max-width:100%; } }
.closing{ background:var(--panel); padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px); border-top:1px solid var(--line); }
.closing-grid{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
@media (min-width:940px){ .closing-grid{ grid-template-columns:.9fr 1.1fr; gap:64px; } }
.closing h2{ max-width:17ch; }
.row-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.ticker{ background:var(--blue); color:#fff; overflow:hidden; padding:18px 0; }
.tick-track{ display:flex; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .tick-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .tick-track{ animation:none; } }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tick-track span{
    display:inline-flex; align-items:center; gap:13px; padding:0 26px;
    font-size:15px; white-space:nowrap; color:#fff;
  }
.tick-track span b{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-0.02em; }
.tick-track span::after{ content:'-'; opacity:.45; margin-left:12px; }
.band{
    background:var(--inv-bg); color:var(--inv-ink); padding:clamp(58px,7vw,96px) 0;
    background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:64px 64px;
  }
.figs{ display:grid; grid-template-columns:1fr; gap:44px; }
@media (min-width:820px){ .figs{ grid-template-columns:repeat(3,1fr); gap:48px; } }
.fig b{
    font-family:var(--display); display:block; font-size:clamp(62px,8.8vw,132px); font-weight:700;
    letter-spacing:-0.05em; line-height:0.88; color:var(--inv-ink);
  }
.fig span{ display:block; margin-top:20px; font-size:16px; color:var(--inv-soft); max-width:26ch; line-height:1.5; }
.band .tiny{ color:var(--inv-faint); margin-top:56px; }
.why-grid{ display:grid; grid-template-columns:1fr; gap:44px; }
@media (min-width:960px){ .why-grid{ grid-template-columns:1fr 1fr; gap:88px; align-items:start; } }
.why h2{ max-width:15ch; }
.closer{ margin:28px 0 0; font-size:17px; line-height:1.62; color:var(--mute); max-width:50ch; }
.facts{ list-style:none; margin:0; padding:0; }
.facts li{ display:grid; grid-template-columns:1fr; gap:8px; padding:26px 0; border-top:1px solid var(--line); }
@media (min-width:560px){ .facts li{ grid-template-columns:clamp(120px,13vw,168px) 1fr; gap:26px; align-items:baseline; } }
.facts li:last-child{ border-bottom:1px solid var(--line); }
.yr{
    font-family:var(--display); font-size:clamp(34px,4.2vw,54px); font-weight:700;
    letter-spacing:-0.045em; line-height:0.9; color:var(--blue);
  }
.facts li span:last-child{ font-size:16.5px; line-height:1.55; color:var(--mute); }
.urgent{
    margin:26px 0 0; font-family:var(--display); font-weight:600;
    font-size:clamp(19px,2.1vw,26px); letter-spacing:-0.028em; line-height:1.25;
    color:var(--ink); max-width:26ch;
  }
.statement{ background:var(--blue); color:#fff; max-width:none; padding:clamp(68px,8vw,116px) 32px; position:relative; overflow:hidden; }
@media (max-width:700px){ .statement{ padding-left:20px; padding-right:20px; } }
.statement > *{ max-width:1280px; margin-left:auto; margin-right:auto; position:relative; z-index:2; }
.statement .kicker{ color:rgba(255,255,255,.82); }
.statement .kicker::before{ background:rgba(255,255,255,.82); }
.statement h2{ max-width:20ch; color:#fff; }
.statement h2 em{ color:rgba(255,255,255,.5); }
.statement p{ margin:30px auto 0; font-size:18px; line-height:1.6; color:rgba(255,255,255,.88); max-width:62ch; }
.statement p + p{ margin-top:20px; }
.statement .st-art{
    position:absolute; right:-4%; bottom:-8%; width:min(38%,460px); opacity:.9;
    z-index:1; pointer-events:none; mix-blend-mode:luminosity;
  }
@media (max-width:900px){ .statement .st-art{ display:none; } }
.fns{ display:grid; grid-template-columns:1fr; margin-top:clamp(44px,5vw,68px); border-top:1px solid var(--line); }
@media (min-width:900px){ .fns{ grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-bottom:none; } }
.fn{ background:var(--bg); padding:38px 30px 42px; border-bottom:1px solid var(--line); transition:background .2s ease; }
@media (min-width:900px){ .fn{ padding:42px 32px 46px; } }
.fn:hover{ background:var(--panel); }
.fn h3{ font-family:var(--text); font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue); font-weight:700; }
.fn ul{ list-style:none; margin:26px 0 0; padding:0; }
.fn li{ position:relative; padding:0 0 0 20px; margin:0 0 17px; font-size:15.5px; line-height:1.55; color:var(--mute); }
.fn li:last-child{ margin-bottom:0; }
.fn li::before{ content:''; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--blue); }
.svcs{ margin-top:clamp(44px,5vw,70px); }
.svc{ display:grid; grid-template-columns:1fr; gap:26px; padding:clamp(36px,4vw,52px) 0; border-top:1px solid var(--line); }
@media (min-width:940px){ .svc{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:70px; } }
.svc:last-child{ border-bottom:1px solid var(--line); }
.svc .n{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--blue); letter-spacing:0.08em; margin-bottom:16px; }
.svc h3{ font-size:clamp(23px,2.6vw,32px); letter-spacing:-0.03em; line-height:1.1; max-width:16ch; }
.one{ margin:16px 0 0; font-size:16.5px; line-height:1.55; color:var(--mute); max-width:38ch; }
.det{ list-style:none; margin:0; padding:0; }
.det li{ padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; line-height:1.5; color:var(--mute); }
.det li:first-child{ padding-top:0; }
.out{ margin:24px 0 0; font-size:16px; line-height:1.55; color:var(--ink); max-width:52ch; }
.out b{ color:var(--blue); font-weight:700; }
.prods{ background:var(--panel); }
.pgrid{ display:grid; grid-template-columns:1fr; gap:1px; margin-top:clamp(44px,5vw,68px); background:var(--line); border:1px solid var(--line); }
@media (min-width:760px){ .pgrid{ grid-template-columns:1fr 1fr; } }
.pd{ background:var(--panel); padding:38px 32px 42px; transition:background .2s ease; }
.pd:hover{ background:var(--bg); }
.ic{ display:block; color:var(--blue); margin-bottom:22px; }
.pd h3{ font-size:20px; }
.pd p{ margin:13px 0 0; font-size:15.5px; line-height:1.6; color:var(--mute); max-width:44ch; }
.spec{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:50px; }
@media (min-width:720px){ .spec{ grid-template-columns:repeat(3,1fr); } .sp.full{ grid-column:1 / -1; } }
.sp{ background:var(--panel); padding:26px 24px; }
.sp .k{ font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue); font-weight:700; }
.sp .v{ margin-top:12px; font-size:17px; font-weight:500; line-height:1.35; letter-spacing:-0.015em; }
.sys-head{ display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
@media (min-width:1000px){ .sys-head{ grid-template-columns:1.25fr .75fr; gap:56px; } }
.levels{ display:grid; grid-template-columns:1fr; gap:1px; margin-top:clamp(44px,5vw,68px); background:var(--line); border:1px solid var(--line); }
@media (min-width:900px){ .levels{ grid-template-columns:repeat(4,1fr); } }
.lv{ background:var(--bg); padding:34px 26px 38px; transition:background .2s ease; }
.lv:hover{ background:var(--blue); }
.lv:hover b, .lv:hover h3, .lv:hover p{ color:#fff; }
.lv b{ font-family:var(--display); display:block; font-size:30px; font-weight:700; letter-spacing:-0.035em; color:var(--blue); line-height:1; }
.lv h3{ margin:18px 0 0; font-size:19px; }
.lv p{ margin:12px 0 0; font-size:15px; line-height:1.55; color:var(--mute); }
.diag{
    margin:clamp(44px,5vw,66px) 0 0; padding:clamp(34px,4vw,50px);
    background:var(--inv-bg); color:var(--inv-ink);
    display:grid; grid-template-columns:1fr; gap:30px; align-items:center;
  }
@media (min-width:940px){ .diag{ grid-template-columns:1fr auto; gap:64px; } }
.diag .kicker{ color:#8FA1FF; }
.diag .kicker::before{ background:#8FA1FF; }
.diag h3{ font-size:clamp(25px,3.1vw,38px); letter-spacing:-0.032em; line-height:1.1; max-width:20ch; color:var(--inv-ink); }
.diag p{ margin:20px 0 0; font-size:16.5px; line-height:1.6; color:var(--inv-soft); max-width:56ch; }
.diag p.fine{ margin-top:14px; font-size:14px; color:var(--inv-faint); }
.diag-cta{ white-space:nowrap; }
.diag .cta{ background:#fff; color:#16181B; }
.diag .cta:hover{ background:var(--blue); color:#fff; }
.founder{ display:grid; grid-template-columns:1fr; gap:44px; align-items:start; margin-top:clamp(36px,4vw,56px); }
@media (min-width:960px){ .founder{ grid-template-columns:0.8fr 1.2fr; gap:76px; } }
.fcol{ display:grid; gap:18px; align-content:start; }
@media (min-width:960px){ .fcol{ position:sticky; top:100px; } }
.pullquote{
    font-family:var(--display); margin:0 0 34px; font-size:clamp(22px,2.7vw,33px); font-weight:600;
    letter-spacing:-0.03em; line-height:1.2; color:var(--ink); max-width:24ch;
  }
.pullquote .mark{ color:var(--blue); }
.attrib{ display:block; margin-top:22px; font-family:var(--text); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); font-weight:500; }
#founder p{ font-size:16.5px; line-height:1.65; color:var(--mute); max-width:58ch; }
#founder p strong{ color:var(--ink); font-weight:700; }
.creds{ list-style:none; margin:36px 0 0; padding:0; border-top:1px solid var(--line); }
.creds li{ padding:20px 0; border-bottom:1px solid var(--line); font-size:16.5px; font-weight:500; letter-spacing:-0.01em; }
.creds li span{ display:block; margin-top:5px; font-size:14.5px; font-weight:400; color:var(--mute); letter-spacing:0; }
.quotes{ margin-top:36px; }
.q{ padding:26px 28px; background:var(--panel); border-left:3px solid var(--blue); }
.q.slot{ border-left-style:dashed; }
.lbl{ display:block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; font-weight:700; }
.q p{ margin:0; font-size:16px; line-height:1.6; }
.q cite{ display:block; margin-top:14px; font-style:normal; font-size:14px; color:var(--mute); }
.faq{ margin-top:clamp(36px,4vw,56px); border-top:1px solid var(--line); }
details{ border-bottom:1px solid var(--line); }
summary{
    font-family:var(--display); list-style:none; cursor:pointer; padding:26px 44px 26px 0; position:relative;
    font-size:clamp(17px,1.8vw,21px); font-weight:600; letter-spacing:-0.024em; line-height:1.35; transition:color .16s ease;
  }
summary::-webkit-details-marker{ display:none; }
summary:hover{ color:var(--blue); }
summary::after{ content:''; position:absolute; right:6px; top:50%; width:15px; height:2px; background:var(--blue); transform:translateY(-50%); }
summary::before{ content:''; position:absolute; right:12.5px; top:50%; width:2px; height:15px; background:var(--blue); transform:translateY(-50%); transition:opacity .2s ease, transform .2s ease; }
details[open] summary::before{ opacity:0; transform:translateY(-50%) rotate(90deg); }
.faq .a{ margin:0; padding:0 0 30px; font-size:16.5px; line-height:1.68; color:var(--mute); max-width:68ch; }
.contact{ padding:clamp(72px,9vw,128px) 32px; }
@media (max-width:700px){ .contact{ padding-left:20px; padding-right:20px; } }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:52px; align-items:start; }
@media (min-width:960px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:84px; } }
.contact h2{ max-width:15ch; }
.offer{ margin:28px 0 0; font-size:17.5px; line-height:1.6; color:var(--ink); max-width:50ch; }
.offer b{ font-weight:700; }
.next{ list-style:none; margin:34px 0 0; padding:0; max-width:50ch; counter-reset:nx; }
.next li{ position:relative; padding:0 0 0 44px; margin:0 0 18px; font-size:16px; line-height:1.55; color:var(--mute); }
.next li:last-child{ margin-bottom:0; }
.next li::before{
    counter-increment:nx; content:counter(nx,decimal-leading-zero); font-family:var(--display);
    position:absolute; left:0; top:1px; font-size:12.5px; font-weight:700; color:var(--blue);
  }
.next li b{ color:var(--ink); font-weight:700; }
.alt{ margin:34px 0 0; padding-top:26px; border-top:1px solid var(--line); font-size:15px; line-height:1.62; color:var(--mute); max-width:50ch; }
.alt a{ color:var(--blue); text-decoration:none; border-bottom:1px solid currentColor; }
.alt a:hover{ color:var(--blue-deep); }
.bigmail{ font-family:var(--display); display:inline-block; font-weight:700; letter-spacing:-0.035em; line-height:1;
            font-size:clamp(23px,3.2vw,38px); text-decoration:none; color:var(--ink); word-break:break-word; }
.bigmail:hover{ color:var(--blue); }
form{ display:grid; gap:17px; }
.f2{ display:grid; grid-template-columns:1fr; gap:17px; }
@media (min-width:560px){ .f2{ grid-template-columns:1fr 1fr; } }
label{ display:block; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); margin-bottom:9px; font-weight:700; }
.optional{ text-transform:none; letter-spacing:0; font-size:11px; opacity:.7; font-weight:400; }
input, textarea, select{
    width:100%; font:inherit; font-family:var(--text); font-size:16px; color:var(--ink);
    background:transparent; border:none; border-bottom:1.5px solid var(--line); border-radius:0;
    padding:11px 2px; -webkit-appearance:none; appearance:none; transition:border-color .18s ease;
  }
input:focus, textarea:focus, select:focus{ outline:none; border-bottom-color:var(--blue); }
select{ background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
          background-position:calc(100% - 13px) 20px, calc(100% - 8px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
textarea{ min-height:104px; resize:vertical; }
button[type=submit]{
    font:inherit; font-family:var(--text); font-size:16px; font-weight:500; cursor:pointer; margin-top:8px;
    background:var(--blue); color:#fff; border:none; padding:17px 34px; border-radius:999px;
    justify-self:start; transition:background .18s ease, transform .18s ease;
  }
button[type=submit]:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.assure{ margin:6px 0 0; font-size:13.5px; line-height:1.6; color:var(--mute); max-width:46ch; }
.assure b{ color:var(--ink); font-weight:700; }
@media print{
    header,.ticker,.diag,.cta,.btn,form,.next,.st-art{ display:none !important; }
    body{ background:#fff; color:#000; }
    .band,.statement{ background:#fff !important; color:#000 !important; }
    .fig b,.statement h2,.statement p{ color:#000 !important; }
    section,.contact,.statement{ padding:18pt 0 !important; }
    h1{ font-size:26pt !important; } h2{ font-size:17pt !important; }
    .faq .a{ display:block !important; }
    .rv{ opacity:1 !important; transform:none !important; }
  }