@font-face { font-family: Poppins; src: url("assets/fonts/Poppins-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url("assets/fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url("assets/fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 900; font-display: swap; }
:root {
  --deep: #08243c;
  --blue: #0b73c8;
  --cyan: #42c8f5;
  --ice: #eef9ff;
  --mist: #f7fbfe;
  --night: #121923;
  --text: #53606d;
  --line: rgba(8, 36, 60, .14);
  --white: #ffffff;
  --orange: #ffb23d;
  --shadow: 0 24px 60px rgba(8, 36, 60, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Poppins, Arial, sans-serif; color: var(--text); background: var(--mist); line-height: 1.6; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 30; background: var(--deep); color: var(--white); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.top-strip { background: var(--deep); color: var(--ice); text-align: center; padding: .55rem 1rem; font-size: .9rem; }
.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .9rem clamp(1rem, 4vw, 3rem); background: rgba(247, 251, 254, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand img { width: 158px; height: auto; }
.site-nav { display: flex; justify-content: center; gap: clamp(.7rem, 2vw, 1.5rem); font-weight: 800; color: var(--night); }
.site-nav a { text-decoration: none; }
.menu-button { display: none; border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: .65rem .85rem; font-weight: 900; }
button, summary { font: inherit; cursor: pointer; }
.main-action, .order-link, .soft-action { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 8px; padding: .85rem 1.1rem; text-decoration: none; font-weight: 950; border: 0; }
.main-action, .order-link { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: var(--white); box-shadow: 0 14px 28px rgba(11, 115, 200, .25); }
.soft-action { background: var(--white); color: var(--deep); border: 1px solid var(--line); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem); min-height: 720px; padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); background: radial-gradient(circle at 86% 18%, rgba(66, 200, 245, .24), transparent 24rem), linear-gradient(135deg, var(--ice), var(--white)); }
.hero::before { content: ""; position: absolute; right: -10rem; top: -12rem; width: 38rem; height: 38rem; border-radius: 50%; background: rgba(66, 200, 245, .18); }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 .8rem; color: var(--blue); text-transform: uppercase; font-size: .78rem; font-weight: 950; letter-spacing: .08em; }
h1, h2, h3 { margin: 0 0 .75rem; color: var(--night); line-height: 1.08; letter-spacing: 0; }
h1 { font-size: clamp(2.8rem, 7vw, 3.5rem); max-width: 800px; }
h2 { font-size: clamp(2rem, 4vw, 3.05rem); }
h3 { font-size: 1.2rem; }
.hero-copy p { font-size: clamp(1.05rem, 2vw, 1.22rem); max-width: 720px; }
.action-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.hero-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 0; margin: 2rem 0 0; list-style: none; max-width: 650px; }
.hero-points li { padding: .8rem; border-radius: 8px; background: var(--white); border: 1px solid var(--line); font-weight: 800; color: var(--night); }
.hero-visual img { border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.icon-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.icon-strip article { display: grid; justify-items: center; gap: .55rem; padding: 1.2rem .8rem; background: var(--white); color: var(--night); font-weight: 850; text-align: center; }
.icon-strip img { width: 50px; height: 50px; object-fit: contain; }
.split-section, .feature-band, .steps-section, .price-section, .why-section, .faq-section { padding: clamp(3.8rem, 7vw, 6.5rem) clamp(1rem, 5vw, 5rem); }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; background: var(--white); }
.split-section video { width: 100%; border-radius: 8px; box-shadow: var(--shadow); background: var(--night); }
.feature-band, .price-section { background: linear-gradient(180deg, var(--ice), var(--mist)); }
.section-head { max-width: 900px; margin: 0 auto 2rem; text-align: center; }
.feature-grid, .steps-grid, .price-grid, .why-grid { display: grid; gap: 1rem; max-width: 1180px; margin: 0 auto; }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-grid, .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid article, .steps-grid article, .price-card, .why-grid article, .faq-list details { border-radius: 8px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 36px rgba(8, 36, 60, .08); padding: 1.25rem; }
.feature-grid img { width: 58px; height: 58px; object-fit: contain; margin-bottom: .8rem; }
.steps-grid img { width: 100%; aspect-ratio: 1 / .78; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
.steps-grid span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--orange); color: var(--night); font-weight: 950; margin-bottom: .7rem; }
.price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.price-card { position: relative; display: grid; grid-template-rows: auto auto auto auto auto auto 1fr auto; gap: .45rem; min-height: 540px; }
.price-card.is-featured { border: 2px solid var(--cyan); }
.deal-tag { width: fit-content; min-height: 1.85rem; border-radius: 8px; background: var(--orange); color: var(--night); padding: .35rem .6rem; font-size: .8rem; font-weight: 950; }
.empty-tag { visibility: hidden; }
.price-media { position: relative; display: grid; place-items: center; height: 170px; border-radius: 8px; background: radial-gradient(circle at center, var(--white), var(--ice)); overflow: hidden; }
.price-media img { max-height: 160px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(8, 36, 60, .16)); }
.price-media b { position: absolute; right: .65rem; top: .65rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--blue); color: var(--white); }
.price-value { color: var(--blue); font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; }
.per-unit { color: var(--text); font-weight: 800; }
.saving { color: var(--night); }
.saving b { color: var(--blue); font-size: 1.35rem; }
.price-card .order-link { align-self: end; margin-top: auto; }
.why-section { background: var(--white); }
.why-grid article { display: grid; align-content: start; min-height: 360px; }
.why-grid img { width: 82px; height: 82px; object-fit: contain; margin-bottom: .9rem; border-radius: 8px; }
.why-grid article:nth-child(3) img { width: 100%; height: 120px; object-fit: cover; }
.lifestyle-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); padding: clamp(3.8rem, 7vw, 6.5rem) clamp(1rem, 5vw, 5rem); background: var(--deep); color: var(--ice); }
.lifestyle-section h2, .lifestyle-section p { color: var(--ice); }
.lifestyle-section img { border-radius: 8px; box-shadow: var(--shadow); }
.faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: .8rem; }
.faq-list summary { color: var(--night); font-weight: 950; }
.faq-list p { margin-bottom: 0; }
.final-cta { margin: 0 clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); padding: clamp(2rem, 5vw, 4rem); border-radius: 8px; background: linear-gradient(135deg, var(--deep), var(--blue)); color: var(--white); text-align: center; }
.final-cta h2, .final-cta p { color: var(--white); }
.site-footer { display: grid; justify-items: center; gap: 1rem; padding: 2.5rem 1rem; background: var(--deep); color: var(--ice); text-align: center; }
.site-footer > img:first-child { width: 168px; height: auto; }
.payment-icons { width: min(306px, 90vw); height: auto; }
.site-footer div { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.site-footer a, .site-footer button, .cookie-bar button, .modal-close { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.08); color: inherit; padding: .65rem .85rem; text-decoration: none; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.legal-main {
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3.8rem, 7vw, 6.5rem) 0;
}
.legal-page .site-header { grid-template-columns: auto 1fr auto; }
.legal-page h1 {
  color: var(--night);
  font-size: clamp(2.4rem, 5vw, 4.3rem);
}
.legal-intro {
  font-size: 1.1rem;
  max-width: 760px;
}
.legal-main section {
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(8, 36, 60, .08);
}
.legal-main section h2 {
  font-size: clamp(1.35rem, 3vw, 2rem);
}
.cookie-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 30; display: flex; gap: .8rem; align-items: center; justify-content: center; padding: 1rem; border-radius: 8px; background: var(--night); color: var(--white); box-shadow: var(--shadow); }
.cookie-bar p { margin: 0; }
.modal-layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1rem; background: rgba(8, 36, 60, .68); }
[hidden] { display: none !important; }
.modal-card { width: min(640px, 100%); border-radius: 8px; background: var(--white); color: var(--text); padding: 1.25rem; box-shadow: var(--shadow); }
.modal-card h2 { margin-top: 2rem; }
.modal-close { float: right; color: var(--night); border-color: var(--line); background: var(--ice); }
@media (max-width: 1100px) {
  .site-header { grid-template-columns: auto auto 1fr; }
  .legal-page .site-header { grid-template-columns: 1fr; }
  .menu-button { display: inline-flex; justify-content: center; }
  .site-nav { display: none; grid-column: 1 / -1; justify-content: start; flex-wrap: wrap; }
  .site-nav.is-open { display: flex; }
  .header-action { display: none; }
  .hero, .split-section, .lifestyle-section { grid-template-columns: 1fr; }
  .feature-grid, .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hero { min-height: unset; }
  .hero-points, .icon-strip, .feature-grid, .steps-grid, .price-grid, .why-grid { grid-template-columns: 1fr; }
  .action-row, .cookie-bar { flex-direction: column; align-items: stretch; }
  .main-action, .soft-action, .order-link { width: 100%; }
  h1 { font-size: 2.7rem; }
}