/* ==========================================================================
   ValueInfinity Digital Services — main.css
   Design tokens, reset, typography, layout primitives, header, footer.
   Dark-first. One committed palette rather than two half-tuned ones.
   ========================================================================== */

/* ── self-hosted type ───────────────────────────────────────────────────── */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Lexend';
  src:url('../fonts/lexend-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lexend';
  src:url('../fonts/lexend-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  /* brand */
  --primary:#6366f1;
  --primary-dark:#4f46e5;
  --primary-light:#818cf8;
  --secondary:#06b6d4;
  --accent:#8b5cf6;
  --success:#10b981;

  /* surfaces — a graded ramp off --dark rather than flat #0f172a everywhere,
     so stacked cards read as depth instead of as one sheet */
  --dark:#0f172a;
  --surface-0:#0b1120;
  --surface-1:#111a2e;
  --surface-2:#16203a;
  --surface-3:#1c2947;

  /* ink */
  --light:#f8fafc;
  --ink:#f1f5f9;
  --ink-soft:#cbd5e1;
  --ink-muted:#94a3b8;
  --gray:#64748b;

  /* lines */
  --rule:rgba(148,163,184,.14);
  --rule-strong:rgba(148,163,184,.26);

  /* gradients */
  --grad-brand:linear-gradient(135deg,var(--secondary) 0%,var(--primary) 52%,var(--accent) 100%);
  --grad-ink:linear-gradient(135deg,#a5b4fc 0%,#67e8f9 50%,#c4b5fd 100%);

  /* glow */
  --glow-primary:0 0 0 1px rgba(99,102,241,.35),0 18px 48px -12px rgba(99,102,241,.55);
  --shadow-1:0 1px 2px rgba(2,6,23,.4);
  --shadow-2:0 8px 24px -8px rgba(2,6,23,.6);
  --shadow-3:0 24px 64px -16px rgba(2,6,23,.75);

  /* type */
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Lexend','Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  /* fluid scale, 1.25 major third off a 16px base */
  --t-xs:.8125rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-md:1.125rem;
  --t-lg:clamp(1.15rem,.4vw + 1.05rem,1.25rem);
  --t-xl:clamp(1.35rem,.9vw + 1.15rem,1.5625rem);
  --t-2xl:clamp(1.65rem,1.5vw + 1.3rem,1.9531rem);
  --t-3xl:clamp(2rem,2.4vw + 1.45rem,2.4414rem);
  --t-4xl:clamp(2.35rem,3.6vw + 1.55rem,3.0518rem);
  --t-5xl:clamp(2.75rem,5.2vw + 1.6rem,3.8147rem);
  --t-hero:clamp(2.85rem,6.4vw + 1.35rem,4.7684rem);

  /* space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:2.5rem; --sp-8:3rem;
  --sp-9:4rem;   --sp-10:5rem;  --sp-11:6.5rem;

  --container:1200px;
  --gap:2rem;
  --section-y:5rem;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:28px;

  /* motion */
  --dur:300ms;
  --dur-slow:600ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.22,1.2,.36,1);

  --header-h:72px;
  color-scheme:dark;
}

@media (min-width:768px){ :root{ --section-y:6.5rem; } }
@media (min-width:1024px){ :root{ --section-y:8rem; } }

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  background:var(--surface-0);
}

body{
  font-family:var(--font-body);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.65;
  color:var(--ink-soft);
  background:var(--surface-0);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.14;
  letter-spacing:-.022em;
  text-wrap:balance;
  font-weight:600;
}
h1{ font-size:var(--t-5xl); }
h2{ font-size:var(--t-4xl); }
h3{ font-size:var(--t-xl); }
h4{ font-size:var(--t-lg); }
p{ text-wrap:pretty; }

::selection{ background:rgba(99,102,241,.42); color:#fff; }

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

/* Firefox */
html{ scrollbar-color:var(--surface-3) var(--surface-0); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--surface-0); }
::-webkit-scrollbar-thumb{
  background:var(--surface-3);
  border-radius:99px;
  border:3px solid var(--surface-0);
}
::-webkit-scrollbar-thumb:hover{ background:#2a3a63; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2rem);
}

