/* ═══════════════════════════════════════════════════════
   FK VROOM — styles.css
   Brand: #051b33 · #10cfff · #6b7c93 · #C9A84C (gold)
   Fonts: Poppins · Montserrat · Open Sans
═══════════════════════════════════════════════════════ */

:root {
  --navy:        #051b33;
  --navy-mid:    #0a2540;
  --navy-light:  #0d3057;
  --blue:        #10cfff;
  --blue-dark:   #00a0de;
  --blue-dim:    rgba(16,207,255,0.12);
  --steel:       #6b7c93;
  --gold:        #C9A84C;
  --gold-light:  #E2C06A;
  --white:       #ffffff;
  --off-white:   #f2f4f8;
  --grey-light:  #e8ecf1;
  --grey-mid:    #8a9ab0;
  --font-head:   'Poppins', sans-serif;
  --font-sub:    'Montserrat', sans-serif;
  --font-body:   'Open Sans', sans-serif;
  --ease:        cubic-bezier(0.16,1,0.3,1);
  --r-sm:        4px;
  --r-md:        8px;
  --r-lg:        14px;
  --r-xl:        20px;
  --bar-h:       40px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--navy);color:var(--white);line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
input,select,textarea{font:inherit}

/* ── Keyframes ── */
@keyframes shimmerBlue{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes shimmerGold{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
@keyframes scan{0%{left:-60%}100%{left:140%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeRight{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes waPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes countIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Utilities ── */
.blue-text{
  background:linear-gradient(90deg,var(--blue-dark),var(--blue),#5de0ff,var(--blue));
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shimmerBlue 4s linear infinite;
}
.gold-text{
  background:linear-gradient(90deg,#9A7A35,var(--gold),var(--gold-light),var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shimmerGold 4s linear infinite;
}
.section-inner{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.section-title{font-family:var(--font-head);font-size:clamp(26px,3.5vw,40px);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:14px}
.section-sub{font-size:15px;color:var(--steel);line-height:1.75;max-width:560px}
.section-header{margin-bottom:52px}
[data-animate]{opacity:0}
[data-animate].animated{opacity:1}
[data-animate="fade-up"].animated{animation:fadeUp .65s var(--ease) forwards}
[data-animate="fade-right"].animated{animation:fadeRight .65s var(--ease) forwards}
[data-animate="fade-left"].animated{animation:fadeLeft .65s var(--ease) forwards}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--navy);
  padding:13px 28px;font-family:var(--font-sub);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;border-radius:var(--r-sm);
  transition:background .2s,transform .2s;
}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-blue{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:var(--navy);
  padding:13px 28px;font-family:var(--font-sub);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;border-radius:var(--r-sm);
  transition:background .2s,transform .2s;
}
.btn-blue:hover{background:#3dd9ff;transform:translateY(-2px)}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid rgba(16,207,255,0.3);color:var(--blue);
  padding:12px 28px;font-family:var(--font-sub);font-size:11px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--r-sm);
  transition:border-color .2s,background .2s,transform .2s;
}
.btn-outline:hover{border-color:var(--blue);background:var(--blue-dim);transform:translateY(-2px)}
.btn-wa{
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;
  padding:14px 28px;font-family:var(--font-sub);font-size:12px;font-weight:700;
  border-radius:var(--r-sm);transition:background .2s,transform .2s;
}
.btn-wa:hover{background:#1fba58;transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════ */
.site-header{position:fixed;top:var(--bar-h);left:0;right:0;z-index:100;transition:background .4s,box-shadow .4s,top .3s}
.site-header.scrolled{background:rgba(5,27,51,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(16,207,255,.1)}
.nav-inner{max-width:1160px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-logo img{height:38px;width:auto}
.nav-logo-text{display:flex;flex-direction:column;gap:1px}
.nav-logo-main{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:3px;color:var(--blue);line-height:1}
.nav-logo-sub{font-family:var(--font-sub);font-size:7px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(16,207,255,.45);font-weight:500}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{font-family:var(--font-sub);font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--blue);transform:scaleX(0);transition:transform .25s var(--ease);transform-origin:left}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:7px;background:var(--gold);color:var(--navy);padding:9px 20px;font-family:var(--font-sub);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--r-sm);flex-shrink:0;transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--gold-light);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;width:28px;padding:4px}
.hamburger span{display:block;height:1.5px;background:var(--white);transition:transform .3s,opacity .3s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:calc(var(--bar-h) + 72px);left:0;right:0;bottom:0;background:var(--navy);padding:32px 24px;flex-direction:column;gap:4px;overflow-y:auto;animation:slideDown .3s var(--ease);z-index:99}
.mobile-menu.open{display:flex}
.mm-link{display:block;padding:14px 0;font-family:var(--font-head);font-size:20px;font-weight:600;color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s}
.mm-link:hover{color:var(--blue)}
.mm-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:#25D366;color:#fff;padding:15px 24px;font-size:14px;font-weight:700;border-radius:var(--r-sm);margin-top:20px}

/* ═══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════════════════════ */
.page-hero{padding:calc(120px + var(--bar-h)) 0 80px;background:var(--navy);position:relative;overflow:hidden;border-bottom:1px solid rgba(16,207,255,.08)}
.page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(16,207,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,207,255,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.page-hero-grid::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 100%,var(--navy) 40%,transparent 100%)}
.page-hero-inner{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding:0 24px}
.page-hero .eyebrow{display:block;margin-bottom:14px}
.page-hero-title{font-family:var(--font-head);font-size:clamp(32px,5vw,56px);font-weight:700;line-height:1.1;margin-bottom:16px;color:var(--white)}
.page-hero-sub{font-size:16px;color:var(--steel);max-width:520px;line-height:1.75}
.page-hero-line{width:60px;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold));border-radius:2px;margin-top:28px}

/* ═══════════════════════════════════════════════════════
   HOMEPAGE HERO
═══════════════════════════════════════════════════════ */
.hero{min-height:100vh;background:var(--navy);padding-top:calc(72px + var(--bar-h));position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(16,207,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,207,255,.04) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero-grid::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 65% 50%,transparent 0%,var(--navy) 72%)}
.hero-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-scan::after{content:'';position:absolute;top:0;bottom:0;width:55%;background:linear-gradient(90deg,transparent,rgba(16,207,255,.04),transparent);animation:scan 8s ease-in-out infinite}
.hero-inner{flex:1;max-width:1160px;margin:0 auto;padding:80px 24px 60px;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;border:0.5px solid rgba(16,207,255,.3);padding:6px 16px;border-radius:100px;font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:22px}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulseDot 2s ease-in-out infinite;flex-shrink:0}
.hero-headline{font-family:var(--font-head);font-size:clamp(40px,5.5vw,68px);font-weight:700;line-height:1.08;letter-spacing:-.5px;margin-bottom:8px;color:var(--white)}
.hero-sub{font-size:15px;color:var(--steel);line-height:1.8;margin:18px 0 32px;max-width:440px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-google-proof{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12px;color:var(--steel)}
.hero-google-proof .stars{color:var(--gold);font-size:14px;letter-spacing:1px}
.hero-google-proof strong{color:var(--white)}

/* Hero visual */
.hero-visual{position:relative;height:380px;display:flex;align-items:center;justify-content:center}
.hero-img-ring{position:absolute;width:280px;height:280px;border-radius:50%;border:1px dashed rgba(16,207,255,.12);animation:spin 30s linear infinite}
.hero-img-ring::before{content:'·';position:absolute;top:-6px;left:50%;transform:translateX(-50%);color:var(--blue);font-size:16px}
.hero-img-ring-2{position:absolute;width:200px;height:200px;border-radius:50%;border:.5px dashed rgba(16,207,255,.18);animation:spin 18s linear infinite reverse}
.hero-logo-orb{width:130px;height:130px;border-radius:50%;background:var(--navy-mid);border:1.5px solid rgba(16,207,255,.25);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.hero-logo-orb img{width:75%;height:75%;object-fit:contain}
.hero-float{position:absolute;background:rgba(5,27,51,.85);border:1px solid rgba(16,207,255,.18);border-radius:var(--r-md);padding:12px 16px;backdrop-filter:blur(12px)}
.hf-1{top:28px;left:0;animation:floatY 3.5s ease-in-out infinite 0s}
.hf-2{bottom:36px;right:0;animation:floatY 3.5s ease-in-out infinite 1.1s}
.hf-3{top:50%;right:-10px;transform:translateY(-70%);animation:floatY 3.5s ease-in-out infinite .55s}
.hf-num{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--blue);line-height:1}
.hf-lbl{font-family:var(--font-sub);font-size:8px;color:rgba(255,255,255,.35);letter-spacing:1.5px;text-transform:uppercase;margin-top:3px}

/* ── Trust Bar ── */
.trust-bar{background:rgba(5,27,51,.9);border-top:1px solid rgba(16,207,255,.1);position:relative;z-index:1}
.trust-inner{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:stretch;justify-content:space-between}
.trust-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:22px 12px;flex:1;text-align:center;border-right:1px solid rgba(16,207,255,.07);position:relative;transition:background .2s}
.trust-item:last-child{border-right:none}
.trust-item:hover{background:rgba(16,207,255,.03)}
.trust-icon-wrap{width:36px;height:36px;border-radius:50%;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.trust-icon-wrap svg{color:var(--blue)}
.trust-stat{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--white);line-height:1}
.trust-outcome{font-family:var(--font-sub);font-size:9px;font-weight:500;color:var(--blue);letter-spacing:1.5px;text-transform:uppercase;margin-top:1px}
.trust-sub{font-size:10px;color:var(--steel);margin-top:2px}

