/* ============================================================
   Hometown Insurance Service — Design System v3
   Vibrant BLUE (primary) + PURPLE (secondary/CTA). Hand-built.
   Palette pulled straight from the Hometown logo.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #15205A;        /* deep royal indigo (logo navy) */
  --brand: #2E6BE6;      /* vibrant primary blue */
  --brand-600: #245BD0;
  --brand-700: #1C46B0;
  --sky: #5B9BF5;        /* light accent blue */
  --sky-bright: #7CB2FF;

  /* PURPLE family (secondary + CTA) */
  --grape: #8B34D4;      /* vibrant purple — CTAs */
  --grape-soft: #A855F7; /* bright purple — dark backgrounds */
  --grape-ink: #7A22C7;  /* AA purple TEXT on light (5.8:1) */
  --grape-deep: #5B1EA0; /* deep purple for large text on light */

  /* legacy "gold" token aliases now resolve to PURPLE so every
     existing .btn-gold / .blob-gold / text-gold class stays on-brand */
  --gold: var(--grape);
  --gold-soft: var(--grape-soft);
  --gold-ink: var(--grape-ink);
  --gold-deep: var(--grape-deep);

  --teal: #2E6BE6;       /* checks / positive accents = brand blue */
  --cream: #FBFAFF;      /* page bg (cool white) */
  --cream-2: #F1F1FB;    /* alt section */
  --surface: #FFFFFF;
  --text: #212a44;
  --muted: #5b657f;
  --line: #E4E6F5;
  --line-strong: #D2D5EE;
  --ring: rgba(46,107,230,.45);

  /* ---- SPACING SCALE (8pt base) ---- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-8: 3rem;    --space-10: 4rem;
  --space-12: 5rem;   --space-16: 7rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: 1.25rem;
  --maxw: 1200px;

  /* ---- TYPE SCALE (fluid) ---- */
  --fs-2xs: .8rem;   --fs-xs: .875rem;  --fs-sm: .95rem;   --fs-base: 1.0625rem;
  --fs-md: 1.125rem; --fs-lg: 1.2rem;   --fs-xl: 1.35rem;  --fs-2xl: 1.6rem;
  --fs-h3: clamp(1.35rem, 2.4vw, 1.6rem);
  --fs-h2: clamp(1.9rem, 4vw, 2.7rem);
  --fs-h1: clamp(2rem, 4.4vw, 3rem);
  --fs-hero: clamp(2.1rem, 5vw, 3.4rem);
  --fs-display: clamp(2.4rem, 5.4vw, 4rem);
  --lh-tight: 1.08;  --lh-snug: 1.25;  --lh-body: 1.7;

  /* ---- RADIUS SCALE ---- */
  --r-sm: .5rem;  --r-md: .75rem;  --r-lg: 1rem;  --r-xl: 1.25rem;  --r-2xl: 1.6rem;  --r-full: 999px;

  /* ---- ELEVATION (layered, soft) ---- */
  --sh-1: 0 1px 2px rgba(21,32,90,.06), 0 1px 3px rgba(21,32,90,.07);
  --sh-2: 0 4px 10px -4px rgba(21,32,90,.12), 0 2px 5px rgba(21,32,90,.05);
  --sh-3: 0 12px 26px -10px rgba(21,32,90,.18), 0 4px 10px -6px rgba(21,32,90,.08);
  --sh-4: 0 24px 50px -18px rgba(21,32,90,.26), 0 8px 18px -10px rgba(21,32,90,.10);
  --sh-gold: 0 14px 30px -10px rgba(139,52,212,.45);   /* purple CTA glow */
  --sh-brand: 0 16px 34px -12px rgba(46,107,230,.45);
  --sh-sm: var(--sh-1);  --sh-md: var(--sh-2);  --sh-lg: var(--sh-4);

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---- Base ---- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--cream);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,.font-display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; color: var(--ink); letter-spacing: -.01em; }
::selection { background: var(--grape-soft); color: #fff; }

a { color: var(--brand); }
img { max-width: 100%; height: auto; }

/* ---- TYPOGRAPHY SYSTEM ---- */
.display { font-family:'Fraunces',serif; font-size:var(--fs-display); line-height:var(--lh-tight); color:var(--ink); letter-spacing:-.015em; font-weight:600; }
.h-hero  { font-family:'Fraunces',serif; font-size:var(--fs-hero); line-height:var(--lh-tight); color:var(--ink); letter-spacing:-.012em; font-weight:600; }
.h1 { font-family:'Fraunces',serif; font-size:var(--fs-h1); line-height:var(--lh-snug); color:var(--ink); letter-spacing:-.01em; font-weight:600; }
.h2 { font-family:'Fraunces',serif; font-size:var(--fs-h2); line-height:var(--lh-snug); color:var(--ink); letter-spacing:-.01em; font-weight:600; }
.h3 { font-family:'Fraunces',serif; font-size:var(--fs-h3); line-height:var(--lh-snug); color:var(--ink); font-weight:600; }
.lead { font-size:var(--fs-md); line-height:var(--lh-body); color:var(--muted); }
.lead-hero { font-size:clamp(1.12rem, 1.5vw, 1.3rem); line-height:1.55; }
.t-2xs{font-size:var(--fs-2xs)} .t-xs{font-size:var(--fs-xs)} .t-sm{font-size:var(--fs-sm)}
.t-base{font-size:var(--fs-base)} .t-md{font-size:var(--fs-md)} .t-lg{font-size:var(--fs-lg)}
.t-xl{font-size:var(--fs-xl)} .t-2xl{font-size:var(--fs-2xl)}
.num-xl{font-family:'Fraunces',serif;font-weight:600;line-height:1}
.num-step{font-family:'Fraunces',serif;font-weight:600;line-height:1;font-size:2rem}
.num-step-lg{font-family:'Fraunces',serif;font-weight:600;line-height:1;font-size:clamp(2.5rem,5vw,3.5rem)}
.num-hero-404{font-family:'Fraunces',serif;font-weight:600;line-height:1;font-size:clamp(3.5rem,12vw,5rem)}
.carrier-name{font-family:'Fraunces',serif;font-weight:600;white-space:nowrap;font-size:clamp(1.6rem,3vw,2rem)}

/* ---- FORM FIELDS ---- */
.field { margin-bottom: var(--space-4); }
.field-label { display:block; font-weight:600; font-size:var(--fs-sm); color:var(--ink); margin-bottom:var(--space-2); }
.field-input, .field-select, .field-textarea {
  width:100%; font:inherit; font-size:var(--fs-base); color:var(--text); background:#fff;
  border:1px solid var(--line-strong); border-radius:var(--r-md); padding:.8rem 1rem; min-height:52px;
  transition:border-color .2s, box-shadow .2s;
}
.field-textarea { min-height:130px; resize:vertical; }
.field-input::placeholder, .field-textarea::placeholder { color:#9aa2bd; }
.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}

/* ---- Layout helpers ---- */
.container-x { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.eyebrow { font-family:'Plus Jakarta Sans'; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; color: var(--grape-ink); }

/* ---- Gradients ---- */
.bg-cream { background: var(--cream); }
.bg-alt { background: linear-gradient(180deg, #FBFAFF 0%, #EEF0FC 100%); }
.bg-ink {
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(91,155,245,.28), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(168,85,247,.24), transparent 55%),
    linear-gradient(160deg, #1B2A6E 0%, #2E6BE6 52%, #16205A 100%);
  color: #EAF1FF;
}
.bg-brand-wash { background: linear-gradient(135deg, rgba(46,107,230,.07), rgba(168,85,247,.10)); }
.bg-gold-wash { background: linear-gradient(135deg, rgba(168,85,247,.13), rgba(46,107,230,.07)); }
.text-gradient-gold {
  background: linear-gradient(92deg,#A855F7,#7CB2FF 55%,#2E6BE6);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: text-shimmer 7s linear infinite;
}
@keyframes text-shimmer { to { background-position: 220% center; } }
.hero-aurora::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 420px at 78% 18%, rgba(124,178,255,.34), transparent 60%),
    radial-gradient(560px 400px at 8% 90%, rgba(168,85,247,.30), transparent 60%);
  background-size:180% 180%;
  animation: aurora-pan 20s ease-in-out infinite;
}
@keyframes aurora-pan {
  0%,100% { background-position: 0% 0%, 100% 100%; }
  50%     { background-position: 40% 30%, 60% 70%; }
}

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-family:'Plus Jakarta Sans'; border-radius:var(--r-full);
  padding:.95rem 1.6rem; font-size:1rem; line-height:1; cursor:pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .2s;
  text-decoration:none; border:1px solid transparent; min-height:52px; }
.btn:focus-visible { outline:3px solid var(--ring); outline-offset:3px; }
/* PRIMARY CTA — vibrant purple */
.btn-gold { background: linear-gradient(135deg,#A855F7 0%,#8B34D4 55%,#7C3AED 100%); color:#fff; box-shadow: var(--sh-gold); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -10px rgba(139,52,212,.62); }
/* SECONDARY — vibrant blue */
.btn-brand { background: linear-gradient(135deg,#5B9BF5 0%,#2E6BE6 55%,#245BD0 100%); color:#fff; box-shadow: var(--sh-brand); }
.btn-brand:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -12px rgba(46,107,230,.62); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); background:#fff; }
.btn-light { background:#fff; color: var(--ink); box-shadow: var(--sh-md); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.btn-outline-light { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.45); }
.btn-outline-light:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* ---- Cards ---- */
.card { background: var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow: var(--sh-2); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--sh-4); border-color: rgba(139,52,212,.5); }
.card-pad { padding: var(--space-5); }
.icon-badge { width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(46,107,230,.14), rgba(91,155,245,.20)); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(46,107,230,.12); }
.icon-badge.gold { background: linear-gradient(135deg, rgba(168,85,247,.20), rgba(139,52,212,.12)); color:var(--grape); box-shadow: inset 0 0 0 1px rgba(139,52,212,.20); }

/* ---- Header / Nav ---- */
.site-header { position:sticky; top:0; z-index:60; transition: background .3s, box-shadow .3s, padding .3s; }
.site-header .bar { transition: padding .3s; }
.site-header.scrolled { background: rgba(251,250,255,.86); backdrop-filter: blur(12px); box-shadow: var(--sh-md); border-bottom:1px solid var(--line); }
.topbar { background: var(--ink); color:#d5e2ff; font-size:.86rem; }
.topbar a { color:#fff; }
.nav-link { position:relative; font-weight:600; color: var(--ink); padding:.4rem .2rem; text-decoration:none; font-size:.98rem; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: linear-gradient(90deg,var(--brand),var(--grape)); transition: width .3s; border-radius:2px; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color: var(--brand); }
.dropdown { position:relative; }
.dropdown-menu { position:absolute; top:calc(100% + 10px); left:0; min-width:280px; background:#fff; border:1px solid var(--line); border-radius:1rem; box-shadow: var(--sh-lg); padding:.6rem; opacity:0; visibility:hidden; transform: translateY(8px); transition: all .25s; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity:1; visibility:visible; transform: translateY(0); }
.dropdown-menu a { display:block; padding:.6rem .8rem; border-radius:.6rem; color: var(--text); text-decoration:none; font-weight:600; font-size:.95rem; }
.dropdown-menu a:hover { background: var(--cream-2); color: var(--brand); }

/* mobile menu */
.mobile-panel { position:fixed; inset:0 0 0 auto; width:min(86vw,400px); background: var(--cream); z-index:80; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.3,1); overflow-y:auto; box-shadow: var(--sh-lg); }
.mobile-panel.open { transform: translateX(0); }
.mobile-backdrop { position:fixed; inset:0; background: rgba(21,32,90,.5); z-index:70; opacity:0; visibility:hidden; transition:.3s; }
.mobile-backdrop.open { opacity:1; visibility:visible; }
.m-acc summary { list-style:none; cursor:pointer; }
.m-acc summary::-webkit-details-marker { display:none; }

/* scroll progress */
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background: linear-gradient(90deg,#2E6BE6,#8B34D4,#A855F7); }

/* ---- Reveal animations ---- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
.no-js .reveal, .reduce .reveal { opacity:1; transform:none; }

/* ---- Misc components ---- */
.pill { display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.5rem .9rem; font-weight:600; font-size:.9rem; box-shadow: var(--sh-sm); }
.divider-fade { height:1px; background: linear-gradient(90deg,transparent,var(--line),transparent); }
.stat-num { font-family:'Fraunces'; font-weight:600; font-size: clamp(2.2rem,5vw,3.2rem); color: var(--ink); line-height:1; }
.list-check li { position:relative; padding-left:2rem; margin-bottom:.7rem; }
.list-check li::before { content:""; position:absolute; left:0; top:.35em; width:20px; height:20px; border-radius:50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; }

/* prose-like content blocks */
.rich h2 { font-size: clamp(1.7rem,3.5vw,2.4rem); margin-top:2.4rem; margin-bottom:.8rem; }
.rich h3 { font-size: clamp(1.25rem,2.4vw,1.55rem); margin-top:1.8rem; margin-bottom:.5rem; color: var(--brand-700); }
.rich p { margin-bottom:1.1rem; color: var(--text); }
.rich ul { margin-bottom:1.1rem; }

/* accordion (FAQ) */
.acc-item { border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow: var(--sh-sm); overflow:hidden; }
.acc-item + .acc-item { margin-top:.85rem; }
.acc-q { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 1.35rem; font-weight:700; font-family:'Plus Jakarta Sans'; color: var(--ink); font-size:1.05rem; background:none; border:none; cursor:pointer; }
.acc-q .chev { transition: transform .3s; color: var(--grape); flex:none; }
.acc-item[open] .acc-q .chev { transform: rotate(180deg); }
.acc-a { padding: 0 1.35rem 1.25rem; color: var(--muted); }
.acc-item summary::-webkit-details-marker{display:none;}
.acc-q { list-style:none; }

/* carrier marquee */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; gap:3.5rem; width:max-content; animation: scroll-x 26s linear infinite; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* floating mobile call */
.float-call { position:fixed; right:1rem; bottom:1rem; z-index:55; display:none; }
@media (max-width: 860px){ .float-call{ display:block; } }

/* hero photo frame */
.frame { border-radius:1.6rem; overflow:hidden; box-shadow: var(--sh-lg); border:6px solid #fff; }

/* image hover zoom */
.zoom-wrap { overflow:hidden; }
.zoom-wrap img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.card-hover:hover .zoom-wrap img { transform: scale(1.06); }

/* embed slot styling */
.embed-slot { border:2px dashed rgba(46,107,230,.35); border-radius:1rem; background: rgba(46,107,230,.05); padding:1.5rem; }

/* ---- "How it works" step cards (on dark) — high contrast ---- */
.step-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:1.25rem; padding:2rem 1.6rem; position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.step-card::before{ content:""; position:absolute; inset:0; opacity:.6; pointer-events:none; background:radial-gradient(420px 220px at 100% 0,rgba(168,85,247,.20),transparent 60%); }
.step-card:hover{ transform:translateY(-6px); border-color:rgba(196,165,255,.55); box-shadow:0 26px 52px -22px rgba(0,0,0,.55); }
.step-card > *{ position:relative; z-index:1; }
.step-num{ width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:600; font-size:1.7rem; color:#fff; background:linear-gradient(135deg,#2E6BE6,#8B34D4); box-shadow:0 10px 26px -8px rgba(139,52,212,.7); margin-bottom:1.2rem; }
.step-card .step-title{ color:#fff; }
.step-card .step-text{ color:#dbe5fc; }

/* ============================================================
   ENHANCEMENTS — modern graphics, depth & motion
   ============================================================ */

/* fine grain overlay for a premium, printed-paper feel */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
header.site-header, .mobile-panel, .scroll-progress, .float-call { z-index:60; }
.scroll-progress{ z-index:100; }

/* richer dark sections: mesh + faint grid */
.bg-ink{
  position:relative;
  background:
    radial-gradient(1200px 680px at 12% -12%, rgba(124,178,255,.30), transparent 58%),
    radial-gradient(980px 560px at 102% 4%, rgba(168,85,247,.28), transparent 52%),
    radial-gradient(760px 760px at 50% 122%, rgba(91,155,245,.22), transparent 60%),
    linear-gradient(160deg, #1B2A6E 0%, #2E6BE6 50%, #14204F 100%);
}
.bg-ink::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px; -webkit-mask-image:radial-gradient(circle at 50% 35%,#000,transparent 78%); mask-image:radial-gradient(circle at 50% 35%,#000,transparent 78%);
}
.bg-ink > *{ position:relative; z-index:2; }

/* lighter sections get subtle dot grid */
.bg-alt{ position:relative; background:linear-gradient(180deg,#FBFAFF 0%, #EEF0FC 100%); }
.bg-alt::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(rgba(46,107,230,.09) 1.1px, transparent 1.1px);
  background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%);
}
.bg-alt > *{ position:relative; z-index:1; }

/* floating gradient blobs (decorative, animated) */
.blob{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.55; pointer-events:none; z-index:0; will-change:transform; }
.blob-gold{ background:radial-gradient(circle,#A855F7,transparent 70%); }
.blob-blue{ background:radial-gradient(circle,#5B9BF5,transparent 70%); }
.blob-teal{ background:radial-gradient(circle,#2E6BE6,transparent 70%); }
.blob-anim{ animation: blob-float 18s ease-in-out infinite; }
.blob-anim:nth-of-type(2){ animation-duration:22s; }
@keyframes blob-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(24px,-26px) scale(1.08); }
  66%{ transform:translate(-18px,16px) scale(.95); }
}

/* gradient eyebrow with leading rule */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,#2E6BE6,#A855F7); display:inline-block; }
.eyebrow.center::before{ display:none; }

/* heading gradient accent underline */
.heading-accent{ position:relative; display:inline-block; }
.heading-accent::after{ content:""; position:absolute; left:0; bottom:-.18em; height:.16em; width:clamp(48px,40%,120px); border-radius:4px; background:linear-gradient(90deg,#2E6BE6,#A855F7); }

/* premium card refinements: gradient hairline on hover */
.card{ position:relative; isolation:isolate; background:linear-gradient(180deg,#fff,#fbfaff); }
.card-hover::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1; opacity:0; transition:opacity .4s;
  background:linear-gradient(135deg,rgba(139,52,212,.7),rgba(46,107,230,.5) 60%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.card-hover:hover::before{ opacity:1; }
.card-hover:hover{ box-shadow:0 28px 56px -20px rgba(21,32,90,.34), 0 10px 22px -12px rgba(139,52,212,.28); }

/* icon badge glow + tilt on hover */
.icon-badge{ position:relative; overflow:hidden; transition:transform .35s, box-shadow .35s; }
.icon-badge::after{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .4s; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6),transparent 60%); }
.card-hover:hover .icon-badge{ transform:translateY(-2px) rotate(-3deg); box-shadow:0 12px 22px -10px rgba(139,52,212,.5); }
.card-hover:hover .icon-badge::after{ opacity:.7; }

/* button shine sweep */
.btn{ position:relative; overflow:hidden; }
.btn-gold::after,.btn-brand::after,.btn-light::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transition:left .6s ease;
}
.btn-gold:hover::after,.btn-brand:hover::after,.btn-light:hover::after{ left:140%; }

/* gradient photo ring */
.frame{ position:relative; }
.frame-ring{ position:relative; padding:5px; border-radius:1.8rem; background:linear-gradient(135deg,#2E6BE6,#8B34D4 55%,#A855F7); box-shadow:var(--sh-lg); }
.frame-ring::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1; opacity:.55; filter:blur(16px);
  background:linear-gradient(135deg,#2E6BE6,#8B34D4 55%,#A855F7);
}
.frame-ring > img, .frame-ring .frame{ border-radius:1.5rem; display:block; width:100%; border:5px solid #fff; box-shadow:none; }

/* glass utility */
.glass{ background:rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.18); }

/* photo card scrim for cohesion */
.zoom-wrap{ position:relative; }
.zoom-wrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(21,32,90,.30)); opacity:.55; transition:opacity .4s; }
.card-hover:hover .zoom-wrap::after{ opacity:.25; }

/* reveal variants */
.reveal-blur{ opacity:0; filter:blur(10px); transform:translateY(20px); transition:opacity .9s ease,filter .9s ease,transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal-blur.in{ opacity:1; filter:blur(0); transform:none; }
.no-js .reveal-blur,.reduce .reveal-blur{ opacity:1; filter:none; transform:none; }

/* tilt base */
.tilt{ transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.7,.3,1); will-change:transform; }

/* nicer global focus + smoother links */
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:4px; }
a{ transition:color .2s; }

/* gradient top hairline on header when scrolled */
.site-header.scrolled::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#2E6BE6,#8B34D4,#A855F7); opacity:.9; }
.site-header{ position:sticky; }

/* pill gradient hover */
.pill{ transition:transform .25s, box-shadow .25s; }
.pill:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }

.stat-num{ position:relative; }

/* section heading helper on dark */
.bg-ink .eyebrow { color:#c9b8ff; }                    /* light lavender on blue/indigo */
.bg-ink .eyebrow::before{ background:linear-gradient(90deg,#7CB2FF,#C4A5FF); }

/* stat numbers sit on cream — AA-safe blue→purple gradient */
.stat-num.text-gradient-gold{
  background:linear-gradient(92deg,#1C46B0,#5B1EA0);
  background-size:auto; animation:none;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   POLISH PASS — micro-interactions & finishing details
   ============================================================ */

/* header: a touch more presence at the top, refined frosted on scroll */
.site-header{ border-bottom:1px solid transparent; }
.site-header.scrolled{ background:rgba(251,250,255,.82); }
.site-header .bar{ position:relative; }

/* dropdown menu: gradient hairline + smoother item hover */
.dropdown-menu{ overflow:hidden; }
.dropdown-menu a{ position:relative; transition:background .2s, color .2s, padding-left .2s; }
.dropdown-menu a::before{ content:""; position:absolute; left:.35rem; top:50%; width:0; height:0; border-radius:50%;
  background:linear-gradient(135deg,#2E6BE6,#8B34D4); transform:translateY(-50%); transition:width .2s,height .2s; }
.dropdown-menu a:hover{ padding-left:1.4rem; }
.dropdown-menu a:hover::before{ width:7px; height:7px; }

/* buttons: gentle icon nudge on hover */
.btn svg{ transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(2px); }
.btn-gold:hover svg,.btn-brand:hover svg{ transform:translateX(3px); }

/* footer social icons — hover lift + colored glow */
.social-ic{ transition:transform .3s var(--ease), box-shadow .3s, background .3s; }
.social-ic:hover{ transform:translateY(-4px); background:linear-gradient(135deg,#2E6BE6,#8B34D4)!important; box-shadow:0 12px 24px -8px rgba(139,52,212,.6); }

/* footer link slide */
.footer-link{ transition:color .2s, padding-left .2s; }
.footer-link:hover{ padding-left:5px; }

/* carrier marquee names as premium chips */
.carrier-name{ padding:.55rem 1.35rem; border-radius:999px; border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#f6f5ff); box-shadow:var(--sh-1); color:var(--ink)!important;
  font-size:clamp(1.05rem,2vw,1.35rem)!important; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.carrier-name:hover{ transform:translateY(-3px); border-color:rgba(139,52,212,.4); box-shadow:var(--sh-2); }

/* service / feature cards: thin gradient top accent that reveals on hover */
.card-hover{ overflow:hidden; }
.card-hover::after{ content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,#2E6BE6,#8B34D4,#A855F7); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); z-index:2; }
.card-hover:hover::after{ transform:scaleX(1); }

/* hero floating trust badge — gentle idle bob */
.float-bob{ animation:float-bob 5.5s ease-in-out infinite; }
@keyframes float-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* back-to-top control */
.to-top{ position:fixed; right:1.15rem; bottom:1.15rem; z-index:56; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(135deg,#2E6BE6,#8B34D4); box-shadow:0 12px 26px -8px rgba(139,52,212,.6);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .35s, transform .35s, visibility .35s, box-shadow .3s; }
.to-top:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(139,52,212,.75); }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top.show:hover{ transform:translateY(-3px); }
@media (max-width:860px){ .to-top{ display:none; } }

/* selection + link underline flourish on inline rich links */
.rich a{ background-image:linear-gradient(90deg,#2E6BE6,#8B34D4); background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s; text-decoration:none; font-weight:600; }
.rich a:hover{ background-size:100% 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .blob-anim{ animation:none !important; }
  .hero-aurora::before{ animation:none !important; }
  .text-gradient-gold{ animation:none !important; }
  .float-bob{ animation:none !important; }
  body::after{ display:none; }
}