/* Cinelli Tutoring — Dark, metallic, mobile-first
   - Apple-inspired minimalism, soft shadows, rounded corners
   - Shared layout for all pages
   - Uses CSS variables for quick theming
*/

:root{
    --bg:#0b0d12;
    --panel:#12151d;
    --text:#eef2f7;
    --muted:#c7cbd3;
    --accent:#9aa0a6;        /* steel light */
    --accent-hi:#d1d5db;     /* steel highlight */
    --accent-lo:#7a7f87;     /* steel deep */
    --ring:rgba(209,213,219,.4);
    --shadow: 0 10px 30px rgba(0,0,0,.45);
    --radius:18px;
    --gap: clamp(16px, 4vw, 28px);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background: radial-gradient(1200px 800px at 20% -10%, #111520 0%, #0b0d12 40%, #090b10 100%);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  
  /* Metallic border utility */
  .metal-border{
    border:1px solid transparent;
    background:
      linear-gradient(var(--panel),var(--panel)) padding-box,
      linear-gradient(135deg,var(--accent-hi),var(--accent),var(--accent-lo)) border-box;
    border-radius:var(--radius);
    box-shadow: var(--shadow);
  }
  
  /* Layout */
  .wrapper{max-width:1140px; margin:0 auto; padding: 0 var(--gap);}
  section{padding: clamp(36px, 8vh, 96px) 0}
  
  /* Header */
.site-header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(140%) blur(10px);
    background: rgba(10,12,18,.7);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .header-inner{
    /* 3-column grid: brand | nav (flex) | CTA */
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; column-gap:16px;
    height:64px;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);}
  .brand img{width:28px; height:28px; border-radius:8px}
  .brand span{font-weight:600; letter-spacing:.3px}
  
  /* Desktop nav (centered, no wrap) */
  .desktop-nav{display:none}
  @media (min-width: 720px){
    .header-inner{height:72px}
    .desktop-nav{
      display:flex; justify-content:center; gap:18px;
      white-space:nowrap;  /* prevents “Contact/Future” from dropping */
    }
    .desktop-nav a{
      color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px
    }
    .desktop-nav a:hover{background:rgba(255,255,255,.06)}
    .hamburger{display:none}
    .nav-drawer{display:none} /* desktop uses inline nav */
  }
  
  
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:40px; padding:0 16px; border-radius:999px;
    text-decoration:none; color:#0b0d12; font-weight:600;
    background: linear-gradient(180deg, var(--accent-hi), var(--accent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(180,190,205,.25);
    border:1px solid rgba(255,255,255,.15);
  }
  .btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
  .btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18)}
  
  /* Hamburger */
  .hamburger{
    inline-size:40px; block-size:40px; border-radius:10px;
    display:inline-grid; place-items:center; border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.02); cursor:pointer;
  }
  .hamburger span, .hamburger::before, .hamburger::after{
    content:""; display:block; width:18px; height:2px; background:var(--text); transition:.25s ease;
  }
  .hamburger::before{transform:translateY(-1px)}
  .hamburger::after{transform:translateY(1px)}
  .hamburger[aria-expanded="true"] span{opacity:0}
  .hamburger[aria-expanded="true"]::before{transform:translateY(0) rotate(45deg)}
  .hamburger[aria-expanded="true"]::after{transform:translateY(0) rotate(-45deg)}
  
  /* Mobile menu drawer */
  .nav-drawer{
    position:fixed; inset:64px 0 auto 0;
    translate:0 -8px;
    opacity:0; pointer-events:none;
    transition:.25s ease;
    padding:16px var(--gap) 24px;
    background: linear-gradient(180deg, rgba(16,20,28,.96), rgba(10,12,18,.96));
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav-drawer.open{translate:0 0; opacity:1; pointer-events:auto}
  .nav-link{
    display:block; padding:14px 10px; border-radius:12px;
    color:var(--text); text-decoration:none;
  }
  .nav-link:hover{background:rgba(255,255,255,.05)}
  .nav-row{display:flex; gap:10px; margin-top:10px}
  
  /* Footer */
  .site-footer{
    border-top:1px solid rgba(255,255,255,.08);
    background: rgba(10,12,18,.8);
    padding:16px 0;
    font-size:.95rem; color:var(--muted);
  }
  .footer-inner{display:flex; justify-content:space-between; align-items:center; gap:10px}
  .site-footer a{
    color:var(--text);
    text-decoration:none;
  }
  .site-footer a:hover{
    color:var(--accent-hi);
  }
  
  /* Hero */
  .hero{
    min-height: calc(100svh - 64px);
    display:grid; place-items:center;
  }
  .hero-card{
    padding: clamp(20px, 5vw, 40px);
    text-align:center;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  }
  .hero h1{
    margin:0 0 10px;
    font-size: clamp(32px, 8vw, 56px);
    letter-spacing:.2px; line-height:1.05;
  }
  .hero h2{
    margin: 6px 0;
    font-weight:500;
    color: var(--muted);
    font-size: clamp(16px, 3.8vw, 22px);
  }
  .hero .cta-row{margin-top:18px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
  
  /* Sections */
  .section-title{
    font-size: clamp(22px, 4.6vw, 28px);
    margin:0 0 14px;
  }
  .section-sub{color:var(--muted); margin:0 0 24px}
  
  /* Cards */
  .cards{
    display:grid; gap:12px;
    grid-template-columns: 1fr;
  }
  .card{padding:18px; background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06)}
  .card h4{margin:0 0 10px; font-size:1.1rem}
  .card h4 a{
    color:var(--text);
    text-decoration:none;
  }
  .card h4 a:hover,
  .card h4 a:focus-visible{
    color:var(--accent-hi);
    text-decoration:underline;
  }
  .card ul{margin:0; padding-left:18px; color:var(--muted); line-height:1.6}
  @keyframes buttonRing{
    0%{opacity:.4; transform:scale(1);}
    100%{opacity:.8; transform:scale(1.12);}
  }
  .play-sample{
    width:72px;
    height:72px;
    min-width:0;
    padding:0;
    font-size:1.6rem;
    margin:14px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    background:#05070c;
    box-shadow:0 12px 28px rgba(0,0,0,.55);
    color:var(--text);
    touch-action:manipulation;
    position:relative;
    isolation:isolate;
    appearance:none;
    -webkit-appearance:none;
  }
  .play-sample::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 0 18px rgba(108,152,255,.35);
    pointer-events:none;
    animation:buttonRing 4s ease-in-out infinite alternate;
    z-index:-1;
  }
  .card-media{
    margin-top:12px;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    max-width:180px;
    margin-inline:auto;
  }
  .card-media img{
    display:block;
    width:100%;
    height:auto;
  }
  .card-media video{
    display:block;
    width:100%;
    height:auto;
    cursor:pointer;
  }
  .math-card{display:flex; flex-direction:column; gap:12px}
  .math-fractal{
    display:flex;
    justify-content:center;
    gap:12px;
    padding:12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
  }
  .math-fractal canvas{
    justify-self:center;
    display:block;
    width:170px;
    height:170px;
    background:#080a12;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;
    touch-action:manipulation;
  }
  .card--with-image{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }
  .card-body{flex:1}
  .card-graphic{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
    flex-shrink:0;
  }
  
  /* Pricing */
  .pricing-blurb{color:var(--muted); margin-bottom:16px}
  .cta-grid{display:grid; gap:10px; grid-template-columns:1fr}
  
  /* Forms */
  form{
    display:grid; gap:12px; padding:18px; background:var(--panel); border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
  }
  label{font-weight:600}
  input, select, textarea{
    width:100%; padding:12px 12px; border-radius:12px;
    border:1px solid rgba(255,255,255,.18); background:#0e1118; color:var(--text);
  }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--ring); outline-offset:2px}
  .field-error{
    display:none;
    margin-left:6px;
    color:#f87171;
    font-size:.85rem;
  }
  .field-error.visible{display:inline;}
  .hp-field{
    position:absolute !important;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    border:0;
  }
  .helper{color:var(--muted); font-size:.93rem}
  
  /* Responsive (tablet/desktop) */
  @media (min-width: 720px){
    .cards{grid-template-columns: repeat(3, 1fr)}
    .cta-grid{grid-template-columns: repeat(3, 1fr)}
    .header-inner{height:72px}
    .nav-drawer{display:none} /* desktop uses inline nav */
    .desktop-nav{display:flex; gap:16px}
    .desktop-nav a{color:var(--text); text-decoration:none; padding:8px 10px; border-radius:10px}
    .desktop-nav a:hover{background:rgba(255,255,255,.06)}
    .hamburger{display:none}
  }
  
  /* Utility spacing */
  .stack-sm{margin-top:8px}
  .stack-md{margin-top:16px}
  .stack-lg{margin-top:24px}
  .center{text-align:center}
  
  /* Mobile drawer: hide the extra buttons row */
.nav-drawer .nav-row { display: none !important; }