:root{
          --bg:#f5f7fb;--bg-alt:#fff;--primary:#0f3b6f;--primary-soft:#e3efff;
          --dark:#0b1f33;--muted:#6b7280;--border:#e1e7f0;
          --radius-lg:20px;--radius-md:12px;
          --shadow-soft:0 14px 35px rgba(15,23,42,.08)
        }
        *{box-sizing:border-box}
        body{
          margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
          background:var(--bg);color:var(--dark);line-height:1.6
        }
        img{display:block;max-width:100%}
        .page{max-width:1200px;margin:auto;padding:18px 16px 48px}

        /* HERO */
        .hero{
          margin-top:18px;
          background:radial-gradient(circle at top left,#e8f1ff,#fff);
          border-radius:var(--radius-lg);
          padding:28px;
          display:grid;
          grid-template-columns:1.2fr 1fr;
          gap:28px;
          box-shadow:var(--shadow-soft)
        }
        .hero h1{font-size:2.1rem; margin-bottom: 10px;}
        .hero .kicker{
          font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
          color:var(--primary);font-weight:600
        }
        .hero p{color:var(--muted)}
        .hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
        .hero-tags span{
          background:var(--primary-soft);
          padding:6px 12px;border-radius:999px;
          font-size:.78rem;font-weight:600
        }
        .hero-cta{display:flex;gap:12px;margin-top:14px}
        .btn-primary{
          background:var(--primary);color:#fff;border:none;
          border-radius:999px;padding:11px 20px;font-weight:600;cursor:pointer
        }
        .btn-outline{
          border:1px solid var(--border);
          background:transparent;border-radius:999px;
          padding:11px 18px;cursor:pointer
        }
        .product-image{
          background:#fff;border-radius:var(--radius-md);
          padding:18px;border:1px solid var(--border);
          display:flex;align-items:center;justify-content:center
        }
        .product-image img{
          width:100%;max-width:420px;
          aspect-ratio:1/1;object-fit:contain
        }

        /* SECTIONS */
        section{margin-top:44px}
        .section-kicker{
          font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
          color:var(--primary);font-weight:600
        }
        .section-title{font-size:1.45rem;margin:6px 0}
        .section-subtitle{font-size:.92rem;color:var(--muted)}

        .grid{
          margin-top:20px;
          display:grid;
          grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
          gap:20px
        }
        .card{
          background:#fff;border-radius:var(--radius-md);
          padding:18px;border:1px solid var(--border);
          box-shadow:0 8px 24px rgba(15,23,42,.05)
        }

        /* HEADS IMAGES */
        .head-img-container {
            background: #f9fafb;
            border-radius: var(--radius-md);
            margin-bottom: 15px;
            overflow: hidden;
            border: 1px solid #f0f0f0;
        }
        .head-img-container img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: contain;
            padding: 10px;
        }

        /* BEFORE AFTER GRID */
        .before-after-grid{
          margin-top:24px;
          display:grid;
          grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
          gap:24px
        }
        .ba-images{
          display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px
        }
        .ba-images div {
            text-align: center;
        }
        .ba-images img{
          width:100%;
          aspect-ratio:1/1;
          object-fit:cover;
          border-radius:8px;
          border: 1px solid var(--border);
        }
        .ba-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            color: var(--muted);
            margin-top: 5px;
            display: block;
        }

        /* SPECS */
        .spec-card{
          background:#fff;border-radius:var(--radius-lg);
          padding:20px;border:1px solid var(--border);
          box-shadow:var(--shadow-soft)
        }
        .spec-table{width:100%;border-collapse:collapse}
        .spec-table th,.spec-table td{
          padding:10px;border-bottom:1px solid var(--border)
        }
        .spec-table th{width:40%;color:var(--muted);text-align:left}

        /* FAQ */
        .faq-list { margin-top: 20px; }
        .faq-item { background: #fff; margin-bottom: 10px; padding: 15px; border-radius: var(--radius-md); border: 1px solid var(--border); }
        .faq-item summary { font-weight: 600; cursor: pointer; outline: none; }
        .faq-item p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

        @media(max-width:900px){
          .hero{grid-template-columns:1fr}
          .hero h1{font-size:1.7rem}
        }