/* ═══════════════════════════════════════════════════════
   SERVICES SECTION / PAGE
═══════════════════════════════════════════════════════ */
.services-section{padding:100px 0;background:var(--navy);position:relative}
.services-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,207,255,.15),transparent)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(16,207,255,.1);border-radius:var(--r-xl);overflow:hidden;margin-bottom:48px}
.svc-card{padding:36px 24px;background:var(--navy-mid);border-right:1px solid rgba(16,207,255,.07);position:relative;transition:background .3s}
.svc-card:last-child{border-right:none}
.svc-card:hover{background:var(--navy-light)}
.svc-card-top{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(16,207,255,.15)}
.svc-card-top--gold{background:linear-gradient(90deg,#9A7A35,var(--gold),var(--gold-light),var(--gold));background-size:200%;animation:shimmerGold 3s linear infinite}
.svc-badge{position:absolute;top:16px;right:16px;background:var(--gold);color:var(--navy);font-family:var(--font-sub);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.svc-icon{width:50px;height:50px;background:var(--blue-dim);border:1px solid rgba(16,207,255,.15);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px;animation:floatY 4.5s ease-in-out infinite}
.svc-card:nth-child(2) .svc-icon{animation-delay:.5s}
.svc-card:nth-child(3) .svc-icon{animation-delay:1s}
.svc-card:nth-child(4) .svc-icon{animation-delay:1.5s}
.svc-tier{font-family:var(--font-sub);font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(16,207,255,.5);margin-bottom:6px}
.svc-name{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--white);margin-bottom:10px}
.svc-price{font-family:var(--font-head);font-size:24px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:18px}
.svc-price span{font-family:var(--font-body);font-size:11px;font-weight:400;color:var(--steel)}
.svc-features{display:flex;flex-direction:column;gap:7px;margin-bottom:24px}
.svc-feat{font-size:11px;color:rgba(255,255,255,.45);padding-left:14px;position:relative;line-height:1.4}
.svc-feat::before{content:'';position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.6}
.svc-cta{display:inline-block;padding:10px 18px;font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;border:1px solid rgba(16,207,255,.2);color:var(--blue);border-radius:var(--r-sm);transition:background .2s,border-color .2s}
.svc-cta:hover{background:var(--blue-dim);border-color:var(--blue)}
.svc-cta--gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.svc-cta--gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--navy)}

