:root {
  --bg: #F4F6F5;
  --ink: #0B2038;
  --accent: #D9541F;
  --accent2: #1D5C7A;
  --success: #3B7A57;
  --muted: #6B7280;
  --muted-2: #9AA3A1;
  --border: #DCE1DF;
  --white: #FFFFFF;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Public Sans',system-ui,sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; text-decoration:none; }
a:hover { opacity:.8; }

.nav { border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:20; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:20px 32px; max-width:1240px; margin:0 auto; }
.brand { font-family:'Archivo',sans-serif; font-weight:900; font-size:22px; letter-spacing:-0.02em; }
.brand .accent { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.nav-links a { font-size:15px; font-weight:500; }
.lang-toggle { display:flex; align-items:center; gap:6px; padding-left:12px; border-left:1px solid var(--border); }
.lang-is { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; padding:4px 8px; border-radius:4px; background:var(--ink); color:var(--bg); }
.lang-en { font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; padding:4px 8px; border-radius:4px; background:none; border:1px solid var(--border); color:var(--muted-2); cursor:not-allowed; }

.hero { padding:88px 32px 64px; display:flex; gap:64px; flex-wrap:wrap; align-items:center; max-width:1240px; margin:0 auto; }
.hero-copy { flex:1 1 420px; min-width:320px; }
.eyebrow { font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.04em; color:var(--accent); margin-bottom:20px; }
.h1 { font-family:'Source Serif 4',serif; font-weight:900; font-size:clamp(36px,4.6vw,58px); line-height:1.05; letter-spacing:normal; margin:0 0 28px; }
.lead { font-size:18px; line-height:1.6; color:#374151; max-width:520px; margin:0 0 36px; }
.cta-row { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.btn-primary { display:inline-block; background:var(--accent); color:#fff; font-weight:600; font-size:16px; padding:15px 28px; border-radius:6px; border:none; cursor:pointer; }
.btn-secondary { display:inline-block; border:1px solid var(--ink); color:var(--ink); font-weight:600; font-size:16px; padding:15px 28px; border-radius:6px; background:none; }
.trust-row { display:flex; gap:28px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
.hero-visual { flex:1 1 380px; min-width:300px; display:flex; justify-content:center; }

.how { background:var(--ink); padding:80px 0; }
.how-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px; max-width:1240px; margin-left:auto; margin-right:auto; padding:0 32px; }
.how-head h2 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(28px,3.2vw,38px); color:var(--bg); margin:0; max-width:520px; }
.how-head p { color:var(--muted-2); font-size:15px; max-width:340px; margin:0; }
.steps-row { display:flex; gap:20px; overflow-x:auto; padding:0 32px 12px; max-width:1240px; margin:0 auto; }
.step-card { min-width:200px; flex:0 0 200px; background:#132A42; border:1px solid #22405E; border-radius:8px; padding:24px; }
.step-num { font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:20px; font-weight:700; margin-bottom:18px; }
.step-title { font-family:'Source Serif 4',serif; font-weight:800; font-size:17px; color:var(--bg); margin-bottom:8px; }
.step-text { font-size:13.5px; line-height:1.5; color:var(--muted-2); }

.section-pad { padding:88px 32px 40px; max-width:1240px; margin:0 auto; }
.section-head-row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:12px; }
.section-head-row h2 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(28px,3.2vw,38px); margin:0; max-width:640px; }
.see-all { font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; white-space:nowrap; }
.section-lead { font-size:16px; color:var(--muted); max-width:640px; margin:0 0 44px; }
.page-head { max-width:1240px; margin:0 auto; padding:64px 32px 16px; }
.page-head h1 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(30px,3.4vw,42px); margin:0 0 14px; }
.page-head p { font-size:16px; color:var(--muted); max-width:640px; margin:0 0 48px; }

.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; max-width:1240px; margin:0 auto; padding:0 32px 96px; }
.card { border:1px solid var(--border); border-radius:10px; padding:28px; display:flex; flex-direction:column; gap:18px; background:var(--white); transition:border-color .15s ease; }
.card:hover { border-color:var(--ink); }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.tag-cat { font-size:12.5px; font-weight:600; color:var(--accent2); text-transform:uppercase; letter-spacing:.03em; }
.tag-sample { font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:3px 7px; }
.card-title { font-family:'Source Serif 4',serif; font-weight:800; font-size:19px; line-height:1.25; min-height:48px; }
.price-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-main { font-family:'Source Serif 4',serif; font-weight:900; font-size:26px; color:var(--ink); }
.price-old { font-size:14px; color:var(--muted-2); text-decoration:line-through; }
.savings-note { font-size:13px; color:var(--muted); line-height:1.5; }
.savings-note .amt { color:var(--success); font-weight:600; }
.progress-track { width:100%; height:8px; background:#EEF1F0; border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:4px; }
.progress-meta { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:8px; }
.countdown-row { display:flex; gap:8px; }
.count-box { flex:1; background:var(--bg); border-radius:6px; padding:8px 0; text-align:center; }
.count-box .num { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:17px; }
.count-box .lbl { font-size:10.5px; color:var(--muted-2); }
.delivery-note { font-size:12.5px; color:var(--muted); line-height:1.5; }
.card-cta { display:block; text-align:center; background:var(--ink); color:#fff; font-weight:600; font-size:15px; padding:13px 0; border-radius:6px; }
.card-cta:hover { opacity:.9; }
.footnote { font-size:12.5px; color:var(--muted-2); max-width:1240px; margin:-64px auto 64px; padding:0 32px; }

.broker { background:#EEF3F1; padding:80px 0; }
.broker-inner { display:flex; gap:56px; flex-wrap:wrap; align-items:center; max-width:1240px; margin:0 auto; padding:0 32px; }
.broker-copy { flex:1 1 380px; min-width:300px; }
.broker-copy h2 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(26px,2.8vw,34px); margin:0 0 20px; }
.broker-copy p { font-size:16px; line-height:1.65; color:#374151; margin:0 0 20px; max-width:480px; }
.broker-copy ul { font-size:14.5px; color:#374151; line-height:1.9; padding-left:20px; margin:0; }
.broker-card { flex:1 1 300px; min-width:280px; background:var(--ink); border-radius:10px; padding:32px; color:var(--bg); }
.code-chip { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:22px; color:var(--bg); background:#132A42; border:1px dashed #3D5A78; border-radius:6px; padding:12px 18px; letter-spacing:.04em; display:inline-block; }
.broker-row { display:flex; justify-content:space-between; font-size:14px; color:var(--muted-2); margin-bottom:10px; }

.referral { padding:88px 32px; max-width:1240px; margin:0 auto; }
.referral-inner { display:flex; gap:56px; flex-wrap:wrap; align-items:center; }
.referral-copy { flex:1 1 340px; min-width:280px; order:2; }
.referral-copy h2 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(26px,2.8vw,34px); margin:0 0 20px; }
.referral-copy p { font-size:16px; line-height:1.65; color:#374151; margin:0 0 20px; max-width:460px; }
.referral-steps { display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:#374151; }
.referral-steps .num { color:var(--accent); font-weight:700; }
.referral-visual { flex:1 1 340px; min-width:300px; order:1; }
.referral-card { background:var(--white); border:1px solid var(--border); border-radius:10px; padding:32px; }
.code-box { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:24px; background:var(--bg); border:1px dashed var(--muted-2); border-radius:6px; padding:14px 20px; letter-spacing:.04em; }
.copy-btn { font-size:14px; font-weight:600; padding:14px 18px; border-radius:6px; border:1px solid var(--ink); background:var(--white); color:var(--ink); cursor:pointer; }
.friend-row { display:flex; justify-content:space-between; align-items:center; font-size:14.5px; margin-bottom:8px; }
.mini-track { width:100%; height:6px; background:#EEF1F0; border-radius:3px; overflow:hidden; }
.mini-fill { height:100%; background:var(--success); border-radius:3px; }

.trust { background:var(--ink); padding:80px 0; }
.trust-inner { max-width:1240px; margin:0 auto; padding:0 32px; }
.trust-inner h2 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(26px,2.8vw,34px); color:var(--bg); margin:0 0 36px; max-width:560px; }
.trust-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent); margin-bottom:16px; }
.trust-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.trust-item { display:flex; gap:14px; align-items:flex-start; padding:20px; background:#132A42; border:1px solid #22405E; border-radius:8px; }
.trust-item .txt { font-size:14.5px; line-height:1.5; color:#E5E9E8; }

.site-footer { max-width:1240px; margin:0 auto; padding:64px 32px 48px; }
.footer-top { display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; margin-bottom:48px; }
.footer-brand-name { font-family:'Archivo',sans-serif; font-weight:900; font-size:20px; margin-bottom:14px; }
.footer-desc { font-size:14px; color:var(--muted); line-height:1.6; max-width:280px; }
.footer-badges { display:flex; gap:16px; flex-wrap:wrap; }
.badge { display:flex; align-items:center; gap:10px; font-size:13.5px; color:#374151; border:1px solid var(--border); border-radius:6px; padding:12px 16px; }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--muted-2); }

.nav-narrow .nav-inner { max-width:1080px; }
.back-row { max-width:1080px; margin:0 auto; padding:56px 32px 24px; }
.back-link { font-size:13.5px; color:var(--muted); font-weight:600; }
.detail-hero { max-width:1080px; margin:0 auto; padding:0 32px 72px; display:flex; gap:56px; flex-wrap:wrap; }
.detail-image { flex:1 1 380px; min-width:300px; }
.detail-image-box { background:var(--ink); border-radius:10px; padding:48px; display:flex; align-items:center; justify-content:center; }
.detail-image-caption { font-size:12.5px; color:var(--muted-2); margin-top:12px; text-align:center; }
.detail-info { flex:1 1 380px; min-width:300px; }
.detail-cat { font-size:12.5px; font-weight:600; color:var(--accent2); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
.detail-info h1 { font-family:'Source Serif 4',serif; font-weight:800; font-size:clamp(28px,3vw,36px); line-height:1.1; margin:0 0 20px; }
.detail-price-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.detail-price-main { font-family:'Source Serif 4',serif; font-weight:900; font-size:32px; }
.detail-price-old { font-size:15px; color:var(--muted-2); text-decoration:line-through; }
.detail-savings { font-size:14px; color:var(--muted); margin-bottom:24px; }
.detail-progress-wrap { margin-bottom:8px; }
.detail-countdown { display:flex; gap:8px; margin:22px 0; }
.join-btn { width:100%; background:var(--ink); color:#fff; font-weight:600; font-size:16px; padding:16px 0; border:none; border-radius:6px; cursor:pointer; }
.join-success { width:100%; background:#EAF3EC; border:1px solid var(--success); color:#245B3B; font-weight:600; font-size:15px; padding:16px; border-radius:6px; text-align:center; display:none; }
.terms-note { font-size:12.5px; color:var(--muted); margin-top:14px; }
.detail-sections { max-width:1080px; margin:0 auto; padding:0 32px 72px; display:flex; gap:56px; flex-wrap:wrap; }
.detail-sections h2 { font-family:'Source Serif 4',serif; font-weight:800; font-size:20px; margin:0 0 18px; }
.detail-sections ul { font-size:14.5px; line-height:1.9; color:#374151; padding-left:20px; margin:0; }
.detail-sections p { font-size:14.5px; line-height:1.7; color:#374151; margin:0 0 16px; }
.detail-col { flex:1 1 320px; min-width:280px; }
.mini-footer { border-top:1px solid var(--border); padding:28px 0; }
.mini-footer-inner { max-width:1080px; margin:0 auto; padding:0 32px; font-size:12.5px; color:var(--muted-2); }

@media (max-width:640px){
  .hero, .section-pad, .referral, .page-head, .grid-3, .footnote { padding-left:20px; padding-right:20px; }
}
