:root{
      --night:#202B38;
      --overlay:#2F4159;
      --off:#F6F7F9;
      --beige:#E7DEC9;
      --beige2:#D8D0B8;
      --sage:#98A080;

      --radius: 22px;
      --radius-lg: 32px;

      --shadow-soft: 0 10px 30px rgba(0,0,0,.22);
      --shadow-lift: 0 18px 46px rgba(0,0,0,.34);

      --stroke: rgba(246,247,249,.10);
      --stroke-2: rgba(231,222,201,.14);
      --glass: rgba(47,65,89,.28);
      --glass-2: rgba(47,65,89,.18);

      --glow: rgba(231,222,201,.12);
      --glow-2: rgba(152,160,128,.10);

      --ring: rgba(231,222,201,.28);
      --muted: rgba(246,247,249,.72);
      --muted2: rgba(246,247,249,.56);

      --dpr-cap: 1.6;
    }

    html, body { height: 100%; }
    body{
      background: radial-gradient(1200px 700px at 20% 10%, rgba(47,65,89,.55), transparent 60%),
                  radial-gradient(900px 600px at 80% 0%, rgba(152,160,128,.10), transparent 55%),
                  linear-gradient(180deg, var(--night) 0%, #1A2430 100%);
      color: var(--off);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* Accessible skip link */
    .skip-link{
      position:absolute; left:-999px; top:12px;
      background: var(--beige); color:#1A2430;
      padding:10px 14px; border-radius: 999px;
      z-index: 1000; font-weight: 700;
      box-shadow: var(--shadow-soft);
    }
    .skip-link:focus{ left: 12px; }

    /* Sticky Header */
    .md-header{
      background: rgba(32,43,56,.62);
      border-bottom: 1px solid rgba(246,247,249,.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .nav-link{
      position: relative;
      color: rgba(246,247,249,.86);
      transition: color .22s ease;
    }
    .nav-link:hover{ color: var(--beige); }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:-8px;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(231,222,201,.7), transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .22s ease;
    }
    .nav-link:hover::after{ transform: scaleX(1); }

    .icon-btn{
      display:inline-flex; align-items:center; justify-content:center;
      width: 38px; height: 38px;
      border-radius: 999px;
      background: rgba(47,65,89,.22);
      border: 1px solid rgba(246,247,249,.10);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .icon-btn:hover{
      transform: translateY(-1px);
      background: rgba(47,65,89,.30);
      border-color: rgba(231,222,201,.22);
    }

    /* Hero “Sleep Space” container */
    .sleep-space{
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(246,247,249,.10);
      box-shadow: var(--shadow-soft);
      background:
        radial-gradient(900px 520px at 20% 25%, rgba(47,65,89,.55), transparent 55%),
        radial-gradient(600px 420px at 80% 20%, rgba(231,222,201,.12), transparent 60%),
        linear-gradient(180deg, rgba(47,65,89,.26) 0%, rgba(47,65,89,.12) 100%);
    }
    .sleep-space::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(420px 260px at 14% 10%, rgba(231,222,201,.08), transparent 60%),
        radial-gradient(520px 320px at 86% 30%, rgba(152,160,128,.08), transparent 62%);
      pointer-events:none;
      mix-blend-mode: screen;
      opacity: .9;
    }
    .sleep-space::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(246,247,249,.02), transparent 20%, transparent 80%, rgba(246,247,249,.02)),
        radial-gradient(1200px 680px at 50% 10%, rgba(0,0,0,.18), transparent 60%);
      pointer-events:none;
    }

    #sleepCanvas{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      pointer-events:none;
    }

    /* Premium Buttons */
    .btn-primary{
      background: linear-gradient(180deg, var(--beige) 0%, var(--beige2) 100%);
      color: #1A2430;
      border: 1px solid rgba(255,255,255,.18);
      box-shadow:
        0 12px 26px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.35);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      box-shadow:
        0 18px 40px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.38);
      filter: brightness(1.02);
    }
    .btn-primary:active{ transform: translateY(0px); }

    .link-secondary{
      color: rgba(231,222,201,.90);
      transition: color .2s ease;
    }
    .link-secondary:hover{ color: var(--beige); }

    /* Cards */
    .card{
      background: linear-gradient(180deg, rgba(47,65,89,.26) 0%, rgba(47,65,89,.16) 100%);
      border: 1px solid rgba(246,247,249,.10);
      border-radius: var(--radius);
      box-shadow: 0 10px 28px rgba(0,0,0,.20);
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
      position: relative;
      overflow: hidden;
    }
    .card::before{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(700px 300px at 20% 10%, rgba(231,222,201,.10), transparent 55%),
                  radial-gradient(520px 220px at 80% 40%, rgba(152,160,128,.08), transparent 60%);
      opacity: .85;
      pointer-events:none;
      transform: translateZ(0);
    }
    .card:hover{
      box-shadow: var(--shadow-lift);
      border-color: rgba(231,222,201,.18);
      transform: translateY(-2px);
    }

    .tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.30rem .55rem;
      border-radius: 999px;
      background: rgba(32,43,56,.40);
      border: 1px solid rgba(246,247,249,.10);
      color: rgba(246,247,249,.78);
      font-size: .78rem;
      line-height: 1;
    }

    .mini-icon{
      width: 16px; height: 16px; opacity:.92;
    }

    /* Trust strip */
    .trust-strip{
      border: 1px solid rgba(246,247,249,.10);
      background: rgba(47,65,89,.18);
      border-radius: 999px;
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
    }

    /* Footer form */
    .field{
      background: rgba(246,247,249,.06);
      border: 1px solid rgba(246,247,249,.12);
      border-radius: 999px;
      padding: 12px 14px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field:focus{
      border-color: rgba(231,222,201,.32);
      box-shadow: 0 0 0 4px rgba(231,222,201,.12);
    }

    /* Subtle divider */
    .hairline{
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(246,247,249,.12), transparent);
    }

    /* Reveal base (GSAP will animate) */
    .reveal{
      opacity: 0;
      transform: translateY(14px);
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      * { scroll-behavior: auto !important; }
      .card, .btn-primary, .icon-btn { transition: none !important; }
      .reveal{ opacity: 1 !important; transform: none !important; }
    }