:root{
      --bg: #ffffff;
      --panel: #f8f9fa;
      --muted: #555;
      --primary: #0073e6;
      --accent: #00b894;
      --text: #222;
      --max: 1200px;
      --radius: 16px;
      --shadow: 0 4px 16px rgba(0,0,0,.08);
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0; color:var(--text); background:var(--bg);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
      line-height:1.55;
    }
    a{color:var(--primary); text-decoration:none}
    a:hover{text-decoration:underline}
    .container{max-width:var(--max); margin-inline:auto; padding:0 20px}


    /* Header */
    header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(255,255,255,.9); border-bottom:1px solid rgba(0,0,0,.06)}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px; color:var(--text)}
    .brand .logo{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:var(--shadow)}
    .brand span{font-size:18px}
    nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0; align-items:center}
    nav a{color:var(--text); opacity:.9}
    .cta{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--primary), #3399ff); color:#fff; font-weight:700; border:0; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow)}
    .cta:hover{transform:translateY(-1px); text-decoration:none}
    .tel{white-space:nowrap}

    /* Hero */
    .hero{padding:64px 0 40px}
    .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
    .h1{font-size:clamp(28px, 5vw, 46px); line-height:1.12; margin:6px 0 12px}
    .subtitle{color:var(--muted); max-width:60ch}
    .badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
    .badge{background:#f1f3f5; border:1px solid #e9ecef; padding:8px 12px; border-radius:999px; font-size:14px; color:var(--text)}
    .hero-card{background:var(--panel); border:1px solid #e9ecef; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
    .hero-card h3{margin:8px 0 10px}

    /* Sections */
    section{padding:56px 0}
    h2{font-size:26px; margin:0 0 18px}
    .kicker{display:inline-block; font-size:13px; color:var(--muted); letter-spacing:.2em; text-transform:uppercase}

    /* Services */
    .grid{display:grid; gap:18px}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .card{background:#fff; border:1px solid #e9ecef; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .card h3{margin:8px 0 6px; font-size:20px}
    .card p{margin:0; color:var(--muted)}
    .icon{width:28px; height:28px}

    /* Packs */
    .pack{display:flex; flex-direction:column; gap:12px}
    .price{font-size:28px; font-weight:800; color:var(--primary)}
    .muted{color:var(--muted)}

    /* Zone */
    .pill{display:inline-block; padding:10px 12px; border-radius:999px; background:#f1f3f5; border:1px solid #e9ecef; color:var(--text)}

    /* FAQ */
    details{border-radius:12px; border:1px solid #e9ecef; background:#fafafa; padding:14px 16px}
    details+details{margin-top:10px}
    summary{cursor:pointer; font-weight:600}
    details p{margin:10px 0 0; color:var(--muted)}

    /* Contact */
    form{display:grid; gap:12px}
    input, textarea, select{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ddd; background:#fff; color:var(--text)}
    label{font-size:14px; color:var(--muted)}
    .inline{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .note{font-size:13px; color:var(--muted)}

    /* Footer */
    footer{padding:28px 0 48px; color:var(--muted); border-top:1px solid #e9ecef; background:#f8f9fa}
    .footgrid{display:grid; gap:18px; grid-template-columns:2fr 1fr 1fr}
    .copyright{margin-top:18px; font-size:13px}

    .notice {
      margin: 1rem 0 1.25rem;
      padding: .9rem 1rem;
      border-radius: .5rem;
      font-weight: 500;
      line-height: 1.4;
      border: 1px solid transparent;
    }
    .notice.success {
      background: #ecfdf5;
      color: #065f46;
      border-color: #a7f3d0;
    }
    .notice.error {
      background: #fef2f2;
      color: #991b1b;
      border-color: #fecaca;
    }
    /* Responsive */
    @media (max-width: 900px){
      .hero-grid, .grid-3{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
      .inline{grid-template-columns:1fr}
      nav ul{display:none}
    }