:root{
    --bg-0:#050b14;
    --bg-1:#0a1420;
    --bg-2:#0d1a28;
    --cyan:#22d3ee;
    --cyan-bright:#5eead4;
    --cyan-deep:#0891b2;
    --white:#f5f7fa;
    --gray:#9fb0c3;
    --gray-dim:#6b7d92;
    --line:rgba(34,211,238,0.25);
    --font-display:'Segoe UI', Arial, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    background:var(--bg-0);
    color:var(--white);
    font-family:var(--font-display);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{
    max-width:1440px;
    margin:0 auto;
    padding:0 40px;
    position:relative;
  }

  body{
    background:
      radial-gradient(ellipse 900px 500px at 78% 30%, rgba(34,211,238,0.10), transparent 60%),
      linear-gradient(180deg, #060d17 0%, #071120 45%, #050b14 100%);
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(34,211,238,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34,211,238,0.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, black 20%, transparent 75%);
    z-index:0;
  }

  header{
    position:relative;
    z-index:5;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
    gap:20px;
    flex-wrap:wrap;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:19px;
    letter-spacing:1.5px;
    white-space:nowrap;
  }
  .logo .icon-wrap{
    width:30px;height:30px;
    border-radius:50%;
    border:1.5px solid var(--cyan);
    display:flex;align-items:center;justify-content:center;
    color:var(--cyan);
    font-size:13px;
  }
  .logo span.dim{color:var(--white);}
  .logo span.bright{color:var(--cyan);}

  nav{
    display:flex;
    gap:36px;
    flex-wrap:wrap;
  }
  nav a{
    color:#c9d6e3;
    text-decoration:none;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    transition:color .2s ease;
  }
  nav a:hover{color:var(--cyan);}

  .btn-fale{
    border:1px solid var(--cyan);
    color:var(--cyan);
    padding:10px 20px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    border-radius:4px;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 0 14px rgba(34,211,238,0.15);
    transition:all .2s ease;
  }
  .btn-fale:hover{
    background:rgba(34,211,238,0.08);
    box-shadow:0 0 22px rgba(34,211,238,0.35);
  }

  .hero{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(300px,560px) 1fr;
    gap:20px;
    align-items:center;
    padding:70px 0 40px;
  }
  .eyebrow{
    color:var(--cyan);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:22px;
  }
  h1.headline{
    font-size:clamp(34px,4.6vw,54px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:0.5px;
    margin-bottom:6px;
  }
  h1.headline .line1{color:var(--white); display:block;}
  h1.headline .line2{
    display:block;
    background:linear-gradient(90deg, #22d3ee, #67e8f9);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 40px rgba(34,211,238,0.35);
  }
  .hero p{
    color:var(--gray);
    font-size:15.5px;
    line-height:1.65;
    max-width:480px;
    margin-top:22px;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    margin-top:32px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 26px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    border-radius:6px;
    text-decoration:none;
    cursor:pointer;
    border:1.5px solid transparent;
    transition:transform .15s ease, box-shadow .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{
    background:linear-gradient(90deg,#22d3ee,#0891b2);
    color:#04121a;
    box-shadow:0 6px 24px rgba(34,211,238,0.35);
  }
  .btn-primary:hover{ box-shadow:0 8px 30px rgba(34,211,238,0.55); }
  .btn-outline{
    background:transparent;
    border-color:var(--cyan);
    color:var(--cyan);
  }
  .btn-outline:hover{ background:rgba(34,211,238,0.08); }

  .features{
    display:flex;
    gap:36px;
    margin-top:44px;
    flex-wrap:wrap;
  }
  .feature{
    display:flex;
    align-items:flex-start;
    gap:12px;
    max-width:190px;
  }
  .feature i{
    color:var(--cyan);
    font-size:19px;
    margin-top:2px;
  }
  .feature .ftitle{
    font-size:13.5px;
    font-weight:700;
    color:var(--white);
    margin-bottom:3px;
  }
  .feature .fsub{
    font-size:11.5px;
    color:var(--gray-dim);
    line-height:1.4;
  }

  .hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:460px;
  }
  .orbit-ring{
    position:absolute;
    border:5px solid rgba(34,211,238,0.10);
    border-radius:0%;
    z-index:-1;
    contain:layout style paint;
  }

  .orbit-ring.r2{ width:4000px; height:380px; }

  .icon-strip{
    position:relative;
    z-index:2;
    margin-top:20px;
    background:rgba(9,17,27,0.75);
    border:1px solid rgba(34,211,238,0.15);
    border-radius:10px;
    padding:20px 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
    max-width:640px;
    margin-left:auto;
    margin-right:0;
  }
  .icon-strip .item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--white);
  }
  .icon-strip .item i{ color:var(--cyan); font-size:17px; }
  .icon-strip .sep{ color:var(--cyan); opacity:0.6; }

  .stats{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:100px;
    padding:34px 0 50px;
    flex-wrap:wrap;
    text-align:center;
  }
  .stats .stat-num{
    font-size:26px;
    font-weight:800;
    color:var(--cyan);
  }
  .stats .stat-label{
    font-size:10.5px;
    letter-spacing:1.5px;
    color:var(--gray-dim);
    text-transform:uppercase;
    margin-top:4px;
  }
  .stats-dot{
    width:8px;height:8px;
    border-radius:50%;
    border:1.5px solid var(--cyan);
    margin:0 auto 14px;
  }
  .stats-wrap{ display:flex; flex-direction:column; align-items:center; width:100%; }

  .services{
    position:relative;
    z-index:2;
    padding:70px 0 40px;
    content-visibility:auto;
    contain-intrinsic-size: 1px 900px;
  }
  .services .eyebrow{ margin-bottom:18px; }
  .services-title{
    font-size:clamp(26px,3.4vw,38px);
    font-weight:800;
    line-height:1.2;
  }
  .services-title .line1{ display:block; color:var(--white); }
  .services-title .line2{
    display:block;
    color:var(--cyan);
    text-shadow:0 0 30px rgba(34,211,238,0.3);
  }
  .services-sub{
    color:var(--gray);
    font-size:15px;
    line-height:1.6;
    max-width:520px;
    margin-top:18px;
  }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    margin-top:48px;
    border-top:1px solid rgba(34,211,238,0.12);
    border-left:1px solid rgba(34,211,238,0.12);
  }
  .service-card{
    position:relative;
    padding:34px 30px;
    border-right:1px solid rgba(34,211,238,0.12);
    border-bottom:1px solid rgba(34,211,238,0.12);
    background:rgba(255,255,255,0.012);
    transition:background .25s ease;
  }
  .service-card:hover{ background:rgba(34,211,238,0.035); }
  .service-num{
    font-size:38px;
    font-weight:800;
    color:rgba(34,211,238,0.16);
    line-height:1;
    margin-bottom:18px;
  }
  .service-icon{
    font-size:26px;
    margin-bottom:16px;
  }
  .service-title{
    font-size:17px;
    font-weight:700;
    color:var(--white);
    margin-bottom:10px;
  }
  .service-desc{
    font-size:13.5px;
    line-height:1.6;
    color:var(--gray-dim);
    margin-bottom:22px;
    min-height:78px;
  }
  .service-tag{
    display:inline-block;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--cyan);
    border:1px solid rgba(34,211,238,0.4);
    border-radius:4px;
    padding:6px 12px;
  }

  .cta{
    position:relative;
    z-index:2;
    padding:60px 0 90px;
    content-visibility:auto;
    contain-intrinsic-size: 1px 420px;
  }
  .cta-box{
    border:1px solid rgba(34,211,238,0.25);
    border-radius:10px;
    padding:60px 30px;
    text-align:center;
    background:radial-gradient(ellipse 500px 260px at 50% 0%, rgba(34,211,238,0.08), transparent 70%), rgba(6,13,21,0.6);
  }
  .eyebrow.center{ text-align:center; }
  .cta-title{
    font-size:clamp(26px,3.6vw,36px);
    font-weight:800;
    color:var(--white);
    margin-top:14px;
  }
  .cta-title span{
    color:var(--cyan);
    text-shadow:0 0 30px rgba(34,211,238,0.35);
  }
  .cta-sub{
    color:var(--gray);
    font-size:15px;
    line-height:1.6;
    max-width:560px;
    margin:20px auto 34px;
  }
  .btn-whatsapp{
    background:linear-gradient(90deg,#22c55e,#0f9b7e);
    color:#04140d;
    box-shadow:0 8px 26px rgba(34,197,94,0.3);
    padding:16px 32px;
    font-size:14px;
  }
  .btn-whatsapp i{ font-size:17px; }
  .btn-whatsapp:hover{ box-shadow:0 10px 34px rgba(34,197,94,0.5); }

  @media (max-width: 1100px){
    .hero{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; min-height:380px; transform:scale(0.85); }
    .icon-strip{ margin:20px auto 0; }
    .hero p, .hero-ctas, .features{ margin-left:auto; margin-right:auto; }
  }
  @media (max-width: 780px){
    .wrap{ padding:0 22px; }
    nav{ display:none; }
    .header-inner{ justify-content:space-between; }
    .hero{ text-align:center; padding-top:44px; }
    .hero p{ margin-left:auto; margin-right:auto; }
    .hero-ctas{ justify-content:center; }
    .features{ justify-content:center; }
    .feature{ flex-direction:column; align-items:center; text-align:center; }
    .hero-visual{ transform:scale(1); min-height:300px;}

    .stats{ gap:50px; }
    .icon-strip{ gap:26px; padding:18px 20px; }
    .services{ text-align:center; }
    .services-sub{ margin-left:auto; margin-right:auto; }
    .services-grid{ grid-template-columns:repeat(2, 1fr); }
    .cta-box{ padding:44px 20px; }
  }
  @media (max-width: 420px){
    .hero-visual{ transform:scale(1); min-height:230px; }
    .icon-strip .item span{ display:none; }
    .services-grid{ grid-template-columns:1fr; }
    .service-desc{ min-height:0; }
  }