/* =========================================================
   NorthVA — section styles
   ========================================================= */

/* ---------------- HERO ---------------- */
.hero{position:relative;padding:clamp(8rem,14vw,11rem) var(--pad) 0;
  background:linear-gradient(180deg,var(--hero-top),var(--hero-bot));overflow:hidden;isolation:isolate}
.hero-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.05fr 1fr;
  gap:3rem;align-items:center;position:relative;z-index:3;padding-bottom:7rem}
.hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1.05;margin:.5rem 0 1.6rem;color:#fff;max-width:14ch}
html[data-theme="light"] .hero h1{color:#fff}
.hero .lead{color:#c4d4f5}
.hero .topper{color:var(--accent-2)}
.hero-art{position:relative}
.hero-art .slot-laptop{width:100%;aspect-ratio:936/560;border-radius:12px}
.hero-glow{position:absolute;width:60%;height:60%;right:0;top:10%;
  background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(50px);opacity:.6;z-index:1}
/* wave divider */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;z-index:2;display:block}
.hero-wave path{fill:var(--bg)}
.moon-big{position:absolute;top:13%;left:8%;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fdfbf4,#cdd6e6 60%,#9aa6bd);
  box-shadow:0 0 60px 12px rgba(220,230,255,.3),inset -14px -10px 0 -4px rgba(120,130,160,.25);z-index:1;opacity:.85}
html[data-theme="light"] .moon-big{display:none}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;text-align:center;padding-bottom:5rem}
  .hero .topper{padding-left:0}.hero .topper::before{display:none}
  .hero .lead{margin-inline:auto}.hero .btn-row{justify-content:center}
  .moon-big{width:80px;height:80px;top:15%}
}

