/* =============================================================
   VISIONWAVE — Components
   ============================================================= */

/* ---------- Preloader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: var(--bg); transition: opacity .6s ease, visibility .6s;
}
/* pointer-events:none is essential — without it, if the opacity/visibility
   transition doesn't run or complete (background tab, interrupted transition),
   this full-screen z-index:10000 overlay silently swallows every click on the
   page even though it looks invisible. */
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .04em; }
.loader-bar { width: min(260px, 60vw); height: 3px; margin-top: 1.2rem; border-radius: 3px; background: var(--line); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: var(--glow-primary); }
.loader-pct { margin-top: .7rem; font-family: var(--f-display); color: var(--text-muted); font-size: .85rem; letter-spacing: .2em; }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 6px; height: 6px; background: var(--c-primary); }
.cursor-ring { width: 38px; height: 38px; border: 1.5px solid rgba(0,229,255,.6); transition: width .3s, height .3s, border-color .3s, background .3s; }
.cursor-ring.hover { width: 60px; height: 60px; border-color: var(--c-accent); background: rgba(0,255,179,.08); }
@media (hover: none), (max-width: 900px) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Scroll progress ---------- */
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9997; background: var(--grad); box-shadow: var(--glow-primary); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: transform .45s var(--ease), background .4s, backdrop-filter .4s, padding .4s;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1.3rem; }
.nav.scrolled { background: rgba(5,8,22,.72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav.scrolled .nav__inner { padding-block: .85rem; }
.nav.hide { transform: translateY(-110%); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.brand__mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--grad); box-shadow: var(--glow-primary); color: #04101a; font-weight: 800; }
.brand__logo { height: 38px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(0,229,255,.35)); }
.nav__links { display: flex; align-items: center; gap: .3rem; }
.nav__links a { position: relative; padding: .5rem .9rem; font-size: .95rem; color: var(--text-muted); border-radius: 100px; transition: color .3s; }
.nav__links a::after { content:''; position:absolute; left:50%; bottom:6px; width:0; height:2px; background: var(--grad); transition: width .3s var(--ease), left .3s var(--ease); }
.nav__links a:hover, .nav__links a.active { color: #fff; }
.nav__links a:hover::after, .nav__links a.active::after { width: 55%; left: 22%; }
.nav__cta { display: flex; align-items: center; gap: .8rem; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--glass-bg); }
.nav__toggle span { display:block; width: 20px; height: 2px; margin: 4px auto; background: #fff; transition: .35s var(--ease); }
.nav__toggle.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav__toggle.open span:nth-child(2){ opacity: 0; }
.nav__toggle.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 84vw); flex-direction: column;
    align-items: flex-start; justify-content: center; gap: .4rem; padding: 2rem;
    background: rgba(5,8,22,.96); backdrop-filter: blur(20px); border-left: 1px solid var(--line);
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav__links.open { transform: none; }
  .nav__links a { font-size: 1.4rem; padding: .7rem 0; }
  .nav__cta .btn--primary { display: none; }
}

/* ---------- Hero ---------- */
/* The navbar is fixed and ~98px tall, so the hero's top padding must never fall
   below that or the content crowds up under it on short viewports. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: clamp(8.5rem, 13vh, 10rem); padding-bottom: 2rem; overflow: hidden; }
#hero-canvas { position: absolute; inset: 0; z-index: 0; }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); width: 100%; }
.hero__inner { position: relative; min-width: 0; }
.hero h1 { font-size: var(--fs-hero); margin: 1rem 0; }
/* Hero animated growth orb */
.hero__visual { position: relative; display: grid; place-items: center; min-height: 380px; }
.orb { position: relative; width: min(400px, 34vw); aspect-ratio: 1; display: grid; place-items: center; }
.orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-strong); }
.orb__ring--1 { inset: 0;   border-top-color: var(--c-primary); animation: spin-slow 14s linear infinite; }
.orb__ring--2 { inset: 12%; border-right-color: var(--c-secondary); animation: spin-slow 10s linear infinite reverse; }
.orb__ring--3 { inset: 24%; border-bottom-color: var(--c-accent); animation: spin-slow 18s linear infinite; }
.orb__core { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; gap: .5rem;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,255,.22), rgba(11,18,32,.9) 70%);
  border: 1px solid var(--line-strong); box-shadow: var(--glow-primary), inset 0 0 40px rgba(0,229,255,.12); backdrop-filter: blur(6px); }
