/* ==========================================================================
   Cyber Mortgage LLC — MODERNIZED build (Phase 5)
   Same brand DNA (black canvas + indigo), executed with more craft:
   a royal-blue→periwinkle brand ramp, elevated surfaces, a real type scale,
   accent-filled CTAs, and a faster, calmer layout. Rationale in CHANGES.md.
   ========================================================================== */

:root{
  /* Brand ramp — rooted in the measured logo blue + periwinkle accent */
  --ink:#05060b;                 /* near-black base with a hint of blue */
  --ink-2:#0b0d16;               /* section alt */
  --surface:#12141f;             /* cards */
  --surface-2:#171a27;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  --indigo:#7f7cff;              /* refined periwinkle (AA on ink for large/bold) */
  --indigo-bright:#9a97ff;       /* link text on dark (higher contrast) */
  --indigo-600:#635fe6;
  --blue:#2f6bff;                /* royal-blue secondary, from logo */
  --brand-blue:#0a53d6;
  --brand-red:#e0242b;           /* logo MORTGAGE */

  --text:#f4f5fb;
  --muted:#b9bed0;
  --muted-2:#8b90a6;

  --grad:linear-gradient(120deg,var(--blue),var(--indigo));
  --grad-btn:linear-gradient(120deg,var(--indigo),var(--indigo-bright)); /* AA-safe: dark text ≥5.8:1 across the whole button */
  --grad-soft:linear-gradient(160deg,rgba(47,107,255,.16),rgba(127,124,255,.10));

  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Type scale (1.25 major-third-ish, fluid) */
  --step--1:clamp(1.05rem,1rem + .15vw,1.15rem);
  --step-0:clamp(1.3rem,1.24rem + .25vw,1.4rem);
  --step-1:clamp(1.55rem,1.42rem + .6vw,1.8rem);
  --step-2:clamp(1.95rem,1.7rem + 1.2vw,2.45rem);
  --step-3:clamp(2.45rem,1.95rem + 2.2vw,3.35rem);
  --step-4:clamp(3.1rem,2.35rem + 3.6vw,4.65rem);

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
  --radius:14px;--radius-sm:10px;--radius-pill:999px;
  --container:1120px;--header-h:82px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);background:var(--ink);color:var(--text);
  font-size:var(--step-0);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 var(--sp-4);line-height:1.1;font-weight:800;letter-spacing:-.02em}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}h3{font-size:var(--step-2)}h4{font-size:var(--step-1)}
p{margin:0 0 var(--sp-4)}
a{color:var(--indigo-bright);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--indigo-bright);outline-offset:3px;border-radius:4px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.wide{max-width:1280px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--muted)}.center{text-align:center}
.eyebrow{display:inline-block;font-size:var(--step--1);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo-bright);margin-bottom:var(--sp-3)}

.skip-link{position:absolute;left:8px;top:-48px;background:var(--indigo);color:#0a0a12;font-weight:700;
  padding:10px 16px;border-radius:var(--radius-sm);z-index:2000;transition:top .15s}
.skip-link:focus{top:8px;text-decoration:none}

/* Buttons — accent-FILLED primary (the conversion change) --------------------*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;
  cursor:pointer;text-align:center;padding:15px 26px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;font-size:var(--step-0);line-height:1;min-height:48px;
  transition:transform .12s ease,box-shadow .2s,background .2s,color .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad-btn);color:#0a0a12;box-shadow:0 10px 24px -8px rgba(127,124,255,.6)}
.btn-primary:hover{box-shadow:0 14px 30px -8px rgba(127,124,255,.75)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--indigo-bright);color:var(--indigo-bright)}
.btn-lg{padding:18px 34px;font-size:var(--step-1)}
.btn-block{width:100%}

/* Header --------------------------------------------------------------------*/
.site-header{position:sticky;top:0;z-index:100;background:rgba(5,6,11,.82);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-weight:900;
  font-size:1.5rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .c{color:#4f86ff}.brand .m{color:var(--brand-red);font-size:.7em;letter-spacing:2px;font-weight:800}
.brand img{height:38px}
.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);color:var(--text);
  border-radius:var(--radius-sm);padding:9px 12px;font-size:1.1rem;cursor:pointer;min-height:44px}
.menu{display:flex;align-items:center;gap:var(--sp-4);list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.menu > li > a,.menu > li > button{color:var(--text);background:none;border:0;font:inherit;font-size:var(--step--1);
  font-weight:600;cursor:pointer;padding:8px 2px;display:inline-flex;align-items:center;gap:6px}
.menu > li > a:hover{color:var(--indigo-bright);text-decoration:none}
.caret{font-size:.7em;transition:transform .2s}[aria-expanded="true"] .caret{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:0;min-width:240px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);list-style:none;margin:8px 0 0;padding:8px;
  display:none;box-shadow:var(--shadow)}
