:root{
  --ink:#050D1F;
  --navy:#0B1B3A;
  --navy-2:#10254D;
  --blue:#2E7CF6;
  --cyan:#8FE3FF;
  --foam:#EEF6FC;
  --dim:#9DB4D6;
  --glint:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.9) 48%,#8FE3FF 52%,transparent 70%);
  --card-r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--foam);
  font-family:'Instrument Sans',system-ui,sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--cyan);color:var(--ink)}
h1,h2,h3,.disp{font-family:'Archivo',sans-serif}

/* ---------- BUBBLE FIELD (fixed, parallax) ---------- */
#bubbles{position:fixed;inset:0;z-index:0;pointer-events:none}
.bub{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.55),rgba(143,227,255,.12) 42%,rgba(46,124,246,.05) 70%,transparent 72%);
  border:1px solid rgba(143,227,255,.18);
  will-change:transform;
}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  transition:background .4s,backdrop-filter .4s,box-shadow .4s;
}
nav.scrolled{background:rgba(5,13,31,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(143,227,255,.12)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--foam)}
.logo svg{width:38px;height:38px;flex:none}
.logo-txt{font-family:'Archivo';font-weight:900;font-style:italic;font-size:1.05rem;letter-spacing:.02em;line-height:1.05}
.logo-txt em{font-style:italic;color:var(--cyan)}
.logo-txt small{display:block;font-weight:600;font-style:normal;font-size:.55rem;letter-spacing:.42em;color:var(--dim)}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--dim);text-decoration:none;font-size:.86rem;font-weight:500;letter-spacing:.04em;transition:color .25s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--cyan)}
.nav-cta{
  background:var(--blue);color:#fff!important;padding:10px 22px;border-radius:99px;
  font-weight:600;box-shadow:0 0 0 0 rgba(46,124,246,.5);transition:box-shadow .3s,transform .3s;
}
.nav-cta:hover{box-shadow:0 0 24px 2px rgba(46,124,246,.55);transform:translateY(-1px)}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- HERO ---------- */
header{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:120px 20px 80px;overflow:hidden;z-index:1;
}
.hero-glow{
  position:absolute;inset:-20% -10%;z-index:-2;
  background:
    radial-gradient(60% 45% at 50% 8%,rgba(46,124,246,.32),transparent 65%),
    radial-gradient(45% 40% at 82% 78%,rgba(143,227,255,.10),transparent 70%),
    radial-gradient(50% 45% at 12% 70%,rgba(46,124,246,.14),transparent 70%);
}
.hero-car{width:min(560px,82vw);margin-bottom:8px;will-change:transform;filter:drop-shadow(0 30px 50px rgba(46,124,246,.35))}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:600;letter-spacing:.5em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:18px;
}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan));}
.eyebrow::after{background:linear-gradient(90deg,var(--cyan),transparent)}
h1{
  font-weight:900;font-style:italic;
  font-size:clamp(3rem,10.5vw,7.5rem);
  line-height:.92;letter-spacing:-.015em;text-transform:uppercase;
  position:relative;
}
h1 .shine-word{
  background:linear-gradient(180deg,#fff 15%,var(--cyan) 60%,var(--blue) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;display:inline-block;
}
.glintbar{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.glintbar::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-30%;width:38%;
  background:var(--glint);transform:skewX(-18deg) translateX(-160%);
  animation:sweep 4.5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes sweep{
  0%,55%{transform:skewX(-18deg) translateX(-160%)}
  80%,100%{transform:skewX(-18deg) translateX(520%)}
}
.tagline{margin-top:22px;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--dim);letter-spacing:.28em;text-transform:uppercase;font-weight:500}
.tagline b{color:var(--foam);font-weight:600}
.hero-ctas{margin-top:42px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.btn{
  font-family:'Instrument Sans';font-weight:600;font-size:.95rem;text-decoration:none;
  padding:15px 34px;border-radius:99px;transition:transform .3s,box-shadow .3s,background .3s;display:inline-block;
}
.btn-primary{background:linear-gradient(120deg,var(--blue),#5CA9FF);color:#fff;box-shadow:0 8px 30px rgba(46,124,246,.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 42px rgba(46,124,246,.6)}
.btn-ghost{color:var(--cyan);border:1px solid rgba(143,227,255,.4)}
.btn-ghost:hover{background:rgba(143,227,255,.08);transform:translateY(-3px)}
.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:var(--dim);font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,10px)}}

/* ---------- SECTION SHELL ---------- */
section{position:relative;z-index:1;padding:clamp(80px,12vw,150px) clamp(20px,6vw,72px)}
.shell{max-width:1180px;margin:0 auto}
.sec-head{margin-bottom:clamp(40px,6vw,72px)}
.sec-head .eyebrow{margin-bottom:12px}
h2{
  font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,3.6rem);line-height:1;letter-spacing:-.01em;
}
h2 span{color:var(--cyan)}
.sec-sub{margin-top:16px;color:var(--dim);max-width:560px;font-size:1.02rem}

