/* ===== Velzo AI — shared stylesheet =====
   Monochrome dark theme, keyed to the shader-hero reference component.
   Fixed palette (not theme-switchable) — the reference is hardcoded to
   bg-black and the brief was to carry that look through the whole site. */

:root{
  --bg:#000000;
  --surface:#0D0D0D;
  --surface-alt:#111111;
  --muted-bg:#1A1A1A;
  --border:rgba(255,255,255,.12);
  --ink:#FFFFFF;
  --muted-ink:#9CA3AF;
  --primary:#FFFFFF;
  --primary-dark:#E5E5E5;
  --primary-fg:#0A0A0A;
  --accent-blue:#52525B;
  --glass-bg:rgba(255,255,255,.08);
  --glass-border:rgba(255,255,255,.4);
  --shadow: 0 12px 40px -16px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Outfit',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section-alt{background:var(--surface-alt)}
@media (max-width:640px){ .section{padding:56px 0} }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--primary);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}

.lede{color:var(--muted-ink);font-size:17px;max-width:60ch;line-height:1.65}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  border-radius:9px;padding:13px 22px;cursor:pointer;border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  text-decoration:none;white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--primary-fg);border-radius:14px}
.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--glass-border)}
.btn-outline:hover{background:var(--glass-bg)}
.btn-ghost-light,.btn-secondary{background:var(--glass-bg);color:#fff;border-color:var(--glass-border);backdrop-filter:blur(8px)}
.btn-ghost-light:hover,.btn-secondary:hover{background:rgba(255,255,255,.16)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn svg{flex-shrink:0}

/* Nav */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1160px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{
  display:flex;align-items:center;gap:9px;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:19px;
  text-decoration:none;color:var(--ink);
}
.logo .mark{width:33px;height:20px;flex-shrink:0;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--muted-ink);
  transition:color .15s ease;
}
.nav-links a{position:relative}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{font-weight:600}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--ink);border-radius:2px;
}
@media (max-width:860px){ .nav-links a[aria-current="page"]::after{display:none} }
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{
  display:none;background:none;border:1px solid var(--border);border-radius:8px;
  width:44px;height:44px;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink);
}
.nav-toggle svg{display:block}

/* Skip link — visually hidden until focused, standard keyboard-bypass pattern */
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:100;
  background:var(--ink);color:var(--primary-fg);
  padding:12px 18px;border-radius:8px;font-size:14px;font-weight:600;
  text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:16px}

@media (max-width:860px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--border);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 16px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 0;width:100%}
  .nav-cta .btn-outline{display:none}
  .nav-toggle{display:inline-flex}
}

/* Hero — simple version, used as the page-title header on Services/Pricing/Our Work/Contact */
.hero{
  padding:64px 0 24px;
  background:var(--bg);
}
.hero h1{font-size:clamp(34px,4.6vw,54px)}
.hero .lede{margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* Hero — shader version, homepage only (see .shader-hero below) */
.shader-hero{
  position:relative;overflow:hidden;
  min-height:92vh;display:flex;align-items:center;justify-content:center;
  text-align:center;background:#000;
}
.shader-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shader-hero .noise{
  position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.shader-hero .inner{position:relative;z-index:2;max-width:760px;padding:24px}
.shader-hero .badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(12px);
  color:#fff;font-size:13.5px;font-weight:500;padding:8px 16px;border-radius:100px;
  opacity:0;animation:hero-rise .7s ease .2s forwards;
}
.shader-hero h1{
  margin-top:24px;font-size:clamp(38px,6.5vw,68px);color:#fff;
}
.shader-hero h1 .word{display:inline-block}
.shader-hero h1 .letter{
  display:inline-block;opacity:0;transform:translateY(24px);
  animation:hero-rise .5s ease forwards;
}
.shader-hero .lede{
  margin:24px auto 0;color:rgba(255,255,255,.68);font-size:18px;max-width:56ch;
  opacity:0;animation:hero-rise .7s ease 1.1s forwards;
}
.shader-hero .hero-actions{justify-content:center;margin-top:36px;opacity:0;animation:hero-rise .7s ease 1.4s forwards}
.shader-hero .hero-sub-link{
  display:block;margin-top:18px;font-size:14px;color:rgba(255,255,255,.55);text-decoration:none;
  opacity:0;animation:hero-rise .7s ease 1.55s forwards;
}
.shader-hero .hero-sub-link:hover{color:#fff}
@keyframes hero-rise{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .shader-hero .badge,.shader-hero h1 .letter,.shader-hero .lede,.shader-hero .hero-actions,.shader-hero .hero-sub-link{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}
@media (max-width:640px){ .shader-hero{min-height:80vh} }

/* Hero visual: real product-shot video of the laptop dipping into liquid and
   opening, topped with the real Velzo logo fading in once the screen is
   visible. Plays once on load and holds its final frame — see initHeroDip()
   in script.js for the timing/reduced-motion logic. */
.dip-video-stage{
  /* 640px is the source video's native resolution — sizing beyond that
     upscales past real pixel data and starts to soften, so this is the
     largest it can go without a genuine quality drop. */
  position:relative;width:min(640px, 90vw);margin:0 auto 40px;
  border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--shadow);
}
.dip-video{display:block;width:100%;height:auto}
.dip-video-logo{
  position:absolute;left:22%;top:30%;width:55%;height:37%;
  object-fit:contain;object-position:center;
  opacity:0;transform:scale(.92);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.55));
  transition:opacity 1s ease, transform 1s ease;
}
.dip-video-logo.visible{opacity:1;transform:scale(1)}