.has-dropdown.open > .submenu{display:block}
.submenu a{display:block;padding:10px 12px;color:var(--text);font-size:var(--step-0);border-radius:8px}
.submenu a:hover{background:var(--grad-soft);color:var(--indigo-bright);text-decoration:none}
.nav-cta{display:inline-flex;gap:10px;align-items:center}
.call-link{font-weight:800;color:var(--indigo-bright);white-space:nowrap}
.btn-apply{background:var(--grad-btn);color:#0a0a12;font-weight:800;padding:10px 20px;border-radius:var(--radius-pill);white-space:nowrap}
.btn-apply:hover{text-decoration:none;transform:translateY(-1px)}

/* Hero ----------------------------------------------------------------------*/
.hero{position:relative;overflow:clip;background:var(--ink)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 500px at 15% -10%,rgba(47,107,255,.28),transparent 60%),
  radial-gradient(900px 500px at 100% 0%,rgba(127,124,255,.22),transparent 55%);z-index:0}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;z-index:0}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);
  align-items:center;padding-block:var(--sp-9)}
.hero h1{margin-bottom:var(--sp-4)}
.hero .lead{font-size:var(--step-1);color:var(--muted);max-width:46ch;margin-bottom:var(--sp-6)}
.hero .cta-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.reassure-row{display:flex;gap:var(--sp-5);flex-wrap:wrap;color:var(--muted);font-size:var(--step--1)}
.reassure-row span{display:inline-flex;align-items:center;gap:6px}
.reassure-row .dot{color:#57e39b}

/* Inline hero form card (reduces click-to-open friction) */
.lead-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-6);box-shadow:var(--shadow)}
.lead-card h2{font-size:var(--step-2);margin-bottom:var(--sp-2)}
.lead-card .sub{color:var(--muted);font-size:var(--step--1);margin-bottom:var(--sp-5)}
.broker-mini{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.broker-mini img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--indigo)}
.broker-mini .n{font-weight:800}.broker-mini .r{color:var(--muted);font-size:var(--step--1)}

/* Forms ---------------------------------------------------------------------*/
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--step--1);font-weight:600;margin-bottom:6px}
.field input,.field select{width:100%;padding:13px 14px;border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong);background:#0a0c15;color:var(--text);font:inherit;min-height:48px}
.field input:focus,.field select:focus{border-color:var(--indigo)}
.field .req{color:var(--indigo-bright)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.form-error{color:#ff9b9b;font-size:var(--step--1);margin-top:4px;min-height:1em}
.form-status{margin-top:var(--sp-4);font-weight:700}
.form-status.error{color:#ff9b9b}.form-status.ok{color:#57e39b}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-legal{color:var(--muted-2);font-size:var(--step--1);margin-top:var(--sp-3)}
.spinner{display:inline-block;width:1em;height:1em;border:2px solid rgba(0,0,0,.35);
  border-top-color:#0a0a12;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Trust bar -----------------------------------------------------------------*/
.trustbar{border-block:1px solid var(--line);background:var(--ink-2)}
.trustbar .row{display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--sp-7);align-items:center;
  justify-content:center;padding-block:var(--sp-5);color:var(--muted);font-size:var(--step--1);font-weight:600}
.trustbar .item{display:inline-flex;align-items:center;gap:8px}
.trustbar .badge{border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:6px 14px}

/* Sections ------------------------------------------------------------------*/
.section{padding-block:var(--sp-9)}
.section--alt{background:var(--ink-2)}
.section-head{max-width:64ch;margin:0 auto var(--sp-7)}
.section-head.center{text-align:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6)}
.card h3{font-size:var(--step-1)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;
  margin-bottom:var(--sp-4);font-size:1.3rem}
.loan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.loan-tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-5);color:var(--text);transition:border-color .2s,transform .12s,background .2s}
.loan-tile:hover{border-color:var(--indigo);transform:translateY(-2px);text-decoration:none;background:var(--surface-2)}
.loan-tile .t{font-weight:800;margin-bottom:4px}.loan-tile .d{color:var(--muted);font-size:var(--step--1)}
.feature-list{list-style:none;padding:0;margin:var(--sp-4) 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-5)}
.feature-list li{padding-left:26px;position:relative}
.feature-list li::before{content:"✓";position:absolute;left:0;color:var(--indigo-bright);font-weight:800}
.process-list{counter-reset:s;list-style:none;padding:0;display:grid;gap:var(--sp-3)}
.process-list li{position:relative;padding-left:44px;counter-increment:s}
.process-list li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border-radius:50%;background:var(--grad-soft);border:1px solid var(--line-strong);color:var(--indigo-bright);
  font-weight:800;display:grid;place-items:center}
.media-round img{border-radius:var(--radius);border:1px solid var(--line);width:100%;object-fit:cover;aspect-ratio:5/4}

