:root{
    --bg:#11151b;
    --gold:#ff0000;
    --cream:#f3efe7;
    --slate:#7d8694;
    --line: rgb(212 87 87 / 35%);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html, body{
    height:100%;
    overflow:hidden;
  }

  body{
    font-family:'Vazirmatn','Yekan',Tahoma,sans-serif;
    color:var(--cream);
    display:flex;
    flex-direction:column;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ===== Background ===== */
  .bg{
    position:fixed;
    inset:0;
    z-index:-1;
    background-image:
      radial-gradient(ellipse at 50% 30%, rgba(212,168,87,0.10), transparent 55%),
      linear-gradient(180deg, rgba(17,21,27,0.55), rgba(13,16,21,0.9)),
      url('bg.jpg');
    background-size:cover;
    background-position:center;
  }

  /* ===== Main content (fills available space) ===== */
  main{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
    gap:0;
  }

  .eyebrow{
    font-size:clamp(13px, 1.6vw, 16px);
    letter-spacing:0.25em;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:22px;
    font-weight:500;
    opacity:0;
    animation:fadeUp 1s ease 0.2s forwards;
  }

  h1{
    font-size:clamp(40px, 11vw, 110px);
    font-weight:900;
    letter-spacing:0.02em;
    line-height:1;
    margin-bottom:22px;
    color:#ffffff;
    opacity:0;
    animation:fadeUp 1s ease 0.4s forwards;
  }

  .accent-bar{
    width:64px;
    height:3px;
    background:var(--gold);
    border-radius:2px;
    margin-bottom:22px;
    opacity:0;
    animation:fadeUp 1s ease 0.55s forwards;
  }

  .lead{
    font-size:clamp(16px, 2.4vw, 22px);
    color:var(--cream);
    font-weight:300;
    margin-bottom:8px;
    opacity:0;
    animation:fadeUp 1s ease 0.7s forwards;
  }

  .sub{
    font-size:clamp(15px, 2vw, 19px);
    color:var(--slate);
    font-weight:300;
    margin-bottom:40px;
    opacity:0;
    animation:fadeUp 1s ease 0.85s forwards;
  }

  /* ===== Buttons row ===== */
  .links{
    display:flex;
    gap:16px;
    flex-wrap:nowrap;
    justify-content:center;
    opacity:0;
    animation:fadeUp 1s ease 1.05s forwards;
  }

  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--cream);
    text-decoration:none;
    font-size:clamp(13px, 1.8vw, 16px);
    font-weight:500;
    letter-spacing:0.02em;
    backdrop-filter:blur(6px);
    background:rgba(212,168,87,0.04);
    transition:all .35s ease;
    white-space:nowrap;
  }

  .pill svg{
    width:17px; height:17px;
    stroke:var(--gold);
    fill:none;
    stroke-width:1.8;
    transition:stroke .35s ease;
    flex-shrink:0;
  }

  .pill:hover{
    background:var(--gold);
    color:#181308;
    border-color:var(--gold);
    transform:translateY(-3px);
    box-shadow:0 12px 28px -10px rgba(212,168,87,0.5);
  }

  .pill:hover svg{ stroke:#181308; }

  .pill:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(24px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ===== Footer ===== */
  footer{
    padding:24px 16px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,0.06);
    opacity:0;
    animation:fadeUp 1s ease 1.2s forwards;
  }

  footer .foot-links{
    display:flex;
    justify-content:center;
    gap:28px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }

  footer .foot-links a{
    color:var(--slate);
    text-decoration:none;
    font-size:13px;
    letter-spacing:0.05em;
    transition:color .25s ease;
    position:relative;
    padding-bottom:4px;
  }

  footer .foot-links a::after{
    content:'';
    position:absolute;
    right:0; left:0; bottom:0;
    height:1px;
    background:var(--gold);
    transform:scaleX(0);
    transition:transform .3s ease;
  }

  footer .foot-links a:hover{ color:var(--cream); }
  footer .foot-links a:hover::after{ transform:scaleX(1); }

  footer .copyright{
    color:#4a5160;
    font-size:12px;
    letter-spacing:0.04em;
    line-height:1.9;
  }

  footer .copyright a{
    color:#6b7484;
    text-decoration:none;
    border-bottom:1px dotted #444b59;
  }

  /* ===== Mobile adjustments ===== */
  @media (max-width: 640px){
    h1{ font-size:clamp(34px, 15vw, 70px); }
    .links{ gap:8px; }
    .pill{ padding:11px 16px; font-size:12.5px; gap:6px; }
    .pill svg{ width:14px; height:14px; }
    main{ padding:16px; }
    .sub{ margin-bottom:28px; }
    footer .foot-links{ gap:18px; }
  }

  @media (max-height: 600px){
    .eyebrow{ margin-bottom:12px; }
    h1{ margin-bottom:12px; }
    .accent-bar{ margin-bottom:12px; }
    .sub{ margin-bottom:20px; }
  }