@media (max-width:480px){ .dip-video-stage{margin-bottom:24px} }

/* Slim stat strip, sits between the shader hero and the first section */
.stat-strip{border-bottom:1px solid var(--border);background:var(--bg)}
.stat-strip-row{
  padding:20px 24px;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted-ink);
}
.stat-strip-row b{color:var(--ink);font-family:'Outfit',sans-serif;font-weight:600}
.stat-strip-row .div{color:var(--border)}

/* Section headers */
.section-head{max-width:640px;margin:0 0 48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(26px,3.4vw,38px)}
.section-head .lede{margin-top:14px}

/* Cards / grids */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:28px;
}
.service-card .icon{
  width:44px;height:44px;border-radius:12px;background:var(--muted-bg);
  display:flex;align-items:center;justify-content:center;color:var(--primary);
  margin-bottom:18px;
}
.service-card h3{font-size:19px;margin-bottom:8px}
.service-card p{color:var(--muted-ink);font-size:14.5px}
.service-card .from{
  display:block;margin-top:16px;font-size:13px;font-weight:600;color:var(--primary);
}
.service-card a.card-link{text-decoration:none;color:inherit;display:block}

.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.check-list li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px}
.check-list svg{flex-shrink:0;margin-top:2px;color:var(--primary)}

/* Feature row (icon + text, used on Home "why us") */
.feature-row{display:flex;gap:16px}
.feature-row .icon{
  width:40px;height:40px;border-radius:10px;background:var(--muted-bg);
  display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;
}
.feature-row h3{font-size:16px;margin-bottom:4px}
.feature-row p{color:var(--muted-ink);font-size:14px}

/* Pricing */
.featured{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:40px;
}
.featured-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;padding:40px}
.badge-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.badge{
  background:var(--primary);color:var(--primary-fg);font-size:12px;font-weight:600;
  padding:5px 12px;border-radius:100px;white-space:nowrap;
}
.tag-plain{font-size:13.5px;color:var(--muted-ink)}
.featured-grid h3{font-size:26px}
.featured-grid .desc{margin:8px 0 0;color:var(--muted-ink);font-size:15px}
.feature-list{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.feature-list li{display:flex;align-items:flex-start;gap:8px;font-size:14.5px}
.feature-list svg{flex-shrink:0;margin-top:2px;color:var(--primary)}
.price-box{
  background:var(--muted-bg);border-radius:12px;padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.price-row{display:flex;align-items:baseline;gap:8px}
.price-row .amount{font-size:44px;font-weight:700;font-family:'Outfit',sans-serif;letter-spacing:-.02em}
.price-row .freq{font-size:14px;color:var(--muted-ink)}
.btn-primary.full{margin-top:20px;width:100%}
.btn-outline.full{width:100%}

.section-label{
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-ink);margin:0 0 16px;
}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:40px}
.addon-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:24px;display:flex;flex-direction:column;
}
.addon-card h3{font-size:17px;font-weight:600;line-height:1.3}
.addon-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 18px}
.addon-price .amount{font-size:26px;font-weight:700;font-family:'Outfit',sans-serif}
.addon-price .freq{font-size:12px;color:var(--muted-ink)}
.addon-card .feature-list{grid-template-columns:1fr;gap:10px;flex:1;margin-bottom:20px}
.addon-note{font-size:12.5px;color:var(--muted-ink);line-height:1.5;margin:0 0 16px}
.price-context{font-size:12.5px;color:var(--muted-ink);margin-top:6px;max-width:24ch}

