/* =========================================================
   IGLOO-STYLE IMMERSIVE LAYER
   Loaded AFTER the page's base theme. Keeps brand colors
   (dark + orange) but applies the igloo.inc design language:
   frosted glass, huge type, depth, cinematic motion.
   ========================================================= */

:root{
  --ig-bg:#070809;
  --ig-bg2:#0c0f13;
  --ig-glass:rgba(20,24,30,.55);
  --ig-glass-brd:rgba(255,255,255,.08);
  --ig-accent:#FF6A1A;
  --ig-accent2:#FF8A3D;
  --ig-ice:#7FD7FF;          /* subtle icy highlight, igloo nod */
  --ig-text:#EAF0F6;
  --ig-muted:#9AA6B2;
  --ig-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Global base ---------- */
html{ scroll-behavior:auto; }            /* JS smooth-scroll takes over */
body{
  background:var(--ig-bg) !important;
  color:var(--ig-text) !important;
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* deep cinematic background: layered radial glows + vignette + grain */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 78% -10%, rgba(255,106,26,.18), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(127,215,255,.08), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(255,138,61,.10), transparent 60%),
    linear-gradient(180deg,var(--ig-bg),var(--ig-bg2));
}
body::after{                              /* film grain */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Typography: big & tight (igloo signature) ---------- */
h1,h2,h3,h4,.logo-text,.gl-name{ font-family:'Sora',sans-serif !important; letter-spacing:-.02em; }
h1{ font-weight:800 !important; line-height:.95 !important; letter-spacing:-.04em !important; }
h2{ font-weight:800 !important; letter-spacing:-.03em !important; }
.section-head h2, .page-hero h1{ text-wrap:balance; }
.grad,.grad-text{
  background:linear-gradient(120deg,var(--ig-accent2),var(--ig-accent) 45%,#fff 120%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* reveal-on-scroll baseline (igloo.js adds .in) */
.ig-reveal{ opacity:0; transform:translateY(38px); filter:blur(6px);
  transition:opacity .9s var(--ig-ease), transform .9s var(--ig-ease), filter .9s var(--ig-ease); }
.ig-reveal.in{ opacity:1; transform:none; filter:none; }

/* ---------- Frosted glass: top-bar, header, cards ---------- */
.top-bar{
  background:rgba(8,10,12,.6) !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ig-glass-brd) !important;
}
#header{
  background:var(--ig-glass) !important;backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--ig-glass-brd) !important;
  transition:background .4s var(--ig-ease), padding .4s var(--ig-ease);
}
#header.scrolled{ background:rgba(8,10,12,.78) !important; }

.nav-dropdown .dropdown-menu, .dropdown-menu{
  background:rgba(14,17,21,.92) !important;backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid var(--ig-glass-brd) !important;
  border-radius:16px !important;
}

/* generic glass cards across all pages */
.feat-card,.model-info,.review-card,.stat,.emergency-strip,.contact-form,
.content-card,.sidebar-card,.faq-item,.cta-banner,.area-card,.info-card,
.check-list,.image-row img{
  border:1px solid var(--ig-glass-brd) !important;
}
.feat-card,.review-card,.stat,.contact-form,.content-card,.sidebar-card,.faq-item,.info-card{
  background:var(--ig-glass) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:20px !important;
  transition:transform .6s var(--ig-ease), border-color .4s, box-shadow .6s var(--ig-ease) !important;
}
.feat-card:hover,.review-card:hover,.content-card:hover,.info-card:hover{
  transform:translateY(-8px) !important;border-color:rgba(255,106,26,.45) !important;
  box-shadow:0 30px 80px -30px rgba(255,106,26,.5) !important;
}

/* ---------- Buttons: glow + magnetic-ready ---------- */
.btn{ border-radius:999px !important; transition:transform .35s var(--ig-ease), box-shadow .35s var(--ig-ease), background .35s !important; will-change:transform; }
.btn-glow{
  background:linear-gradient(120deg,var(--ig-accent2),var(--ig-accent)) !important;
  box-shadow:0 10px 40px -8px rgba(255,106,26,.6), inset 0 1px 0 rgba(255,255,255,.25) !important;color:#0a0a0a !important;
}
.btn-glow:hover{ box-shadow:0 18px 60px -8px rgba(255,106,26,.8) !important; transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--ig-glass-brd) !important;background:rgba(255,255,255,.03) !important;backdrop-filter:blur(8px);color:var(--ig-text) !important; }

/* header phone CTA: bigger, bolder, more prominent */
.header-cta{
  display:inline-flex !important;align-items:center;gap:.5em;
  background:linear-gradient(120deg,var(--ig-accent2),var(--ig-accent)) !important;
  color:#0a0a0a !important;font-family:'Sora',sans-serif !important;
  font-size:1.18rem !important;font-weight:800 !important;letter-spacing:-.01em;white-space:nowrap !important;
  padding:.72em 1.45em !important;border-radius:999px !important;
  box-shadow:0 10px 40px -8px rgba(255,106,26,.7), inset 0 1px 0 rgba(255,255,255,.3) !important;
  transition:transform .3s var(--ig-ease), box-shadow .3s var(--ig-ease) !important;
}
.header-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 60px -8px rgba(255,106,26,.9) !important; }
.header-cta svg{ width:20px;height:20px; }

