/* Mobile-first, polished layout with enhanced visuals */
:root{
    --bg:#0b3a78;
    --bg-2:#072b59;
    --bg-gradient:linear-gradient(135deg, #0b3a78 0%, #1e40af 50%, #3b82f6 100%);
    --white:#ffffff;
    --ink:#0b1220;
    --muted:#5b6a7b;
    --green:#25D366;
    --green-gradient:linear-gradient(135deg, #22c55e 0%, #25D366 100%);
    --radius:16px;
    --shadow:0 10px 30px rgba(7,15,36,.15);
    --shadow-hover:0 20px 40px rgba(7,15,36,.25);
    --glow:0 0 20px rgba(59, 130, 246, 0.3);
    --text-glow:0 0 10px rgba(255,255,255,0.3);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f6f8fc;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:var(--bg);text-decoration:none}
  a:focus,button:focus{outline:2px solid var(--bg);outline-offset:2px}
  
  /* Cookie: bottom full-width */
  .cookie{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;
    background:#0b1220;color:#fff;padding:12px 14px;border-radius:0;
    display:flex;gap:12px;align-items:center;z-index:9000;box-shadow:0 -4px 20px rgba(0,0,0,.2)
  }
  .cookie a{color:#9bd0ff;text-decoration:underline}
  .cookie__text{flex:1}
  .btn{display:inline-block;background:var(--bg-gradient);color:#fff;border:none;border-radius:12px;padding:14px 18px;font-weight:700;text-align:center;box-shadow:var(--shadow);transition:all 0.3s ease;text-decoration:none;position:relative;overflow:hidden}
  .btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s;z-index:1}
  .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);filter:brightness(1.1)}
  .btn:hover:before{left:100%}
  .btn--primary{background:var(--green-gradient);color:#000;box-shadow:var(--shadow), var(--glow)}
  .btn--primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover), 0 0 30px rgba(37, 211, 102, 0.4)}
  .btn--ghost{background:transparent;color:#fff;border:1px solid #fff;box-shadow:none}
  .btn--ghost:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px)}
  .btn--full{width:100%}
  
  /* Enhanced breathing animation with glow */
  @keyframes breathe{
    0%{transform:scale(1);box-shadow:var(--shadow), 0 0 0 rgba(37, 211, 102, 0.4)}
    50%{transform:scale(1.05);box-shadow:var(--shadow-hover), 0 0 20px rgba(37, 211, 102, 0.6)}
    100%{transform:scale(1);box-shadow:var(--shadow), 0 0 0 rgba(37, 211, 102, 0.4)}
  }
  @keyframes float{
    0%, 100%{transform:translateY(0px)}
    50%{transform:translateY(-10px)}
  }
  @keyframes slideInUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
  }
  .breathe{animation:breathe 3s ease-in-out infinite}
  .float{animation:float 6s ease-in-out infinite}
  .slide-in{animation:slideInUp 0.6s ease-out}
  @media (prefers-reduced-motion: reduce){
    .breathe,.float,.slide-in{animation:none}
  }
  
  /* Enhanced Hero with advanced gradients */
  .hero{background:linear-gradient(160deg,var(--bg) 0%, var(--bg-2) 50%, #1e3a8a 100%);background-size:400% 400%;animation:gradientShift 8s ease infinite;color:var(--white);padding:36px 18px 18px;text-align:center;position:relative;overflow:hidden}
  .hero:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);pointer-events:none}
  .hero__title{font-size:28px;margin:0 0 6px;text-shadow:var(--text-glow);font-weight:800}
  .hero__sub{margin:0 0 14px;color:#dbe7ff;text-shadow:0 0 5px rgba(219, 231, 255, 0.5)}
  .badge{background:rgba(255,255,255,.15);backdrop-filter:saturate(1.4) blur(8px);border:1px solid rgba(255,255,255,.4);border-radius:999px;display:inline-block;padding:12px 16px;margin:8px auto;color:#eaf2ff;box-shadow:0 8px 25px rgba(0,0,0,0.1);animation:float 4s ease-in-out infinite}
  .hero__cta{margin-top:14px}
  
  @keyframes gradientShift{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
  }
  
  /* Enhanced feature panel */
  .panel{padding:14px;background:linear-gradient(180deg,#0a2f66 0%,#0a2044 100%);position:relative}
  .panel:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);pointer-events:none}
  .panel__card{max-width:620px;margin:0 auto;background:linear-gradient(135deg, #081c3b 0%, #0f2759 100%);border-radius:24px;padding:20px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,0.1);border:1px solid rgba(59, 130, 246, 0.2);transition:all 0.3s ease}
  .panel__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover),inset 0 1px 0 rgba(255,255,255,0.1),0 0 30px rgba(59, 130, 246, 0.2)}
  .panel__img{width:46%;border-radius:16px;border:2px solid #3b82f6;background:#0b2d6e;box-shadow:0 5px 15px rgba(59, 130, 246, 0.3);transition:all 0.3s ease}
  .panel__img:hover{transform:scale(1.05);box-shadow:0 10px 25px rgba(59, 130, 246, 0.4)}
  .panel__text{color:#cfe1ff}
  .panel__text h3{color:#fff;margin:0 0 6px;text-shadow:0 0 10px rgba(255,255,255,0.3)}
  
  /* Enhanced sections with better visual hierarchy */
  .content{padding:24px 18px;background:linear-gradient(180deg, #f8fafc 0%, #ffffff 100%)}
  .cards h2,.faq h2,.disclaimer h2,.testimonials h2{font-size:24px;margin:0 0 20px;font-weight:800;color:#1e293b;text-align:center}
  .grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
  .card{background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border-radius:var(--radius);padding:20px;box-shadow:0 4px 15px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);border:1px solid rgba(148, 163, 184, 0.1);transition:all 0.3s ease;position:relative;overflow:hidden}
  .card:before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);transition:width 0.3s ease}
  .card:hover{transform:translateY(-8px);box-shadow:0 12px 35px rgba(15, 23, 42, 0.12), 0 5px 10px rgba(15, 23, 42, 0.08)}
  .card:hover:before{width:8px}
  .card h3{margin:0 0 8px;color:#1e293b;font-weight:700;font-size:18px}
  .card p{color:#475569;line-height:1.6;margin:0}
  
  /* Enhanced testimonials with modern chat design */
  .testimonials{padding:24px 18px 8px;background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);position:relative}
  .testimonials:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 70% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);pointer-events:none}
  .testimonials h2{text-align:center;margin-bottom:24px;color:#1e293b;font-size:24px;font-weight:800}
  .t-row{display:flex;align-items:flex-start;gap:12px;margin:16px 0;opacity:0;animation:slideInUp 0.6s ease-out forwards}
  .t-row:nth-child(2){animation-delay:0.2s}
  .t-row:nth-child(3){animation-delay:0.4s}
  .t-row:nth-child(4){animation-delay:0.6s}
  .t-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 42px;box-shadow:0 4px 12px rgba(59, 130, 246, 0.3);position:relative}
  .t-avatar:before{content:'';position:absolute;inset:-2px;background:linear-gradient(135deg, #60a5fa, #3b82f6);border-radius:50%;z-index:-1}
  .t-bubble{position:relative;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border-radius:20px;padding:16px 18px;box-shadow:0 8px 25px rgba(15, 23, 42, 0.08), 0 3px 6px rgba(15, 23, 42, 0.06);flex:1;border:1px solid rgba(148, 163, 184, 0.1);transition:all 0.3s ease}
  .t-bubble:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(15, 23, 42, 0.12), 0 5px 10px rgba(15, 23, 42, 0.08)}
  .t-bubble:after{content:'';position:absolute;left:-8px;top:16px;width:16px;height:16px;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);transform:rotate(45deg);box-shadow:-3px 3px 8px rgba(15, 23, 42, 0.06);border-left:1px solid rgba(148, 163, 184, 0.1);border-bottom:1px solid rgba(148, 163, 184, 0.1)}
  .t-name{font-weight:700;margin-bottom:6px;color:#1e293b;font-size:15px}
  .t-meta{font-weight:500;color:#64748b;font-size:13px}
  .t-bubble p{margin:4px 0 0 0;color:#374151;line-height:1.6;font-size:14px}
  .t-note{font-size:12px;color:#6b7280;margin-top:16px;text-align:center;font-style:italic;opacity:0.8}
  
  /* FAQ & Disclaimer */
  .faq details{background:#fff;border-radius:12px;padding:12px;margin:10px 0;box-shadow:var(--shadow)}
  .faq summary{font-weight:700;cursor:pointer}
  .disclaimer{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow)}
  
  /* Sticky CTA */
  .sticky-cta{position:sticky;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:saturate(1.2) blur(6px);padding:10px;border-top:1px solid #e6ecf5}
  
  /* Footer */
  .footer{padding:16px;text-align:center;color:var(--muted)}
  .footer__nav{display:flex;gap:12px;justify-content:center;margin-top:6px}
  
  /* Modal centered */
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:10010}
  .modal.show{display:flex}
  .modal__overlay{position:absolute;inset:0}
  .modal__card{position:relative;background:#fff;border-radius:16px;padding:18px;width:100%;max-width:520px;box-shadow:var(--shadow)}
  .modal__lead{color:#334155;margin-top:4px}
  .modal__bullets{margin:10px 0 14px;padding-left:18px}
  .modal__close{position:absolute;right:12px;top:8px;background:transparent;border:none;font-size:24px;color:#6b7280}
  .modal__mini{font-size:12px;color:#6b7280;text-align:center;margin-top:8px}
  
  /* Docs */
  .doc .doc__wrap{max-width:760px;margin:0 auto;padding:20px}
  
  /* Larger screens */
  @media (min-width:768px){
    .hero__title{font-size:40px}
    .grid{grid-template-columns:repeat(2,1fr)}
    .content{padding:24px}
    .panel__card{padding:20px}
  }
  
  /* Ripple effect for buttons */
  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
  }
  
  @keyframes ripple-animation {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  /* Enhanced navigation transitions */
  nav a {
    transition: all 0.3s ease;
    position: relative;
  }
  
  nav a:hover {
    transform: translateY(-2px);
  }
  
  /* Smooth scroll behavior */
  html {
    scroll-behavior: smooth;
  }
  
  /* Loading states */
  .loading {
    opacity: 0.6;
    pointer-events: none;
  }
  
  /* Enhanced focus states */
  *:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 4px;
  }
  
  /* Print styles */
  @media print {
    .cookie, .modal, .sticky-cta {
      display: none !important;
    }
  }