:root{
      --bg:#070708;
      --panel: rgba(10,10,12,.72);
      --panel2: rgba(10,10,12,.88);
      --text: rgba(255,255,255,.90);
      --muted: rgba(255,255,255,.66);

      /* gold system (matches your logo vibe) */
      --gold:#d6b15c;
      --gold2:#b88b3b;
      --gold3:#f2d48a;

      --line: rgba(214,177,92,.22);
      --line2: rgba(255,255,255,.08);

      --r: 18px;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --max: 1120px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(900px 600px at 70% 0%, rgba(214,177,92,.14), transparent 55%),
        radial-gradient(900px 600px at 20% 40%, rgba(214,177,92,.10), transparent 60%),
        linear-gradient(180deg, #050506 0%, #09090a 50%, #050506 100%);
      overflow-x:hidden;
    }

    .wrap{width:min(var(--max), calc(100% - 2rem)); margin:0 auto;}
    a{color:inherit; text-decoration:none}
    .gold{
      background: linear-gradient(180deg, var(--gold3), var(--gold));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }

    /* ===== HERO ===== */
    .hero{
      position:relative;
      padding: 34px 0 0;
      border-bottom: 1px solid var(--line);
      overflow:hidden;
    }
    .hero__bg{
      position:absolute; inset:0; z-index:-3;
      background:
        linear-gradient(90deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.70) 40%, rgba(6,6,7,.26) 72%, rgba(6,6,7,.86) 100%),
        linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.86)),
        url("https://images.unsplash.com/photo-1746442525676-14a3d8d2ffb3?auto=format&fit=crop&fm=jpg&q=80&w=2400") center/cover no-repeat;
      filter:saturate(.9) contrast(1.08);
    }
    .hero__inner{
      position:relative;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
      align-items:end;
      min-height: 420px;
      padding-bottom: 18px;
    }
    @media (max-width: 980px){
      .hero__inner{grid-template-columns:1fr; min-height: unset;}
    }

    /* radar rings (top right) */
    .radar{
      position:absolute;
      right:-240px; top:-170px;
      width: 720px; height: 720px;
      border-radius: 50%;
      border: 1px solid rgba(214,177,92,.24);
      box-shadow: inset 0 0 0 1px rgba(214,177,92,.10);
      z-index:-2; opacity:.7;
      pointer-events:none;
    }
    .radar:before, .radar:after{
      content:""; position:absolute; inset: 12%;
      border-radius:50%;
      border: 1px solid rgba(214,177,92,.20);
    }
    .radar:after{ inset: 28%; opacity:.85; }
    .radar__ring3{
      position:absolute; inset: 44%;
      border-radius:50%;
      border: 1px solid rgba(214,177,92,.16);
      opacity:.7;
    }
    .radar__h, .radar__v{
      position:absolute; left:0; top:50%;
      width:100%; height:1px;
      background: rgba(214,177,92,.20);
    }
    .radar__v{ top:0; left:50%; width:1px; height:100%; }
    @media (max-width: 980px){ .radar{display:none} }

    /* logo badge (top-left inside hero) */
    .badgeRow{display:flex; gap:14px; align-items:flex-start; margin-bottom: 10px;}
    .logoBadge{
      width:74px; height:74px; border-radius: 18px;
      background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
                  linear-gradient(180deg, #0f0f12, #060607);
      border: 2px solid rgba(214,177,92,.55);
      box-shadow: 0 16px 40px rgba(0,0,0,.45);
      display:grid; place-items:center;
      overflow:hidden;
      position:relative;
    }
    .logoBadge:before{
      content:"";
      position:absolute; inset:-40%;
      background: conic-gradient(from 180deg, rgba(214,177,92,0), rgba(214,177,92,.45), rgba(214,177,92,0));
      opacity:.45;
      animation: spin 9s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    .logoBadge span{
      position:relative;
      font-family: Cinzel, serif;
      letter-spacing:.12em;
      text-transform:uppercase;
      text-align:center;
      font-size: 13px;
      line-height: 1.05;
      color: var(--gold3);
      text-shadow: 0 8px 30px rgba(0,0,0,.65);
    }
    .logoBadge span b{display:block; font-size: 20px; letter-spacing:.10em;}

    .hero__title{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      text-transform:uppercase;
      letter-spacing:.06em;
      font-weight: 800;
      font-size: clamp(2.1rem, 3.2vw, 3.1rem);
      line-height: 1.03;
      text-shadow: 0 12px 40px rgba(0,0,0,.6);
    }
    .hero__subtitle{
      margin: 6px 0 14px;
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.12em;
      font-weight: 800;
      color: rgba(255,255,255,.82);
      font-size: 1.2rem;
    }
    .hero__desc{
      margin: 0 0 14px;
      max-width: 64ch;
      color: rgba(255,255,255,.70);
      font-size: 1.02rem;
    }

    .ctaRow{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 14px 20px;
      border-radius: 12px;
      border: 1px solid rgba(214,177,92,.50);
      background: linear-gradient(180deg, var(--gold3), var(--gold));
      color: #101012;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.06em;
      box-shadow: 0 18px 45px rgba(0,0,0,.55);
      cursor:pointer;
      transition: transform .12s ease, filter .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
    .btn:active{ transform: translateY(0); }

    .btn__plane{
      width: 18px; height: 18px; display:inline-block;
      transform: translateY(-1px);
    }
    .hero__note{
      color: rgba(255,255,255,.55);
      font-size: .92rem;
      margin-top: 8px;
    }

    /* ===== Section separators like mock ===== */
    .sepTitle{
      text-align:center;
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.10em;
      font-weight: 900;
      margin: 0;
      padding: 18px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, rgba(214,177,92,.06), rgba(0,0,0,0), rgba(214,177,92,.06));
    }

    /* ===== Feature row (3 columns with divider lines) ===== */
    .features{
      padding: 18px 0 8px;
      border-bottom: 1px solid var(--line);
    }
    .features__grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: 1px solid rgba(214,177,92,.16);
      border-radius: var(--r);
      overflow:hidden;
      background: linear-gradient(180deg, rgba(10,10,12,.72), rgba(10,10,12,.35));
      box-shadow: var(--shadow);
    }
    @media (max-width: 900px){ .features__grid{grid-template-columns:1fr;} }
    .feat{
      padding: 16px 18px;
      display:flex; gap: 14px; align-items:flex-start;
      border-right: 1px solid rgba(255,255,255,.06);
    }
    .feat:last-child{ border-right: none; }
    @media (max-width: 900px){
      .feat{ border-right:none; border-bottom: 1px solid rgba(255,255,255,.06);}
      .feat:last-child{ border-bottom:none; }
    }
    .feat__icon{
      width: 40px; height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(214,177,92,.25);
      background: rgba(214,177,92,.10);
      display:grid; place-items:center;
      flex: 0 0 auto;
    }
    .feat__name{
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.06em;
      font-weight: 900;
      font-size: .95rem;
      margin: 0 0 2px;
    }
    .feat__desc{
      margin: 0;
      color: rgba(255,255,255,.62);
      font-size: .93rem;
    }

    /* ===== Mechanism block ===== */
    .mechanism{
      padding: 18px 0 0;
    }
    .mechanism__sub{
      text-align:center;
      margin: 10px auto 14px;
      color: rgba(255,255,255,.62);
      max-width: 86ch;
    }
    .mechanism__fine{
      text-align:center;
      color: rgba(255,255,255,.52);
      font-size: .9rem;
      margin-bottom: 18px;
    }

    /* ===== Cards (3) like mock ===== */
    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    @media (max-width: 900px){ .cards{grid-template-columns:1fr;} }
    .card{
      border-radius: var(--r);
      overflow:hidden;
      border: 1px solid rgba(214,177,92,.16);
      box-shadow: 0 18px 50px rgba(0,0,0,.40);
      background: rgba(10,10,12,.55);
    }
    .card__img{
      height: 140px;
      background-position:center;
      background-size:cover;
      position:relative;
    }
    .card__img:after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78));
    }
    .card__bar{
      background: linear-gradient(180deg, rgba(214,177,92,.92), rgba(214,177,92,.70));
      color: #141416;
      padding: 12px 14px;
      display:flex; gap: 12px; align-items:center;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .card__bar svg{opacity:.95}
    .card__role{
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.08em;
      font-weight: 900;
      line-height: 1.1;
      margin: 0;
    }
    .card__small{
      margin: 2px 0 0;
      font-weight: 700;
      font-size: .92rem;
      opacity:.85;
    }

    /* ===== Invite / form section like mock ===== */
    .invite{
      padding: 18px 0 0;
      text-align:center;
    }
    .invite h3{
      margin: 0 0 8px;
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.10em;
      font-weight: 900;
    }
    .invite p{
      margin: 0 auto 8px;
      max-width: 92ch;
      color: rgba(255,255,255,.62);
      font-size: .98rem;
    }
    .invite .line{
      color: rgba(255,255,255,.72);
      font-weight: 800;
      margin-bottom: 18px;
    }

    .formWrap{
      padding: 0 0 26px;
      border-bottom: 1px solid var(--line);
    }
    .formTitle{
      text-align:center;
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.12em;
      font-weight: 900;
      margin: 0 0 14px;
      color: rgba(255,255,255,.86);
    }
    .formCard{
      width: min(560px, 100%);
      margin: 0 auto;
      border-radius: var(--r);
      border: 1px solid rgba(214,177,92,.22);
      background: linear-gradient(180deg, rgba(10,10,12,.78), rgba(10,10,12,.46));
      box-shadow: var(--shadow);
      padding: 14px;
    }
    .form{
      display:grid;
      gap: 10px;
    }
    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 560px){ .grid2{grid-template-columns:1fr;} }

    label{
      display:block;
      font-size: .88rem;
      color: rgba(255,255,255,.62);
      margin: 0 0 6px;
    }
    input, select{
      width:100%;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.28);
      color: rgba(255,255,255,.92);
      outline:none;
    }
    input:focus, select:focus{
      border-color: rgba(214,177,92,.55);
      box-shadow: 0 0 0 3px rgba(214,177,92,.18);
    }
    .formBtn{
      margin-top: 4px;
      width:100%;
      border-radius: 12px;
      padding: 14px 18px;
      border: 1px solid rgba(214,177,92,.50);
      background: linear-gradient(180deg, var(--gold3), var(--gold));
      color:#101012;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.10em;
      cursor:pointer;
    }
    .fineprint{
      text-align:center;
      color: rgba(255,255,255,.52);
      font-size: .88rem;
      margin-top: 6px;
    }
    .status{
      display:none;
      margin-top: 8px;
      border-radius: 12px;
      border: 1px solid rgba(214,177,92,.22);
      background: rgba(214,177,92,.10);
      padding: 10px 12px;
      color: rgba(255,255,255,.85);
      font-size: .92rem;
    }
    .status.error{
      border-color: rgba(255,90,90,.25);
      background: rgba(255,90,90,.12);
    }

    /* footer CTA like mock */
    .footer{
      padding: 18px 0 40px;
      text-align:center;
    }
    .footer__title{
      margin: 0 0 12px;
      font-family: Montserrat, Inter, sans-serif;
      text-transform: uppercase;
      letter-spacing:.12em;
      font-weight: 900;
      color: rgba(255,255,255,.70);
    }
    .footer__btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 14px 26px;
      border-radius: 12px;
      border: 1px solid rgba(214,177,92,.50);
      background: rgba(0,0,0,.25);
      color: rgba(255,255,255,.88);
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing:.10em;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      cursor:pointer;
    }

    /* subtle vignette/grain feel */
    .grain{
      pointer-events:none;
      position:fixed; inset:0;
      background:
        radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,0), rgba(0,0,0,.55)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity:.12;
    }

    .footer__legal {
        margin-top: 14px;
        display: flex;
        justify-content: center;
        gap: 16px;
        font-size: 0.85rem;
    }

    .footer__legal a {
        color: rgba(255,255,255,.55);
        text-decoration: none;
    }

    .footer__legal a:hover {
        color: var(--gold3);
        text-decoration: underline;
    }