/* Protection bars */
.prot-bars{background:var(--navy-mid);border:1px solid rgba(16,207,255,.1);border-radius:var(--r-lg);padding:36px 40px}
.prot-title{font-family:var(--font-sub);font-size:9px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--steel);margin-bottom:24px;text-align:center}
.prot-row{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.prot-row:last-child{margin-bottom:0}
.prot-label{width:130px;font-size:11px;color:var(--steel);text-align:right;flex-shrink:0;font-family:var(--font-sub)}
.prot-track{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
.prot-fill{height:100%;width:0;border-radius:100px;background:rgba(16,207,255,.5);transition:width 1.3s var(--ease)}
.prot-fill--gold{background:linear-gradient(90deg,#9A7A35,var(--gold),var(--gold-light));background-size:200%;animation:shimmerGold 3s linear infinite}
.prot-price{font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--gold);width:55px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   WHY FK VROOM — TRUST PILLARS
═══════════════════════════════════════════════════════ */
.trust-pillars{padding:100px 0;background:var(--navy-mid);position:relative}
.trust-pillars::before,.trust-pillars::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,207,255,.12),transparent)}
.trust-pillars::before{top:0}.trust-pillars::after{bottom:0}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px}
.pillar{background:var(--navy);padding:40px 32px;position:relative;overflow:hidden;transition:background .3s}
.pillar:hover{background:rgba(5,27,51,.8)}
.pillar-accent{position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--blue),transparent)}
.pillar-num{font-family:var(--font-head);font-size:48px;font-weight:700;color:rgba(16,207,255,.07);line-height:1;position:absolute;top:20px;right:24px;letter-spacing:-2px}
.pillar-icon{width:56px;height:56px;border-radius:var(--r-md);background:var(--blue-dim);border:1px solid rgba(16,207,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pillar-title{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--white);margin-bottom:10px}
.pillar-body{font-size:13px;color:var(--steel);line-height:1.8}
.pillar-proof{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:var(--font-sub);font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue)}
.pillar-proof::before{content:'';width:20px;height:1px;background:var(--blue)}

/* ═══════════════════════════════════════════════════════
   GUARANTEE BLOCK
═══════════════════════════════════════════════════════ */
.guarantee{padding:80px 0;background:var(--navy)}
.guarantee-inner{border:1px solid rgba(201,168,76,.2);border-radius:var(--r-xl);padding:56px 64px;background:linear-gradient(135deg,rgba(201,168,76,.04) 0%,rgba(5,27,51,0) 60%);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.guarantee-title{font-family:var(--font-head);font-size:clamp(22px,3vw,32px);font-weight:700;color:var(--white);margin-bottom:16px}
.guarantee-points{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.gp{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--steel)}
.gp-dot{width:20px;height:20px;border-radius:50%;background:var(--blue-dim);border:1px solid rgba(16,207,255,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.gp-dot svg{width:10px;height:10px;color:var(--blue)}
.guarantee-badge{width:140px;height:140px;border-radius:50%;background:var(--blue-dim);border:2px solid rgba(16,207,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;flex-shrink:0;animation:floatY 4s ease-in-out infinite}
.gb-top{font-family:var(--font-head);font-size:28px;font-weight:700;color:var(--blue);line-height:1}
.gb-mid{font-family:var(--font-sub);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--blue)}
.gb-bot{font-size:9px;color:var(--steel);letter-spacing:1px}

/* ═══════════════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════════════ */
.process{padding:100px 0;background:var(--navy-mid);position:relative}
.process::before,.process::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,207,255,.12),transparent)}
.process::before{top:0}.process::after{bottom:0}
.steps-row{display:flex;align-items:flex-start;justify-content:center}
.step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:0 8px;position:relative}
.step-ico{width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(16,207,255,.2);background:var(--navy);display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .3s}
.step-ico svg{animation:floatY 3.5s ease-in-out infinite}
.step:nth-child(1) .step-ico svg{animation-delay:0s}
.step:nth-child(3) .step-ico svg{animation-delay:.6s}
.step:nth-child(5) .step-ico svg{animation-delay:1.2s}
.step:nth-child(7) .step-ico svg{animation-delay:1.8s}
.step:nth-child(9) .step-ico svg{animation-delay:2.4s}
.step-num{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--navy);font-family:var(--font-head);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.step-lbl{font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.step-desc{font-size:11px;color:var(--steel);line-height:1.6;max-width:120px}
.step-arrow{flex:0.3;height:1.5px;background:linear-gradient(90deg,rgba(16,207,255,.15),rgba(16,207,255,.5),rgba(16,207,255,.15));margin-top:31px;position:relative;flex-shrink:0}
.step-arrow::after{content:'';position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-right:1.5px solid rgba(16,207,255,.55);border-top:1.5px solid rgba(16,207,255,.55);transform:rotate(45deg)}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
.testimonials{padding:100px 0;background:var(--navy)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:var(--navy-mid);border:1px solid rgba(16,207,255,.1);border-radius:var(--r-lg);padding:32px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.testi-card:hover{border-color:rgba(16,207,255,.3);transform:translateY(-4px)}
.testi-card::before{content:'\201C';position:absolute;top:16px;right:20px;font-family:var(--font-head);font-size:80px;color:rgba(16,207,255,.06);line-height:1}
.testi-stars{font-size:13px;color:var(--gold);letter-spacing:2px;margin-bottom:14px}
.testi-quote{font-size:14px;color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:22px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:13px}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--blue-dim);border:1px solid rgba(16,207,255,.2);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--blue);flex-shrink:0}
.testi-name{font-family:var(--font-sub);font-size:13px;font-weight:600;color:var(--white)}
.testi-car{font-size:11px;color:var(--steel);margin-top:2px}
.testi-google-badge{display:inline-flex;align-items:center;gap:8px;margin-top:40px;padding:12px 20px;border:1px solid rgba(255,255,255,.08);border-radius:100px;font-size:12px;color:var(--steel)}
.tgb-stars{color:var(--gold);font-size:13px}

