:root{ --blue:#1f6f9f; --blue-dark:#124c70; --black:#141414; --charcoal:#232323; --cream:#f7f3ed; --white:#ffffff; --gray:#6f6f6f; --line:#ded8cf; --shadow:0 20px 50px rgba(0,0,0,.12); --radius:22px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--black); background:var(--cream); line-height:1.6; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .container{width:min(1120px,92%);margin:auto} .site-header{ position:sticky; top:0; z-index:50; background:rgba(247,243,237,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0} .brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase} .brand img{width:54px;height:54px;object-fit:contain} .nav{display:flex;align-items:center;gap:24px;font-weight:700} .nav a{opacity:.88} .nav a:hover{color:var(--blue)} .nav-cta{background:var(--blue);color:white!important;padding:10px 16px;border-radius:999px;opacity:1!important} .mobile-menu{display:none;background:transparent;border:0;font-size:28px} .hero{padding:80px 0 70px;background:radial-gradient(circle at top right, rgba(31,111,159,.18), transparent 42%)} .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:42px;align-items:center} .eyebrow{font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-size:.78rem;margin:0 0 8px} h1,h2,h3{line-height:1.08;margin:0 0 16px;color:var(--black)} h1{font-size:clamp(2.6rem,5vw,5rem);letter-spacing:-.055em} h2{font-size:clamp(2rem,3vw,3.15rem);letter-spacing:-.04em} h3{font-size:1.35rem} .hero-text{font-size:1.2rem;max-width:650px;color:#353535} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0} .btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:13px 20px; font-weight:900; border:2px solid transparent; cursor:pointer; transition:.2s ease; } .btn.primary{background:var(--blue);color:#fff} .btn.primary:hover{background:var(--blue-dark);transform:translateY(-1px)} .btn.secondary{border-color:var(--black);background:transparent} .btn.secondary:hover{background:var(--black);color:#fff} .btn.full{width:100%;margin-top:18px} .trust-row{display:flex;gap:10px;flex-wrap:wrap} .trust-row span{ background:white; border:1px solid var(--line); border-radius:999px; padding:9px 14px; font-weight:800; } .hero-card{ background:var(--black); color:white; padding:28px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; } .hero-card img{margin:auto;max-width:300px} .hero-card p{font-size:1.05rem} .hero-image{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); min-height:320px; background:var(--black); } .hero-image img{ width:100%; height:100%; min-height:320px; object-fit:cover; display:block; } .notice-bar{background:var(--black);color:#fff;padding:14px 0;font-size:.96rem} .section{padding:72px 0} .section.soft{background:#fff} .section-heading{text-align:center;max-width:760px;margin:0 auto 36px} .section-heading p{color:#484848} .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .product-card{ background:white; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:0 12px 32px rgba(0,0,0,.08); } .product-top{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px} .product-kicker{font-weight:900;color:var(--blue);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;margin:0 0 8px} .price{font-size:2.25rem;font-weight:900;margin:0;color:var(--blue)} .muted{color:var(--gray)} .small{font-size:.88rem} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;margin-top:18px} table{border-collapse:collapse;width:100%;font-size:.93rem;background:#fff} th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} th{background:#eef5f9;color:var(--black)} tr:last-child td{border-bottom:0} .bundle-note{font-weight:800;color:var(--charcoal)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .step span{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;background:var(--blue);color:#fff;border-radius:50%;font-weight:900;margin-bottom:14px} .split{display:grid;grid-template-columns:1fr .75fr;gap:32px;align-items:center} .delivery-list{font-size:1.2rem;font-weight:900;color:var(--blue-dark)} .storage-box{background:var(--black);color:white;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)} .storage-box h3{color:white} .order-form{ background:white; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); } .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} label{display:grid;gap:7px;font-weight:800} input,select,textarea{ width:100%; border:1px solid #cfc7bd; border-radius:14px; padding:13px 14px; font:inherit; background:#fff; } input:focus,select:focus{outline:3px solid rgba(31,111,159,.22);border-color:var(--blue)} .tax-box,.disclaimer-box{ margin-top:18px; border-radius:18px; padding:18px; border:1px solid var(--line); background:#f9f6f1; } .disclaimer-box{border-color:#d7b98d;background:#fff9ef} .checkbox-line{ display:flex; grid-template-columns:auto 1fr; gap:10px; align-items:flex-start; margin-top:14px; } .checkbox-line input{width:20px;height:20px;margin-top:3px} .form-message{font-weight:900;margin:18px 0 0} .form-message.error{color:#b3261e} .form-message.success{color:#176b3a} .checkout-btn{width:100%;font-size:1rem;margin-top:18px} .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} details{background:white;border:1px solid var(--line);border-radius:18px;padding:18px} summary{font-weight:900;cursor:pointer} .site-footer{background:var(--black);color:white;padding:42px 0} .footer-grid{display:grid;grid-template-columns:.7fr 1fr;gap:24px;align-items:center} .site-footer img{width:130px} .site-footer h3{color:white} @media (max-width:850px){ .mobile-menu{display:block} .nav{ display:none; position:absolute; top:83px; right:4%; left:4%; background:white; border:1px solid var(--line); border-radius:20px; padding:18px; flex-direction:column; box-shadow:var(--shadow); } .nav.open{display:flex} .hero-grid,.product-grid,.steps,.split,.form-grid,.faq-grid,.footer-grid{grid-template-columns:1fr} .hero{padding-top:44px} }