/* ==============================================================================
   Vectra landing page (vectralog.com)
   Base styles are the approved design; everything under "Responsive layer"
   adapts it for phones/tablets without changing desktop rendering.
   ============================================================================== */

:root{--navy:#0F1A2E;--navy-2:#16243F;--accent:#DC4B17;--accent-2:#B83C10;--teal:#0E8F84;--blue:#2563EB;--paper:#F4F1EA;--paper-2:#EDE9DE;--ink:#0E1116;--ink-2:#1B2230;--ink-3:#4A5260;--ink-4:#7B8492;--line:#E2DDD0;--line-2:#ECE7DA;--font-display:"Syne",sans-serif;--font-body:"DM Sans",sans-serif;--font-mono:"JetBrains Mono",monospace;--gutter:clamp(20px,4vw,32px);}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-2);}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter);}
.mono{font-family:var(--font-mono);}
[id]{scroll-margin-top:84px;}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(244,241,234,0.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px var(--gutter);max-width:1180px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;}
.brand svg{display:block;flex:none;}
.brand .name{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:0.01em;color:var(--navy);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{color:var(--ink-3);font-size:14px;font-weight:600;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{padding:10px 20px;border-radius:9px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:700;font-family:var(--font-display);}
.nav-cta:hover{background:var(--navy-2);color:#fff;}
.nav-cta--mobile{display:none;}
.nav-toggle{display:none;}

/* hero */
.hero{padding:clamp(64px,10vw,100px) var(--gutter) clamp(52px,9vw,84px);text-align:center;}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);font-weight:600;}
.hero h1{font-family:var(--font-display);font-size:clamp(34px,5vw + 18px,58px);font-weight:800;letter-spacing:-0.02em;line-height:1.05;margin:18px 0 20px;color:var(--navy);}
.hero p{font-size:17px;color:var(--ink-3);max-width:600px;margin:0 auto 34px;line-height:1.6;}
.hero-ctas{display:flex;gap:12px;justify-content:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:10px;font-weight:700;font-family:var(--font-display);font-size:14.5px;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-2);color:#fff;}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink-2);}
.btn-ghost:hover{border-color:var(--ink-3);color:var(--ink);}
.btn:active{transform:scale(0.98);}
.nav-cta:active,.visit:active{opacity:0.7;}

/* products */
.section{padding:clamp(48px,7vw,70px) var(--gutter);}
.section-head{text-align:center;margin-bottom:48px;}
.section-head h2{font-family:var(--font-display);font-size:clamp(26px,2.5vw + 18px,34px);font-weight:700;letter-spacing:-0.015em;color:var(--navy);margin:10px 0 10px;}
.section-head p{color:var(--ink-4);font-size:14.5px;max-width:460px;margin:0 auto;}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin:0 auto;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 28px;display:flex;flex-direction:column;gap:16px;transition:transform .18s,box-shadow .18s;}
.pcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,26,46,0.1);}
.pcard .icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;}
.pcard h3{font-family:var(--font-display);font-size:clamp(19px,1vw + 17px,21px);font-weight:700;color:var(--navy);}
.pcard p{font-size:13.5px;color:var(--ink-3);line-height:1.6;flex:1;}
.pcard .tags{display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-family:var(--font-mono);font-size:10.5px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:0.02em;}
.pcard .visit{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;font-family:var(--font-display);margin-top:4px;padding:6px 0;}

/* how it works band */
.band{background:var(--navy);color:#fff;padding:clamp(48px,7vw,70px) var(--gutter);}
.band .section-head h2{color:#fff;}
.band .section-head p{color:rgba(255,255,255,0.55);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.step{padding:26px;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);}
.step .num{font-family:var(--font-mono);font-size:12px;color:var(--accent);font-weight:700;letter-spacing:0.1em;}
.step h4{font-family:var(--font-display);font-size:17px;margin:10px 0 8px;}
.step p{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.6;}

/* CTA */
.cta-band{padding:clamp(56px,8vw,80px) var(--gutter);text-align:center;}
.cta-band h2{font-family:var(--font-display);font-size:clamp(25px,2.5vw + 17px,32px);font-weight:700;color:var(--navy);margin-bottom:14px;letter-spacing:-0.015em;}
.cta-band p{color:var(--ink-4);font-size:14.5px;margin-bottom:28px;}

/* footer */
footer{background:var(--navy);color:rgba(255,255,255,0.7);padding:clamp(44px,6vw,56px) var(--gutter) 28px;}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.1);}
.f-brand .brand .name{color:#fff;}
.f-brand p{font-size:13px;color:rgba(255,255,255,0.5);margin-top:14px;line-height:1.6;max-width:280px;}
.f-col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:14px;font-weight:600;}
.f-col a,.f-col div{display:block;font-size:13.5px;color:rgba(255,255,255,0.75);margin-bottom:10px;}
.f-col a:hover{color:#fff;}
.f-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12px;color:rgba(255,255,255,0.4);flex-wrap:wrap;gap:10px;}
.f-bottom .mono{color:rgba(255,255,255,0.35);}

/* ==============================================================================
   Responsive layer
   ============================================================================== */

/* Hamburger button (hidden on desktop) */
.nav-toggle{width:44px;height:44px;margin-right:-10px;border:0;border-radius:9px;background:transparent;cursor:pointer;display:none;place-items:center;}
.nav-toggle .bars{position:relative;width:22px;height:2px;background:var(--ink);transition:background .15s ease;}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .18s ease,top .18s ease;}
.nav-toggle .bars::before{top:-7px;}
.nav-toggle .bars::after{top:7px;}
.nav-open .nav-toggle .bars{background:transparent;}
.nav-open .nav-toggle .bars::before{top:0;transform:rotate(45deg);}
.nav-open .nav-toggle .bars::after{top:0;transform:rotate(-45deg);}

/* Tablet — products drop to two columns */
@media (max-width:1024px){
  .products{grid-template-columns:repeat(2,1fr);}
}

/* Phone-nav breakpoint — links collapse into a slide-down panel */
@media (max-width:860px){
  .nav > .nav-cta{display:none;}
  .nav-toggle{display:grid;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px rgba(15,26,46,0.08);
    padding:10px var(--gutter) 18px;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .nav-open .nav-links{opacity:1;visibility:visible;transform:none;}
  .nav-links a{display:flex;align-items:center;min-height:44px;padding:12px 0;font-size:15px;}
  .nav-cta--mobile{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px;}
  .steps{grid-template-columns:1fr;}
  .f-grid{grid-template-columns:1fr;gap:28px;}
}

/* Phones — single column, stacked CTAs, tighter rhythm */
@media (max-width:640px){
  .nav{padding-block:12px;}
  .section-head{margin-bottom:34px;}
  .hero p{font-size:15.5px;margin-bottom:28px;}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;}
  .hero-ctas .btn{width:100%;}
  .products{grid-template-columns:1fr;gap:16px;}
  .pcard{padding:28px 22px;}
  .step{padding:22px 20px;}
  .f-grid{padding-bottom:28px;}
  .f-brand p{max-width:none;}
  .f-bottom{flex-direction:column;justify-content:center;text-align:center;padding-top:26px;}
}

/* Small phones — final polish */
@media (max-width:380px){
  .brand .name{font-size:18px;}
  .eyebrow{font-size:11px;letter-spacing:0.12em;}
  .pcard{padding:24px 18px;}
  .pcard .icon{width:46px;height:46px;}
}

/* Respect users who prefer fewer animations */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
  .pcard:hover{transform:none;}
}