/* ---------- HERO: cinematic, oversized ---------- */
.hero{ min-height:100vh !important;display:flex;align-items:center;position:relative;overflow:hidden; }
#ig-hero-canvas{ position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; }
.hero .container{ position:relative;z-index:2; }
.hero-frame{ background:transparent !important;border:none !important;backdrop-filter:none !important; }
.hero-frame-inner{ background:transparent !important;border:none !important;padding:0 !important; }
.hero h1{ font-size:clamp(3rem,9vw,8.5rem) !important;margin:.2em 0 !important; }
.hero-sub{ font-size:clamp(1.05rem,1.7vw,1.45rem) !important;max-width:620px;color:var(--ig-muted) !important; }
.hero-badge{
  background:rgba(255,255,255,.05) !important;border:1px solid var(--ig-glass-brd) !important;
  backdrop-filter:blur(10px);border-radius:999px !important;letter-spacing:.04em;
}
/* floating scroll cue */
.ig-scrollcue{ position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  width:26px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:14px;display:flex;justify-content:center;padding-top:7px; }
.ig-scrollcue span{ width:3px;height:8px;border-radius:2px;background:var(--ig-accent);animation:igCue 1.6s var(--ig-ease) infinite; }
@keyframes igCue{ 0%{opacity:0;transform:translateY(-4px)} 40%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* ---------- Marquee a touch more premium ---------- */
.marquee{ border-top:1px solid var(--ig-glass-brd);border-bottom:1px solid var(--ig-glass-brd);background:rgba(255,255,255,.02); }
.marquee-item{ font-family:'Sora',sans-serif;font-weight:700; }

/* ---------- Sections rhythm ---------- */
.section{ padding-block:clamp(5rem,11vw,9rem) !important; }
.section-head h2{ font-size:clamp(2rem,5.5vw,4rem) !important; }

/* ---------- Stats glow ---------- */
.stats{ background:transparent !important; }
.stat h3{ font-size:clamp(2.4rem,6vw,4.5rem) !important; }

/* ---------- Custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  .ig-cursor{ position:fixed;top:0;left:0;width:30px;height:30px;border:1.5px solid rgba(255,106,26,.8);
    border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
    transition:width .25s var(--ig-ease),height .25s var(--ig-ease),background .25s,border-color .25s;mix-blend-mode:difference; }
  .ig-cursor-dot{ position:fixed;top:0;left:0;width:5px;height:5px;background:var(--ig-accent);border-radius:50%;
    pointer-events:none;z-index:9999;transform:translate(-50%,-50%); }
  .ig-cursor.hov{ width:54px;height:54px;background:rgba(255,106,26,.12);border-color:var(--ig-accent); }
  a,button,.btn,.model-card,input,select,textarea{ cursor:none; }
}

/* ---------- Floating phone / scroll-top: glassy ---------- */
.floating-phone{ backdrop-filter:blur(12px); }
.scroll-top{ border:1px solid var(--ig-glass-brd) !important;backdrop-filter:blur(10px); }

/* ---------- Page-hero (inner pages) ---------- */
.page-hero{ position:relative;overflow:hidden; }
.page-hero h1{ font-size:clamp(2.4rem,7vw,5.5rem) !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ig-reveal{ opacity:1 !important;transform:none !important;filter:none !important; }
  body{ cursor:auto !important; }
  .ig-cursor,.ig-cursor-dot,.ig-scrollcue{ display:none !important; }
}

/* ---------- Mobile header fit (no zoom / no horizontal scroll) ---------- */
html,body{ max-width:100% !important;overflow-x:hidden !important; }
canvas{ max-width:100% !important; }

@media (max-width:768px){
  /* compact phone CTA so it fits next to the logo + menu */
  .header-cta{
    font-size:.92rem !important;font-weight:800 !important;
    padding:.5em .8em !important;gap:.32em !important;order:2;flex:0 0 auto;
  }
  .header-cta svg{ width:15px !important;height:15px !important; }

  /* tighten the header row */
  .header-main{ gap:10px !important;flex-wrap:nowrap !important;align-items:center; }
  .logo{ flex:0 1 auto;min-width:0; }
  .logo .logo-img,.logo img{ max-height:38px;width:auto; }

  /* hamburger: clearly visible, far right, easy to tap */
  .mobile-toggle{ order:3 !important;display:block !important;
    width:46px !important;height:42px !important;padding:9px 11px !important;flex:0 0 auto;box-sizing:border-box;
    background:rgba(255,255,255,.06) !important;border:1px solid var(--ig-glass-brd) !important;border-radius:10px !important; }
  .mobile-toggle span{ display:block !important;width:24px !important;height:3px !important;
    margin:4px 0 !important;border-radius:2px;background:var(--ig-accent) !important;flex:none; }

  /* the button toggles class "active" — make that actually open the menu */
  nav.active, #nav.active{ display:flex !important;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:rgba(12,15,19,.97) !important;backdrop-filter:blur(18px);
    border-bottom:1px solid var(--ig-glass-brd);padding:14px !important;gap:4px; }
  nav.active a, #nav.active a{ width:100%;padding:12px 14px !important; }

  /* top info bar: smaller text so it doesn't dominate */
  .top-bar{ font-size:11.5px !important; }
  .top-bar .container{ gap:4px !important; }
}

@media (max-width:380px){
  .header-cta{ font-size:.82rem !important;padding:.46em .66em !important; }
  .header-cta svg{ width:13px !important;height:13px !important; }
}