@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

    :root{
      --bg:#05080b;
      --panel:#0b1016;
      --line:rgba(230,174,80,.24);
      --line-strong:rgba(230,174,80,.42);
      --gold:#e3ad54;
      --gold2:#f4ca78;
      --bronze:#a56d35;
      --text:#f7f3ea;
      --muted:#b9bbc0;
    }

    *{box-sizing:border-box}

    html{
      scroll-behavior:smooth;
      scroll-padding-top:96px;
    }

    body{
      margin:0;
      background:
        radial-gradient(circle at 70% 4%,rgba(227,173,84,.09),transparent 28rem),
        radial-gradient(circle at 30% 40%,rgba(255,255,255,.025),transparent 34rem),
        var(--bg);
      color:var(--text);
      font-family:Inter,Arial,sans-serif;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:999;
      height:92px;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:34px;
      padding:18px clamp(28px,4vw,56px);
      background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.72));
      border-bottom:1px solid rgba(227,173,84,.18);
      backdrop-filter:blur(14px);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:15px;
    }

    .brand img{
      width:70px;
      height:70px;
      border-radius:50%;
      object-fit:cover;
    }

    .brand strong{
      display:block;
      font-size:26px;
      letter-spacing:.42em;
      font-weight:500;
      line-height:1;
    }

    .brand span,
    .footer-brand span{
      display:block;
      color:var(--gold);
      font-size:11px;
      letter-spacing:.22em;
      text-transform:uppercase;
      margin-top:7px;
    }

    nav{
      display:flex;
      justify-content:center;
      gap:42px;
    }

    nav a{
      position:relative;
      color:#fff;
      text-transform:uppercase;
      letter-spacing:.16em;
      font-weight:800;
      font-size:13px;
    }

    nav a.active,
    nav a:hover{
      color:var(--gold);
    }

    nav a.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-14px;
      height:2px;
      background:var(--gold);
    }

    .contact{
      border:1px solid var(--gold);
      border-radius:7px;
      padding:14px 22px;
      color:var(--gold);
      text-transform:uppercase;
      letter-spacing:.15em;
      font-size:12px;
      font-weight:800;
    }

    .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:46px;
      padding:0 22px;
      border-radius:6px;
      text-transform:uppercase;
      letter-spacing:.15em;
      font-size:12px;
      font-weight:900;
    }

    .primary{
      background:linear-gradient(135deg,var(--gold2),var(--bronze));
      color:#07090c;
    }

    .secondary{
      border:1px solid var(--gold);
      color:var(--gold);
      background:rgba(0,0,0,.28);
    }

    .arrow{
      margin-left:12px;
      font-size:18px;
      line-height:0;
    }

    .hero{
      min-height:calc(100vh - 92px);
      display:grid;
      grid-template-columns:minmax(360px,.82fr) minmax(500px,1.18fr);
      align-items:center;
      gap:42px;
      padding:74px clamp(34px,4vw,58px) 64px;
      background:
        linear-gradient(90deg,rgba(5,8,11,.98) 0%,rgba(5,8,11,.78) 42%,rgba(5,8,11,.44) 100%),
        radial-gradient(circle at 72% 42%,rgba(227,173,84,.14),transparent 28rem);
      overflow:hidden;
    }

    .hero-copy{
      position:relative;
      z-index:2;
      max-width:455px;
    }

    .hero-copy h1{
      margin:0;
      font-size:clamp(46px,5.2vw,92px);
      line-height:1.05;
      letter-spacing:.22em;
      text-transform:uppercase;
      font-weight:400;
    }

    .hero-copy h2{
      margin:13px 0 0;
      color:var(--gold);
      font-size:clamp(18px,1.7vw,27px);
      text-transform:uppercase;
      letter-spacing:.16em;
      font-weight:400;
    }

    .rule{
      width:72px;
      height:2px;
      background:var(--gold);
      margin:30px 0 24px;
    }

    .hero-copy p{
      color:#e4ded2;
      font-size:16px;
      line-height:1.72;
      max-width:370px;
    }

    .gold-line{
      color:var(--gold)!important;
      font-weight:600;
    }

    .hero-actions{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      margin-top:26px;
    }

    .hero-art{
      min-height:520px;
      border-radius:0;
      background:
        radial-gradient(circle at 52% 50%,rgba(227,173,84,.22),transparent 28rem),
        linear-gradient(90deg,rgba(5,8,11,.96) 0%,rgba(5,8,11,.34) 20%,rgba(5,8,11,.08) 48%,rgba(5,8,11,.32) 82%,rgba(5,8,11,.92) 100%),
        linear-gradient(180deg,rgba(5,8,11,.72) 0%,rgba(5,8,11,0) 25%,rgba(5,8,11,0) 70%,rgba(5,8,11,.70) 100%),
        url('../images/home-hero-art.jpg') center/cover no-repeat;
      box-shadow:none;
      mask-image:
        linear-gradient(90deg,transparent 0%,black 10%,black 86%,transparent 100%),
        linear-gradient(180deg,transparent 0%,black 10%,black 88%,transparent 100%);
      -webkit-mask-image:
        linear-gradient(90deg,transparent 0%,black 10%,black 86%,transparent 100%),
        linear-gradient(180deg,transparent 0%,black 10%,black 88%,transparent 100%);
      mask-composite:intersect;
      -webkit-mask-composite:source-in;
    }

    .section{
      padding:28px clamp(34px,4vw,58px) 0;
    }

    .section-title{
      color:var(--gold);
      text-align:center;
      text-transform:uppercase;
      letter-spacing:.26em;
      font-size:18px;
      font-weight:500;
      margin:0 0 28px;
    }

    .section-title::after{
      content:"";
      display:block;
      width:48px;
      height:2px;
      margin:13px auto 0;
      background:var(--gold);
      opacity:.85;
    }

    .products{
      border-top:1px solid rgba(227,173,84,.12);
      background:
        radial-gradient(circle at 50% 0,rgba(227,173,84,.07),transparent 25rem),
        linear-gradient(180deg,#071016,#05080b);
      padding-top:30px;
    }

    .product-grid{
      display:grid;
      grid-template-columns:1fr 210px;
      gap:24px;
      max-width:960px;
      margin:0 auto;
    }

    .economy-card{
      min-height:350px;
      border:1px solid var(--line);
      border-radius:5px;
      overflow:hidden;
      background:url('../images/economy-one-card.jpg') center/cover no-repeat;
      box-shadow:0 28px 90px rgba(0,0,0,.44);
    }

    .future-card{
      min-height:350px;
      border:1px solid var(--line);
      border-radius:5px;
      padding:34px 26px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      background:
        linear-gradient(180deg,rgba(5,8,11,.55),rgba(5,8,11,.84)),
        url('../images/future-products-card.jpg') center/cover no-repeat;
    }

    .future-card h3{
      margin:0 0 18px;
      color:var(--gold);
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:18px;
      line-height:1.45;
      font-weight:500;
    }

    .future-card p{
      color:#d6d1c7;
      line-height:1.65;
      margin:0;
      font-size:15px;
    }

    .future-card .small-rule{
      width:56px;
      height:2px;
      background:var(--gold);
      margin-top:28px;
    }

    .slider-dots{
      display:flex;
      justify-content:center;
      gap:12px;
      padding:12px 0 0;
    }

    .slider-dots span{
      width:7px;
      height:7px;
      border-radius:50%;
      background:rgba(255,255,255,.22);
    }

    .slider-dots span:first-child{
      background:var(--gold);
    }

    .principles{
      padding-top:30px;
    }

    .principles-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:14px;
      max-width:960px;
      margin:0 auto;
    }

    .principles-grid article{
      min-height:190px;
      border:1px solid var(--line);
      border-radius:5px;
      padding:26px 18px;
      text-align:center;
      background:
        linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
      box-shadow:0 22px 70px rgba(0,0,0,.30);
    }

    .principles-grid span{
      display:block;
      color:var(--gold);
      font-size:42px;
      margin-bottom:18px;
    }

    .principles-grid h3{
      margin:0 0 13px;
      text-transform:uppercase;
      letter-spacing:.16em;
      font-size:14px;
      font-weight:500;
    }

    .principles-grid p{
      margin:0;
      color:#c8c4bd;
      line-height:1.58;
      font-size:13px;
    }

    .mission{
      max-width:960px;
      margin:20px auto 0;
      min-height:220px;
      border:1px solid var(--line);
      border-radius:5px;
      padding:28px 38px;
      background:
        linear-gradient(90deg,rgba(5,8,11,.96),rgba(5,8,11,.64)),
        url('../images/mission-art.jpg') right center/contain no-repeat,
        linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
      box-shadow:0 22px 80px rgba(0,0,0,.32);
    }

    .mission .section-title{
      margin-bottom:20px;
    }

    .mission .section-title::after{
      margin-top:10px;
    }

    .mission p{
      max-width:620px;
      color:#d6d1c8;
      font-size:14px;
      line-height:1.72;
      margin:0 0 14px;
    }

    .mission strong{
      display:block;
      color:var(--gold);
      font-size:20px;
      line-height:1.45;
      font-weight:400;
      margin-top:8px;
    }

    footer{
      max-width:960px;
      margin:22px auto 0;
      padding:0 0 28px;
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      align-items:center;
      gap:20px;
      color:#c8c4bd;
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:14px;
    }

    .footer-brand img{
      width:54px;
      height:54px;
      border-radius:50%;
    }

    .footer-brand strong{
      letter-spacing:.42em;
      font-weight:500;
    }

    .footer-line{
      border-left:1px solid var(--line);
      padding-left:24px;
      color:var(--gold);
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:12px;
      line-height:1.7;
    }

    .footer-icons{
      display:flex;
      justify-content:flex-end;
      gap:24px;
      color:var(--gold);
      font-size:22px;
    }

    @media(max-width:1100px){
      .site-header{
        height:auto;
        grid-template-columns:1fr;
      }

      nav{
        justify-content:flex-start;
        flex-wrap:wrap;
      }

      .hero{
        grid-template-columns:1fr;
      }

      .hero-art{
        min-height:360px;
      }

      .product-grid,
      .principles-grid,
      footer{
        grid-template-columns:1fr;
      }

      .future-card{
        min-height:240px;
      }
    }

    @media(max-width:640px){
      .site-header,
      .hero,
      .section{
        padding-left:20px;
        padding-right:20px;
      }

      nav{
        display:none;
      }

      .brand img{
        width:54px;
        height:54px;
      }

      .brand strong{
        font-size:20px;
        letter-spacing:.24em;
      }

      .brand span{
        font-size:9px;
      }

      .hero-copy h1{
        font-size:42px;
      }

      .hero-copy h2{
        font-size:17px;
      }

      .mission{
        padding:28px 22px;
        background:
          linear-gradient(90deg,rgba(5,8,11,.96),rgba(5,8,11,.86)),
          url('../images/mission-art.jpg') center/cover no-repeat;
      }
    }