/* CatchEveryCall.ai — high-contrast stylesheet (full file) */

/* ---------------------------------------------------------
   Design tokens
--------------------------------------------------------- */
:root{
    --bg:#f7fafc;                 /* page background (photo sits on body) */
    --card: hsla(0,0%,100%,.84);  /* translucent card background (↑ from .55) */
    --ink:#0b1220;                /* primary text, slightly crisper than #111827 */
    --muted:#334155;              /* secondary text (↑ contrast from #404347) */
    --brand:#0ea5e9;              /* accent (blue) */
    --brand2:#22c55e;             /* secondary accent (green) */
    --ok:#10b981;                 /* success dot */
    --warn:#f59e0b;               /* warning */
    --radius:18px;
    --shadow:0 10px 30px rgba(17,24,39,.10);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  
  /* ---------------------------------------------------------
     Base + global photo overlay to lift white text contrast
  --------------------------------------------------------- */
  body{
    margin:0;
    background:#f7fafc url("background-image.jpg") center/cover no-repeat;
    color:var(--ink);
    font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    position:relative;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    /* tune 0.30–0.45 to taste */
    background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.30));
    pointer-events:none;
    z-index:0;
  }
  .wrap{ max-width:1100px; margin:0 auto; padding:28px; position:relative; z-index:1; }
  
  a{ color:var(--brand); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  
  /* ---------------------------------------------------------
     Header / Branding
  --------------------------------------------------------- */
  header{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; color:#fff; }
  .brand .logo{
    width:36px; height:36px; border-radius:50%;
    background:conic-gradient(from 200deg, var(--brand), var(--brand2));
    display:inline-flex; align-items:center; justify-content:center; color:#001018; font-weight:900;
    box-shadow:0 6px 20px rgba(14,165,233,.25);
  }
  nav a{
    margin-left:18px; color:#ffffff; font-weight:600;
    text-shadow:0 1px 3px rgba(0,0,0,.35);
  }
  nav a:hover{ color:#e2f2ff; }
  
  /* ---------------------------------------------------------
     Hero
  --------------------------------------------------------- */
  .hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; margin-top:38px; align-items:center; }
  .hero h1{
    font-size:clamp(28px,5vw,48px); line-height:1.12; margin:0 0 12px;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
  }
  .eyebrow{ color:var(--brand2); font-weight:700; letter-spacing:.35px; text-transform:uppercase; font-size:12px; }
  .hero p.lede{
    color:rgba(255,255,255,.98); font-size:clamp(16px,2.2vw,20px); margin:10px 0 22px;
    text-shadow:0 1px 3px rgba(0,0,0,.35);
  }
  .hero .subline{ color:rgba(255,255,255,.96); font-size:13px; }
  
  .cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .btn{ cursor:pointer; border:0; padding:14px 18px; border-radius:12px; font-weight:700; }
  .btn.primary{
    background:linear-gradient(160deg, var(--brand), var(--brand2));
    color:#001018; box-shadow:var(--shadow);
  }
  .btn.secondary{
    background:#ffffff; border:1px solid #0f172a; color:var(--ink);
  }
  .btn:focus-visible, a:focus-visible{
    outline:3px solid var(--brand2); outline-offset:2px;
  }
  
  /* ---------------------------------------------------------
     Cards + Demo
  --------------------------------------------------------- */
  .card{
    background:var(--card);
    border:1px solid rgba(17,24,39,.22);      /* darker border for definition */
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    -webkit-backdrop-filter:blur(6px) saturate(115%);
    backdrop-filter:blur(6px) saturate(115%);
    transition:background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .card:hover{
    background:#fff;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border-color:rgba(17,24,39,.28);
    box-shadow:0 12px 36px rgba(17,24,39,.18);
  }
  .demo{ padding:24px; }
  .demo .screen{ background:#ffffff; border:1px solid #d1d5db; border-radius:12px; padding:18px; }
  .demo .screen pre{ margin:0; white-space:pre-wrap; color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  .status{ display:flex; gap:10px; align-items:center; color:var(--muted); font-size:14px; margin-bottom:8px; }
  .pulse{ width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.7);} 70%{ box-shadow:0 0 0 16px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }
  
  /* ---------------------------------------------------------
     Feature trio
  --------------------------------------------------------- */
  .features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:48px 0; }
  .feature{ padding:18px; }
  .feature h3{ margin:0 0 8px; font-size:18px; color:#0b1220; }
  .feature p{ margin:0; color:#1f2937; font-size:15px; } /* darker than #374151 */
  
  /* ---------------------------------------------------------
     Plans
  --------------------------------------------------------- */
  .plans{ margin:18px 0 40px; }
  .plans h2{
    font-size:clamp(22px,5vw,48px); line-height:1.12; margin:0 0 12px;
    color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.45);
  }
  .plans > p{ margin:0 0 16px; color:rgba(255,255,255,.98); }
  .plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .plan{ padding:20px; position:relative; overflow:hidden; }
  .plan h4{ margin:0 0 8px; font-size:18px; color:#0b1220; }
  .badge{
    position:absolute; top:18px; right:-44px; transform:rotate(35deg); transform-origin:50% 50%;
    display:grid; place-items:center; height:30px; padding:0 60px; line-height:1;
    background:var(--brand2); color:#002415; font-weight:800; font-size:12px; text-align:center; white-space:nowrap;
  }
  .plan ul{ margin:10px 0 0 0; padding-left:16px; color:#1f2937; font-size:15px; }
  
  /* ---------------------------------------------------------
     How it works
  --------------------------------------------------------- */
  .how{ margin:36px 0; }
  .how h2{
    font-size:clamp(22px,5vw,48px); line-height:1.12; margin:0 0 12px;
    color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,.45);
  }
  .how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .step{ padding:18px; }
  .step-num{
    width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center;
    background:#f3f4f6; border:1px solid #e5e7eb; color:var(--brand); font-weight:800; margin:0 10px 0 0; vertical-align:middle;
  }
  .step h3{ margin:0; display:inline-block; vertical-align:middle; font-size:18px; color:#0b1220; }
  .step p{ margin:0; }
  .step h3 + p{ margin-top:10px; }
  .step p + p{ margin-top:6px; }
  
  /* ---------------------------------------------------------
     CTA bar (keep dark text for contrast on light gradient)
  --------------------------------------------------------- */
  .cta-bar{
    display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px;
    border-radius:var(--radius); border:1px solid rgba(17,24,39,.12);
    background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(14,165,233,.18));
    color:#0b1220; transition:color .25s ease;
  }
  .cta-bar:hover{ color:#0b1220; }
  .cta-bar *:not(.btn){ color:inherit !important; }
  
  /* ---------------------------------------------------------
     Footer
  --------------------------------------------------------- */
  footer{
    margin:40px 0 20px; color:var(--muted); font-size:14px;
    display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  }
  footer a{ color:var(--ink); }
  
  /* ---------------------------------------------------------
     Utilities / Tables
  --------------------------------------------------------- */
  .mini{ font-size:13px; color:var(--muted); }
  .table{ width:100%; border-collapse:collapse; }
  .table th,.table td{ border:1px solid rgba(17,24,39,.12); padding:10px; font-size:14px; text-align:left; }
  .table thead th{ background:rgba(14,165,233,.18); color:#0b1220; }
  
  /* ---------------------------------------------------------
     Responsive
  --------------------------------------------------------- */
  @media (max-width:980px){
    .hero{ grid-template-columns:1fr; }
    .features,.plan-grid,.how-grid{ grid-template-columns:1fr; }
    nav{ display:none; }
  }