.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:calc(var(--section-y) * .62); }

/* a hairline that fades at both ends — reads softer than a full-bleed border */
.section--ruled{ border-top:1px solid transparent; border-image:linear-gradient(90deg,transparent,var(--rule) 18%,var(--rule) 82%,transparent) 1; }

.section-head{ max-width:44rem; margin-bottom:var(--sp-8); }
.section-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--primary-light);
  margin-bottom:var(--sp-3);
}
.eyebrow::before{
  content:''; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--primary-light));
}
.section-head--center .eyebrow::before{ display:none; }

.section-lede{
  margin-top:var(--sp-4);
  font-size:var(--t-lg);
  color:var(--ink-muted);
  max-width:38rem;
}
.section-head--center .section-lede{ margin-inline:auto; }

.grad-text{
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.875rem 1.6rem;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:.005em;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:80ms; }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

.btn--primary{
  background:var(--grad-brand);
  background-size:150% 150%;
  color:#fff;
  box-shadow:var(--glow-primary);
}
.btn--primary:hover{
  background-position:100% 0;
  box-shadow:0 0 0 1px rgba(99,102,241,.5),0 22px 54px -12px rgba(99,102,241,.75);
}

.btn--secondary{
  background:rgba(148,163,184,.07);
  color:var(--ink);
  border:1px solid var(--rule-strong);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn--secondary:hover{
  background:rgba(148,163,184,.13);
  border-color:rgba(148,163,184,.42);
}

.btn--ghost{ padding-inline:.4rem; color:var(--ink-muted); }
.btn--ghost:hover{ color:var(--ink); transform:none; }

.btn--lg{ padding:1.05rem 2rem; font-size:var(--t-base); }
.btn--sm{ padding:.6rem 1.05rem; font-size:var(--t-xs); }
.btn--block{ width:100%; }

/* ripple, painted by js/animations.js */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.34);
  pointer-events:none;
  animation:ripple 620ms var(--ease-out) forwards;
  z-index:-1;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

/* a text link that grows its underline from the left */
.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--t-sm); font-weight:600;
  color:var(--primary-light);
  transition:gap var(--dur) var(--ease-out),color var(--dur) var(--ease);
}
.link-arrow:hover{ gap:.7rem; color:#a5b4fc; }
.link-arrow svg{ width:1em; height:1em; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(11,17,32,.82);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--rule);
}
.site-header .container{ display:flex; align-items:center; gap:var(--sp-5); }

.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-size:1.0625rem; font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-right:auto;
  flex:none;
}
.brand__mark{ width:32px; height:32px; flex:none; }
.brand__name{ white-space:nowrap; }
.brand__name b{ font-weight:600; }
.brand__name span{ color:var(--ink-muted); font-weight:300; }