/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.faq-section{padding:100px 0;background:var(--navy-mid);position:relative}
.faq-section::before,.faq-section::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,207,255,.12),transparent)}
.faq-section::before{top:0}.faq-section::after{bottom:0}
.faq-list{max-width:740px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(16,207,255,.07)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-family:var(--font-sub);font-size:14px;font-weight:500;color:rgba(255,255,255,.8);text-align:left;gap:16px;transition:color .2s}
.faq-q:hover,.faq-q[aria-expanded="true"]{color:var(--blue)}
.faq-chevron{flex-shrink:0;transition:transform .3s var(--ease);color:var(--blue);opacity:.6}
.faq-q[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);opacity:1}
.faq-a{padding:0 0 20px;font-size:14px;color:var(--steel);line-height:1.8;max-width:680px}

/* ═══════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════ */
.about-section{padding:100px 0;background:var(--navy)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-visual{position:relative}
.about-img-wrap{background:var(--navy-mid);border:1px dashed rgba(16,207,255,.15);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(16,207,255,.25);font-size:12px;letter-spacing:1px;font-family:var(--font-sub)}
.about-stat{position:absolute;bottom:-20px;right:-20px;background:var(--gold);color:var(--navy);padding:20px 24px;border-radius:var(--r-md);animation:floatY 4s ease-in-out infinite;text-align:center}
.as-num{font-family:var(--font-head);font-size:30px;font-weight:700;line-height:1}
.as-lbl{font-family:var(--font-sub);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;opacity:.8}
.about-content p{font-size:15px;color:var(--steel);line-height:1.85;margin-bottom:16px}
.about-certs{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px}
.cert-badge{display:flex;align-items:center;gap:8px;font-family:var(--font-sub);font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
.cert-badge-icon{width:32px;height:32px;border-radius:var(--r-sm);background:var(--blue-dim);border:1px solid rgba(16,207,255,.2);display:flex;align-items:center;justify-content:center}
.nasiol-section{padding:80px 0;background:var(--navy-mid)}
.nasiol-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.nasiol-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:var(--navy);border:1px solid rgba(16,207,255,.15);border-radius:var(--r-xl);padding:48px 40px}
.nb-icon{width:80px;height:80px;border-radius:50%;background:var(--blue-dim);border:1.5px solid rgba(16,207,255,.25);display:flex;align-items:center;justify-content:center;margin:0 auto}
.nb-title{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--blue)}
.nb-sub{font-family:var(--font-sub);font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--steel)}
.nasiol-points{display:flex;flex-direction:column;gap:20px}
.np{display:flex;align-items:flex-start;gap:14px}
.np-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--blue-dim);border:1px solid rgba(16,207,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.np-title{font-family:var(--font-sub);font-size:13px;font-weight:600;color:var(--white);margin-bottom:4px}
.np-body{font-size:13px;color:var(--steel);line-height:1.7}

/* ═══════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════ */
.contact-section{padding:100px 0;background:var(--navy)}
.contact-inner{display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.ci-row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--steel)}
.ci-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--blue-dim);border:1px solid rgba(16,207,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.quote-form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel)}
.form-group label span{font-weight:400;text-transform:none;letter-spacing:0}
.form-group input,.form-group select,.form-group textarea{background:var(--navy-mid);border:1px solid rgba(16,207,255,.12);border-radius:var(--r-sm);padding:13px 16px;color:var(--white);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.18)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,207,255,.08)}
.form-group select option{background:var(--navy)}
.form-group textarea{resize:vertical;min-height:100px}
.btn-submit{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:var(--navy);padding:15px;font-family:var(--font-sub);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:var(--r-sm);border:none;cursor:pointer;transition:background .2s,transform .2s;width:100%;margin-top:4px}
.btn-submit:hover{background:var(--gold-light);transform:translateY(-2px)}
.form-success{display:flex;align-items:center;gap:10px;background:rgba(16,207,255,.07);border:1px solid rgba(16,207,255,.2);border-radius:var(--r-sm);padding:14px 18px;font-size:14px;color:var(--blue)}
.response-badge{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--navy-mid);border:1px solid rgba(16,207,255,.1);border-radius:var(--r-sm);font-size:13px;color:var(--steel);margin-top:16px}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer{background:var(--navy-mid);border-top:1px solid rgba(16,207,255,.08);padding:64px 0 0}
.footer-inner{max-width:1160px;margin:0 auto;padding:0 24px 48px;display:grid;grid-template-columns:1.4fr 2fr;gap:64px;border-bottom:1px solid rgba(255,255,255,.05)}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.footer-logo img{height:36px;width:auto;mix-blend-mode:lighten}
.footer-logo-text .main{font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:3px;color:var(--blue)}
.footer-logo-text .sub{font-family:var(--font-sub);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(16,207,255,.4)}
.footer-desc{font-size:13px;color:var(--steel);line-height:1.75;max-width:280px;margin-top:8px}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fn-group{display:flex;flex-direction:column;gap:10px}
.fn-title{font-family:var(--font-sub);font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.fn-group a,.fn-group span{font-size:13px;color:var(--steel);transition:color .2s}
.fn-group a:hover{color:var(--white)}
.footer-bottom{max-width:1160px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--steel)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{color:var(--steel);transition:color .2s}
.footer-legal a:hover{color:var(--blue)}

/* ═══════════════════════════════════════════════════════
   CONTINUO CREDIT BAR
═══════════════════════════════════════════════════════ */
.continuo-bar{background:rgba(0,0,0,.25);border-top:1px solid rgba(16,207,255,.06);padding:18px 24px}
.continuo-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.continuo-brand{font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.25)}
.continuo-brand span{color:rgba(16,207,255,.4)}
.continuo-contacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.continuo-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;font-family:var(--font-sub);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.3);transition:border-color .2s,color .2s;text-decoration:none}
.continuo-pill:hover{border-color:rgba(16,207,255,.25);color:rgba(16,207,255,.6)}
.continuo-pill--wa:hover{border-color:rgba(37,211,102,.3);color:rgba(37,211,102,.7)}
.continuo-pill svg{opacity:.5;flex-shrink:0}
.continuo-pill:hover svg{opacity:1}
@media(max-width:640px){
  .continuo-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .continuo-contacts{gap:6px}
}

