:root{
    --bg:#0b0f17;
    --card:#0f1724;
    --muted:#a9b2c3;
    --text:#eef2ff;
    --line:rgba(255,255,255,.10);
    --red:#e11d2e;
    --red2:#b81422;
    --shadow: 0 12px 30px rgba(0,0,0,.35);
    --radius:18px;
  }
  
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(225,29,46,.18), transparent 60%),
                radial-gradient(900px 500px at 90% 10%, rgba(225,29,46,.10), transparent 60%),
                var(--bg);
    color:var(--text);
  }
  
  a{color:inherit; text-decoration:none}
  .container{width:min(1100px, 92%); margin-inline:auto}
  
  .topbar{
    border-bottom:1px solid var(--line);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
  }
  .topbar__inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0;
    gap:10px;
  }
  .topbar__link{color:var(--muted)}
  .dot{opacity:.6}
  
  .header{
    position:sticky; top:0;
    z-index:50;
    background: rgba(11,15,23,.65);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header__inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:12px;
  }
  .brand{display:flex; align-items:center; gap:12px}
  .brand__logo{
    width:44px; height:44px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid var(--line);
  }
  .brand__text strong{display:block; letter-spacing:.5px}
  .brand__text span{display:block; color:var(--muted); font-size:.9rem}
  
  .nav{
    display:flex; gap:18px; align-items:center;
    color:var(--muted);
  }
  .nav a:hover{color:var(--text)}
  .nav__toggle{
    display:none;
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
  }
  
  .hero{
    position:relative;
    padding:46px 0 28px;
    overflow:hidden;
  }
  .hero__bg{
    position:absolute; inset:-200px -200px auto -200px;
    height:520px;
    background: radial-gradient(closest-side, rgba(225,29,46,.25), transparent 70%);
    filter: blur(10px);
    pointer-events:none;
    opacity:.8;
  }
  .hero__inner{
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap:24px;
    align-items:stretch;
    position:relative;
  }
  .badge{
    display:inline-flex;
    border:1px solid var(--line);
    background: rgba(255,255,255,.04);
    color:var(--muted);
    padding:8px 12px;
    border-radius:999px;
    font-size:.92rem;
  }
  .hero__content h1{
    margin:14px 0 10px;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height:1.25;
  }
  .hero__content p{
    margin:0 0 16px;
    color:var(--muted);
    line-height:1.9;
  }
  .hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 14px}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(255,255,255,.04);
    cursor:pointer;
    font-weight:700;
  }
  .btn--primary{
    background: linear-gradient(135deg, var(--red), var(--red2));
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 26px rgba(225,29,46,.25);
  }
  .btn--ghost:hover{border-color: rgba(225,29,46,.45)}
  
  .hero__stats{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
    margin-top:12px;
  }
  .stat{
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    border-radius:16px;
    padding:12px;
  }
  .stat strong{display:block; font-size:1.05rem}
  .stat span{color:var(--muted); font-size:.9rem}
  
  .card{
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    border-radius: var(--radius);
    padding:16px;
    box-shadow: var(--shadow);
  }
  .hero__card .card h3{margin:0 0 10px}
  
  .contact-mini{display:flex; flex-direction:column; gap:10px}
  .contact-mini a{
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.2);
    color:var(--muted);
  }
  .contact-mini a:hover{color:var(--text); border-color: rgba(225,29,46,.35)}
  .note{
    margin-top:12px;
    border-top:1px solid var(--line);
    padding-top:12px;
    color:var(--muted);
    line-height:1.9;
  }
  
  .section{padding:54px 0}
  .section--alt{background: rgba(255,255,255,.02); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .section__head h2{margin:0 0 8px; font-size:1.55rem}
  .section__head p{margin:0; color:var(--muted); line-height:1.9}
  
  .grid{display:grid; gap:14px; margin-top:18px}
  .grid--3{grid-template-columns: repeat(3, 1fr)}
  .grid--2{grid-template-columns: repeat(2, 1fr)}
  
  .feature, .service{
    border:1px solid var(--line);
    background: rgba(0,0,0,.18);
    border-radius: var(--radius);
    padding:16px;
  }
  .feature h3, .service h3{margin:0 0 10px}
  .feature p{margin:0; color:var(--muted); line-height:1.9}
  .service ul{margin:0; padding:0 18px; color:var(--muted); line-height:1.9}
  
  .brandBox{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:14px;
    align-items:stretch;
    margin-top:18px;
  }
  .brandTag{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(225,29,46,.15);
    border:1px solid rgba(225,29,46,.35);
  }
  .brandBox__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
  .kv{display:grid; gap:10px; margin-top:10px}
  .kv > div{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background: rgba(0,0,0,.18);
  }
  .kv span{color:var(--muted)}
  
  .gallery{
    margin-top:18px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
  .gallery img.gimg{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:16px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.15);
  }
  .tip{
    margin-top:14px;
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    background: rgba(0,0,0,.15);
    line-height:1.9;
  }
  
  .contactList{display:grid; gap:10px; margin-top:12px}
  .contactItem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.18);
  }
  .contactItem span{color:var(--muted)}
  .contactItem:hover{border-color: rgba(225,29,46,.35)}
  .noLink{cursor:default}
  .actionsRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
  
  .form{display:grid; gap:12px; margin-top:12px}
  label span{display:block; color:var(--muted); margin-bottom:6px}
  input, textarea{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background: rgba(0,0,0,.22);
    color:var(--text);
    outline:none;
  }
  input:focus, textarea:focus{border-color: rgba(225,29,46,.45)}
  .small{font-size:.9rem}
  
  .mapBox{margin-top:14px}
  .mapBox__head h3{margin:0 0 6px}
  .mapEmbed{
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    background: rgba(0,0,0,.18);
  }
  .mapEmbed iframe{
    width:100%;
    height:340px;
    display:block;
  }
  .mapFallback__bar{
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    border-top:1px solid var(--line);
    background: rgba(0,0,0,.25);
    color: var(--muted);
    flex-wrap:wrap;
  }
  
  .footer{
    border-top:1px solid var(--line);
    background: rgba(0,0,0,.25);
    padding:18px 0;
  }
  .footer__inner{
    display:flex; gap:12px; justify-content:space-between; align-items:center;
    flex-wrap:wrap;
  }
  .footer__links{display:flex; gap:12px; color:var(--muted)}
  .footer__links a:hover{color:var(--text)}
  .muted{color:var(--muted)}
  .wa-float{
    position:fixed;
    left:16px; bottom:16px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color:white;
    padding:12px 14px;
    border-radius:999px;
    font-weight:800;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
    z-index:100;
  }
  
  @media (max-width: 900px){
    .hero__inner{grid-template-columns: 1fr}
    .grid--3{grid-template-columns: 1fr}
    .grid--2{grid-template-columns: 1fr}
    .brandBox{grid-template-columns:1fr}
    .gallery{grid-template-columns: repeat(2, 1fr)}
    .nav{display:none}
    .nav__toggle{display:inline-flex}
    .nav.is-open{
      display:flex;
      position:absolute;
      top:70px;
      right:4%;
      left:4%;
      flex-direction:column;
      padding:14px;
      border:1px solid var(--line);
      border-radius:16px;
      background: rgba(11,15,23,.92);
    }
  }
  /* ============================= */
