/* styles.css — Advanced, polished landing page for Complynt */

/* -------------------------
   Variables & base styles
   ------------------------- */
   :root{
    --bg: #f9fafb;
    --page-max: 1180px;
    --text: #0f172a;
    --muted: #6b7280;
    --primary: #2563eb;
    --accent: #34d399;
    --card: #ffffff;
    --glass: rgba(255,255,255,0.06);
    --radius: 14px;
    --shadow-sm: 0 8px 22px rgba(2,6,23,0.08);
    --shadow-lg: 0 30px 60px rgba(2,6,23,0.12);
    --gold: #c7a24a;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Utility */
  .container{max-width:var(--page-max);margin:0 auto;padding:0 20px}
  .small{font-size:13px}
  .muted{color:var(--muted)}
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px}
  
  /* -------------------------
     NAVBAR
     ------------------------- */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: transparent; /* transparent at top */
    color: #fff;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  .navbar.scrolled {
    background: rgba(15, 23, 42, 0.95); /* dark navy */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
  .brand{display:flex;align-items:center;gap:10px}
  .brand-name{font-weight:700;color:white}
  .nav-center{display:flex;gap:18px;align-items:center}
  .nav-center a{color:rgba(255,255,255,0.88);text-decoration:none;font-weight:500;padding:6px 8px;border-radius:8px}
  .nav-center a:hover{background:rgba(255,255,255,0.04)}
  .nav-right{display:flex;align-items:center;gap:10px}
  .icon-btn{background:transparent;border:none;color:inherit;cursor:pointer;padding:8px;border-radius:8px}
  .btn{cursor:pointer;border:none;border-radius:10px;padding:8px 14px;font-weight:600}
  .btn.primary{background:var(--primary);color:white;box-shadow:0 8px 24px rgba(37,99,235,0.12)}
  .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:white}
  .btn.small{padding:6px 10px;font-size:13px}
  .hamburger{display:none;background:transparent;border:none;color:white;font-size:20px}
  
  /* -------------------------
     HERO
     ------------------------- */
  .hero {
    min-height: 100vh;
    padding: 48px 0;
    display: flex;
    align-items: center;
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2563eb 100%);
    color: white;
    overflow: hidden;
  }
  .hero-inner{max-width:var(--page-max);margin:0 auto;display:flex;gap:40px;padding:0 20px;align-items:center;justify-content:space-between}
  .hero-text{flex:1;min-width:280px}
  .hero-title{font-size:48px;line-height:1.02;margin-bottom:18px;color:white}
  .hero-sub{color:rgba(255,255,255,0.85);font-size:18px;margin-bottom:20px;max-width:620px}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .hero-stats{list-style:none;display:flex;gap:18px;margin-top:22px;padding-left:0}
  .hero-stats li{color:white;display:flex;flex-direction:column;align-items:flex-start}
  .metric{font-size:20px;font-weight:800;color:white}
  
  /* hero mockup */
  .hero-mockup{width:480px;max-width:46%;min-width:320px;display:flex;align-items:center;justify-content:center;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.9,.3,1)}
  .device{width:100%;height:auto;border-radius:12px;filter:drop-shadow(0 30px 40px rgba(2,6,23,0.18))}
  
  /* floating blob */
  .hero-blob {
    position: absolute;
    right: -6%;
    top: 10%;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 40%),
                linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #a5b4fc 100%);
    filter: blur(36px);
    opacity: 0.25;
  }
  
  /* -------------------------
     HEALTH / SIMULATOR
     ------------------------- */
  .health {
    padding: 48px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); /* light background */
  }
  .health-inner{max-width:var(--page-max);margin:0 auto;display:flex;gap:26px;align-items:flex-start;padding:0 20px}
  .health-left{flex:1;min-width:320px}
  .health-right{flex:1;min-width:320px}
  .health h2{margin-bottom:8px}
  .health p.muted{margin-bottom:18px}
  .health-controls{display:flex;align-items:center;gap:20px;margin-top:18px}
  .radial{width:140px;height:140px;display:flex;align-items:center;justify-content:center}
  .radial-svg{width:140px;height:140px;display:block}
  .radial-bg{stroke:#eef2ff}
  .radial-fg{transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1)}
  .radial-text{font-weight:700;fill:var(--text)}
  .health-details .big{font-size:18px;margin:6px 0}
  
  /* simulator card */
  .simulator .card{padding:18px}
  .simulator label{display:block;font-weight:600;margin-top:8px}
  .simulator input[type="range"]{width:100%;margin:8px 0}
  .sim-result{margin-top:12px}
  
  /* -------------------------
     FEATURES / GRID
     ------------------------- */
  .features{padding:56px 0}
  .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .cards .card{padding:22px}
  .feature .icon{width:48px;height:48px;margin-bottom:12px}
  
  /* -------------------------
     AI DEMO / CHAT
     ------------------------- */
  .ai-demo{padding:48px 0}
  .chat-demo{display:flex;flex-direction:column;gap:12px}
  .chat-window{min-height:120px;border-radius:12px;padding:12px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #eef2ff;min-height:160px;overflow:auto}
  .chat-message{display:inline-block;padding:8px 12px;border-radius:8px;margin:6px 0;max-width:80%}
  .chat-message.user{background:#eef2ff;align-self:flex-end}
  .chat-message.ai{background:#e6fff5;align-self:flex-start}
  .chat-controls{display:flex;gap:8px;align-items:center;margin-top:8px}
  .tag{background:#f1f5f9;border-radius:999px;padding:6px 10px;border:1px solid #e6eefc;cursor:pointer}
  
  /* -------------------------
     TESTIMONIALS (LUXE CAROUSEL)
     ------------------------- */
  .testimonials{padding:44px 0}
  .testimonials h2 { text-align:center; margin-bottom:18px; }
  
  /* carousel container */
  .test-carousel{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
    border-radius:12px;
    overflow:visible;
  }
  
  /* viewport hides overflow, focusable for keyboard users */
  .carousel-viewport{
    overflow:hidden;
    flex:1;
    border-radius:10px;
    outline: none;
  }
  
  /* track is a single-line flex of cards */
  .test-track{
    display:flex;
    gap:16px;
    transition:transform 0.6s cubic-bezier(.2,.9,.3,1);
    align-items:stretch;
    will-change:transform;
  }
  
  /* testimonial card style - luxurious dark card with gold accent */
  .testimonial{
    min-width:280px;
    max-width:360px;
    padding:20px;
    border-radius:12px;
    background:linear-gradient(180deg,#071329,#0b1b2b);
    color: #f7f9fb;
    box-shadow: 0 18px 40px rgba(2,6,23,0.28);
    border-left:4px solid rgba(199,162,74,0.95); /* gold accent */
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .testimonial .resto-logo { margin-bottom:12px; }
  .logo-svg { width:84px; height:36px; display:block; border-radius:6px; }
  
  /* testimonial text */
  .testimonial p{font-size:15px;line-height:1.5;margin-bottom:12px;color:#e6eefc}
  .testimonial cite{font-size:13px;color:#d9d6c9; font-weight:600; margin-top:6px}
  
  /* carousel buttons */
  .carousel-btn{
    background:transparent;
    border:none;
    color:var(--text);
    width:44px;
    height:44px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:24px;
    box-shadow:0 8px 22px rgba(2,6,23,0.08);
    background:linear-gradient(180deg,#fff,#f3f6ff);
  }
  .carousel-btn.prev{margin-right:6px}
  .carousel-btn.next{margin-left:6px}
  
  /* hide buttons on smaller screens if uncomfortable */
  @media (max-width:700px){
    .carousel-btn{display:none}
    .test-carousel{padding:12px}
  }
  
  /* -------------------------
     CTA / FOOTER
     ------------------------- */
  .cta{padding:46px 0}
  .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .cta-actions{display:flex;gap:8px;align-items:center}
  #signup-email{padding:10px;border-radius:8px;border:1px solid #e6eefc}
  
  /* footer */
  .site-footer{background:#0b1220;color:#9aa4b2;padding:30px 20px}
  .footer-inner{max-width:var(--page-max);margin:0 auto;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px}
  
  /* wave divider */
  .wave-divider svg{display:block}
  
  /* toast */
  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:#111827;color:#fff;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow-lg)}
  .toast.hidden{display:none}
  
  /* modal */
  .modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.45);z-index:200}
  .modal.hidden{display:none}
  .modal-panel{width:clamp(320px,42%,640px);padding:22px;position:relative}
  .modal-panel input, .modal-panel select{width:100%;padding:10px;margin-top:10px;border-radius:8px;border:1px solid #e6eefc}
  
  /* reveal / animations */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease}
  .reveal.show{opacity:1;transform:none}
  .card{transition:transform .28s ease,box-shadow .28s ease}
  .card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
  
  /* -------------------------
     RESPONSIVE
     ------------------------- */
  @media (max-width: 1024px){
    .hero-title{font-size:40px}
    .hero-mockup{max-width:40%}
    .cta-inner{flex-direction:column}
    .modal-panel{width:92%}
  }
  @media (max-width: 760px){
    .nav-center{display:none}
    .hamburger{display:block}
    .hero-inner{flex-direction:column;gap:18px;padding:24px}
    .hero-mockup{max-width:92%}
    .hero-title{font-size:28px}
    .hero-sub{font-size:15px}
    .health-inner{flex-direction:column}
    .timeline{flex-direction:column}
    .cta-inner{flex-direction:column}
    .footer-inner{flex-direction:column;gap:6px}
    .testimonials h2 { font-size:18px; }
    .testimonial { min-width: 92%; max-width: 92%; }
    .test-track { gap: 12px; }
  }
  
  /* Existing styles remain unchanged above... */

/* -------------------------
   RESPONSIVE (MOBILE-FIRST POLISH)
   ------------------------- */

@media (max-width: 1024px){
  .hero-title{font-size:40px}
  .hero-mockup{max-width:40%}
  .cta-inner{flex-direction:column}
  .modal-panel{width:92%}
}

@media (max-width: 760px){
  /* Navbar */
  .nav-center {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px;
    right: 0;
    width: 100%;
    background: #0f172a;
    padding: 16px 0;
    text-align: center;
  }
  .nav-center.open { display: flex; }
  .nav-center a {
    padding: 14px 0;
    color: white;
    font-size: 16px;
  }
  .hamburger { display: block; }

  /* Hero */
  .hero-inner {
    flex-direction: column;
    gap: 28px;
    padding: 64px 20px;
    text-align: center;
  }
  .hero-title {
    font-size: 28px;
    line-height: 1.2;
  }
  .hero-sub {
    font-size: 15px;
    max-width: 100%;
  }
  .hero-ctas { justify-content: center; }
  .hero-mockup { max-width: 92%; }

  /* Stats */
  .hero-stats {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  /* Health & Simulator */
  .health-inner { flex-direction: column; gap: 32px; }
  .health-controls { flex-direction: column; align-items: flex-start; gap: 16px; }
  .radial { margin: 0 auto; }

  /* Features */
  .grid { grid-template-columns: 1fr; }
  .feature { text-align: center; }

  /* AI demo */
  .chat-controls { flex-wrap: wrap; }
  .chat-controls input { flex: 1; min-width: 60%; }

  /* Testimonials */
  .testimonials h2 { font-size: 20px; }
  .test-carousel { padding: 0; }
  .carousel-btn { display: none; } /* hide arrows on mobile */
  .test-track { gap: 0; }
  .testimonial {
    min-width: 92%;
    max-width: 92%;
    margin: 0 auto;
    padding: 18px;
  }
  .testimonial .resto-logo svg { width: 72px; height: 32px; }

  /* CTA */
  .cta-inner {
    flex-direction: column;
    text-align: center;
  }
  .cta-actions { flex-direction: column; width: 100%; }
  #signup-email, #signup-btn { width: 100%; }

  /* Footer */
  .footer-inner { flex-direction: column; gap: 12px; text-align: center; }
}