/* ═══════════════════════════════════════════════════════
   WHATSAPP STICKY
═══════════════════════════════════════════════════════ */
.wa-sticky{position:fixed;bottom:0;left:0;right:0;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;font-family:var(--font-sub);font-size:13px;font-weight:700;letter-spacing:.5px;z-index:90;transition:background .2s,transform .3s}
.wa-sticky:hover{background:#1fba58}
@media(max-width:768px){.wa-sticky{display:none}}
.wa-pulse{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);animation:waPulse 2s ease-in-out infinite;flex-shrink:0}
.scarcity-bar{background:rgba(201,168,76,.08);border-top:1px solid rgba(201,168,76,.15);border-bottom:1px solid rgba(201,168,76,.15);padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-sub);font-size:11px;font-weight:600;color:var(--gold);letter-spacing:1px}
.scarcity-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulseDot 1.5s ease-in-out infinite;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .svc-card{border-right:none;border-bottom:1px solid rgba(16,207,255,.07)}
  .svc-card:nth-child(odd){border-right:1px solid rgba(16,207,255,.07)}
  .svc-card:last-child{border-bottom:none}
  .steps-row{flex-wrap:wrap;gap:28px}
  .step-arrow{display:none}
  .step{flex-basis:calc(33% - 14px)}
  .about-inner,.nasiol-inner,.contact-inner{grid-template-columns:1fr;gap:48px}
  .about-stat{bottom:-12px;right:-8px}
  .testi-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .pillars-grid{grid-template-columns:1fr;gap:2px}
  .guarantee-inner{grid-template-columns:1fr;gap:32px}
  .guarantee-badge{width:100px;height:100px}
  .gb-top{font-size:22px}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .hero-inner{grid-template-columns:1fr;padding:60px 24px 40px}
  .hero-visual{display:none}
  .hero-headline{font-size:clamp(34px,10vw,50px)}
  .trust-inner{flex-wrap:wrap}
  .trust-item{flex-basis:calc(50% - 1px);border-bottom:1px solid rgba(16,207,255,.07)}
  .trust-item:nth-child(even){border-right:none}
  .prot-bars{padding:24px 16px}
  .prot-label{width:90px;font-size:10px}
  .footer-inner{grid-template-columns:1fr;gap:40px}
  .footer-nav{grid-template-columns:repeat(2,1fr)}
  .guarantee-inner{padding:36px 24px}
  .nasiol-inner{grid-template-columns:1fr}
}
@media(max-width:480px){
  .section-inner{padding:0 16px}
  .hero-inner{padding:48px 16px 32px}
  .step{flex-basis:100%}
  .footer-nav{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .form-row{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .svc-card{border-right:none}
}

/* ═══════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
═══════════════════════════════════════════════════════ */
.ann-bar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--bar-h);background:linear-gradient(90deg,var(--navy-mid),#0a1f3a,var(--navy-mid));border-bottom:1px solid rgba(201,168,76,.2);display:flex;align-items:center;justify-content:center;gap:12px;padding:0 44px 0 16px;overflow:hidden}
.ann-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,.04) 50%,transparent 100%);animation:scan 6s ease-in-out infinite;pointer-events:none}
.ann-bar-text{font-family:var(--font-sub);font-size:11px;font-weight:600;letter-spacing:1.5px;color:var(--gold);text-align:center;white-space:nowrap}
.ann-bar-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulseDot 2s ease-in-out infinite;flex-shrink:0}
.ann-bar-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:rgba(201,168,76,.5);cursor:pointer;transition:color .2s;background:none;border:none;padding:0;font-size:16px}
.ann-bar-close:hover{color:var(--gold)}

/* ── Announcement bar: mobile wrapping fix ── */
@media(max-width:640px){
  :root{--bar-h:52px}
  .ann-bar{height:var(--bar-h);padding:6px 40px 6px 12px;flex-wrap:wrap;overflow:visible}
  .ann-bar-text{white-space:normal;font-size:10px;letter-spacing:.5px;line-height:1.4;text-align:center}
  .ann-bar-dot{display:none}
  .ann-bar-close{top:50%;transform:translateY(-50%)}
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--font-sub);font-size:11px;color:var(--steel);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a{color:var(--steel);transition:color .2s}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb-sep{color:rgba(16,207,255,.3);font-size:10px}
.breadcrumb-current{color:var(--blue)}