/* 🔥 MOBILE PERFECT EXPERIENCE */
/* ============================= */

@media (max-width: 600px){

    body{
      font-size: 15px;
    }
  
    /* Header */
    .brand__logo{
      width:38px;
      height:38px;
    }
  
    .brand__text strong{
      font-size: 0.95rem;
    }
  
    .brand__text span{
      font-size: 0.8rem;
    }
  
    /* Navigation */
    .nav.is-open{
      gap:14px;
      text-align:center;
    }
    .nav.is-open a{
      padding:12px;
      border-radius:12px;
      background: rgba(255,255,255,.04);
    }
  
    /* Hero */
    .hero{
      padding:32px 0 24px;
    }
  
    .hero__content h1{
      font-size:1.35rem;
      line-height:1.4;
      text-align:center;
    }
  
    .hero__content p{
      text-align:center;
      font-size:0.95rem;
    }
  
    .badge{
      margin-inline:auto;
    }
  
    .hero__cta{
      justify-content:center;
    }
  
    .hero__stats{
      grid-template-columns:1fr;
      text-align:center;
    }
  
    .stat{
      padding:10px;
    }
  
    /* Contact card in hero */
    .hero__card{
      margin-top:10px;
    }
  
    /* Sections */
    .section{
      padding:36px 0;
    }
  
    .section__head h2{
      font-size:1.3rem;
      text-align:center;
    }
  
    .section__head p{
      text-align:center;
      font-size:0.95rem;
    }
  
    /* Gallery */
    .gallery{
      grid-template-columns:1fr 1fr;
    }
  
    .gallery img.gimg{
      height:140px;
      border-radius:14px;
    }
  
    /* Contact list */
    .contactItem{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
    }
  
    .contactItem strong{
      font-size:1rem;
    }
  
    /* Buttons */
    .btn{
      width:100%;
      padding:14px;
      font-size:1rem;
    }
  
    .actionsRow{
      flex-direction:column;
    }
  
    /* Form */
    input, textarea{
      font-size:1rem;
    }
  
    /* Map */
    .mapEmbed iframe{
      height:260px;
    }
  
    /* Footer */
    .footer__inner{
      flex-direction:column;
      text-align:center;
      gap:10px;
    }
  
    /* Floating WhatsApp */
    .wa-float{
      left:12px;
      bottom:12px;
      padding:14px 16px;
      font-size:0.95rem;
    }
  }