/* ---------------- INTRO + SERVICE CARDS ---------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);min-height:340px;isolation:isolate;
  transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease}
.card:hover{transform:translateY(-6px);border-color:transparent;box-shadow:var(--shadow)}
.card-inner{position:relative;z-index:3;padding:2rem 1.8rem;height:100%;display:flex;flex-direction:column}
.card-ico{width:62px;height:62px;border-radius:12px;background:var(--accent);display:grid;place-items:center;
  margin-bottom:1.4rem;box-shadow:0 10px 24px -10px var(--accent);transition:opacity .4s ease,transform .4s ease}
.card:hover .card-ico,.card.demo-hover .card-ico{opacity:0;transform:scale(.7)}
.card-ico svg{width:30px;height:30px;fill:#fff;stroke:#fff}
.card h3{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.32rem;margin-bottom:.7rem;color:var(--text)}
.card p{color:var(--muted);font-size:.97rem;margin-bottom:1.2rem}
.card .fake-link{margin-top:auto;font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.82rem;color:var(--accent-2);border-bottom:2px solid var(--accent);
  padding-bottom:3px;width:max-content}
/* hover reveal layer */
.card-bg{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(180deg,#1c3f74 0%,#12294e 45%,#0a1834 100%)}
.card:hover .card-bg,.card.demo-hover .card-bg{opacity:1}
.card-bg .moon{position:absolute;top:1.6rem;left:1.8rem;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fdfbf4,#dde4f0 58%,#aab6cd);
  box-shadow:0 0 40px 10px rgba(220,230,255,.55),inset -10px -7px 0 -3px rgba(120,130,160,.25)}
.card-bg .forest{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;
  background:url('assets/forest.svg') bottom/cover no-repeat;filter:brightness(.7);opacity:.95}
.card-bg .wedge{position:absolute;right:0;bottom:0;width:0;height:0;
  border-left:70px solid transparent;border-bottom:70px solid var(--accent)}
.card:hover h3,.card:hover p,.card.demo-hover h3,.card.demo-hover p{color:#fff}
.card:hover .fake-link,.card.demo-hover .fake-link{color:#fff;border-color:#fff}

/* ---------------- SBS (side by side) ---------------- */
.sbs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sbs.flip .sbs-media{order:2}
.sbs-media{position:relative}
.sbs-media .slot{width:100%;aspect-ratio:4/3;border-radius:var(--radius)}
.sbs-media .badge{position:absolute;right:-14px;bottom:-14px;background:var(--accent);color:#fff;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;padding:1rem 1.4rem;border-radius:12px;
  box-shadow:0 14px 30px -12px var(--accent);font-size:.9rem;text-align:center;line-height:1.2}
.sbs-media .badge b{font-size:1.6rem;display:block}
.sbs ul.checks{margin:1.6rem 0 0;display:grid;gap:1rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;color:var(--muted)}
.checks li svg{flex:none;width:24px;height:24px;margin-top:2px}
@media(max-width:820px){.sbs{grid-template-columns:1fr;gap:2.5rem}.sbs.flip .sbs-media{order:0}}

/* check grid (home secure section) */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:880px){.check-grid{grid-template-columns:1fr}}
.check-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.check-card .row{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.check-card h4{font-family:var(--font-head);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em}
.check-card svg{width:24px;height:24px;flex:none}
.check-card p{color:var(--muted);font-size:.95rem}

/* ---------------- STATS ---------------- */
.stats{display:flex;gap:2.5rem;flex-wrap:wrap}
.stat .n{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--accent-2);line-height:1}
.stat .d{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.85rem}

/* ---------------- PORTFOLIO ---------------- */
.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
@media(max-width:880px){.portfolio{grid-template-columns:1fr}}
.port{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease}
.port:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.port .slot{width:100%;aspect-ratio:413/270}
.port .pad{padding:1.6rem}
.port h3{font-family:var(--font-head);text-transform:uppercase;font-size:1.2rem;margin-bottom:.5rem}
.port p{color:var(--muted);font-size:.92rem;margin-bottom:1.2rem}

/* ---------------- REVIEWS ---------------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
@media(max-width:980px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.reviews{grid-template-columns:1fr}}
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;
  display:flex;flex-direction:column;gap:1rem;position:relative}
.review .quote{width:38px;height:auto;opacity:.9}
.review .stars{display:flex;gap:3px;color:#ffc24b}
.review p{color:var(--text);font-size:.98rem;flex:1}
.review .by{margin-top:.4rem}
.review .name{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;display:block}
.review .loc{color:var(--muted);font-size:.85rem}
.masonry{columns:3;column-gap:1.5rem;margin-top:3rem}
@media(max-width:980px){.masonry{columns:2}}
@media(max-width:620px){.masonry{columns:1}}
.masonry .review{break-inside:avoid;margin-bottom:1.5rem;display:block}
.masonry .review p{margin:1rem 0}

/* ---------------- STEPS ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.8rem;position:relative}
.step .num{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--accent-2)}
.step .big{position:absolute;right:1.2rem;top:.6rem;font-family:var(--font-display);font-size:4rem;color:var(--line)}
.step h3{font-family:var(--font-head);text-transform:uppercase;font-size:1.25rem;margin:.5rem 0 .7rem}
.step p{color:var(--muted);font-size:.96rem}

/* ---------------- TEAM ---------------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3.5rem}
@media(max-width:980px){.team{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.team{grid-template-columns:repeat(2,1fr)}}
.member{text-align:center}
.member .slot{width:100%;aspect-ratio:1;border-radius:16px;margin-bottom:1rem}
.member .name{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem}
.member .role{color:var(--accent-2);font-size:.82rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em}

/* ---------------- PRICING ---------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.5rem;align-items:stretch}
@media(max-width:920px){.pricing{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:2.4rem 2rem;
  display:flex;flex-direction:column;position:relative;transition:transform .35s,box-shadow .35s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 30px 60px -30px var(--glow)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:.35rem 1rem;border-radius:999px}
.plan .pname{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.3rem;color:var(--accent-2)}
.plan .price{font-family:var(--font-display);font-size:2.6rem;margin:.8rem 0 .2rem;line-height:1}
.plan .price small{font-family:var(--font-body);font-size:.9rem;color:var(--muted);font-weight:600}
.plan ul{margin:1.6rem 0 2rem;display:grid;gap:.85rem}
.plan ul li{display:flex;gap:.7rem;align-items:flex-start;color:var(--muted);font-size:.96rem}
.plan ul li svg{flex:none;width:21px;height:21px;margin-top:2px}
.plan .btn{margin-top:auto;width:100%}

/* ---------------- FAQ ---------------- */
.faq-filters{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:2.5rem 0 1rem}
.faq-filter{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;
  padding:.7rem 1.4rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:.25s}
.faq-filter:hover{border-color:var(--accent-2)}
.faq-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.faq-list{max-width:840px;margin:2rem auto 0;display:grid;gap:1rem}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--text);
  font-family:var(--font-head);font-weight:500;font-size:1.08rem;padding:1.3rem 3.2rem 1.3rem 1.4rem;position:relative}
.faq-q::after{content:"";position:absolute;right:1.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);
  transform:translateY(-65%) rotate(45deg);transition:transform .3s}