.callout{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:24px 28px;margin-bottom:40px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.callout h3{font-size:16px;margin-bottom:6px}
.callout p{font-size:14px;color:var(--muted-ink);max-width:56ch}
.callout b{color:var(--ink)}

.care{
  background:var(--primary);color:var(--primary-fg);border-radius:16px;
  padding:32px;display:flex;justify-content:space-between;align-items:center;gap:32px;
}
.care .kicker{font-size:13px;font-weight:600;opacity:.78;margin:0 0 4px}
.care h3{font-size:21px}
.care .note{font-size:13.5px;opacity:.82;margin:4px 0 0}
.care .feature-list{grid-template-columns:1fr 1fr;margin-top:16px}
.care .feature-list svg{color:var(--primary-fg)}
.care-cta{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0}
.care-cta .price-row .amount{color:var(--primary-fg)}
.care-cta .price-row .freq{color:var(--primary-fg);opacity:.82}
.care .btn-secondary{
  width:auto;padding:12px 22px;
  background:var(--primary-fg);color:var(--primary);border-color:transparent;backdrop-filter:none;
}
.care .btn-secondary:hover{background:#1A1A1A}

@media (max-width:860px){
  .featured-grid{grid-template-columns:1fr}
  .addons{grid-template-columns:1fr}
  .care{flex-direction:column;align-items:flex-start}
  .care-cta{align-items:flex-start;width:100%}
  .care .feature-list{grid-template-columns:1fr}
}
@media (max-width:500px){
  .feature-list{grid-template-columns:1fr}
  .featured-grid{padding:24px}
}

/* CTA banner */
.cta-banner{
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.1), transparent 70%),
    linear-gradient(135deg,#1a1a1a,#000000);
  border:1px solid var(--border);
  border-radius:20px;padding:56px;text-align:center;color:#fff;
}
.cta-banner h2{font-size:clamp(24px,3vw,32px);color:#fff}
.cta-banner p{color:rgba(255,255,255,.68);margin-top:12px;max-width:52ch;margin-left:auto;margin-right:auto}
.cta-banner .hero-actions{justify-content:center;margin-top:28px}

/* Process steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.step{position:relative;padding-top:8px}
.step .num{
  counter-increment:step;font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;
  color:var(--primary);margin-bottom:10px;
}
.step .num::before{content:"0" counter(step);}
.step h3{font-size:16px;margin-bottom:6px}
.step p{font-size:14px;color:var(--muted-ink)}

/* FAQ (native details/summary — no JS needed) */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px 22px;
}
.faq-item summary{
  cursor:pointer;font-family:'Outfit',sans-serif;font-weight:600;font-size:15.5px;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:'Inter',sans-serif;font-weight:400;font-size:20px;color:var(--muted-ink);
  flex-shrink:0;transition:transform .15s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:12px;color:var(--muted-ink);font-size:14.5px;line-height:1.65}

/* Form */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.form-row label{font-size:13.5px;font-weight:600}
.form-row input,.form-row textarea,.form-row select{
  border:1px solid var(--border);border-radius:9px;padding:11px 13px;
  font-family:'Inter',sans-serif;font-size:14.5px;background:var(--bg);color:var(--ink);
}
.form-row select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:2px solid var(--primary);outline-offset:1px}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){ .form-two{grid-template-columns:1fr} }
.form-promise{text-align:center;font-size:13px;color:var(--muted-ink);margin-top:14px}

.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-info .item{display:flex;gap:14px}
.contact-info .icon{
  width:40px;height:40px;border-radius:10px;background:var(--muted-bg);
  display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0;
}
.contact-info h3{font-size:15px;margin-bottom:3px}
.contact-info p{font-size:14px;color:var(--muted-ink)}

/* Footer */
.footer{border-top:1px solid var(--border);padding:56px 0 32px;background:var(--surface-alt)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr} }
.footer h5{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-ink);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer a{text-decoration:none;color:var(--ink);font-size:14.5px}
.footer a:hover{color:var(--primary)}
.footer .brand-blurb{color:var(--muted-ink);font-size:14px;margin-top:12px;max-width:32ch}
.footer-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--muted-ink);
}

/* Placeholder / empty states */
.placeholder-card{
  border:1px dashed var(--border);border-radius:16px;padding:40px;text-align:center;
  color:var(--muted-ink);background:var(--surface);
}
.placeholder-card h3{color:var(--ink);font-size:18px;margin-bottom:10px}