/* ═══════════════════════════════════════════════════════
   BEFORE / AFTER GALLERY TEASER
═══════════════════════════════════════════════════════ */
.gallery-section{padding:100px 0;background:var(--navy-mid);position:relative}
.gallery-section::before,.gallery-section::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,207,255,.12),transparent)}
.gallery-section::before{top:0}.gallery-section::after{bottom:0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.gallery-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--navy);border:1px solid rgba(16,207,255,.1);cursor:pointer;transition:border-color .3s,transform .3s}
.gallery-card:hover{border-color:rgba(16,207,255,.35);transform:translateY(-4px)}
.gallery-card-inner{display:grid;grid-template-columns:1fr 1fr;height:100%;position:relative}
.gallery-side{display:flex;align-items:center;justify-content:center;height:100%;position:relative;overflow:hidden}
.gallery-side--before{background:linear-gradient(135deg,rgba(107,124,147,.15),rgba(5,27,51,.8))}
.gallery-side--after{background:linear-gradient(135deg,rgba(16,207,255,.08),rgba(10,37,64,.9))}
.gallery-divider{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,var(--gold),transparent);z-index:2;transform:translateX(-50%)}
.gallery-divider-dot{position:absolute;top:50%;left:50%;width:28px;height:28px;background:var(--gold);border-radius:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--navy);font-family:var(--font-sub)}
.gallery-label{position:absolute;top:8px;padding:4px 10px;background:rgba(5,27,51,.8);border-radius:100px;font-family:var(--font-sub);font-size:8px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.gallery-label--before{left:8px;color:var(--steel);border:1px solid rgba(107,124,147,.3)}
.gallery-label--after{right:8px;color:var(--blue);border:1px solid rgba(16,207,255,.3)}
.gallery-placeholder-icon{font-size:32px;opacity:.15}
.gallery-cta-row{display:flex;justify-content:center;margin-top:40px}

/* ═══════════════════════════════════════════════════════
   GOOGLE REVIEWS AGGREGATE
═══════════════════════════════════════════════════════ */
.reviews-section{padding:100px 0;background:var(--navy)}
.reviews-aggregate{display:flex;align-items:center;gap:40px;padding:40px 48px;background:var(--navy-mid);border:1px solid rgba(201,168,76,.15);border-radius:var(--r-xl);margin-bottom:52px;flex-wrap:wrap}
.ra-score{text-align:center;flex-shrink:0}
.ra-num{font-family:var(--font-head);font-size:64px;font-weight:700;color:var(--white);line-height:1}
.ra-stars{font-size:20px;color:var(--gold);letter-spacing:3px;margin:4px 0}
.ra-count{font-family:var(--font-sub);font-size:10px;font-weight:500;letter-spacing:1.5px;color:var(--steel);text-transform:uppercase}
.ra-divider{width:1px;height:80px;background:rgba(255,255,255,.07);flex-shrink:0}
.ra-bars{flex:1;min-width:220px}
.ra-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ra-bar-row:last-child{margin-bottom:0}
.ra-bar-label{font-family:var(--font-sub);font-size:10px;color:var(--steel);width:40px;flex-shrink:0}
.ra-bar-track{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
.ra-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,#9A7A35,var(--gold));transition:width 1.4s var(--ease);width:0}
.ra-google{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:var(--steel)}
.ra-google-logo{font-size:12px}
.ra-cta{margin-left:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-end;flex-shrink:0}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:768px){
  .ra-divider{display:none}
  .reviews-aggregate{gap:24px;padding:28px 24px}
  .ra-cta{margin-left:0;align-items:flex-start}
  .reviews-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════
   SERVICE AREA / SUBURB COVERAGE
═══════════════════════════════════════════════════════ */
.service-area{padding:100px 0;background:var(--navy-mid);position:relative}
.service-area::before,.service-area::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(16,207,255,.12),transparent)}
.service-area::before{top:0}.service-area::after{bottom:0}
.suburb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:40px}
.suburb-chip{display:flex;align-items:center;gap:6px;padding:9px 14px;background:var(--navy);border:1px solid rgba(16,207,255,.08);border-radius:var(--r-sm);font-family:var(--font-sub);font-size:10px;font-weight:500;color:var(--steel);letter-spacing:.5px;transition:border-color .2s,color .2s}
.suburb-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.4;flex-shrink:0}
.suburb-chip:hover{border-color:rgba(16,207,255,.3);color:var(--white)}
.area-note{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;color:var(--steel);padding:14px 20px;background:var(--navy);border:1px solid rgba(16,207,255,.1);border-radius:var(--r-sm)}
@media(max-width:768px){.suburb-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.suburb-grid{grid-template-columns:repeat(2,1fr)}}

/* ═══════════════════════════════════════════════════════
   FINAL CTA BANNER
═══════════════════════════════════════════════════════ */
.final-cta{padding:100px 0;background:var(--navy);position:relative;overflow:hidden}
.final-cta-inner{background:linear-gradient(135deg,rgba(201,168,76,.06) 0%,rgba(16,207,255,.04) 100%);border:1px solid rgba(201,168,76,.2);border-radius:var(--r-xl);padding:80px 64px;text-align:center;position:relative;overflow:hidden}
.final-cta-inner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(16,207,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(16,207,255,.03) 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.final-cta-title{font-family:var(--font-head);font-size:clamp(28px,4vw,48px);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:16px;position:relative}
.final-cta-sub{font-size:15px;color:var(--steel);max-width:520px;margin:0 auto 40px;line-height:1.8;position:relative}
.final-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative}
@media(max-width:768px){.final-cta-inner{padding:48px 24px}}