.faq-item.open .faq-q::after{transform:translateY(-35%) rotate(-135deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding:0 1.4rem 1.4rem;color:var(--muted)}

/* ---------------- CONTACT ---------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info{display:grid;gap:1.2rem;margin-top:2rem}
.info-row{display:flex;gap:1rem;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:1.2rem 1.4rem}
.info-row .ic{width:46px;height:46px;border-radius:10px;background:rgba(79,140,255,.14);display:grid;place-items:center;flex:none}
.info-row .ic svg{width:22px;height:22px;fill:var(--accent-2)}
.info-row .k{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;color:var(--muted)}
.info-row .v{font-weight:700;color:var(--text)}
.form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,3vw,2.4rem)}
.form h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1.4rem;font-size:1.4rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;
  font-size:.78rem;color:var(--muted);margin-bottom:.45rem}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1rem;color:var(--text);font-family:var(--font-body);font-size:1rem;transition:border .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:140px;resize:vertical}
.field-error{color:#ff6b6b;font-size:.8rem;margin-top:.45rem;display:block;font-family:var(--font-body)}
.field-error:empty{display:none}

/* page hero (sub pages) */
.page-hero{position:relative;padding:clamp(8rem,13vw,11rem) var(--pad) clamp(3rem,6vw,5rem);
  background:linear-gradient(180deg,var(--hero-top),var(--hero-bot));overflow:hidden;text-align:center}
.page-hero h1{font-family:var(--font-display);text-transform:uppercase;color:#fff;
  font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.06;margin-bottom:1.4rem}
.page-hero .lead{color:#c4d4f5;margin-inline:auto}
.page-hero .topper{color:var(--accent-2)}
html[data-theme="light"] .hero .topper,
html[data-theme="light"] .page-hero .topper{color:#d3e1ff}
.crumbs{margin-top:1.4rem;color:#9fb6e6;font-size:.85rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em}
.crumbs a:hover{color:#fff}

/* ---- center the side-by-side & hero copy so all text lines up ---- */
.sbs-copy,.hero-copy{text-align:center}
.sbs-copy .topper,.hero-copy .topper{padding-left:0}
.sbs-copy .topper::before,.hero-copy .topper::before{display:none}
.sbs-copy .lead,.hero-copy .lead{margin-inline:auto}
.hero-copy h1{margin-inline:auto}
.sbs-copy .checks{max-width:48ch;margin-inline:auto}
.sbs-copy .checks li{justify-content:center}
.sbs-copy .stats{justify-content:center}
.sbs-copy .stat{text-align:center}
.sbs-copy .btn-row,.hero-copy .btn-row{justify-content:center}

/* alt sections melt into the neighbouring --bg sections at both edges
   so every section boundary is a soft gradient instead of a hard seam */
.alt-bg{
  background:linear-gradient(180deg,
    var(--bg) 0%,
    var(--bg-2) 20%,
    var(--bg-2) 80%,
    var(--bg) 100%);
}