.orb__chart { width: 70%; }
.orb__line { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 2.4s var(--ease) .6s forwards; }
.orb__dot { opacity: 0; animation: pop 0.4s var(--ease) 2.8s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.orb__label { font-family: var(--f-display); font-weight: 600; font-size: .95rem; color: var(--c-accent); }
.orb__chip { position: absolute; padding: .45rem .9rem; border-radius: 100px; font-family: var(--f-display); font-size: .82rem; font-weight: 600;
  background: var(--glass-bg); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.orb__chip--a { top: 4%; left: -6%;  color: var(--c-primary);   animation: float-y 5s ease-in-out infinite; }
.orb__chip--b { bottom: 10%; left: -4%; color: var(--c-accent);  animation: float-y 6s ease-in-out infinite .5s; }
.orb__chip--c { top: 22%; right: -6%; color: var(--c-secondary); animation: float-y 5.5s ease-in-out infinite 1s; }
/* Responsive: single column + hide visual on tablet/mobile (placed after base rules so it wins) */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
}
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: inline-block; transform: translateY(110%); animation: rise .9s var(--ease) forwards; }
.hero__line:nth-child(2) > span { animation-delay: .12s; }
.hero__line:nth-child(3) > span { animation-delay: .24s; }
@keyframes rise { to { transform: none; } }
.hero__lead { max-width: 560px; margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; display: grid; place-items: center; gap: .6rem; color: var(--text-dim); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.hero__scroll .mouse { width: 24px; height: 40px; border: 2px solid var(--line-strong); border-radius: 14px; position: relative; }
.hero__scroll .mouse::before { content:''; position:absolute; top:7px; left:50%; width:4px; height:8px; margin-left:-2px; border-radius:4px; background: var(--c-primary); animation: scrolly 1.8s infinite; }
@keyframes scrolly { 0%{ opacity:0; transform:translateY(0);} 40%{ opacity:1;} 80%{ opacity:0; transform:translateY(12px);} }

/* Hero stats */
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: clamp(1.6rem, 4vh, 3rem); }
.stat__num { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; }
/* ---- About section layout ---- */
/* Intro copy beside the stats, then the four differentiators full width below. */
/* stretch (not center) so the stats fill the copy column's height instead of
   floating in the middle with dead space above and below it */
.about-top { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; gap: clamp(2rem, 5vw, 4rem); }
.stat-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; align-content: stretch; }
.stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .4rem; min-height: 150px; }
.stat-card__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  margin-bottom: .4rem; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--c-primary); }
.stat-card__icon svg { width: 22px; height: 22px; }
.about-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 3rem); }
.about-feature { padding: 1.2rem; }
@media (max-width: 960px) {
  .about-top { grid-template-columns: 1fr; }
  .about-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .about-features { grid-template-columns: 1fr; }
  .stat-card { min-height: 120px; }
}
.stat__label { color: var(--text-muted); font-size: .9rem; }

/* Short viewports (e.g. 1366x768 laptops): keep the navbar clearance but tighten
   the hero's internal rhythm so the stats row still lands above the fold.
   Placed after the base hero rules so it actually wins the cascade. */
@media (max-height: 820px) {
  .hero { padding-top: 7.5rem; padding-bottom: 1rem; }
  .hero h1 { margin: .45rem 0; }
  .hero__lead { margin-bottom: .9rem; }
  .hero__stats { margin-top: .9rem; }
  .hero__scroll { display: none; }
}