/* reveal */
.rv{opacity:0;transform:translateY(46px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- PACKAGES ---------- */
#packages{background:
  radial-gradient(70% 60% at 50% 0%,rgba(16,37,77,.7),transparent 70%)}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;align-items:stretch}
.pack{
  position:relative;background:linear-gradient(165deg,var(--navy) 0%,rgba(11,27,58,.55) 100%);
  border:1px solid rgba(143,227,255,.14);border-radius:var(--card-r);
  padding:38px 32px 34px;overflow:hidden;isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s,box-shadow .45s;
}
.pack:hover{transform:translateY(-10px);border-color:rgba(143,227,255,.45);box-shadow:0 24px 60px rgba(5,13,31,.7),0 0 40px rgba(46,124,246,.18)}
.pack::before{ /* water fill */
  content:"";position:absolute;left:-25%;right:-25%;bottom:-4px;height:0;z-index:-1;
  background:linear-gradient(180deg,rgba(46,124,246,.22),rgba(46,124,246,.05));
  border-radius:45% 55% 0 0/30px 40px 0 0;
  transition:height .8s cubic-bezier(.2,.7,.2,1);
}
.pack:hover::before{height:78%}
.pack-name{font-size:.8rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan)}
.pack-price{font-family:'Archivo';font-weight:900;font-style:italic;font-size:clamp(2.6rem,4.5vw,3.4rem);margin:14px 0 6px;letter-spacing:-.02em}
.pack-price small{font-size:.42em;color:var(--dim);font-style:normal;font-weight:600;letter-spacing:.1em;vertical-align:.9em}
.pack ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.pack li{display:flex;gap:12px;align-items:flex-start;color:#CBDCF2;font-size:.95rem}
.pack li svg{flex:none;width:19px;height:19px;margin-top:2px}
.pack .btn{margin-top:30px;width:100%;text-align:center}
.pack.popular{
  border-color:rgba(143,227,255,.5);
  background:linear-gradient(165deg,var(--navy-2),var(--navy));
  box-shadow:0 0 60px rgba(46,124,246,.22);
}
.pop-tag{
  position:absolute;top:18px;right:-42px;transform:rotate(38deg);
  background:linear-gradient(90deg,var(--blue),var(--cyan));color:var(--ink);
  font-size:.62rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  padding:7px 52px;
}

/* ---------- SERVICES ---------- */
#services{background:linear-gradient(180deg,transparent,rgba(11,27,58,.4) 30%,rgba(11,27,58,.4) 70%,transparent)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px}
.svc{
  background:rgba(11,27,58,.5);border:1px solid rgba(143,227,255,.12);border-radius:var(--card-r);
  padding:30px 26px;transition:transform .4s,border-color .4s,background .4s;position:relative;overflow:hidden;
}
.svc::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:var(--glint);transform:skewX(-18deg);opacity:0;transition:opacity .2s;
}
.svc:hover::after{opacity:.5;animation:sweep-once .9s ease forwards}
@keyframes sweep-once{to{left:120%}}
.svc:hover{transform:translateY(-6px);border-color:rgba(143,227,255,.4);background:rgba(16,37,77,.65)}
.svc-ic{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,rgba(46,124,246,.25),rgba(143,227,255,.08));
  border:1px solid rgba(143,227,255,.25);
}
.svc-ic svg{width:26px;height:26px;stroke:var(--cyan)}
.svc h3{font-size:1.02rem;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.03em}
.svc p{margin-top:8px;font-size:.87rem;color:var(--dim)}

