  .container{max-width:var(--container); margin:0 auto; padding:0 16px}

    /* Header */
  
    nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
    nav a{
      font-size:14px; color:var(--muted);
      padding:8px 10px; border-radius:12px;
    }
    nav a:hover{background:#ffffff; color:var(--text); box-shadow: 0 8px 18px rgba(15,23,42,.06)}
    .header__cta{display:flex; align-items:center; gap:10px}
   
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      cursor:pointer;
      transition:.15s ease;
      font-weight:700;
      font-size:14px;
      box-shadow: 0 10px 20px rgba(15,23,42,.05);
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px)}
    .btn--primary{
      border-color: transparent;
      background: #f08a33;
      color:#fff;
      box-shadow: 0 12px 24px rgba(249,115,22,.25);
    }
    .btn--primary:hover{box-shadow: 0 16px 28px rgba(249,115,22,.28)}
    .btn svg{width:18px; height:18px; fill: currentColor}
    .btn--ghost{background: transparent; box-shadow:none}

    /* Hero */
    .hero{padding:34px 0 14px}
    .hero__grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:18px;
      align-items:stretch;
    }
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius-2);
      box-shadow: var(--shadow);
    }
    .hero__main{
      padding:26px;
      position:relative;
      overflow:hidden;
    }
    .hero__main:before{
      content:"";
      position:absolute;
      inset:-120px -80px auto auto;
      width:280px; height:280px;
      background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.22), transparent 60%),
                  radial-gradient(circle at 70% 70%, rgba(249,115,22,.18), transparent 55%);
      border-radius: 50%;
      filter: blur(2px);
      transform: rotate(12deg);
    }
    .hero__main > *{position:relative}
    .breadcrumbs{font-size:12px; color:var(--muted)}
    .breadcrumbs a{color:var(--muted)}
    .breadcrumbs a:hover{color:var(--text)}
    h1{
      margin:10px 0 10px;
      font-size: clamp(26px, 3.2vw, 40px);
      line-height:1.12;
      letter-spacing:-.3px;
    }
    .lead{
      margin:0 0 16px;
      color:var(--muted);
      font-size:16px;
      max-width: 72ch;
    }
    .hero__badges{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 10px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: rgba(29,78,216,.04);
      font-size:13px;
      color: #0b2f86;
    }
    .badge svg{width:16px; height:16px; fill:#0b2f86}
    .hero__actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top: 6px}
    .hint{font-size:12px; color:var(--muted); margin-top:10px}

    /* Form */
    .form{padding:18px}
    .form h3{margin:0 0 10px; font-size:18px; letter-spacing:-.2px}
    .form p{margin:0 0 14px; color:var(--muted); font-size:13px}
    .grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px}
    input, select, textarea{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      outline:none;
      font-size:14px;
    }
    input:focus, select:focus, textarea:focus{border-color: rgba(29,78,216,.45); box-shadow: 0 0 0 4px rgba(29,78,216,.10)}
    textarea{min-height:92px; resize:vertical}
    .form__row{margin-bottom:10px}
    .form__footer{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
      margin-top: 6px;
    }
    .consent{font-size:12px; color:var(--muted); max-width: 48ch}
    .small{font-size:12px; color:var(--muted)}

    /* Sections */
    section{padding:18px 0}
    .section__title{margin:0 0 10px; font-size:24px; letter-spacing:-.2px}
    .section__desc{margin:0 0 14px; color:var(--muted); max-width: 92ch}

    .cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
    .mini{
      padding:16px;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background:#fff;
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
    }
    .mini h4{margin:0 0 6px; font-size:16px}
    .mini p{margin:0; color:var(--muted); font-size:13px}
    .mini .icon{
      width:38px; height:38px; border-radius:14px;
      display:grid; place-items:center;
      background: rgba(29,78,216,.08);
      border:1px solid rgba(29,78,216,.14);
      margin-bottom:10px;
    }
    .mini .icon svg{width:18px; height:18px; fill:var(--blue)}

    .two{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:stretch}
    .box{
      padding:18px;
      border-radius: var(--radius-2);
      border:1px solid var(--line);
      background:#fff;
      box-shadow: 0 12px 26px rgba(15,23,42,.06);
    }
    .box h3{margin:0 0 10px; font-size:18px}
    .list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
    .li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px}
    .li svg{width:18px; height:18px; fill: var(--orange); flex:0 0 auto; margin-top:2px}

    /* Pricing */
    .pricing{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px}
    .price{
      padding:18px;
      border-radius: var(--radius-2);
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(29,78,216,.04), #fff 40%);
      box-shadow: 0 12px 28px rgba(15,23,42,.06);
    }
    .price h4{margin:0 0 8px; font-size:16px}
    .price .from{font-size:28px; font-weight:900; letter-spacing:-.5px; margin:0 0 6px}
    .price .from span{font-size:14px; font-weight:700; color:var(--muted); margin-left:6px}
    .price ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
    .price li{color:var(--muted); font-size:13px; display:flex; gap:10px; align-items:flex-start}
    .price li svg{width:16px; height:16px; fill: var(--blue); margin-top:2px; flex:0 0 auto}

    /* Steps */
    .steps{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px}
    .step{
      padding:14px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
    }
    .step .n{
      width:34px; height:34px; border-radius:14px;
      display:grid; place-items:center;
      background: rgba(249,115,22,.12);
      color: var(--orange-2);
      font-weight:900;
      margin-bottom:10px;
    }
    .step h4{margin:0 0 6px; font-size:14px}
    .step p{margin:0; color:var(--muted); font-size:12px}

    /* FAQ */
    details{
      border:1px solid var(--line);
      border-radius: 16px;
      background:#fff;
      padding:12px 14px;
      box-shadow: 0 10px 22px rgba(15,23,42,.05);
    }
    details + details{margin-top:10px}
    summary{
      cursor:pointer;
      font-weight:800;
      list-style:none;
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
    }
    summary::-webkit-details-marker{display:none}
    .chev{width:18px; height:18px; fill: var(--muted); transition: transform .15s ease; flex:0 0 auto}
    details[open] .chev{transform: rotate(180deg)}
    .faq__a{margin:10px 0 0; color:var(--muted); font-size:13px}

    /* Contact */
    .contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:stretch}
    .contact-card{
      padding:18px;
      border:1px solid var(--line);
      border-radius: var(--radius-2);
      background:#fff;
      box-shadow: 0 12px 26px rgba(15,23,42,.06);
    }
    .contact-row{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 0;
      border-bottom:1px dashed var(--line);
    }
    .contact-row:last-child{border-bottom:none}
    .contact-row svg{width:18px; height:18px; fill: var(--blue); margin-top:2px}
    .contact-row .k{font-size:12px; color:var(--muted); margin:0 0 2px}
    .contact-row .v{font-weight:800; margin:0}

    .foot{padding:18px 0 26px; color:var(--muted); font-size:12px}
    .foot__in{
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
      padding-top:16px;
      border-top:1px solid var(--line);
    }

    /* Mobile CTA bar */
    .mobilebar{
      position:fixed; left:0; right:0; bottom:0; z-index:60;
      padding:10px 12px;
      background: rgba(246,248,252,.86);
      backdrop-filter: blur(10px);
      border-top:1px solid var(--line);
      display:none;
    }
    .mobilebar__in{display:flex; gap:10px}
    .mobilebar .btn{flex:1}

    /* Responsive */
    @media (max-width: 980px){
      .hero__grid{grid-template-columns: 1fr}
      nav{display:none}
      .phone{display:none}
      .cards{grid-template-columns: 1fr 1fr}
      .pricing{grid-template-columns: 1fr}
      .steps{grid-template-columns: 1fr 1fr}
      .contact-grid{grid-template-columns: 1fr}
      .mobilebar{display:block}
      body{padding-bottom:74px}
    }
    @media (max-width: 560px){
      .cards{grid-template-columns: 1fr}
      .grid{grid-template-columns: 1fr}
      .steps{grid-template-columns: 1fr}
    }