/* =========================================================================
   IcePro — crafted layer (depth, texture, gradient, motion, type pairing)
   Loaded after style.css. Lifts the clean B2B base into a premium surface
   without abandoning the IcePro design language.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* Type pairing — display + body (literal faces) */
.ip-display-face{ font-family:"Sora", sans-serif; }
.ip-body-face{ font-family:"Inter", sans-serif; }
h1, h2, h3, .ip-logo{ font-family:"Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body, p, input, button, select, textarea{ font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

:root{
  /* Type pairing: Sora (display) + Inter (body) */
  --ip-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ip-body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Elevation scale (layered shadows) */
  --ip-elev-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
  --ip-elev-2: 0 2px 4px rgba(15,23,42,.05), 0 6px 16px rgba(15,23,42,.08);
  --ip-elev-3: 0 8px 18px rgba(15,23,42,.08), 0 18px 40px rgba(15,23,42,.12);
  --ip-elev-blue: 0 8px 22px rgba(29,78,216,.22);
  --ip-elev-inner: inset 0 1px 0 rgba(255,255,255,.6);

  /* Gradient washes */
  --ip-grad-navy: linear-gradient(135deg, #0a1f44 0%, #112a5c 55%, #0a1f44 100%);
  --ip-grad-blue: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --ip-grad-sky:  linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
  --ip-grad-panel: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  --ip-grad-ice:  linear-gradient(135deg, #e8f1ff 0%, #d3e6ff 50%, #bcd8ff 100%);
}

/* Display face on headings + tighter optical tracking */
h1,h2,h3,.ip-logo,.ip-price__ex{ font-family:var(--ip-display); }
body{ font-family:var(--ip-body-font); }

/* Faint grain texture on the page + dark sections (premium surface) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
.ip-utility, .ip-footer, .ip-hero, .ip-cta-band{ position:relative; }
.ip-utility::after, .ip-footer::after, .ip-cta-band::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.ip-container,.ip-header{ position:relative; z-index:1; }

/* Gradient washes on the dark furniture */
.ip-utility{ background:var(--ip-grad-navy); }
.ip-footer{ background:var(--ip-grad-navy); }

/* Elevated, crafted cards */
.ip-card{ box-shadow:var(--ip-elev-1); background:var(--ip-grad-panel); transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.ip-card:hover{ box-shadow:var(--ip-elev-3); transform:translateY(-3px); border-color:var(--ip-blue-100); }

/* Buttons: depth + motion + sheen */
.ip-btn{ transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .08s ease; }
.ip-btn--primary{ background:var(--ip-grad-blue); box-shadow:var(--ip-elev-blue); }
.ip-btn--primary:hover{ box-shadow:0 10px 28px rgba(29,78,216,.34); transform:translateY(-1px); }
.ip-btn--green{ background:linear-gradient(135deg,#22c55e,#16a34a); box-shadow:0 8px 22px rgba(22,163,74,.22); }
.ip-btn--green:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(22,163,74,.32); }

/* Tinted panels get a soft wash + inner light */
.ip-panel-soft{ background:var(--ip-grad-sky); box-shadow:var(--ip-elev-inner); }
.ip-panel-ice{ background:var(--ip-grad-ice); }

/* Trust + feature icon tiles: framed, elevated */
.ip-trust__ic, .ip-feature__ic{ background:var(--ip-blue-50); border-radius:10px; padding:7px; box-shadow:var(--ip-elev-1); transition:transform .2s ease, box-shadow .2s ease; }
.ip-feature:hover .ip-feature__ic{ transform:translateY(-2px) scale(1.04); box-shadow:var(--ip-elev-2); }

/* Header gets a subtle elevation on scroll-stick */
.ip-header{ box-shadow:0 1px 0 rgba(15,23,42,.04); transition:box-shadow .2s ease; }
.ip-header.is-stuck{ box-shadow:var(--ip-elev-2); }

/* Links / nav motion */
.ip-nav a, .ip-header__action, .ip-utility a, .ip-footer a{ transition:color .15s ease, background .15s ease, transform .15s ease; }

/* Section reveal on scroll */
.ip-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.ip-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .ip-reveal{ opacity:1; transform:none; transition:none; } *{ scroll-behavior:auto; } }

/* Hero gradient + ice glow */
.ip-hero{ background:var(--ip-grad-navy); color:#eaf1ff; overflow:hidden; }
.ip-hero::before{
  content:""; position:absolute; right:-10%; top:-30%; width:60%; height:160%;
  background:radial-gradient(closest-side, rgba(59,130,246,.30), rgba(59,130,246,0) 70%); pointer-events:none;
}
.ip-hero h1{ color:#fff; }

/* Section gradient backgrounds */
.ip-section--wash{ background:var(--ip-grad-sky); }
.ip-cta-band{ background:var(--ip-grad-navy); color:#fff; box-shadow:var(--ip-elev-3); }

/* Star ratings shimmer */
.ip-stars{ color:var(--ip-star); letter-spacing:1px; }

/* Focus rings (accessible + crafted) */
a:focus-visible, button:focus-visible, input:focus-visible, .ip-btn:focus-visible{ outline:2px solid var(--ip-blue); outline-offset:2px; border-radius:6px; }