/* Cypher Core one-pager redesign
   Palette approximated from logo:
   --brand: deep indigo; --accent: near-black; cool greys for UI
*/

:root{
    --brand: #2e294e;        /* deep indigo from logo */
    --brand-ink: #1d1835;    /* darker tone */
    --ink: #0f0f14;          /* near-black text */
    --muted: #6b6b76;
    --bg: #0b0b12;           /* dark hero backplate */
    --paper: #ffffff;
    --paper-2: #f6f7fb;
    --border: #e6e6ef;
  
    --radius: 14px;
    --shadow: 0 10px 30px rgba(0,0,0,.12);
    --wrap: clamp(16px, 4vw, 40px);
    --maxw: 1160px;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--paper);
  }
  
  /* A11y */
  .visually-hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}
  .skip{position:absolute;left:-9999px;top:-9999px;background:#000;color:#fff;padding:.6rem .9rem;border-radius:10px}
  .skip:focus{left:var(--wrap);top:10px;z-index:1000}
  
  /* Layout */
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap)}
  .section{padding:90px 0}
  .section.alt{background:var(--paper-2)}
  .section-head{margin-bottom:22px}
  .grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
  .kicker{color:var(--muted)}
  
  /* Type */
  h1,h2,h3{margin:0 0 10px}
  .display{
    font-family:"Space Grotesk", Inter, system-ui, sans-serif;
    font-weight:700;
    font-size:clamp(2.2rem,5.4vw,3.4rem);
    letter-spacing:-0.02em;
    line-height:1.1;
  }
  h2{font-size: clamp(1.6rem, 3vw, 2.2rem)}
  h3{font-size: clamp(1.15rem, 2vw, 1.35rem)}
  .lead{font-size: clamp(1.05rem, 2vw, 1.2rem);color:#2a2a33}
  .small{font-size:.92rem}
  .muted{color:var(--muted)}
  .eyebrow{color:var(--brand);font-weight:800;letter-spacing:.03em;text-transform:uppercase;font-size:.92rem}
  
  /* Header */
  .site-header{
    position:sticky;top:0;z-index:50;
    backdrop-filter: saturate(160%) blur(6px);
    background: rgba(255,255,255,.9);
    border-bottom:1px solid #eee;
  }
  .site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px var(--wrap)}
  .primary-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
  .primary-nav a{color:var(--ink);text-decoration:none;font-weight:700;padding:.55rem .7rem;border-radius:10px}
  .primary-nav a:hover{background:#f1f1f6}
  .nav-toggle{display:none;border:1px solid #e8e8ef;background:#fff;border-radius:10px;padding:.55rem .6rem}
  .nav-toggle .bars{display:block;width:20px;height:2px;background:var(--ink);position:relative}
  .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink)}
  .nav-toggle .bars::before{top:-6px}
  .nav-toggle .bars::after{top:6px}
  
  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;text-decoration:none;border-radius:12px;padding:.9rem 1.05rem;transition:.15s ease}
  .btn-brand{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
  .btn-brand:hover{transform:translateY(-1px);background:#282344}
  .btn-outline{background:#fff;border:1px solid var(--ink);color:var(--ink)}
  .btn-ghost{background:transparent;border:1px dashed #cfd0db;color:#262638}
  .btn-ghost:hover{border-style:solid}
  .link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700}
  .link-arrow::after{content:"→";transition:transform .15s ease}
  .link-arrow:hover::after{transform:translateX(3px)}
  
  /* Hero with dark tech backdrop */
  .hero{position:relative;isolation:isolate;background:var(--bg);color:#fff;padding:120px 0}
  .hero .lead{color:#d6d6e6}
  .hero .eyebrow{color:#9ea0ff}
  .hero-bg{
    position:absolute;inset:0;z-index:-1;opacity:.9;
    background:
      radial-gradient(900px 400px at 10% 10%, rgba(46,41,78,.45), transparent 60%),
      radial-gradient(700px 320px at 90% 30%, rgba(46,41,78,.35), transparent 60%),
      linear-gradient(180deg, #0b0b12, #10101a);
  }
  .hero::after{
    content:"";position:absolute;inset:0;background:
      linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/ 100% 26px,
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/ 26px 100%;
    opacity:.35;pointer-events:none
  }
  .trustpoints{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none}
  .trustpoints li{border:1px dashed rgba(255,255,255,.25);padding:.4rem .6rem;border-radius:999px;color:#e7e7ff;background:rgba(255,255,255,.05)}
  .hero-panels .glass{padding:18px 18px 10px}
  .pill-list{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:8px 0 12px;list-style:none}
  .pill-list li{padding:.4rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-weight:700;color:#fff}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
  .stat{padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);backdrop-filter: blur(8px);color:#fff}
  .stat .num{font-weight:800;font-size:1.2rem;color:#cfd0ff;display:block}
  .stat .label{color:#d6d6e6;font-size:.92rem}
  
  /* Cards and tiles */
  .glass{background:rgba(255,255,255,.65);backdrop-filter: blur(8px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)}
  .card{padding:22px}
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
  .tile{padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff}
  .pill{display:inline-block;margin-bottom:8px;font-weight:800;font-size:.85rem;border-radius:999px;padding:.35rem .6rem}
  .pill-managed{background:#eef0ff;color:#23264e}
  .pill-security{background:#efeafd;color:#3b235c}
  .pill-automation{background:#ecf8ff;color:#0b4e63}
  
  /* Lists */
  .checks{list-style:none;padding:0;margin:10px 0 0}
  .checks li{padding-left:28px;position:relative;margin:.4rem 0}
  .checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:900}
  .ticks{list-style:none;padding:0;margin:10px 0 0}
  .ticks li{padding-left:28px;position:relative;margin:.4rem 0}
  .ticks li::before{content:"▸";position:absolute;left:6px;top:0;color:var(--brand-ink);font-weight:900}
  
  /* Approach */
  .steps{padding-left:16px}
  .steps li{margin:.5rem 0}
  
  /* Contact */
  .contact-list{list-style:none;padding:0;margin:0 0 10px}
  .contact-list li{margin:.35rem 0}
  .contact-form{display:grid;gap:12px}
  .contact-form label{display:grid;gap:6px}
  input, textarea{
    font: inherit;color:inherit;background:#fff;border:1px solid var(--border);
    border-radius:12px;padding:.85rem 1rem;outline:none;transition: box-shadow .15s ease, border-color .15s ease;
  }
  input:focus, textarea:focus{border-color: var(--brand); box-shadow: 0 0 0 3px rgba(46,41,78,.15)}
  
  /* Footer */
  .site-footer{border-top:1px solid var(--border);background:#fff}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:34px var(--wrap)}
  .foot-head{margin:0 0 8px;font-size:1rem}
  .foot-links{list-style:none;padding:0;margin:0}
  .foot-links li{margin:.35rem 0}
  .copyright{padding:10px var(--wrap) 28px}
  
  /* Elevation when scrolling */
  [data-elevate].scrolled{box-shadow:0 6px 20px rgba(0,0,0,.07)}
  
  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
  }
  
  /* Modal */
  .modal-overlay{
    position:fixed;inset:0;z-index:100;
    background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    padding:var(--wrap);opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease
  }
  .modal-overlay.show{opacity:1;visibility:visible}
  .modal{
    background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);
    max-width:520px;width:100%;position:relative;
    transform:scale(.95);transition:transform .3s ease
  }
  .modal-overlay.show .modal{transform:scale(1)}
  .modal-content{padding:32px}
  .modal-lead{font-size:1.15rem;margin-bottom:16px}
  .modal-close{
    position:absolute;top:16px;right:16px;width:36px;height:36px;
    border:none;background:var(--paper-2);border-radius:50%;
    font-size:1.4rem;line-height:1;cursor:pointer;
    transition:background .15s ease
  }
  .modal-close:hover{background:var(--border)}
  .modal-dismiss{margin-top:20px}
  @media (max-width: 520px){
    .modal-content{padding:24px}
  }

  /* Responsive */
  @media (max-width: 1024px){
    .tiles{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width: 760px){
    .grid-2{grid-template-columns:1fr}
    .primary-nav ul{display:none}
    .nav-toggle{display:inline-block}
    .primary-nav[data-open="true"] ul{
      display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;
      background:#fff;border-bottom:1px solid var(--border);padding:10px var(--wrap);gap:6px
    }
    .stats{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr}
  }
  @media (max-width: 520px){
    .tiles{grid-template-columns:1fr}
  }