/* =========================================================
   GET BUILT ONLINE — stylesheet
   Table of contents:
   1. Tokens
   2. Reset & base
   3. Utilities
   4. Buttons
   5. Navbar
   6. Hero
   7. Problems
   8. Services
   9. Process (dark band)
   10. Results / compare
   11. About
   12. Final CTA
   13. Contact
   14. Footer
   15. Reveal animation
   16. Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* color */
  --ink: #0B0E14;
  --ink-soft: #4B5563;
  --ink-faint: #6B7280;
  --paper: #FFFFFF;
  --mist: #F4F5F7;
  --mist-deep: #ECEEF2;
  --line: #E3E5EA;
  --accent: #2545E8;
  --accent-deep: #16309E;
  --accent-tint: #EEF1FE;
  --brass: #96651E;
  --night: #0B0E14;
  --night-soft: #171B26;
  --night-line: #2A2F3D;
  --good: #16794F;
  --bad: #C4432C;

  /* type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* layout */
  --max-w: 1180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --section-pad: clamp(64px, 9vw, 120px);

  /* motion */
  --ease: cubic-bezier(.22,.9,.3,1);
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
img, svg{ display:block; max-width: 100%; }
section[id]{ scroll-margin-top: 88px; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font: inherit; cursor:pointer; }
input, textarea{ font: inherit; }