/* ---------- Clients marquee ---------- */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 4rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { font-family: var(--f-display); font-weight: 600; font-size: 1.4rem; color: var(--text-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; transition: color .3s; }
.marquee__item:hover { color: var(--c-primary); }

/* Platform strip — logos sit muted by default and light up on hover, so the
   row reads as one cohesive band rather than clashing brand colours. */
.platform-item { display: inline-flex; align-items: center; gap: .65rem; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: var(--text-dim);
  padding: .6rem 1.1rem; border-radius: 100px; border: 1px solid var(--line);
  background: var(--card-2); transition: color .3s, border-color .3s, transform .3s; }
.platform-item img { width: 26px; height: 26px; flex: 0 0 auto;
  filter: grayscale(1) brightness(1.7); opacity: .75; transition: filter .3s, opacity .3s; }
.platform-item:hover { color: #fff; border-color: var(--c-primary); transform: translateY(-2px); }
.platform-item:hover img { filter: none; opacity: 1; }
@media (max-width: 600px) { .platform-item { font-size: .92rem; padding: .5rem .9rem; }
  .platform-item img { width: 22px; height: 22px; } }

/* ---------- Services grid ---------- */
.services-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.service {
  transform-style: preserve-3d; transition: transform .35s var(--ease), border-color .5s, box-shadow .5s;
}
.service__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; margin-bottom: 1.2rem;
  background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--c-primary); transition: transform .5s var(--ease); }
.service:hover .service__icon { transform: translateZ(30px) scale(1.08); color: var(--c-accent); }
.service h3 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.service p { color: var(--text-muted); font-size: .95rem; }
.service__arrow { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--c-primary); font-size: .9rem; font-family: var(--f-display); }