/* ---------- PARALLAX BANNER ---------- */
.banner{
  position:relative;min-height:62vh;display:grid;place-items:center;overflow:hidden;
  padding:100px 24px;text-align:center;
}
.banner-bg{
  position:absolute;inset:-22% 0;z-index:-1;will-change:transform;
  background:
    radial-gradient(85% 65% at 50% 50%,rgba(46,124,246,.34),transparent 72%),
    linear-gradient(180deg,var(--ink),var(--navy) 50%,var(--ink));
}
.banner-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 30%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 68%,rgba(143,227,255,.8),transparent 60%),
    radial-gradient(2.4px 2.4px at 57% 22%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.8px 1.8px at 72% 55%,rgba(143,227,255,.7),transparent 60%),
    radial-gradient(2px 2px at 88% 34%,rgba(255,255,255,.65),transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 82%,rgba(143,227,255,.7),transparent 60%),
    radial-gradient(2px 2px at 66% 84%,rgba(255,255,255,.55),transparent 60%);
  animation:twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.banner h2{font-size:clamp(1.8rem,5vw,3.4rem);max-width:900px}
.stats{margin-top:54px;display:flex;gap:clamp(28px,6vw,80px);flex-wrap:wrap;justify-content:center}
.stat b{font-family:'Archivo';font-weight:900;font-style:italic;font-size:clamp(2rem,4.6vw,3.2rem);display:block;color:var(--cyan)}
.stat span{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

/* ---------- ABOUT / WHY ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.about-card{
  background:linear-gradient(160deg,var(--navy),rgba(11,27,58,.4));
  border:1px solid rgba(143,227,255,.14);border-radius:var(--card-r);padding:clamp(28px,4vw,46px);
}
.about-card p{color:#C4D6EE;margin-top:14px}
.why-list{list-style:none;display:grid;gap:14px;margin-top:26px}
.why-list li{
  display:flex;gap:16px;align-items:center;background:rgba(11,27,58,.5);
  border:1px solid rgba(143,227,255,.12);border-radius:14px;padding:16px 20px;
  transition:transform .35s,border-color .35s;
}
.why-list li:hover{transform:translateX(8px);border-color:rgba(143,227,255,.4)}
.why-list svg{flex:none;width:22px;height:22px}
.why-list b{font-weight:600;color:var(--foam)}

/* ---------- CONTACT ---------- */
#contact{background:radial-gradient(70% 80% at 50% 100%,rgba(16,37,77,.75),transparent 75%)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px)}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.c-item{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(143,227,255,.1)}
.c-item svg{flex:none;width:22px;height:22px;stroke:var(--cyan);margin-top:3px}
.c-item a{color:var(--foam);text-decoration:none}
.c-item a:hover{color:var(--cyan)}
.c-item small{display:block;color:var(--dim);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:2px}
.hours{
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  border:1px solid rgba(143,227,255,.2);border-radius:var(--card-r);padding:clamp(28px,4vw,44px);
  position:relative;overflow:hidden;
}
.hours::before{
  content:"";position:absolute;top:-40%;right:-30%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,124,246,.3),transparent 70%);
}
.hours h3{font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:20px}
.hrow{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(143,227,255,.12)}
.hrow span{color:var(--dim)}
.hrow b{font-weight:600;color:var(--cyan)}
.badge{
  margin-top:30px;display:inline-flex;align-items:center;gap:14px;
  border:1px dashed rgba(143,227,255,.4);border-radius:99px;padding:12px 24px;
}
.badge b{font-family:'Archivo';font-style:italic;font-weight:900;font-size:1.3rem;color:var(--cyan)}
.badge span{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}