::selection{ background: var(--accent); color:#fff; }

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

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. UTILITIES ---------- */
.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-60px;
  background: var(--ink); color:#fff; padding:12px 18px;
  border-radius: var(--radius-sm); z-index: 999; transition: top .2s var(--ease);
  font-weight:600; font-size:.9rem;
}
.skip-link:focus{ top:12px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.eyebrow__tick{
  width: 14px; height: 2px; background: var(--brass); display:inline-block; flex-shrink:0;
}
.eyebrow--dark{ color: #B7BECC; }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.section-head__sub{ font-size: 1.05rem; }
.section-head--light h2, .section-head--light p{ color:#fff; }
.section-head--light .section-head__sub{ color:#AFB6C4; }

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-weight:600; font-family: var(--font-body);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  padding: 13px 24px;
  font-size: .95rem;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn--primary{ background: var(--accent); color:#fff; }
.btn--primary:hover{ background: var(--accent-deep); transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--ink); transform: translateY(-1px); }
.btn--light{ background:#fff; color: var(--accent-deep); }
.btn--light:hover{ background: #EDEFFB; transform: translateY(-1px); }
.btn--sm{ padding: 10px 18px; font-size: .85rem; }
.btn--lg{ padding: 15px 28px; font-size: 1rem; }
.btn--block{ width:100%; }

/* ---------- 5. NAVBAR ---------- */
.nav{
  position: sticky; top:0; z-index: 500;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.is-scrolled{ border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(11,14,20,.35); }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{ color: var(--accent); display:flex; }
.brand__text{
  font-family: var(--font-display); font-weight:500; font-size:1.18rem; color: var(--ink);
  letter-spacing: -0.01em; white-space: nowrap;
}
.brand__text strong{ color: var(--accent); font-weight:700; }

.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  font-size:.95rem; font-weight:500; color: var(--ink-soft);
  position:relative; padding: 4px 0;
  transition: color .18s var(--ease);
}
.nav__links a:hover{ color: var(--ink); }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__links a:hover::after{ transform: scaleX(1); }

.nav__actions{ display:flex; align-items:center; gap:16px; }
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; padding:0;
}
.nav__toggle span{ height:2px; background: var(--ink); border-radius:2px; transition: transform .25s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; max-height:0; overflow:hidden; background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: max-height .3s var(--ease);
}
.mobile-menu nav{ display:flex; flex-direction:column; padding: 8px 28px 24px; gap: 4px; }
.mobile-menu a{
  padding: 13px 4px; font-weight:500; font-size:1.02rem; color: var(--ink);
  border-bottom: 1px solid var(--mist-deep);
}
.mobile-menu .btn{ margin-top:14px; border-bottom:none; text-align:center; }
.mobile-menu.is-open{ max-height: 480px; }

/* ---------- 6. HERO ---------- */
.hero{ padding: clamp(56px, 8vw, 96px) 0 var(--section-pad); overflow:hidden; }
.hero__inner{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center;
}
.hero__headline{
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  display:flex; flex-direction:column; gap:.15em;
}
.accent-text{ color: var(--accent); }
.hero__sub{ font-size: 1.12rem; max-width: 520px; margin-top: 22px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }
.hero__meta{ font-size: .85rem; color: var(--ink-faint); margin-top:18px; margin-bottom:0; }

/* --- hero xray visual --- */
.xray{ margin: 0 6px; }
.xray__frame{
  position:relative;
  padding: 10px 30px 22px 22px;
}
.xray__clip{
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(11,14,20,.28);
}
.xray__chrome{
  display:flex; align-items:center; gap:6px;
  padding: 14px 16px; border-bottom:1px solid var(--line); background: var(--paper);
}
.xray__chrome span{ width:8px; height:8px; border-radius:50%; background: var(--line); }
.xray__address{ flex:1; height:16px; margin-left:10px; border-radius:4px; background: var(--mist); }

.xray__body{ padding: 24px 24px 8px; }
.xray__navrow{ display:flex; align-items:center; gap:14px; margin-bottom: 30px; }
.xray__logo-block{ width:46px; height:14px; border-radius:3px; background: var(--ink); opacity:.8; }
.xray__link-block{ width:34px; height:8px; border-radius:3px; background: var(--line); }
.xray__link-block--flag{ background: var(--bad); opacity:.55; margin-left:auto; }

.xray__hero{ display:flex; flex-direction:column; gap:10px; margin-bottom: 30px; }
.xray__line{ height:14px; border-radius:3px; background: var(--line); }
.xray__line--lg{ width: 78%; }
.xray__line--short{ width:52%; }
.xray__line--sm{ height:9px; width:60%; background: var(--mist-deep); margin-top:4px; }
.xray__button{ width:118px; height:34px; border-radius:6px; background: var(--mist-deep); border:1.5px dashed var(--ink-faint); margin-top:8px; }

.xray__row{ display:flex; gap:10px; padding-bottom: 22px; }
.xray__badge{ flex:1; height:30px; border-radius:5px; border: 1.5px dashed var(--line); }

.xray__scan{
  position:absolute; left:0; right:0; top:6%; height:38%;
  background: linear-gradient(180deg, rgba(37,69,232,0) 0%, rgba(37,69,232,.09) 50%, rgba(37,69,232,0) 100%);
  border-top: 1px solid rgba(37,69,232,.5);
  border-bottom: 1px solid rgba(37,69,232,.15);
  animation: scan 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scan{
  0%{ top: 6%; }
  50%{ top: 58%; }
  100%{ top: 6%; }
}

.tag{
  position:absolute; display:flex; align-items:center; gap:7px;
  background: var(--ink); color:#fff; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing:.02em; white-space:nowrap;
  padding: 7px 11px 7px 9px; border-radius: 999px;
  box-shadow: 0 12px 24px -12px rgba(11,14,20,.5);
}
.tag__dot{ width:6px; height:6px; border-radius:50%; background: var(--bad); flex-shrink:0; }
.tag--1{ top: 4%; right: 2px; }
.tag--2{ top: 46%; left: 2px; }
.tag--3{ bottom: 6%; right: 2px; }

/* ---------- 7. PROBLEMS ---------- */
.problems{ padding: var(--section-pad) 0; background: var(--mist); }
.problem-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
}
.problem-card{
  background: var(--paper); padding: 34px 32px;
}
.problem-card__num{
  font-family: var(--font-mono); font-size:.85rem; color: var(--accent);
  letter-spacing: .06em; display:block; margin-bottom: 14px;
}
.problem-card h3{ font-size: 1.18rem; margin-bottom:.4em; }
.problem-card p{ font-size: .96rem; margin-bottom:0; }

/* ---------- 8. SERVICES ---------- */
.services{ padding: var(--section-pad) 0; }
.service-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.service-card{
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 30px 26px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.service-card:hover{
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -32px rgba(11,14,20,.28);
}
.service-card__icon{
  width:52px; height:52px; border-radius: 12px; background: var(--accent-tint); color: var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom: 22px;
}
.service-card__icon svg{ width:24px; height:24px; }
.service-card h3{ font-size: 1.12rem; margin-bottom:.5em; }
.service-card p{ font-size: .92rem; margin-bottom: 18px; }
.service-card__list{ display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--mist-deep); padding-top:16px; }
.service-card__list li{
  font-size: .84rem; color: var(--ink-soft); padding-left: 18px; position:relative;
}
.service-card__list li::before{
  content:''; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-radius:2px; background: var(--accent); opacity:.28;
}

/* ---------- 9. PROCESS (dark band) ---------- */
.process{ padding: var(--section-pad) 0; background: var(--night); color:#fff; }
.process h2{ color:#fff; }
.process-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.process-step__top{ display:flex; align-items:center; gap:14px; margin-bottom: 22px; }
.process-step__num{
  width:40px; height:40px; border-radius:50%; background: var(--accent);
  color:#fff; font-family: var(--font-display); font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem;
}
.process-step__line{ height:1px; flex:1; background: var(--night-line); }
.process-step h3{ color:#fff; font-size: 1.25rem; }
.process-step p{ color:#AFB6C4; font-size: .96rem; }

/* ---------- 10. RESULTS / COMPARE ---------- */
.results{ padding: var(--section-pad) 0; }
.compare{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.compare__card{
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px;
  background: var(--paper);
}
.compare__card--after{ border-color: var(--accent); }
.compare__label{
  display:inline-block; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink-faint); margin-bottom: 16px;
}
.compare__label--accent{ color: var(--accent); }

.compare__mock{ background: var(--mist); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 20px; }
.cm-nav{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.cm-nav span{ width:26px; height:7px; border-radius:2px; background: var(--line); }
.cm-nav--clean span{ background: var(--mist-deep); }
.cm-nav__cta{ background: var(--accent) !important; opacity:.85; margin-left:auto; width:34px !important; }
.cm-block{ height:10px; border-radius:2px; background: var(--line); margin-bottom:9px; }
.cm-block--wide{ width:100%; }
.cm-block--short{ width:65%; }
.cm-block--title{ width:75%; height:16px; background: var(--ink); opacity:.85; margin-bottom:10px; }
.cm-block--sub{ width:55%; }
.cm-btn{ width:100px; height:26px; border-radius:5px; margin-top:6px; }
.cm-btn--weak{ background: var(--mist-deep); border: 1.5px dashed var(--ink-faint); }
.cm-btn--strong{ background: var(--accent); }
.cm-trust{ display:flex; gap:8px; margin-top:14px; }
.cm-trust span{ width:30px; height:20px; border-radius:4px; background: var(--accent-tint); border: 1px solid var(--accent); opacity:.7; }

.compare__points{ display:flex; flex-direction:column; gap:10px; }
.compare__points li{ font-size:.92rem; color: var(--ink-soft); padding-left:22px; position:relative; }
.compare__card--before .compare__points li::before{
  content:'—'; position:absolute; left:0; color: var(--bad); font-weight:700;
}
.compare__card--after .compare__points li::before{
  content:'✓'; position:absolute; left:0; color: var(--good); font-weight:700;
}
.compare__disclaimer{ font-size:.82rem; color: var(--ink-faint); margin-top:22px; text-align:center; }

/* ---------- 11. ABOUT ---------- */
.about{ padding: var(--section-pad) 0; background: var(--mist); }
.about__inner{ display:grid; grid-template-columns: 1.2fr .9fr; gap: 64px; align-items:start; }
.about__copy h2{ font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.about__copy p{ font-size: 1.03rem; }
.about__pillars{ display:flex; flex-direction:column; gap: 26px; }
.pillar{ border-left: 2px solid var(--accent); padding-left: 20px; }
.pillar h3{ font-size:1.02rem; margin-bottom:.35em; }
.pillar p{ font-size:.9rem; margin-bottom:0; }

/* ---------- 12. FINAL CTA ---------- */
.final-cta{ background: var(--accent); padding: 64px 0; }
.final-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.final-cta h2{ color:#fff; font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom:.3em; }
.final-cta p{ color: #DCE2FB; margin-bottom:0; max-width:440px; font-size:1rem; }
.final-cta__action{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.final-cta__meta{ font-size:.82rem; color:#C9D1F7; }

/* ---------- 13. CONTACT ---------- */
.contact{ padding: var(--section-pad) 0; }
.contact__inner{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.contact__intro p{ font-size: 1.02rem; }
.contact__steps{ display:flex; flex-direction:column; gap:16px; margin-top: 28px; }
.contact__steps li{
  display:flex; align-items:center; gap:14px; font-size:.95rem; color: var(--ink);
  font-weight:500;
}
.contact__steps li span{
  width:26px; height:26px; border-radius:50%; background: var(--ink); color:#fff;
  font-family: var(--font-mono); font-size:.78rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.contact__form{
  background: var(--mist); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px;
}
.form-row{ margin-bottom: 20px; }
.form-row label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:7px; }
.form-row input, .form-row textarea{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); outline:none;
}
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact__status{ margin: 14px 0 0; font-size:.88rem; min-height: 1.2em; }
.contact__status[data-state="success"]{ color: var(--good); }
.contact__status[data-state="error"]{ color: var(--bad); }

/* ---------- 14. FOOTER ---------- */
.footer{ background: var(--night); color: #C6CBD8; padding-top: 56px; }
.footer__inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom: 40px; border-bottom: 1px solid var(--night-line); }
.footer .brand__text{ color:#fff; }
.footer .brand__mark{ color: var(--accent); }
.footer__brand p{ margin-top: 14px; color:#8890A0; max-width: 280px; font-size:.92rem; }
.footer__links{ display:flex; gap: 30px; align-items:flex-start; padding-top: 6px; }
.footer__links a{ font-size:.92rem; color:#C6CBD8; transition: color .18s var(--ease); }
.footer__links a:hover{ color:#fff; }
.footer__bottom{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 22px 28px 28px; font-size:.8rem; color:#6B7280;
}
.footer__bottom p{ margin:0; color:#6B7280; }

/* ---------- 15. REVEAL ANIMATION ---------- */
[data-reveal]{
  opacity:0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay: .12s; }

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 1020px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__visual{ order:-1; max-width: 460px; margin: 0 auto; }
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
  .about__inner{ grid-template-columns: 1fr; }
  .about__pillars{ flex-direction:row; flex-wrap:wrap; }
  .pillar{ flex: 1 1 220px; }
  .contact__inner{ grid-template-columns: 1fr; }
}

@media (max-width: 880px){
  .nav__links{ display:none; }
  .nav__actions .btn{ display:none; }
  .nav__toggle{ display:flex; }
  .mobile-menu{ display:block; }
  .process-grid{ grid-template-columns: 1fr; gap: 34px; }
  .process-step__line{ display:none; }
  .compare{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .nav__inner{ height: 68px; }
  .brand__text{ font-size: 1rem; }
  .brand__mark svg{ width:22px; height:22px; }
}

@media (max-width: 700px){
  .problem-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .final-cta__inner{ flex-direction:column; align-items:flex-start; }
  .tag{ font-size:.62rem; padding: 6px 9px 6px 8px; }
  .tag--1{ right: 4px; transform:none; }
  .tag--2{ left: 4px; transform:none; }
  .tag--3{ right: 4px; transform:none; }
}

@media (max-width: 480px){
  .wrap{ padding: 0 20px; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
  .contact__form{ padding: 24px; }
}