/* ═══════════════════════════════════════════════════════
   SOCIAL ICONS
═══════════════════════════════════════════════════════ */
.social-row{display:flex;align-items:center;gap:10px;margin-top:20px}
.social-icon{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid rgba(16,207,255,.15);display:flex;align-items:center;justify-content:center;color:var(--steel);transition:border-color .2s,color .2s,background .2s;font-size:15px}
.social-icon:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
.social-icon--wa:hover{border-color:#25D366;color:#25D366;background:rgba(37,211,102,.08)}
.social-icon--ig:hover{border-color:#E1306C;color:#E1306C;background:rgba(225,48,108,.08)}
.social-icon--fb:hover{border-color:#1877F2;color:#1877F2;background:rgba(24,119,242,.08)}

/* ═══════════════════════════════════════════════════════
   VEHICLE PRICING MATRIX (Services page)
═══════════════════════════════════════════════════════ */
.pricing-matrix{margin-top:64px;overflow-x:auto}
.pricing-matrix table{width:100%;border-collapse:collapse;min-width:600px}
.pricing-matrix th{font-family:var(--font-sub);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:16px 20px;background:var(--navy-mid);color:var(--steel);text-align:center;border:1px solid rgba(16,207,255,.08)}
.pricing-matrix th:first-child{text-align:left;color:var(--blue)}
.pricing-matrix td{padding:14px 20px;font-size:13px;color:var(--white);border:1px solid rgba(16,207,255,.05);text-align:center;transition:background .2s}
.pricing-matrix td:first-child{font-family:var(--font-sub);font-size:11px;font-weight:600;text-align:left;color:var(--steel);background:var(--navy-mid)}
.pricing-matrix tr:hover td{background:rgba(16,207,255,.03)}
.pricing-matrix .price-cell{font-family:var(--font-head);font-weight:700;color:var(--gold)}
.pricing-matrix .popular-col{background:rgba(16,207,255,.04)}
.pm-note{font-size:12px;color:var(--steel);margin-top:12px;text-align:center;font-style:italic}

/* ═══════════════════════════════════════════════════════
   MISSION VALUES CARDS (About page)
═══════════════════════════════════════════════════════ */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.value-card{background:var(--navy-mid);border:1px solid rgba(16,207,255,.1);border-radius:var(--r-lg);padding:36px 28px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.value-card:hover{border-color:rgba(16,207,255,.3);transform:translateY(-4px)}
.value-card-accent{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--gold))}
.value-icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--blue-dim);border:1px solid rgba(16,207,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.value-title{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--white);margin-bottom:10px}
.value-body{font-size:13px;color:var(--steel);line-height:1.8}
@media(max-width:768px){.values-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════
   CREDENTIALS (About page)
═══════════════════════════════════════════════════════ */
.credentials-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.cred-item{background:var(--navy-mid);border:1px solid rgba(16,207,255,.1);border-radius:var(--r-lg);padding:28px 20px;text-align:center;transition:border-color .3s}
.cred-item:hover{border-color:rgba(201,168,76,.3)}
.cred-num{font-family:var(--font-head);font-size:36px;font-weight:700;color:var(--gold);line-height:1}
.cred-label{font-family:var(--font-sub);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel);margin-top:8px}
@media(max-width:768px){.credentials-row{grid-template-columns:repeat(2,1fr)}}

/* ═══════════════════════════════════════════════════════
   GOOGLE MAP EMBED (Contact page)
═══════════════════════════════════════════════════════ */
.map-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(16,207,255,.12);height:280px;background:var(--navy-mid);position:relative;margin-top:28px}
.map-wrap iframe{width:100%;height:100%;border:none;filter:invert(.85) hue-rotate(180deg)}
.map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--steel);font-size:13px;font-family:var(--font-sub)}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.gallery-hero { padding: 120px 0 60px; text-align: center; background: var(--navy-mid); }
.gallery-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin-bottom: .5rem; }
.gallery-hero p  { color: var(--blue); font-size: 1.05rem; }

.gallery-filters { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; padding: 2rem 0 1rem; }
.gf-btn { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7);
  padding: .45rem 1.2rem; border-radius: 30px; cursor: pointer; font-size: .875rem;
  transition: all .25s; font-family: var(--font-body); }
.gf-btn:hover, .gf-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; padding: 2rem 0 4rem; }

.gallery-item { border-radius: 12px; overflow: hidden; background: var(--navy-mid); border: 1px solid rgba(255,255,255,.07);
  transition: transform .3s, box-shadow .3s; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.4); }

.gallery-ba { display: grid; grid-template-columns: 1fr 1fr; height: 220px; }
.gallery-ba-side { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.gallery-ba-side--before { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); }
.gallery-ba-side--after  { background: linear-gradient(135deg, #051b33 0%, #10cfff22 100%); }
.gallery-ba-label { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.65);
  color: #fff; font-size: .65rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; letter-spacing: .05em; }
.gallery-ba-label--after { left: auto; right: 8px; background: var(--gold); }
.gallery-ba-divider { width: 2px; background: #fff; position: relative; z-index: 2; }
.gallery-ba-divider::before { content: '⟺'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); background: #fff; color: var(--navy); font-size: .75rem;
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.gallery-item-info { padding: 1rem 1.2rem; }
.gallery-item-tag { display: inline-block; background: rgba(16,207,255,.12); color: var(--blue);
  font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-bottom: .4rem; letter-spacing: .04em; }
.gallery-item-title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .2rem; }
.gallery-item-sub { font-size: .8rem; color: rgba(255,255,255,.5); }

.gallery-cta-strip { background: var(--navy-mid); border-radius: 16px; padding: 3rem 2rem;
  text-align: center; margin: 2rem 0 4rem; border: 1px solid rgba(16,207,255,.15); }
.gallery-cta-strip h2 { font-size: 1.6rem; color: #fff; margin-bottom: .5rem; }
.gallery-cta-strip p  { color: rgba(255,255,255,.65); margin-bottom: 1.5rem; }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-hero { padding: 120px 0 60px; text-align: center; background: var(--navy-mid); }
.pricing-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin-bottom: .5rem; }
.pricing-hero p  { color: var(--blue); font-size: 1.05rem; max-width: 600px; margin: 0 auto; }

.pricing-tabs { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; padding: 2.5rem 0 1rem; }
.pt-btn { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7);
  padding: .5rem 1.4rem; border-radius: 30px; cursor: pointer; font-size: .875rem;
  transition: all .25s; font-family: var(--font-body); }
.pt-btn:hover, .pt-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }

.pricing-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; padding: 1.5rem 0 3rem; }
.pricing-card { background: var(--navy-mid); border-radius: 16px; padding: 2rem 1.5rem;
  border: 1px solid rgba(255,255,255,.08); position: relative; transition: transform .3s, box-shadow .3s; }
.pricing-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.4); }
.pricing-card.popular { border-color: var(--gold); box-shadow: 0 0 30px rgba(201,168,76,.15); }
.pricing-card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #051b33; font-size: .7rem; font-weight: 800;
  padding: 4px 14px; border-radius: 20px; white-space: nowrap; letter-spacing: .05em; }
.pricing-card-name { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: .25rem; }
.pricing-card-tagline { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 1.25rem; }
.pricing-card-from { font-size: .75rem; color: var(--blue); margin-bottom: .1rem; }
.pricing-card-price { font-size: 2.2rem; font-weight: 900; color: #fff; line-height: 1; margin-bottom: .25rem; }
.pricing-card-note  { font-size: .75rem; color: rgba(255,255,255,.45); margin-bottom: 1.5rem; }
.pricing-card-includes { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.pricing-card-includes li { font-size: .85rem; color: rgba(255,255,255,.75); padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06); display: flex; gap: .5rem; align-items: flex-start; }
.pricing-card-includes li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }

