/* ==========================================================================
   InsureGuide — dailyinsurebrief.org
   Shared design system stylesheet
   ========================================================================== */

   :root{
    --canvas:#080F18;
    --hero:#102333;
    --card:#153344;
    --headerfooter:#02070C;
    --cta:#0D9488;
    --cta-hover:#0FB3A4;
    --accent:#B8734F;
    --highlight:#67E8F9;
    --positive:#86C98B;
    --alert:#D4A84F;
    --text:#F1F5F9;
    --text-secondary:#9BAFC0;
    --border:#294657;
  }
  
  *{ scrollbar-color: var(--border) var(--canvas); }
  
  html{ scroll-behavior:smooth; }
  
  body{
    background-color:var(--canvas);
    color:var(--text);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  
  h1,h2,h3,h4,.font-display{
    font-family:'Space Grotesk', sans-serif;
  }
  
  .font-mono{
    font-family:'JetBrains Mono', monospace;
  }
  
  /* Focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--highlight);
    outline-offset:3px;
  }
  
  /* ==========================================================================
     Logo — CSS built shield + pulse icon
     ========================================================================== */
  .brand-mark{
    position:relative;
    width:38px;
    height:38px;
    flex-shrink:0;
  }
  .brand-mark__shield{
    position:absolute;
    inset:0;
    background:linear-gradient(155deg, var(--cta) 0%, #0B6F65 100%);
    clip-path:polygon(50% 0%, 100% 18%, 100% 55%, 50% 100%, 0% 55%, 0% 18%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 1px rgba(103,232,249,0.25), inset 0 0 8px rgba(0,0,0,0.35);
  }
  .brand-mark__pulse{
    width:20px;
    height:10px;
  }
  .brand-mark__ring{
    position:absolute;
    inset:-4px;
    border:1px solid var(--highlight);
    clip-path:polygon(50% 0%, 100% 18%, 100% 55%, 50% 100%, 0% 55%, 0% 18%);
    opacity:0;
    animation:shieldPulse 3.2s ease-out infinite;
  }
  @keyframes shieldPulse{
    0%{ opacity:0.55; transform:scale(0.92); }
    70%{ opacity:0; transform:scale(1.28); }
    100%{ opacity:0; transform:scale(1.28); }
  }
  
  /* ==========================================================================
     Ambient backgrounds — slow, continuous, subtle. No scroll-triggering.
     ========================================================================== */
  .ambient-field{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
  }
  .ambient-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:0.35;
    will-change:transform;
  }
  .ambient-orb--teal{
    background:radial-gradient(circle, rgba(13,148,136,0.55) 0%, rgba(13,148,136,0) 70%);
    width:520px; height:520px;
    top:-120px; left:-100px;
    animation:driftA 22s ease-in-out infinite;
  }
  .ambient-orb--cyan{
    background:radial-gradient(circle, rgba(103,232,249,0.35) 0%, rgba(103,232,249,0) 70%);
    width:420px; height:420px;
    bottom:-140px; right:-80px;
    animation:driftB 26s ease-in-out infinite;
  }
  .ambient-orb--copper{
    background:radial-gradient(circle, rgba(184,115,79,0.3) 0%, rgba(184,115,79,0) 70%);
    width:360px; height:360px;
    top:35%; right:20%;
    animation:driftC 30s ease-in-out infinite;
  }
  @keyframes driftA{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(60px,40px) scale(1.12); }
  }
  @keyframes driftB{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-50px,-30px) scale(1.08); }
  }
  @keyframes driftC{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-40px,50px) scale(0.94); }
  }
  
  /* Signature element: slow horizontal scan line, evokes continuous monitoring */
  .scan-line{
    position:absolute;
    left:0; right:0;
    height:1px;
    background:linear-gradient(90deg, transparent 0%, rgba(103,232,249,0.55) 50%, transparent 100%);
    animation:scanMove 9s linear infinite;
    opacity:0.5;
  }
  @keyframes scanMove{
    0%{ top:6%; opacity:0; }
    10%{ opacity:0.6; }
    90%{ opacity:0.6; }
    100%{ top:94%; opacity:0; }
  }
  
  /* Gradient shift on hero containers */
  .hero-gradient{
    background:linear-gradient(120deg, var(--hero) 0%, #0C1C2A 45%, var(--hero) 100%);
    background-size:200% 200%;
    animation:gradientShift 16s ease-in-out infinite;
  }
  @keyframes gradientShift{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  
  /* Grid overlay texture for hero/data sections */
  .grid-overlay{
    background-image:
      linear-gradient(rgba(103,232,249,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(103,232,249,0.05) 1px, transparent 1px);
    background-size:42px 42px;
    animation:gridDrift 18s linear infinite;
  }
  @keyframes gridDrift{from{background-position:0 0;}to{background-position:42px 42px;}}

  .hero-copy > *{opacity:0;transform:translateY(18px);animation:heroReveal 0.8s cubic-bezier(0.2,0.8,0.2,1) forwards;}
  .hero-copy > *:nth-child(1){animation-delay:0.15s;}
  .hero-copy > *:nth-child(2){animation-delay:0.3s;}
  .hero-copy > *:nth-child(3){animation-delay:0.45s;}
  .hero-copy > *:nth-child(4){animation-delay:0.6s;}
  .hero-copy > *:nth-child(5){animation-delay:0.75s;}
  @keyframes heroReveal{to{opacity:1;transform:translateY(0);}}
  .hero-copy > span{position:relative;overflow:hidden;}
  .hero-copy > span::after{content:'';position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(90deg,transparent,rgba(103,232,249,0.24),transparent);animation:badgeSweep 4.5s ease-in-out 1.2s infinite;}
  @keyframes badgeSweep{35%,100%{transform:translateX(110%);}}
  .hero-copy h1{animation:heroTitleGlow 4s ease-in-out 1.4s infinite alternate;}
  @keyframes heroTitleGlow{from{text-shadow:0 0 0 rgba(103,232,249,0);}to{text-shadow:0 0 24px rgba(103,232,249,0.2);}}

  [data-image]{
    background-color:var(--card);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    transition:background-size 0.5s ease, filter 0.5s ease;
  }
  .lift-card:hover [data-image],
  [data-image]:hover{
    background-size:105%;
    filter:saturate(1.08) brightness(1.04);
  }

  .hero-signal{position:absolute;inset:18% -4% 0 38%;min-height:340px;opacity:0;pointer-events:none;transform:perspective(700px) rotateX(42deg) rotateZ(-8deg) translate3d(var(--hero-shift-x, 0px),var(--hero-shift-y, 0px),0);transform-origin:center bottom;animation:signalReveal 1.4s 0.35s cubic-bezier(0.2,0.8,0.2,1) forwards;transition:transform 0.35s ease-out;}
  @keyframes signalReveal{from{opacity:0;filter:blur(8px);}to{opacity:0.72;filter:blur(0);}}
  .hero-signal::before{content:'';position:absolute;inset:10% 8% 8%;border:1px solid rgba(103,232,249,0.38);border-radius:50%;box-shadow:0 0 0 34px rgba(103,232,249,0.06),0 0 0 70px rgba(103,232,249,0.035);animation:signalBreathe 3.8s ease-in-out infinite;}
  .hero-signal::after{content:'';position:absolute;left:49%;top:49%;width:12px;height:12px;border-radius:50%;background:var(--highlight);box-shadow:0 0 0 8px rgba(103,232,249,0.12),0 0 28px 8px rgba(103,232,249,0.72);animation:beaconPulse 2s ease-in-out infinite;}
  .hero-signal__radar{position:absolute;inset:18% 16% 16%;border:2px solid rgba(103,232,249,0.24);border-radius:50%;border-right-color:rgba(103,232,249,0.95);box-shadow:0 0 20px rgba(103,232,249,0.16);animation:radarSpin 5s linear infinite;}
  .hero-signal__radar::after{content:'';position:absolute;inset:16%;border:1px dashed rgba(103,232,249,0.38);border-radius:50%;animation:radarSpin 8s linear infinite reverse;}
  @keyframes radarSpin{to{transform:rotate(360deg);}}
  .hero-signal__beam,.hero-signal__line{position:absolute;display:block;transform-origin:left center;}
  .hero-signal__beam{left:50%;top:50%;width:54%;height:3px;background:linear-gradient(90deg,var(--highlight),transparent);filter:drop-shadow(0 0 5px rgba(103,232,249,0.7));animation:beamSweep 2.8s ease-in-out infinite;}
  .hero-signal__line{height:1px;background:linear-gradient(90deg,transparent,rgba(13,148,136,0.8),transparent);}
  .hero-signal__line--one{left:4%;top:38%;width:90%;transform:rotate(18deg);animation:lineFloat 8s ease-in-out infinite;}
  .hero-signal__line--two{left:14%;top:68%;width:76%;transform:rotate(-22deg);animation:lineFloat 10s ease-in-out -2s infinite reverse;}
  .hero-signal__node{position:absolute;display:grid;gap:3px;padding:10px 13px;border:1px solid rgba(103,232,249,0.42);background:rgba(8,15,24,0.58);font-family:'JetBrains Mono',monospace;backdrop-filter:blur(4px);animation:nodeFloat 6s ease-in-out infinite;}
  .hero-signal__node span{font-size:9px;color:var(--text-secondary);letter-spacing:0.16em;}
  .hero-signal__node b{font-size:20px;color:var(--highlight);font-weight:500;}
  .hero-signal__node--one{left:12%;top:18%;}.hero-signal__node--two{right:8%;top:44%;animation-delay:-2s;}.hero-signal__node--three{left:36%;bottom:7%;animation-delay:-4s;}
  .hero-signal__particle{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--highlight);box-shadow:0 0 14px 3px rgba(103,232,249,0.6);animation:particleDrift 5s ease-in-out infinite;}
  .hero-signal__particle--one{left:28%;top:32%;}.hero-signal__particle--two{left:62%;top:28%;animation-delay:-1.2s;}.hero-signal__particle--three{left:72%;top:72%;animation-delay:-2.6s;}.hero-signal__particle--four{left:20%;top:76%;animation-delay:-3.8s;}
  @keyframes particleDrift{0%,100%{opacity:0.2;transform:translate(0,0) scale(0.7);}50%{opacity:1;transform:translate(22px,-18px) scale(1.25);}}
  @keyframes signalBreathe{50%{transform:scale(1.1);opacity:0.9;}}
  @keyframes beaconPulse{0%,100%{transform:scale(0.75);opacity:0.65;}50%{transform:scale(1.35);opacity:1;}}
  @keyframes beamSweep{0%,100%{transform:rotate(-28deg) scaleX(0.55);opacity:0.35;}50%{transform:rotate(32deg) scaleX(1.2);opacity:1;}}
  @keyframes lineFloat{50%{opacity:0.28;transform:translateY(16px) rotate(18deg);}}
  @keyframes nodeFloat{50%{transform:translateY(-10px);border-color:rgba(103,232,249,0.8);}}

  @media (prefers-reduced-motion:reduce){
    .hero-gradient,.grid-overlay,.ambient-orb,.scan-line,.hero-copy > *, .hero-copy > span::after,
    .hero-signal,.hero-signal::before,.hero-signal__radar,.hero-signal__radar::after,
    .hero-signal__beam,.hero-signal__line,.hero-signal__node,.hero-signal__particle{animation:none;}
    .hero-copy > *{opacity:1;transform:none;}
    .hero-signal{opacity:0.72;filter:none;}
  }

  .contact-layout{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:clamp(2rem,7vw,7rem);align-items:start;}
  .contact-intro{padding-top:1.2rem;}
  .contact-route{display:flex;align-items:flex-start;gap:14px;border-left:2px solid var(--cta);padding:15px 0 15px 18px;background:linear-gradient(90deg,rgba(13,148,136,0.12),transparent);}
  .contact-route__pulse{width:9px;height:9px;flex:0 0 auto;margin-top:5px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 6px rgba(134,201,139,0.1);animation:pulseDot 2.4s ease-in-out infinite;}
  .contact-chip{border:1px solid var(--border);color:var(--text-secondary);padding:8px 11px;font:500 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.04em;}
  .contact-form-panel{box-shadow:0 24px 60px rgba(0,0,0,0.2);}
  @media (max-width:900px){.hero-signal{inset:38% -10% -5% 18%;opacity:0.45;}.contact-layout{grid-template-columns:1fr;gap:3rem;}}
  @media (max-width:560px){.hero-signal{inset:44% -28% -5% -8%;}.hero-signal__node{padding:7px 9px;}.hero-signal__node b{font-size:16px;}.hero-signal__radar{inset:20% 12% 12%;}}
  
  /* Corner ticks for panel framing */
  .tick-panel{
    position:relative;
  }
  .tick-panel::before,.tick-panel::after{
    content:'';
    position:absolute;
    width:10px; height:10px;
    border-color:var(--highlight);
    opacity:0.6;
  }
  .tick-panel::before{
    top:-1px; left:-1px;
    border-top:1.5px solid var(--highlight);
    border-left:1.5px solid var(--highlight);
  }
  .tick-panel::after{
    bottom:-1px; right:-1px;
    border-bottom:1.5px solid var(--highlight);
    border-right:1.5px solid var(--highlight);
  }
  
  /* Card hover */
  .lift-card{
    transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .lift-card:hover{
    transform:translateY(-4px);
    border-color:var(--highlight);
    box-shadow:0 12px 32px -12px rgba(103,232,249,0.15);
  }
  
  /* Buttons */
  .btn-primary{
    background-color:var(--cta);
    color:#04120F;
    transition:background-color 0.2s ease, transform 0.2s ease;
  }
  .btn-primary:hover{
    background-color:var(--cta-hover);
    transform:translateY(-1px);
  }
  .btn-outline{
    border:1px solid var(--border);
    color:var(--text);
    transition:border-color 0.2s ease, background-color 0.2s ease;
  }
  .btn-outline:hover{
    border-color:var(--highlight);
    background-color:rgba(103,232,249,0.06);
  }
  
  /* Nav link underline */
  .nav-link{
    position:relative;
    color:var(--text-secondary);
    transition:color 0.2s ease;
  }
  .nav-link::after{
    content:'';
    position:absolute;
    left:0; bottom:-4px;
    width:0%; height:1px;
    background:var(--highlight);
    transition:width 0.25s ease;
  }
  .nav-link:hover{ color:var(--text); }
  .nav-link:hover::after{ width:100%; }
  .nav-link.is-active{ color:var(--text); }
  .nav-link.is-active::after{ width:100%; background:var(--cta); }
  
  /* Mobile menu */
  .mobile-menu{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .mobile-menu.open{
    max-height:420px;
  }
  
  /* Marquee-style stat ticker (CSS only, gentle) */
  .pulse-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--positive);
    box-shadow:0 0 0 rgba(134,201,139,0.5);
    animation:pulseDot 2.4s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%{ box-shadow:0 0 0 0 rgba(134,201,139,0.5); }
    70%{ box-shadow:0 0 0 8px rgba(134,201,139,0); }
    100%{ box-shadow:0 0 0 0 rgba(134,201,139,0); }
  }
  
  /* Range input styling for calculator */
  input[type="range"]{
    -webkit-appearance:none;
    appearance:none;
    height:4px;
    background:var(--border);
    border-radius:4px;
    outline:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--highlight);
    border:3px solid var(--canvas);
    cursor:pointer;
    box-shadow:0 0 0 1px var(--highlight);
  }
  input[type="range"]::-moz-range-thumb{
    width:18px; height:18px;
    border-radius:50%;
    background:var(--highlight);
    border:3px solid var(--canvas);
    cursor:pointer;
  }
  
  /* Scrollbar (webkit) */
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--canvas); }
  ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
  
  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
    html{ scroll-behavior:auto; }
  }
  
  /* Utility: no-overflow guard */
  .no-overflow{ overflow-x:hidden; }