.nav{ display:none; }
@media (min-width:900px){
  .nav{ display:flex; align-items:center; gap:.35rem; }
}
.nav__link{
  position:relative;
  padding:.5rem .85rem;
  border-radius:var(--radius-sm);
  font-size:var(--t-sm); font-weight:500;
  color:var(--ink-muted);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav__link:hover{ color:var(--ink); background:rgba(148,163,184,.08); }
.nav__link.is-active{ color:var(--ink); }
.nav__link.is-active::after{
  content:''; position:absolute;
  left:.85rem; right:.85rem; bottom:.15rem; height:2px;
  border-radius:2px;
  background:var(--grad-brand);
}

.header__cta{ display:none; }
@media (min-width:900px){ .header__cta{ display:inline-flex; } }

/* ── mobile nav ─────────────────────────────────────────────────────────── */
.nav-toggle{
  display:grid; place-items:center;
  width:42px; height:42px; margin-left:auto;
  border-radius:var(--radius-sm);
  border:1px solid var(--rule);
  color:var(--ink);
}
@media (min-width:900px){ .nav-toggle{ display:none; } }
.nav-toggle__box{ width:18px; height:12px; position:relative; }
.nav-toggle__box i{
  position:absolute; left:0; height:1.5px; width:100%;
  background:currentColor; border-radius:2px;
  transition:transform var(--dur) var(--ease-out),opacity 160ms var(--ease),width var(--dur) var(--ease-out);
}
.nav-toggle__box i:nth-child(1){ top:0; }
.nav-toggle__box i:nth-child(2){ top:5.25px; width:72%; }
.nav-toggle__box i:nth-child(3){ top:10.5px; }
[aria-expanded="true"] .nav-toggle__box i:nth-child(1){ transform:translateY(5.25px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__box i:nth-child(2){ opacity:0; width:0; }
[aria-expanded="true"] .nav-toggle__box i:nth-child(3){ transform:translateY(-5.25px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:var(--header-h) 0 0 0;
  z-index:99;
  background:rgba(11,17,32,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:var(--sp-6) 0 var(--sp-8);
  overflow-y:auto;
  visibility:hidden; opacity:0;
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
}
.mobile-nav.is-open{ visibility:visible; opacity:1; }
@media (min-width:900px){ .mobile-nav{ display:none; } }

.mobile-nav__list{ display:flex; flex-direction:column; gap:.25rem; }
.mobile-nav__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem .25rem;
  font-family:var(--font-display);
  font-size:var(--t-xl); font-weight:400;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
  opacity:0; transform:translateY(12px);
}
.mobile-nav.is-open .mobile-nav__link{
  animation:navIn 460ms var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes navIn{ to{ opacity:1; transform:none; } }
.mobile-nav__link svg{ width:1rem; height:1rem; color:var(--ink-muted); }
.mobile-nav .btn{ margin-top:var(--sp-6); }

body.nav-open{ overflow:hidden; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{
  position:relative;
  padding-top:var(--sp-10);
  padding-bottom:var(--sp-6);
  background:
    radial-gradient(80% 100% at 50% 0%,rgba(99,102,241,.09) 0%,transparent 68%),
    var(--surface-0);
  border-top:1px solid var(--rule);
}
.footer__grid{
  display:grid;
  gap:var(--sp-7);
  grid-template-columns:1fr;
  padding-bottom:var(--sp-8);
}
@media (min-width:640px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--gap); } }

.footer__about p{
  margin-top:var(--sp-4);
  font-size:var(--t-sm);
  color:var(--ink-muted);
  max-width:30ch;
}
.footer__title{
  font-family:var(--font-body);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
  margin-bottom:var(--sp-4);
}
.footer__list{ display:flex; flex-direction:column; gap:.7rem; }
.footer__list a{
  font-size:var(--t-sm);
  color:var(--ink-muted);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease-out);
  width:fit-content;
}
.footer__list a:hover{ color:var(--ink); transform:translateX(3px); }

.socials{ display:flex; gap:.6rem; margin-top:var(--sp-5); }
.socials a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:10px;
  border:1px solid var(--rule);
  color:var(--ink-muted);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),transform var(--dur) var(--ease-out);
}
.socials a:hover{
  color:var(--ink);
  border-color:rgba(99,102,241,.5);
  background:rgba(99,102,241,.12);
  transform:translateY(-2px);
}
.socials svg{ width:17px; height:17px; }

.footer__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding-top:var(--sp-5);
  border-top:1px solid var(--rule);
  font-size:var(--t-xs);
  color:var(--gray);
}
.footer__bar a:hover{ color:var(--ink-soft); }
.footer__made .heart{ color:#f43f5e; }

/* ── skip link ──────────────────────────────────────────────────────────── */
.skip-link{
  position:absolute; left:.75rem; top:-6rem;
  z-index:200;
  padding:.7rem 1.1rem;
  border-radius:var(--radius-sm);
  background:var(--primary);
  color:#fff;
  font-size:var(--t-sm); font-weight:600;
  transition:top 180ms var(--ease-out);
}
.skip-link:focus{ top:.75rem; }

/* ── utilities ──────────────────────────────────────────────────────────── */
.visually-hidden{
  position:absolute!important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.no-scroll{ overflow:hidden; }

/* ── print ──────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.mobile-nav,.hero__canvas,.scroll-cue,.socials{ display:none!important; }
  body{ background:#fff; color:#000; }
  h1,h2,h3,h4{ color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
}