.pricing-full-matrix { margin: 2rem 0 4rem; overflow-x: auto; }
.pricing-full-matrix h2 { font-size: 1.5rem; color: #fff; margin-bottom: 1.25rem; }
.pricing-full-matrix table { width: 100%; border-collapse: collapse; }
.pricing-full-matrix th { background: var(--navy-mid); color: var(--gold); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; padding: .9rem 1rem; text-align: center; border-bottom: 2px solid var(--gold); }
.pricing-full-matrix th:first-child { text-align: left; }
.pricing-full-matrix td { padding: .8rem 1rem; font-size: .875rem; color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.06); text-align: center; }
.pricing-full-matrix td:first-child { text-align: left; font-weight: 600; color: #fff; }
.pricing-full-matrix tr:hover td { background: rgba(255,255,255,.03); }
.pricing-full-matrix .poa { color: var(--blue); font-weight: 700; font-style: italic; }

.pricing-addons { margin: 0 0 4rem; }
.pricing-addons h2 { font-size: 1.5rem; color: #fff; margin-bottom: 1.25rem; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.addon-item { background: var(--navy-mid); border-radius: 10px; padding: 1.25rem; border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.addon-name { font-size: .875rem; font-weight: 600; color: #fff; }
.addon-price { font-size: .8rem; font-weight: 700; color: var(--gold); }

.pricing-guarantee { background: linear-gradient(135deg, rgba(201,168,76,.1), rgba(16,207,255,.06));
  border-radius: 16px; padding: 3rem 2rem; text-align: center; margin: 0 0 4rem;
  border: 1px solid rgba(201,168,76,.2); }
.pricing-guarantee h2 { font-size: 1.5rem; color: var(--gold); margin-bottom: .75rem; }
.pricing-guarantee p { color: rgba(255,255,255,.75); max-width: 540px; margin: 0 auto 1.5rem; line-height: 1.7; }

.pricing-faq-section { margin: 0 0 4rem; }
.pricing-faq-section h2 { font-size: 1.5rem; color: #fff; margin-bottom: 1.25rem; }

/* ============================================================
   MOBILE STICKY CTA BAR (Section 8)
   ============================================================ */
.mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--navy-mid); border-top: 1px solid rgba(201,168,76,.3);
  padding: .75rem 1rem; gap: .75rem; align-items: center; justify-content: center; }
@media (max-width: 768px) { .mobile-cta-bar { display: flex; } }
.mcta-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem .5rem; border-radius: 8px; font-size: .8rem; font-weight: 700;
  text-decoration: none; transition: opacity .2s; max-width: 140px; }
.mcta-btn--call { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.mcta-btn--wa   { background: #25D366; color: #fff; }
.mcta-btn--book { background: var(--gold); color: #051b33; }
.mcta-btn svg   { width: 16px; height: 16px; flex-shrink: 0; }

/* Service filter tabs (Section 5) */
.service-filters { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; padding: 1.5rem 0 .5rem; }
.sf-btn { background: transparent; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7);
  padding: .4rem 1.1rem; border-radius: 30px; cursor: pointer; font-size: .8rem;
  transition: all .25s; font-family: var(--font-body); }
.sf-btn:hover, .sf-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }

/* Upsell nudge card */
.upsell-nudge { background: linear-gradient(135deg, rgba(201,168,76,.12), rgba(16,207,255,.06));
  border: 1px solid rgba(201,168,76,.25); border-radius: 12px; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.upsell-nudge-text { flex: 1; }
.upsell-nudge-text strong { color: var(--gold); display: block; font-size: .95rem; margin-bottom: .2rem; }
.upsell-nudge-text span   { color: rgba(255,255,255,.65); font-size: .85rem; }

/* Urgency badge on hero */
.hero-urgency { display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.4);
  color: var(--gold-light); font-size: .8rem; font-weight: 700;
  padding: .35rem .9rem; border-radius: 30px; margin-bottom: 1rem; letter-spacing: .03em; }
.hero-urgency-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%;
  animation: urgency-pulse 1.5s ease-in-out infinite; }
@keyframes urgency-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

/* FAQ redirect section responsive */
@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   CONTAINER (used on services/pricing page)
═══════════════════════════════════════════════════════ */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
@media(max-width:480px){.container{padding:0 16px}}

/* ═══════════════════════════════════════════════════════
   PRICING SECTION — MOBILE FIXES
═══════════════════════════════════════════════════════ */

/* Force pricing card grids to single column on mobile */
@media(max-width:700px){
  /* Packages tab & maintenance plans tab — inline style override */
  #tab-packages,
  #tab-plans > .pricing-cards{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Ceramic series cards */
  .pricing-cards{
    grid-template-columns: 1fr !important;
  }

  /* Tabs: wrap & shrink */
  .pricing-tabs{
    gap: .4rem;
    padding: 1.5rem 0 .75rem;
  }
  .pt-btn{
    font-size: .75rem;
    padding: .4rem .8rem;
    flex-shrink: 0;
  }

  /* Card padding & typography */
  .pricing-card{
    padding: 1.5rem 1.25rem;
  }
  .pricing-card.popular{
    margin-top: 14px; /* room for the badge */
  }
  .pricing-card-price{
    font-size: 2rem;
  }
  .pricing-card-includes li{
    font-size: .875rem;
  }

  /* Add-ons grid: single column */
  .addon-grid{
    grid-template-columns: 1fr;
  }
  .addon-item{
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }

  /* Full price matrix: horizontal scroll */
  .pricing-full-matrix{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pricing-full-matrix table{
    min-width: 420px;
  }

  /* Service card grid on services page */
  .services-grid{
    grid-template-columns: 1fr !important;
  }
  .svc-card{
    border-right: none !important;
    border-bottom: 1px solid rgba(16,207,255,.07);
    padding: 28px 20px;
  }
  .svc-card:last-child{
    border-bottom: none;
  }
  .svc-price{
    font-size: 20px;
  }

  /* Upsell nudge inside service card */
  .upsell-nudge{
    flex-direction: column;
    align-items: flex-start;
  }
}