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

    html{
      scroll-behavior:smooth;
    }

    body{
      background:#050505;
      color:#fff;
      font-family:'Inter', sans-serif;
      overflow-x:hidden;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:
      radial-gradient(circle at top, rgba(212,175,55,.12), transparent 35%),
      radial-gradient(circle at bottom, rgba(212,175,55,.08), transparent 25%);
      z-index:-2;
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size:40px 40px;
      z-index:-1;
      opacity:.25;
    }

    :root{
      --gold:#f7c625;
      --gold-light:#f4d06f;
      --black:#050505;
      --gray:#9d9d9d;
      --card:#111111;
      --border:#242424;
    }

    .container{
      width:90%;
      max-width:1300px;
      margin:auto;
    }

    /* HEADER */

    header{
      padding:25px 0;
      position:sticky;
      top:0;
      z-index:999;
      backdrop-filter:blur(10px);
      background:rgba(5,5,5,.75);
      border-bottom:1px solid rgba(255,255,255,.05);
    }

    nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .logo{
      font-family:'Cinzel', serif;
      font-size:42px;
      font-weight:700;
      color:var(--gold);
      line-height:1;
    }

    .logo span{
      display:block;
      font-size:14px;
      letter-spacing:8px;
      margin-top:4px;
    }

    .menu{
      display:flex;
      gap:35px;
      list-style:none;
    }

    .menu a{
      color:#fff;
      text-decoration:none;
      transition:.3s;
      font-size:15px;
    }

    .menu a:hover{
      color:var(--gold);
    }

    .btn{
      padding:14px 28px;
      border:1px solid var(--gold);
      color:var(--gold);
      text-decoration:none;
      border-radius:10px;
      transition:.3s;
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:600;
    }

    .btn:hover{
      background:var(--gold);
      color:#000;
      transform:translateY(-2px);
      box-shadow:0 0 25px rgba(212,175,55,.35);
    }

    /* HERO */

    .hero{
      min-height:90vh;
      display:flex;
      align-items:center;
      padding:70px 0;
    }

    .hero-content{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
      align-items:center;
    }

    .tag{
      color:var(--gold);
      font-size:13px;
      letter-spacing:2px;
      margin-bottom:20px;
      display:inline-block;
      border-left:3px solid var(--gold);
      padding-left:12px;
    }

    h1{
      font-family:'Cinzel', serif;
      font-size:72px;
      line-height:1.1;
      margin-bottom:25px;
    }

    h1 span{
      color:var(--gold);
    }

    .hero p{
      color:var(--gray);
      font-size:18px;
      line-height:1.8;
      margin-bottom:40px;
      max-width:550px;
    }

    .hero-buttons{
      display:flex;
      gap:20px;
      flex-wrap:wrap;
    }

    .btn-gold{
      background:linear-gradient(135deg, var(--gold), var(--gold-light));
      color:#000;
      border:none;
    }

    .btn-gold:hover{
      transform:translateY(-3px) scale(1.02);
    }

    .hero-image{
      position:relative;
    }

    .mockup{
      width:100%;
      border-radius:25px;
    }

    /* SERVICES */

    section{
      padding:110px 0;
    }

    .section-title{
      text-align:center;
      margin-bottom:70px;
    }

    .section-title h2{
      font-family:'Cinzel', serif;
      font-size:52px;
      margin-bottom:15px;
    }

    .section-title h2 span{
      color:var(--gold);
    }

    .section-title p{
      color:var(--gray);
      max-width:700px;
      margin:auto;
      line-height:1.8;
    }

    .services-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
      gap:25px;
    }

    .card{
      background:linear-gradient(180deg,#111,#0b0b0b);
      border:1px solid var(--border);
      border-radius:22px;
      padding:35px;
      transition:.4s;
      position:relative;
      overflow:hidden;
    }

    .card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(130deg, rgba(248, 194, 16, 0.12), transparent 45%);
      opacity:0;
      transition:.4s;
    }

    .card:hover{
      transform:translateY(-10px);
      border-color:rgba(255, 196, 2, 0.4);
    }

    .card:hover::before{
      opacity:1;
    }

    .icon{
      width:65px;
      height:65px;
      border-radius:18px;
      background:rgba(255, 196, 2, 0.1);
      border:1px solid rgba(255, 196, 2, 0.2);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      margin-bottom:25px;
      color:var(--gold);
    }

    .card h3{
      margin-bottom:15px;
      font-size:24px;
    }

    .card p{
      color:var(--gray);
      line-height:1.7;
    }

    /* PROJECTS */

    .projects{
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));
    }

    .projects-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
      gap:30px;
    }

    .project{
      background:#0b0b0b;
      border-radius:22px;
      overflow:hidden;
      border:1px solid var(--border);
      transition:.4s;
    }

    .project:hover{
      transform:translateY(-10px);
      border-color:rgba(255, 196, 2, 0  .4);
    }

    .project img{
      width:100%;
      display:block;
    }

    .project-content{
      padding:25px;
    }

    .project-content h3{
      margin-bottom:10px;
      font-size:24px;
    }

    .project-content p{
      color:var(--gray);
      margin-bottom:20px;
    }

    /* CTA */

    .cta{
      background:
      linear-gradient(135deg, rgba(255, 191, 0, 0.18), rgba(255, 215, 82, 0.04));
      border:1px solid rgba(255, 196, 0, 0.25);
      border-radius:35px;
      padding:60px;
      text-align:center;
    }

    .cta h2{
      font-family:'Cinzel', serif;
      font-size:52px;
      margin-bottom:20px;
    }

    .cta p{
      color:#cfcfcf;
      max-width:700px;
      margin:auto auto 35px;
      line-height:1.8;
    }

    /* FOOTER */

    footer{
      padding:50px 0;
      border-top:1px solid rgba(255,255,255,.05);
      margin-top:100px;
    }

    .footer-content{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
      flex-wrap:wrap;
    }

    .footer-content p{
      color:#8d8d8d;
    }

    .socials{
      display:flex;
      gap:15px;
    }

    .socials a{
      width:45px;
      height:45px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(212,175,55,.2);
      text-decoration:none;
      color:var(--gold);
      transition:.3s;
    }

    .socials a:hover{
      background:var(--gold);
      color:#000;
      transform:translateY(-4px);
    }

    /* MOBILE */

    .menu-mobile{
      display:none;
      font-size:25px;
      color:var(--gold);
      cursor:pointer;
    }

    @media(max-width:980px){

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

      h1{
        font-size:50px;
      }

        .menu-mobile{
    display:block;
    font-size:32px;
    color:#D4AF37;
    cursor:pointer;
    z-index:1001;
  }

  .menu{

    position:absolute;
    top:90px;
    left:0;

    width:100%;

    background:#050505;

    flex-direction:column;

    align-items:center;

    gap:25px;

    padding:40px 0;

    border-bottom:1px solid rgba(255, 205, 42, 0.15);

    opacity:0;
    visibility:hidden;

    transform:translateY(-15px);

    transition:.4s;

    display:flex;
  }

  .menu.active{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

  }

}

      .section-title h2{
        font-size:35px;
      }

      .cta{
        padding:40px 25px;
      }

      .cta h2{
        font-size:35px;
      }

    

    @media(max-width:600px){

      h1{
        font-size:35px;
      }

      .hero p{
        font-size:13px;
      }

      .hero-buttons{
        flex-direction:column;
      }

      .btn{
        justify-content:center;
      }

      .section-title h2{
        font-size:30px;
      }

    }