/* Testimonials (proof) — populate with REAL reviews -------------------------*/
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-6)}
.stars{color:#ffc55a;letter-spacing:2px;margin-bottom:var(--sp-3)}
.review p{font-size:var(--step-0)}
.review .who{color:var(--muted);font-size:var(--step--1);font-weight:600;margin-top:var(--sp-3)}
.rating-line{display:inline-flex;align-items:center;gap:10px;font-weight:700}
.rating-line .stars{margin:0}

/* FAQ -----------------------------------------------------------------------*/
.faq{max-width:820px;margin-inline:auto;display:grid;gap:var(--sp-3)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:700;list-style:none;display:flex;
  justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--indigo-bright);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 20px 18px;color:var(--muted)}

/* Calculator ----------------------------------------------------------------*/
.calc{max-width:820px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--sp-6)}
.calc .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.calc label{display:block;font-size:var(--step--1);font-weight:600;margin-bottom:6px;color:var(--muted)}
.calc input,.calc select{width:100%;padding:13px;border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);
  background:#0a0c15;color:var(--text);font:inherit;min-height:48px}
.calc .result{margin-top:var(--sp-6);text-align:center;background:var(--grad-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--sp-6)}
.calc .amount{font-size:var(--step-4);font-weight:900;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.calc .breakdown{display:flex;justify-content:center;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-3);
  color:var(--muted);font-size:var(--step--1)}

/* Contact / map facade ------------------------------------------------------*/
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:start}
.map-facade{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#0a0c15 center/cover no-repeat;cursor:pointer;display:grid;place-items:center}
.map-facade .play{background:var(--grad);color:#0a0a12;font-weight:800;padding:12px 20px;border-radius:var(--radius-pill)}
.map-embed{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--radius)}
.contact-info{padding:0;margin:0;list-style:none}.contact-info li{margin-bottom:8px}

/* Prose ---------------------------------------------------------------------*/
.prose{max-width:760px;margin-inline:auto}
.prose h1{margin-bottom:var(--sp-6)}.prose h2,.prose h3{margin-top:var(--sp-6)}
.prose p,.prose li{color:var(--muted)}.prose strong{color:var(--text)}

/* CTA band ------------------------------------------------------------------*/
.cta-band{background:var(--grad-soft);border-block:1px solid var(--line)}
.cta-band .inner{text-align:center;padding-block:var(--sp-8)}
.cta-band h2{margin-bottom:var(--sp-5)}

/* Footer --------------------------------------------------------------------*/
.site-footer{background:var(--ink-2);border-top:1px solid var(--line);padding-block:var(--sp-8) var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--sp-7)}
.footer-grid h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
.footer-grid ul{list-style:none;padding:0;margin:0}.footer-grid li{margin-bottom:8px;color:var(--muted)}
.footer-bio{color:var(--muted);max-width:42ch}
.footer-legal{border-top:1px solid var(--line);margin-top:var(--sp-7);padding-top:var(--sp-5);
  font-size:var(--step--1);color:var(--muted-2);text-align:center;line-height:1.8}
.footer-legal a{color:var(--indigo-bright)}
.disclosure{color:var(--muted)}
.footer-badges{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-3)}
.footer-badges span{border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:6px 14px;font-weight:600}

/* Sticky mobile CTA (mobile conversion) ------------------------------------*/
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:10px 14px;
  background:rgba(5,6,11,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.mobile-cta .btn{flex:1;min-height:50px}

/* Modal ---------------------------------------------------------------------*/
.modal{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:var(--sp-4);background:rgba(0,0,0,.72)}
.modal.is-open{display:grid}
.modal-panel{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  width:min(560px,100%);max-height:90vh;overflow:auto;padding:var(--sp-6);position:relative;box-shadow:var(--shadow)}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--text);font-size:1.7rem;
  line-height:1;cursor:pointer;padding:4px 8px;min-height:44px;min-width:44px}
.modal h2{font-size:var(--step-2);margin-bottom:var(--sp-2)}
.modal .reassure{color:var(--muted);font-size:var(--step--1);margin-bottom:var(--sp-5)}
.form-success{text-align:center;padding:var(--sp-5) 0}
.form-success .check{font-size:2.6rem;color:#57e39b}

/* Responsive ----------------------------------------------------------------*/
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:var(--sp-7)}
  .grid-3,.reviews{grid-template-columns:1fr}
  .grid-2,.contact-grid{grid-template-columns:1fr}
  .loan-grid{grid-template-columns:repeat(2,1fr)}
  .calc .grid{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .nav-toggle{display:inline-block}
  .menu{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:var(--sp-4);display:none;
    max-height:calc(100vh - var(--header-h));overflow:auto}
  .menu.is-open{display:flex}
  .menu > li > a,.menu > li > button{width:100%;padding:14px 8px;justify-content:space-between;font-size:var(--step-0)}
  .submenu{position:static;box-shadow:none;margin:0 0 8px;background:var(--surface-2)}
  .nav-cta{display:none}
  .feature-list,.form-row{grid-template-columns:1fr}
  .mobile-cta{display:flex}
  body{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}