/* ---------- MARQUEE + FOOTER ---------- */
.marquee{
  overflow:hidden;border-top:1px solid rgba(143,227,255,.14);border-bottom:1px solid rgba(143,227,255,.14);
  padding:22px 0;background:rgba(11,27,58,.4);position:relative;z-index:1;
}
.marquee-track{display:flex;gap:60px;width:max-content;animation:mq 26s linear infinite;white-space:nowrap}
.marquee-track span{
  font-family:'Archivo';font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,1.7rem);letter-spacing:.04em;color:transparent;
  -webkit-text-stroke:1px rgba(143,227,255,.55);
}
.marquee-track span.solid{color:var(--foam);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}
footer{position:relative;z-index:1;padding:44px clamp(20px,6vw,72px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;color:var(--dim);font-size:.85rem}
footer a{color:var(--cyan);text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}


/* ---------- CORRECTED PHP/PWA ADDITIONS ---------- */
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px}.skip-link:focus{top:12px}
.menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px;place-items:center;cursor:pointer}.menu-toggle span{display:block;width:24px;height:2px;background:var(--foam);margin:5px auto}
.lang-switch{display:flex;gap:7px;align-items:center}.lang-switch a{display:flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid rgba(143,227,255,.18);border-radius:99px;font-size:.72rem}.lang-switch a.active{border-color:var(--cyan);color:var(--cyan)}
.car-viewer-wrap{width:min(620px,88vw);margin-bottom:8px;position:relative;filter:drop-shadow(0 30px 50px rgba(46,124,246,.35));touch-action:pan-y;user-select:none}
.car-viewer{position:relative;cursor:grab;outline:none}.car-viewer:active{cursor:grabbing}.car-viewer:focus-visible{outline:2px solid var(--cyan);outline-offset:8px;border-radius:18px}.car-viewer img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}.car-spin-hint{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.price-note{margin-top:24px;color:var(--dim);font-size:.86rem;text-align:center}
#faq{background:linear-gradient(180deg,transparent,rgba(11,27,58,.42),transparent)}.faq-list{display:grid;gap:14px;max-width:900px}.faq-list details{background:rgba(11,27,58,.62);border:1px solid rgba(143,227,255,.14);border-radius:14px;padding:0 22px}.faq-list summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;font-family:'Archivo';font-weight:800;font-style:italic;text-transform:uppercase;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';position:absolute;right:0;color:var(--cyan);font-size:1.4rem}.faq-list details[open] summary::after{content:'−'}.faq-list details p{color:var(--dim);padding:0 0 20px}
.mobile-contact-bar{display:none}.site-credit a{color:var(--cyan)}
@media(max-width:900px){.menu-toggle{display:grid}.nav-links{position:absolute;top:76px;left:16px;right:16px;display:none;flex-direction:column;align-items:stretch;gap:8px;padding:18px;background:rgba(5,13,31,.96);backdrop-filter:blur(16px);border:1px solid rgba(143,227,255,.16);border-radius:16px}.nav-links.open{display:flex}.nav-links a:not(.nav-cta){display:block}.lang-switch{justify-content:center}.nav-cta{text-align:center}.mobile-contact-bar{position:fixed;z-index:80;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);background:rgba(5,13,31,.94);backdrop-filter:blur(15px);border:1px solid rgba(143,227,255,.2);border-radius:15px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5)}.mobile-contact-bar a{display:grid;place-items:center;gap:1px;padding:10px 5px;color:var(--foam);text-decoration:none;font-size:.68rem}.mobile-contact-bar a.primary{background:var(--blue)}footer{padding-bottom:100px}}