:root{
      --bg:#05070b;
      --bg2:#0a111a;
      --ink:#e7eef7;
      --muted:#9fb0c8;
      --line:rgba(255,255,255,.12);
      --glass:rgba(255,255,255,.06);
      --brand:#7cfff3;
      --brand2:#4f65ff;
      --accent:#19c37d;
      --danger:#ff6b6b;
      --shadow:0 24px 80px rgba(0,0,0,.45);
      --r:16px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; color:var(--ink);
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(800px 400px at 80% -10%, rgba(79,101,255,.15), transparent 60%),
        radial-gradient(600px 300px at 10% 0%, rgba(124,255,243,.12), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
    }
    img{max-width:100%; display:block}
    .container{width:min(1200px, calc(100% - 40px)); margin-inline:auto}

    /* Ribbon */
    .ribbon{background:linear-gradient(90deg, rgba(79,101,255,.14), rgba(124,255,243,.12));/* font-weight:800; */}
    .ribbon .container{display:flex; gap:10px; align-items:center; justify-content:center; padding:10px 0}
    .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand2)}

    /* Header */
    .header{position:sticky; top:0; z-index:10; background:rgba(5,7,11,.6); backdrop-filter: blur(10px); border-bottom:1px solid var(--line)}
    .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
    .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:900; letter-spacing:.3px}
    .mark{background:linear-gradient(135deg, var(--brand2), var(--brand)); color:#06101a; padding:6px 10px; border-radius:12px}
    .name{font-family:Lexend, Inter, sans-serif}
    .menu{display:flex;gap:22px;list-style:none;margin:0;padding:0;align-items: anchor-center;}
    .menu a{color:var(--ink); text-decoration:none; opacity:.9}
    .menu a:hover{opacity:1}
    .nav-toggle{display:none; background:none; border:none; cursor:pointer}
    .nav-toggle span{display:block; width:24px; height:2px; background:#fff; margin:5px 0}

    /* Buttons */
    .btn{
      display:inline-block;
      text-decoration:none;
      /* font-weight:900; */
      border-radius:12px;
      padding:12px 18px;
      background:linear-gradient(135deg, var(--brand2), var(--brand));
      color:#051018;
      box-shadow:var(--shadow);
      transition:transform .15s ease, filter .2s ease
    }
    .btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
    .btn-ghost{background: #ff0000;color:var(--ink);border:1px solid var(--line);box-shadow:none}
    .btn-lg{padding:14px 22px}
    .btn-xs{padding:8px 12px; font-weight:800}
    .btn-block{width:100%}

    /* Hero */
    .hero{position:relative; overflow:hidden}
    .hero-bg{position:absolute; inset:0}
    .glow{position:absolute; filter:blur(70px); opacity:.5}
    .glow-1{width:260px; height:260px; background:#4f65ff66; top:-40px; left:10%}
    .glow-2{width:260px; height:260px; background:#7cfff366; bottom:-40px; right:15%}
    .grid-ornament{position:absolute; inset:auto 0 0 0; height:140px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.04), transparent)}

    .hero-wrap{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; padding:80px 0 50px}
    .pill{display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.06); backdrop-filter: blur(6px); font-weight:800; color:var(--ink); margin-bottom:10px}
    .hero h1{font-size:clamp(32px, 5vw, 60px); margin:0 0 10px; line-height: 73px;}
    .hero p{color:var(--muted); margin:0 0 16px;line-height: 27px;}
    .actions{display:flex; gap:12px; flex-wrap:wrap}
    .facts{display:flex; gap:18px; list-style:none; padding:0; margin:18px 0 0; color:var(--muted)}
    .facts strong{color:#fff}

    .device-frame{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); transform:perspective(900px) rotateY(-5deg) rotateX(1deg)}
    .device-frame img{/*aspect-ratio:4/3;*/ object-fit:cover}
    .float-badges{position:absolute; inset:auto 10px 10px auto; display:flex; gap:8px; flex-wrap:wrap; max-width:80%}
    .chip{background:rgba(124,255,243,.18); color:#d4fff9; border:1px solid rgba(124,255,243,.4); border-radius:999px; font-weight:800; font-size:12px; padding:6px 10px}
    .chip.alt{background:rgba(79,101,255,.2); color:#dbe1ff; border-color:rgba(79,101,255,.4)}
    .chip.dark{background:rgba(0,0,0,.45); color:#fff; border-color:rgba(255,255,255,.25)}
    .skew-divider{display:block; width:100%; height:60px; fill:rgba(255,255,255,.04)}

    /* Edge */
    .edge{padding:70px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
    .head{text-align:center; margin-bottom:26px}
    .head h2{margin:0 0 8px; font-size:clamp(22px, 3.5vw, 36px)}
    .head p{margin:0; color:var(--muted)}
    .edge-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
    .edge-card{
      background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--r); padding:18px; backdrop-filter: blur(8px);
      transform:skewY(-2deg); transition:transform .2s ease, box-shadow .2s ease
    }
    .edge-card:hover{transform:skewY(0deg) translateY(-4px); box-shadow:var(--shadow)}
    .edge-card .ic{font-size:26px; margin-bottom:6px; filter:drop-shadow(0 4px 12px rgba(124,255,243,.25))}

    /* Portfolio */
    .portfolio{padding:70px 0}
    .gallery{columns:3 320px; column-gap:16px}
    .shot{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.02)}
    .shot img{width:100%; display:block}
    .shot figcaption{position:absolute;left: 10px;bottom: 80px;padding: 14px 10px;background: rgb(0 0 0);color:#fff;border-radius:999px;font-weight:800;font-size:12px;/* top: 0px; */text-align: center;}
    .shot.wide img{aspect-ratio:16/9; object-fit:cover}
    .shot.tall img{aspect-ratio:4/5; object-fit:cover}

    /* Plans */
    .plans{padding:70px 0; background:linear-gradient(180deg, rgba(79,101,255,.06), transparent)}
    .plan-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px}
    .plan-card{
      background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--r);
      padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden
    }
    .plan-card:before{
      content:""; position:absolute; inset:-40% -40% auto auto; width:60%; height:60%;
      background:radial-gradient(circle at 60% 40%, rgba(124,255,243,.12), transparent 60%);
      transform:rotate(18deg)
    }
    .plan-card .sub{color:var(--muted); margin:4px 0 10px;    line-height: 28px;
    font-size: 16px;}
    .price{font-weight:900; font-size:30px; background:linear-gradient(135deg, var(--brand2), var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent}
    .list{color:var(--muted); padding-left:18px; min-height:96px}
    .featured{outline:2px solid var(--brand2); transform:translateY(-4px)}
    .flag{position:absolute; top:12px; right:-6px; padding:6px 10px; background:var(--accent); color:#062; border-radius:8px 0 0 8px; font-weight:900}

    /* CTA */
    .cta{padding:40px 0; background:linear-gradient(90deg, rgba(79,101,255,.14), rgba(124,255,243,.12))}
    .cta-wrap{display:flex; align-items:center; justify-content:space-between; gap:18px}
    .cta-copy h3{margin:0 0 6px;font-size: 34px;}

    /* Contact */
    .contact{padding:70px 0}
    .card.form{max-width:880px; margin-inline:auto; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--r); padding:18px}
    .form .grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px}
    .form .grid .full{grid-column:1/-1}
    label span{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
    input, select, textarea{
      width:100%; padding:12px; border-radius:12px; border:1px solid var(--line);
      background:rgba(255,255,255,.04); color:var(--ink); outline:none
    }
    input:focus, select:focus, textarea:focus{border-color:var(--brand2)}
    .error{color:var(--danger); font-size:12px; min-height:16px; display:block; margin-top:6px}
    .form-actions{display:flex; gap:12px; align-items:center; margin-top:12px}
    .note{color:var(--muted); font-size:12px}
    .form-status{margin-top:12px; font-weight:900}

    /* Footer */
    .footer{padding:40px 0 16px; background:#080b12; border-top:1px solid var(--line)}
    .foot-grid{display:grid; grid-template-columns:2fr 1.2fr 1.2fr; gap:18px}
    .foot-brand{margin-bottom:8px}
    .contact-list{list-style:none; padding:0; margin:0}
    .foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--line)}
    .legal{list-style:none; display:flex; gap:14px; padding:0; margin:0}
    .legal a{color:var(--muted); text-decoration:none}

    /* Scroll top */
    .scroll-top{
      position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%;
      background:linear-gradient(135deg, var(--brand2), var(--brand)); color:#06101a; border:none; display:none; cursor:pointer; font-weight:900; box-shadow:var(--shadow)
    }


    .logo-img {
    position: absolute;
    max-width: 62px;
}

    .hero-specs {
    display: flex;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    color: #aab6c8;
    flex-wrap: wrap;
}
    .hero-specs li {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 999px;
}


    .hero-specs .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(56 189 248);
}

    .Protect-car {
    font-size: 28px;
    line-height: 42px;
}
    .text-center{
        text-align:center;
    }


   
.sub {
    color: var(--muted);
    margin: 4px 0 10px;
    line-height: 28px;
    font-size: 16px;
}







    /* Responsive */
    @media (max-width: 1040px){
      .hero-wrap{grid-template-columns:1fr; padding:70px 0 40px}
      .device-frame{transform:none}

    }
















    @media (max-width: 900px){
      .edge-grid{grid-template-columns:1fr 1fr}
      .gallery{columns:2 260px}
      .plan-grid{grid-template-columns:1fr 1fr}
      .cta-wrap{flex-direction:column; text-align:center}
      .facts{flex-wrap:wrap}

    }
    @media (max-width: 680px){
        .foot-grid {
    display: grid;
    grid-template-columns: unset;
    gap: 18px;
}

.edge-grid {
        grid-template-columns: auto;
    }



.ribbon{
    display:none;
}


.hero h1 {
    font-size: clamp(32px, 5vw, 60px);
    margin: 0 0 10px;
    line-height: 50px !important;
}
.actions {
    display: flex;
    gap: 9px;
    /* flex-wrap: wrap; */
    font-size: 13px;
    font-weight: 700;
}
    .hero-wrap {
        grid-template-columns: 1fr;
        padding: 36px 0 40px;
    }


    .float-badges {
    position: absolute;
    inset: auto -24px 14px auto;
    display: flex
;
    gap: 5px;
    /* flex-wrap: wrap; */
    max-width: 100%;
    width: 100%;
}


    .skew-divider {
    display: block;
    width: 100%;
    height: 0px;
    fill: rgba(255, 255, 255, .04);
}


    .logo-img {
    position: absolute;
    max-width: 46px;
}






      .nav-toggle{display:block}
      .menu{
        position:fixed;
        inset:64px 12px auto 12px;
        background:#0a111a;
        border:1px solid var(--line);
        padding:12px;
        border-radius:12px;
        display:none;
        flex-direction:column;
        gap:10px; 
        box-shadow:var(--shadow);
         align-items: normal; 
      }
      .menu.show{display:flex}
      .gallery{columns:3 240px}
      .plan-grid{grid-template-columns:1fr 1fr}
      .form .grid{grid-template-columns:1fr}
    }