/* ---------- Feature / Why-us ---------- */
.features { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature__num { font-family: var(--f-display); font-size: 2.6rem; font-weight: 700; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Process timeline ---------- */
.timeline { position: relative; max-width: 820px; margin-inline: auto; }
.timeline::before { content:''; position:absolute; left: 26px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--c-primary), var(--c-secondary), var(--c-accent)); opacity: .4; }
.tl-step { position: relative; padding-left: 76px; padding-bottom: 2.6rem; }
/* the last step's trailing padding just stacked on top of the section padding */
.tl-step:last-child { padding-bottom: 0; }
.tl-step__dot { position: absolute; left: 14px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--c-primary); display: grid; place-items: center; box-shadow: var(--glow-primary); }
.tl-step__dot::after { content:''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.tl-step h3 { font-size: var(--fs-h3); margin-bottom: .3rem; }
.tl-step p { color: var(--text-muted); }

/* ---------- Testimonials ---------- */
/* Testimonial slider: a horizontal scroller with arrows + an edge fade, so the
   partially-visible card reads as "there's more to scroll" instead of looking
   like a broken/clipped card. */
.testi-slider { position: relative; }
/* NOTE: no scroll-snap and no CSS `scroll-behavior` here on purpose — mandatory
   snapping fights the animated scroll and makes it jump/stutter. The arrows run
   their own eased rAF animation in js/main.js instead, and touch devices keep
   native momentum scrolling. */
.testi-track { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.testi-track::-webkit-scrollbar { display: none; }
.testi { min-width: min(420px, 84vw); display: flex; flex-direction: column; }
.testi__quote { flex: 1; }
/* fade the trailing edge while more cards remain */
.testi-slider::after { content: ''; position: absolute; top: 0; right: -1px; width: 90px; bottom: 1rem;
  pointer-events: none; opacity: 0; transition: opacity .35s;
  background: linear-gradient(90deg, transparent, var(--bg)); }
.testi-slider.has-next::after { opacity: 1; }
/* Arrows stay visible at both ends and simply disable — hiding them made it
   look like you could only ever scroll one direction. */
.testi-nav { position: absolute; top: 50%; margin-top: -23px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-strong); color: #fff;
  box-shadow: var(--shadow-md); cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, opacity .3s; }
.testi-nav svg { width: 20px; height: 20px; }
.testi-nav:hover:not(:disabled) { border-color: var(--c-primary); box-shadow: var(--glow-primary); transform: scale(1.08); }
.testi-nav:active:not(:disabled) { transform: scale(.95); }
.testi-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.testi-nav--prev { left: -14px; }
.testi-nav--next { right: -14px; }
@media (max-width: 900px) { .testi-nav { display: none; } .testi-slider::after { width: 50px; } }
.testi__stars { color: var(--c-accent); margin-bottom: 1rem; letter-spacing: 2px; }
.testi__quote { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.4rem; }
.testi__who { display: flex; align-items: center; gap: .8rem; }
.testi__ava { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; color: #04101a; }
.testi__name { font-weight: 600; }
.testi__role { color: var(--text-dim); font-size: .85rem; }

/* ---------- Pricing ---------- */
.pricing { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan.featured { border-color: rgba(0,229,255,.4); box-shadow: var(--glow-primary); }
.plan.featured::before { opacity: .8; }
.plan__badge { align-self: flex-start; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 100px; background: var(--grad); color: #04101a; font-weight: 700; margin-bottom: 1rem; }
.plan__price { font-family: var(--f-display); font-size: 3rem; font-weight: 700; margin: .4rem 0 .2rem; }
.plan__price span { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.plan__list { display: grid; gap: .7rem; margin: 1.6rem 0; }
.plan__list li { display: flex; gap: .6rem; color: var(--text-muted); font-size: .95rem; }
.plan__list li svg { flex: 0 0 18px; color: var(--c-accent); }
.plan .btn { margin-top: auto; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.4rem 0; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.faq-q .icon { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform .4s var(--ease), background .4s; }
.faq-item.open .faq-q .icon { transform: rotate(45deg); background: var(--grad); color: #04101a; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease); }
.faq-a p { color: var(--text-muted); padding-bottom: 1.4rem; }

/* ---------- Contact ---------- */
.contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }
.field { position: relative; margin-bottom: 1.3rem; }
.field input, .field textarea {
  width: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-sm); color: #fff;
  background: var(--card-2); border: 1px solid var(--line); font: inherit; transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.field label { position: absolute; left: 1.1rem; top: 1rem; color: var(--text-dim); pointer-events: none; transition: .25s var(--ease); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: -.6rem; left: .8rem; font-size: .72rem; padding: 0 .4rem; background: var(--bg-section); color: var(--c-primary);
}
.contact-info { display: grid; gap: 1.2rem; }
.info-row { display: flex; gap: 1rem; align-items: center; }
.info-row .ic { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--c-primary); }
.form-note { font-size: .9rem; margin-top: .6rem; min-height: 1.2em; }
.form-note.ok { color: var(--c-accent); } .form-note.err { color: #ff6b6b; }

/* ---------- Portfolio image cards ---------- */
.folio-card { position: relative; min-height: 300px; padding: 0; display: flex; overflow: hidden; }
.folio-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s; filter: saturate(1.1) brightness(.72); }
.folio-card:hover .folio-img { transform: scale(1.07); filter: saturate(1.25) brightness(.85); }
.folio-overlay { position: relative; z-index: 2; margin-top: auto; width: 100%; padding: 1.4rem;
  background: linear-gradient(transparent, rgba(5,8,22,.55) 40%, rgba(5,8,22,.92)); display: flex; flex-direction: column; gap: .5rem; }
.folio-tag { position: absolute; top: -230px; left: 0; background: var(--glass-bg); backdrop-filter: blur(8px); }
.folio-overlay .tag { align-self: flex-start; }

/* ---------- Footer ---------- */
.footer { position: relative; border-top: 1px solid var(--line); padding-top: var(--section-y); padding-bottom: clamp(11rem, 18vw, 14rem); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.2rem; }
.footer a { color: var(--text-muted); display: inline-block; padding: .35rem 0; transition: color .3s, transform .3s; }
.footer a:hover { color: var(--c-primary); transform: translateX(4px); }

/* "Serving:" location pills — these need their own rules because the generic
   `.footer a` above is more specific than `.tag` and would otherwise wipe out
   the pill's horizontal padding, making the text collide with the border. */
.serving-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .7rem;
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.serving-row__label { font-size: .82rem; color: var(--text-dim); }
.footer a.serving-pill { padding: .45rem 1rem; border-radius: 100px; border: 1px solid var(--line-strong);
  background: var(--card-2); color: var(--text-muted); font-size: .8rem; line-height: 1.45; white-space: nowrap;
  transition: color .3s, border-color .3s, background .3s, transform .3s; }
.footer a.serving-pill:hover { color: #fff; border-color: var(--c-primary);
  background: rgba(0,229,255,.08); transform: translateY(-2px); }
.news-form { display: flex; gap: .5rem; margin-top: 1rem; }
.news-form input { flex: 1; padding: .8rem 1rem; border-radius: 100px; background: var(--card-2); border: 1px solid var(--line); color: #fff; }
.news-form input:focus { outline: none; border-color: var(--c-primary); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--text-dim); font-size: .88rem; }
.socials { display: flex; gap: .7rem; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--glass-bg); color: var(--text-muted); transition: .35s var(--ease); }
.socials a:hover { color: #04101a; background: var(--grad); transform: translateY(-3px); box-shadow: var(--glow-primary); }

/* ---------- Floating actions ---------- */
.fab { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 800; display: grid; gap: .8rem; }
.fab a, .fab button { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--card); border: 1px solid var(--line-strong); color: #fff; box-shadow: var(--shadow-sm); transition: .35s var(--ease); }
.fab a:hover, .fab button:hover { transform: translateY(-4px) scale(1.05); box-shadow: var(--glow-primary); border-color: var(--c-primary); }
.fab .wa { background: #25D366; border-color: #25D366; color: #04101a; }
#toTop { opacity: 0; visibility: hidden; }
#toTop.show { opacity: 1; visibility: visible; }

/* ---------- Cookie consent ---------- */
.cookie { position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 850; max-width: 380px; padding: 1.2rem 1.4rem; display: none; }
.cookie.show { display: block; animation: rise-fade .5s var(--ease); }
@keyframes rise-fade { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: none; } }
.cookie p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; }
.cookie .row { display: flex; gap: .6rem; }

/* ---------- Legal document pages (Terms/Privacy/Cancellation/Shipping) ---------- */
.legal-doc h3 { font-size: var(--fs-h3); margin: 1.6rem 0 .5rem; color: #fff; }
.legal-doc h3:first-child { margin-top: 0; }
.legal-doc p { color: var(--text-muted); font-size: .98rem; line-height: 1.75; margin-bottom: .9rem; }
.legal-doc ul { margin: .6rem 0 1rem 1.2rem; color: var(--text-muted); font-size: .98rem; line-height: 1.75; }
.legal-doc li { list-style: disc; margin-bottom: .4rem; }
.legal-doc a { color: var(--c-primary); text-decoration: underline; }
.legal-doc strong { color: #fff; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; padding-top: 11rem; padding-bottom: 4rem; text-align: center; overflow: hidden; }
.page-hero h1 { font-size: var(--fs-h1); }
.breadcrumb { display: inline-flex; gap: .5rem; color: var(--text-dim); font-size: .9rem; margin-top: 1rem; }
.breadcrumb a:hover { color: var(--c-primary); }

/* ---------- Utility ---------- */
.tag { display: inline-block; padding: .3rem .8rem; border-radius: 100px; font-size: .78rem; border: 1px solid var(--line-strong); color: var(--text-muted); }
.float-y { animation: float-y 6s ease-in-out infinite; }

/* ---------- Article extras: TL;DR, takeaways, TOC, author box ---------- */
.tldr-box, .takeaways-box { margin-bottom: 1.6rem; background: linear-gradient(160deg, rgba(0,229,255,.06), rgba(108,99,255,.05)); }
.article-body h2, .article-body h3 { scroll-margin-top: 100px; margin: 2rem 0 .8rem; color: #fff; }
.article-body img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.article-body a { color: var(--c-primary); text-decoration: underline; }
.toc { margin-bottom: 2rem; padding: 1.2rem 1.4rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); }
.toc__title { display: block; font-family: var(--f-display); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: .7rem; }
.toc ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.toc a { color: var(--text-muted); font-size: .93rem; transition: color .25s; }
.toc a:hover { color: var(--c-primary); }
.toc__sub { margin-left: 1.2rem; }
.toc__sub a { font-size: .88rem; color: var(--text-dim); }
.author-box { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }

/* ---------- Blog share buttons ---------- */
.share { display: flex; align-items: center; gap: .6rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.share__label { color: var(--text-dim); font-size: .9rem; margin-right: .3rem; }
.share__btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--glass-bg); color: var(--text-muted); transition: .3s var(--ease); position: relative; }
.share__btn:hover { color: #04101a; background: var(--grad); transform: translateY(-3px); box-shadow: var(--glow-primary); }
.share__btn.copied::after { content: 'Copied!'; position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--c-accent); color: #04101a; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; white-space: nowrap; }

/* ---------- Growth Audit wizard ---------- */
.audit { position: relative; overflow: hidden; }
.audit__progress { height: 5px; border-radius: 5px; background: var(--line); margin-bottom: 1.8rem; overflow: hidden; }
.audit__progress span { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: var(--glow-primary); transition: width .5s var(--ease); }
.audit__step { display: none; animation: fade-up .4s var(--ease); }
.audit__step.is-active { display: block; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.audit__step h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.audit__input { width: 100%; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--line); color: #fff; font: inherit; transition: border-color .25s; }
.audit__input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }
.audit__opts { display: grid; gap: .7rem; margin: 1.2rem 0; }
.audit__opts.shake { animation: shake .4s; }
@keyframes shake { 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.audit__opt { text-align: left; padding: 1rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--card-2); color: #fff; font-weight: 500; transition: .25s var(--ease); }
.audit__opt:hover { border-color: var(--c-primary); transform: translateX(4px); }
.audit__opt.sel { background: var(--grad-soft); border-color: var(--c-primary); box-shadow: var(--glow-primary); }
.audit__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; gap: 1rem; }
.audit__result { text-align: center; animation: fade-up .5s var(--ease); }
.audit__ring { position: relative; width: 180px; margin: 0 auto 1rem; }
.audit__ring svg { transform: rotate(-90deg); width: 180px; height: 180px; }
.audit__ring .ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.audit__ring .ring-fg { fill: none; stroke: url(#hg); stroke: var(--c-primary); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease); filter: drop-shadow(0 0 8px rgba(0,229,255,.6)); }
.audit__score { position: absolute; inset: 0; display: grid; place-content: center; }
.audit__score strong { font-family: var(--f-display); font-size: 2.8rem; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.audit__score span { color: var(--text-dim); font-size: .8rem; }
.audit__recs { display: grid; gap: .8rem; margin-top: 1.4rem; text-align: left; }
.audit__rec { padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--card-2); border: 1px solid var(--line); }
.audit__rec strong { display: block; color: var(--c-primary); margin-bottom: .2rem; }
.audit__rec span { color: var(--text-muted); font-size: .92rem; }

/* ---------- Exit-intent popup ---------- */
.exitpop { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 1.4rem;
  background: rgba(3,6,15,.72); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.exitpop.show { opacity: 1; visibility: visible; }
.exitpop__card { position: relative; width: min(520px, 100%); text-align: center; padding: clamp(1.8rem, 5vw, 3rem); overflow: hidden;
  transform: translateY(20px) scale(.96); transition: transform .4s var(--ease); }
.exitpop.show .exitpop__card { transform: none; }
.exitpop__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; color: var(--text-muted); font-size: 1.4rem; border: 1px solid var(--line); }
.exitpop__close:hover { color: #fff; background: var(--card); }
.exitpop__badge { display: inline-block; padding: .4rem 1rem; border-radius: 100px; background: var(--grad); color: #04101a; font-family: var(--f-display); font-weight: 700; font-size: .8rem; margin-bottom: 1rem; }
.exitpop h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.exitpop p { color: var(--text-muted); margin-bottom: 1.6rem; }
.exitpop .btn { justify-content: center; }
.exitpop__mini { margin-top: 1rem; font-size: .82rem; color: var(--text-dim); }

/* ---------- AI Assistant ---------- */
.ai { position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 860; }
.ai__fab { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #04101a;
  background: var(--grad); box-shadow: var(--glow-primary); transition: transform .35s var(--ease); }
.ai__fab svg { width: 28px; height: 28px; }
.ai__fab:hover { transform: translateY(-4px) scale(1.05); }
.ai__panel { position: absolute; bottom: 74px; left: 0; width: min(360px, 90vw); height: 480px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(.96);
  transform-origin: bottom left; transition: opacity .3s var(--ease), transform .3s var(--ease); }
/* The `display:flex` above overrides the [hidden] attribute's UA `display:none`,
   which left this 360x480 panel invisible but still in the layout — silently
   eating clicks in the bottom-left of the page. Honour [hidden] explicitly. */
.ai__panel[hidden] { display: none; }
.ai__panel.open { opacity: 1; transform: none; }
.ai__head { display: flex; align-items: center; gap: .7rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.ai__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; color: #04101a; background: var(--grad); }
.ai__status { color: var(--c-accent); font-size: .78rem; }
.ai__close { margin-left: auto; font-size: 1.6rem; color: var(--text-muted); width: 32px; height: 32px; border-radius: 8px; }
.ai__close:hover { color: #fff; background: var(--card); }
.ai__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.ai__msg { max-width: 85%; padding: .7rem .9rem; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.ai__msg a { color: var(--c-primary); text-decoration: underline; }
.ai__msg--bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai__msg--user { align-self: flex-end; background: var(--grad); color: #04101a; font-weight: 500; border-bottom-right-radius: 4px; }
.ai__typing { display: flex; gap: 4px; }
.ai__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); animation: aiblink 1.2s infinite; }
.ai__typing span:nth-child(2){ animation-delay: .2s; } .ai__typing span:nth-child(3){ animation-delay: .4s; }
@keyframes aiblink { 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }
.ai__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.ai__chip { font-size: .78rem; padding: .4rem .7rem; border-radius: 100px; border: 1px solid var(--line-strong); color: var(--text-muted); transition: .25s; }
.ai__chip:hover { color: #fff; border-color: var(--c-primary); }
.ai__form { display: flex; gap: .5rem; padding: .8rem 1rem 1rem; border-top: 1px solid var(--line); }
.ai__form input { flex: 1; padding: .7rem .9rem; border-radius: 100px; background: var(--card-2); border: 1px solid var(--line); color: #fff; }
.ai__form input:focus { outline: none; border-color: var(--c-primary); }
.ai__form button { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #04101a; background: var(--grad); }
.ai__form button svg { width: 18px; height: 18px; }
@media (max-width: 400px){ .ai { left: .7rem; bottom: .7rem; } .ai__panel { left: 0; } }

/* =============================================================
   Small phones — collapse fixed grids + tighten (≤600px / ≤360px)
   ============================================================= */
@media (max-width: 600px) {
  /* Any inline fixed multi-column grid collapses to a single column so
     content is never squeezed/clipped on narrow screens. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* keep the small stat/feature pairs readable but stacked */
  .card[style*="margin-top:2rem"] { margin-top: 0 !important; }
  .page-hero { padding-top: 8.5rem; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero__stats { gap: 1.25rem 1.5rem; }
  /* Smaller floating action buttons so they don't crowd content */
  .fab { right: .7rem; bottom: .7rem; gap: .55rem; }
  .fab a, .fab button { width: 46px; height: 46px; }
  .cookie { left: .7rem; right: .7rem; bottom: .7rem; max-width: none; }
}

@media (max-width: 340px) {
  :root { --gutter: 13px; }
  .eyebrow { font-size: .68rem; letter-spacing: .12em; padding: .45rem .8rem; }
  .btn { padding: .8rem 1.2rem; font-size: .9rem; }
  .plan__price { font-size: 2.4rem; }
  .stat__num { font-size: 1.7rem; }
  .nav__inner { padding-block: 1rem; }
}