/* ─── SECTION BG FALLBACKS (system v2) ─── */ .stats{background:var(--s0);border-bottom:1px solid var(--border-dk)} .forwhom{background:var(--s2)} .mods{background:var(--s2)} .quiz-section{background:var(--s2)} .testi{background:var(--s0)} .faq-section{background:var(--s0)} .milestones{background:var(--s0)} .pricing{background:var(--s1)} .bonuses{background:var(--s0)} .cta{background:var(--s1);overflow:hidden} .modules-overview{background:var(--s-light)} .detail{background:var(--s1)} .team{background:var(--s-light)} .guests{background:var(--s-light);border-top:1px solid rgba(27,42,68,.08)} /* ─── CONSISTENT SECTION PADDING ─── */ .stats{padding:72px 0} .forwhom,.trust,.mods,.quiz-section,.testi, .faq-section,.milestones,.pricing,.bonuses{padding:100px 0} .modules-overview,.detail{padding:90px 0} .team,.guests{padding:80px 0} .cta{padding:0} /* ═══════════════════════════════════════ JOURNEY / TRANSFORMATION SECTION Warm light background, dark readable cards ═══════════════════════════════════════ */ .journey{ padding:100px 0; background:#F0ECE6; scroll-margin-top:83px} .journey .ey{ color:#8A7060; letter-spacing:.22em} .journey .hd{ font-family:var(--font-d); font-size:var(--ts-2xl); font-weight:800; color:#1A2840; line-height:1.05} .journey .hd span{color:#7B1D27 !important} .journey-lead{ font-size:17px; line-height:1.75; color:#3A4860; max-width:600px; margin-top:16px} /* Grid layout */ .journey-track{ display:grid; grid-template-columns:1fr 56px 1fr; gap:0; margin-top:56px; align-items:center} /* BEFORE card — dark burgundy, cream text */ .journey-before{ background:#3D1219; border:1.5px solid rgba(155,38,50,.5); border-radius:20px; padding:36px 32px} /* AFTER card — dark forest green, mint text */ .journey-after{ background:#0F3320; border:1.5px solid rgba(30,120,70,.5); border-radius:20px; padding:36px 32px} /* Card headings */ .jb-head{ font-family:var(--font-d); font-size:17px;font-weight:800; letter-spacing:.08em;text-transform:uppercase; margin-bottom:20px; display:flex;align-items:center;gap:10px} .jb-head.before-head{color:#F4C0C6} .jb-head.after-head{color:#7FEBB8} /* List items */ .journey-list{list-style:none;display:flex;flex-direction:column;gap:12px} .journey-list li{ display:flex;align-items:flex-start;gap:10px; font-size:14.5px;line-height:1.65} .journey-before .journey-list li{ color:rgba(255,220,222,.88)} .journey-after .journey-list li{ color:rgba(200,242,218,.88)} .journey-before .journey-list li::before{ content:'✗';color:#F4A0A8;font-weight:700;flex-shrink:0;margin-top:2px} .journey-after .journey-list li::before{ content:'✓';color:#7FEBB8;font-weight:700;flex-shrink:0;margin-top:2px} /* Arrow divider */ .journey-arrow{ display:flex;flex-direction:column; align-items:center;justify-content:center; font-size:28px;color:#7B1D27;gap:8px} .journey-arrow span{ font-size:9px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#8A7060; writing-mode:vertical-lr} /* Bottom metric card */ .journey-bottom{ margin-top:40px;padding:28px 36px; border-radius:20px; background:#ffffff; border:1px solid rgba(27,42,68,.12); box-shadow:0 4px 20px rgba(27,42,68,.08); display:flex;align-items:center; justify-content:space-between;gap:24px;flex-wrap:wrap} .jb-text{ font-family:var(--font-d); font-size:clamp(18px,2.5vw,30px); font-weight:700;color:#1A2840;line-height:1.2} .jb-sub{font-size:13px;color:#6A80A0;margin-top:4px} /* Responsive */ @media(max-width:768px){ .journey-track{grid-template-columns:1fr;gap:16px} .journey-arrow{flex-direction:row;font-size:22px} .journey-arrow span{writing-mode:horizontal-tb} .journey-bottom{flex-direction:column;text-align:center}} /* ═══════════════════════════════════════ DESIGN SYSTEM v2 — Senior UI/UX Team Clean tokens, consistent rhythm ═══════════════════════════════════════ */ :root{ /* ── Surface hierarchy (4 levels) ── */ --s0: #0B1220; /* deepest: page bg, footer */ --s1: #152033; /* dark: hero, modules, quiz, pricing, cta */ --s2: #1C2D47; /* mid-dark: forwhom, mods, bonuses, faq */ --s3: #253858; /* mid: stats, milestones */ --s-light: #DDE4EE; /* light: team, guests (pale blue-grey) */ /* ── Accent: Burgundy ── */ --accent: #7B1D27; /* primary action, trust section */ --accent-lt: #9B2632; /* hover state */ --accent-dk: #561319; /* trust bg, pressed */ /* ── Gold: warmth & highlight ── */ --gold: #C9A84C; /* accent for stats, unlock badges */ --gold-lt: #E0BF78; /* hover / light variant */ --gold-bg: rgba(201,168,76,.10); /* ── Text hierarchy (4 levels) ── */ --t-primary: #F0EBE0; /* headlines, key labels */ --t-secondary: rgba(230,225,215,.80); /* body copy */ --t-tertiary: rgba(200,210,225,.60); /* captions, meta */ --t-muted: rgba(180,195,215,.42); /* placeholders, disabled */ /* ── Light surface text ── */ --lt-primary: #1A2840; --lt-secondary: #2E4060; --lt-muted: #6A80A0; /* ── Semantic borders ── */ --border-dk: rgba(240,235,224,.10); --border-gold: rgba(201,168,76,.22); --border-accent:rgba(123,29,39,.40); /* ── Legacy aliases (keep working) ── */ --navy: var(--s1); --navy-d: var(--s0); --navy-m: var(--s2); --burg: var(--accent); --burg-m: var(--accent); --burg-l: var(--accent-lt); --cream: var(--gold-lt); --cream-l: var(--t-primary); --cream-p: var(--s-light); --slate: #7A8FA3; --slate-l: #A2B4C4; --slate-bg: #7A8FA3; --white: #ffffff; --t60: var(--t-secondary); --t40: var(--t-tertiary); --t25: var(--t-muted); --border-soft: var(--border-dk); --border-cream:var(--border-gold); /* ── Type scale (8 steps) ── */ --ts-xs: 11px; /* labels, badges */ --ts-sm: 13px; /* captions, meta */ --ts-base: 15px; /* body copy */ --ts-md: 17px; /* lead / large body */ --ts-lg: 22px; /* card titles */ --ts-xl: clamp(28px,3.5vw,40px); /* section subheads */ --ts-2xl: clamp(36px,5vw,64px); /* section headings */ --ts-3xl: clamp(52px,7vw,96px); /* hero display */ /* ── Line-height scale (4 steps) ── */ --lh-tight: 1.15; --lh-snug: 1.45; --lh-normal: 1.65; --lh-loose: 1.80; /* ── Spacing unit (4px grid) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ── Motion ── */ --ease: cubic-bezier(.22,1,.36,1); --ease-in: cubic-bezier(.4,0,1,1); --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 500ms; /* ── Fonts ── */ --font-d: 'Barlow Condensed',sans-serif; --font-b: 'Barlow',sans-serif; --font-ui: 'Barlow',sans-serif; /* ── Radius ── */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill:999px; } /* ─── GLOBAL RESET + TYPOGRAPHY ─── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px; -webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:var(--font-b); background:var(--s0); color:var(--t-secondary); font-size:var(--ts-base); line-height:var(--lh-normal); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} /* Type hierarchy — applied globally */ h1,h2,h3,h4,h5{ font-family:var(--font-d); font-weight:800; line-height:var(--lh-tight); color:var(--t-primary)} p{ font-family:var(--font-b); line-height:var(--lh-normal); color:var(--t-secondary)} strong{color:var(--t-primary);font-weight:700} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* Eyebrows / labels */ .ey,.eyebrow{ display:block; font-family:var(--font-b); font-size:var(--ts-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--t-tertiary); margin-bottom:var(--sp-3)} /* Section headings */ .hd{ font-family:var(--font-d); font-size:var(--ts-2xl); font-weight:800; line-height:var(--lh-tight); letter-spacing:-.01em; color:var(--t-primary)} .hd .hl{color:var(--gold-lt)} /* Lead text */ .lead{ font-size:var(--ts-md); font-weight:300; line-height:var(--lh-loose); color:var(--t-secondary); max-width:620px; margin-top:var(--sp-5)} /* Branded selection */ ::selection{background:rgba(123,29,39,.4);color:var(--t-primary)} /* Layout container */ .w{max-width:1160px;margin:0 auto;padding:0 var(--sp-12)} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:var(--sp-2); padding:var(--sp-4) var(--sp-8); border-radius:var(--r-pill); font-family:var(--font-d); font-size:var(--ts-base); font-weight:700; letter-spacing:.05em; text-transform:uppercase; transition:transform var(--dur-fast) var(--ease), background var(--dur-base), box-shadow var(--dur-base); cursor:pointer;text-decoration:none;border:none;outline:none} .btn:hover{transform:translateY(-2px)} .btn:active{transform:scale(.97)} .btn-r{background:var(--accent);color:var(--white); box-shadow:0 4px 16px rgba(123,29,39,.4)} .btn-r:hover{background:var(--accent-lt);box-shadow:0 6px 22px rgba(123,29,39,.5)} .btn-cr{ border:1.5px solid var(--border-gold); color:var(--t-primary);background:transparent} .btn-cr:hover{background:var(--gold-bg);border-color:var(--gold)} /* Reveal animation */ .rv{opacity:0;transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)} .rv.in{opacity:1;transform:none} .rv:nth-child(2){transition-delay:90ms} .rv:nth-child(3){transition-delay:170ms} .rv:nth-child(4){transition-delay:250ms} /* Focus */ *:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} /* Skip nav */ .skip-nav{position:absolute;top:-100px;left:16px;z-index:9999; padding:10px 20px;border-radius:var(--r-sm); background:var(--gold-lt);color:var(--s0); font-weight:700;font-size:var(--ts-sm);text-decoration:none} .skip-nav:focus{top:8px} /* ─── SECTION BACKGROUNDS — Visual Rhythm ─── */ /* Hero: s1 (dark navy) */ .hero{background:var(--s1)} /* Stats: s0 (deepest) */ .stats{background:var(--s0);border-bottom:1px solid var(--border-dk)} /* ForWhom: s2 (mid-dark) */ .forwhom{background:var(--s2)} /* Journey: s-light → inverted palette */ .journey{background:#F0ECE6} /* Trust: accent-dk (deep burgundy) */ .trust{background:var(--accent-dk);position:relative;overflow:hidden} .trust::before{content:'';position:absolute;inset:0; background:radial-gradient(ellipse 70% 100% at 50% 50%, rgba(155,38,50,.3) 0%,transparent 70%)} /* Course overview: s-light */ .modules-overview{background:var(--s-light)} /* Detail: s1 */ .detail{background:var(--s1)} /* Mods: s2 */ .mods{background:var(--s2)} /* Milestones: s0 */ .milestones{background:var(--s0)} /* Quiz: s2 */ .quiz-section{background:var(--s2)} /* Team: s-light */ .team{background:var(--s-light)} /* Guests: s-light */ .guests{background:var(--s-light);border-top:1px solid rgba(27,42,68,.08)} /* Testi: s0 */ .testi{background:var(--s0)} /* Pricing: s1 */ .pricing{background:var(--s1)} /* FAQ: s0 */ .faq-section{background:var(--s0)} /* CTA: s1 */ .cta{background:var(--s1)} /* Bonuses: s0 */ .bonuses{background:var(--s0)} /* Footer: s0 */ footer{background:var(--s0);border-top:2px solid var(--border-gold)} /* ─── SECTION EYEBROW OVERRIDES for light sections ─── */ .modules-overview .ey,.team .ey,.guests .ey{color:var(--lt-muted)} .modules-overview .hd,.team .hd,.guests .hd{color:var(--lt-primary)} .modules-overview p.lead{color:var(--lt-secondary)} /* ─── STATS COUNTER ─── */ .stats-grid{display:grid;grid-template-columns:repeat(5,1fr); gap:0;padding:var(--sp-16) 0} .stat-card{padding:var(--sp-10) var(--sp-6);text-align:center; border-right:1px solid var(--border-dk); transition:background var(--dur-base)} .stat-card:hover{background:rgba(255,255,255,.03)} .stat-card:last-child{border-right:none} .stat-num{ font-family:var(--font-d); font-size:clamp(40px,5vw,64px); font-weight:800; color:var(--gold-lt); line-height:1;display:block} .stat-suffix{color:var(--gold);font-size:.65em} .stat-label{ font-size:var(--ts-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--t-tertiary); margin-top:var(--sp-2); line-height:var(--lh-snug)} @media(max-width:800px){ .stats-grid{grid-template-columns:repeat(3,1fr)} .stat-card:nth-child(4){border-right:1px solid var(--border-dk)}} /* ─── TRUST SECTION ─── */ .trust .ey{color:rgba(240,235,224,.5)} .trust .hd{color:var(--t-primary)} .trust-layout{display:grid;grid-template-columns:1fr 1fr; gap:0;margin-top:var(--sp-12)} .trust-person{padding:var(--sp-12) var(--sp-11); border-right:1px solid rgba(255,255,255,.12)} .trust-person:last-child{border-right:none} .tp-creds{list-style:none;margin-top:var(--sp-5); display:flex;flex-direction:column;gap:0} .tp-creds li{ font-family:var(--font-b); font-size:var(--ts-sm); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--t-secondary); padding:var(--sp-3) 0; border-bottom:1px solid rgba(255,255,255,.08); line-height:var(--lh-snug)} .tp-creds li:last-child{border-bottom:none} .tp-name{ font-family:var(--font-d); font-size:clamp(28px,3.5vw,42px); font-weight:800; line-height:var(--lh-tight); color:var(--t-primary); margin-top:var(--sp-3)} .tp-photo{width:130px;height:130px;border-radius:50%; margin-bottom:var(--sp-4); object-fit:cover;object-position:center top; border:3px solid rgba(255,255,255,.2); box-shadow:0 6px 24px rgba(0,0,0,.35)} .tp-li{display:inline-flex;align-items:center;gap:var(--sp-2); margin-top:var(--sp-5); padding:var(--sp-3) var(--sp-5); border-radius:var(--r-pill); border:1.5px solid rgba(255,255,255,.2); color:var(--t-secondary); font-size:var(--ts-sm);font-weight:600; text-decoration:none;transition:all var(--dur-base)} .tp-li:hover{background:rgba(10,102,194,.25); border-color:rgba(91,155,213,.5);color:var(--t-primary)} @media(max-width:1024px){ .trust-layout{grid-template-columns:1fr} .trust-person{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)} .trust-person:last-child{border-bottom:none}} /* ─── FORWHOM CARDS ─── */ .fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);margin-top:var(--sp-14)} .fw-card{ padding:var(--sp-9) var(--sp-8); border-radius:var(--r-lg); background:rgba(255,255,255,.04); border:1px solid var(--border-dk); display:flex;gap:var(--sp-5);align-items:flex-start; transition:border-color var(--dur-base),transform var(--dur-base) var(--ease)} .fw-card:hover{border-color:var(--border-gold);transform:translateY(-4px)} .fw-icon{width:52px;height:52px;border-radius:var(--r-md);flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:24px} .fw-icon.i1{background:rgba(123,29,39,.28);border:1px solid rgba(123,29,39,.4)} .fw-icon.i2{background:rgba(122,143,163,.2);border:1px solid rgba(122,143,163,.3)} .fw-icon.i3{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.2)} .fw-icon.i4{background:rgba(10,102,194,.18);border:1px solid rgba(10,102,194,.28)} .fw-icon.i5{background:rgba(50,180,100,.12);border:1px solid rgba(50,180,100,.22)} .fw-icon.i6{background:rgba(200,140,60,.12);border:1px solid rgba(200,140,60,.22)} .fw-title{ font-family:var(--font-d); font-size:var(--ts-lg);font-weight:700; color:var(--t-primary);margin-bottom:var(--sp-2)} .fw-desc{font-size:var(--ts-base);line-height:var(--lh-normal);color:var(--t-secondary)} .fw-NOT{margin-top:var(--sp-14);padding:var(--sp-9) var(--sp-10); border-radius:var(--r-lg); background:rgba(255,255,255,.025); border:1.5px dashed var(--border-dk)} .fw-NOT-title{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:700; color:var(--t-muted);margin-bottom:var(--sp-4)} .fw-NOT-list{display:flex;flex-wrap:wrap;gap:var(--sp-3)} .fw-NOT-tag{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill); font-size:var(--ts-sm);color:var(--t-muted); background:rgba(255,255,255,.03); border:1px solid var(--border-dk)} @media(max-width:768px){.fw-grid{grid-template-columns:1fr}} /* ─── JOURNEY / TRANSFORMATION ─── */ .journey-before{ background:#3D1219; border:1.5px solid rgba(155,38,50,.45); border-radius:var(--r-lg); padding:var(--sp-9) var(--sp-8)} .journey-after{ background:#0F3320; border:1.5px solid rgba(30,120,70,.45); border-radius:var(--r-lg); padding:var(--sp-9) var(--sp-8)} .jb-head{ font-family:var(--font-d); font-size:var(--ts-lg);font-weight:800; letter-spacing:.06em;text-transform:uppercase; margin-bottom:var(--sp-5); display:flex;align-items:center;gap:var(--sp-3); line-height:var(--lh-tight)} .jb-head.before-head{color:#ff8a8a} .jb-head.after-head{color:#7eedb0} .journey-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)} .journey-list li{ display:flex;align-items:flex-start;gap:var(--sp-3); font-size:var(--ts-base);line-height:var(--lh-normal)} .journey-before .journey-list li{color:rgba(255,220,220,.90);font-size:14.5px;line-height:1.65} .journey-after .journey-list li{color:rgba(200,240,215,.90);font-size:14.5px;line-height:1.65} .journey-before .journey-list li::before{ content:'✗';color:#ff7070;font-weight:700;flex-shrink:0;margin-top:2px} .journey-after .journey-list li::before{ content:'✓';color:#4ade80;font-weight:700;flex-shrink:0;margin-top:2px} .journey-bottom{ margin-top:var(--sp-10); padding:var(--sp-7) var(--sp-9); border-radius:var(--r-lg); background:#ffffff; border:1px solid rgba(27,42,68,.12); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap} .jb-text{font-family:var(--font-d);font-size:var(--ts-xl);font-weight:700; color:var(--t-primary);line-height:var(--lh-tight)} .jb-sub{font-size:var(--ts-sm);color:var(--t-tertiary);margin-top:var(--sp-1)} /* ─── TESTIMONIALS ─── */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-14)} .tc{padding:var(--sp-9) var(--sp-8);border-radius:var(--r-lg); background:var(--s2); border:1px solid var(--border-dk); display:flex;flex-direction:column; transition:border-color var(--dur-base),transform var(--dur-base) var(--ease)} .tc:hover{transform:translateY(-4px);border-color:var(--border-gold)} .tc-stars{display:flex;gap:3px;margin-bottom:var(--sp-4)} .tc-star,.tc-stars{color:var(--gold);font-size:16px} .tc-text{font-size:var(--ts-base);line-height:var(--lh-loose); color:var(--t-secondary);font-style:italic;flex:1;margin-bottom:var(--sp-6)} .tc-text::before{content:'"';font-family:var(--font-d);font-size:52px; color:var(--gold);line-height:.4;display:block;margin-bottom:var(--sp-3);font-style:normal} .tc-author{display:flex;align-items:center;gap:var(--sp-4); padding-top:var(--sp-5);border-top:1px solid var(--border-dk)} .tc-name{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:700;color:var(--t-primary)} .tc-meta{font-size:var(--ts-xs);color:var(--t-tertiary);margin-top:2px} .tc-result{margin-top:4px;display:inline-block;font-size:var(--ts-xs);font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:3px 12px;border-radius:var(--r-pill); background:rgba(74,222,128,.1);color:#4ade80} @media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.testi-grid{grid-template-columns:1fr}} /* ─── TEAM CARDS — light section ─── */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7);margin-top:var(--sp-12)} .team-card{border-radius:var(--r-xl);overflow:hidden; background:var(--white); border:1px solid rgba(27,42,68,.10); box-shadow:0 2px 16px rgba(27,42,68,.08); display:flex;flex-direction:column; transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base)} .team-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(27,42,68,.18)} .team-photo-wrap{width:100%;overflow:hidden;position:relative;flex-shrink:0} .team-photo-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px; background:linear-gradient(transparent,rgba(255,255,255,.95))} .team-photo{width:100%;height:auto;display:block; transition:transform var(--dur-slow) var(--ease)} .team-card:hover .team-photo{transform:scale(1.04)} .team-body{padding:var(--sp-6) var(--sp-7) var(--sp-7);display:flex;flex-direction:column;flex:1} .team-name{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:800; color:var(--lt-primary);margin-bottom:4px;line-height:var(--lh-tight)} .team-role{font-size:var(--ts-xs);font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-3)} .team-bio{font-size:var(--ts-sm);line-height:var(--lh-normal); color:var(--lt-secondary);margin-bottom:var(--sp-5);flex:1} .team-li{display:inline-flex;align-items:center;gap:var(--sp-2); padding:var(--sp-2) var(--sp-5);border-radius:var(--r-pill);align-self:flex-start; border:1.5px solid rgba(10,102,194,.3);color:#0a66c2; font-size:var(--ts-xs);font-weight:700;letter-spacing:.05em; transition:all var(--dur-fast);text-decoration:none;background:rgba(10,102,194,.04)} .team-li:hover{background:rgba(10,102,194,.12);border-color:#0a66c2;transform:translateY(-1px)} .team-li svg{flex-shrink:0} @media(max-width:768px){.team-grid{grid-template-columns:1fr}} /* ─── GUEST CARDS — light section ─── */ .guests-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10); margin-top:var(--sp-11);max-width:820px;margin-left:auto;margin-right:auto} .guest-card{display:flex;align-items:center;gap:var(--sp-7); padding:var(--sp-8) var(--sp-9);border-radius:var(--r-lg); background:var(--white);border:1px solid rgba(27,42,68,.10); box-shadow:0 2px 14px rgba(27,42,68,.08); transition:transform var(--dur-base),box-shadow var(--dur-base)} .guest-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(27,42,68,.15)} .guest-photo{width:96px;height:96px;border-radius:50%;flex-shrink:0; object-fit:cover;object-position:top; border:3px solid rgba(27,42,68,.12);box-shadow:0 4px 14px rgba(0,0,0,.12)} .guest-name{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:700; color:var(--lt-primary);margin-bottom:4px} .guest-role{font-size:var(--ts-sm);line-height:var(--lh-normal);color:var(--lt-secondary)} @media(max-width:600px){.guests-grid{grid-template-columns:1fr}} /* ─── FAQ ─── */ .faq-sticky-title{font-family:var(--font-d);font-size:var(--ts-xl); font-weight:800;line-height:var(--lh-tight);margin-bottom:var(--sp-4)} .faq-sticky-text{font-size:var(--ts-base);color:var(--t-secondary); line-height:var(--lh-normal);margin-bottom:var(--sp-7)} .faq-contact-cta{display:inline-flex;align-items:center;gap:var(--sp-3); padding:var(--sp-3) var(--sp-6);border-radius:var(--r-pill); border:1.5px solid var(--border-gold);color:var(--gold-lt); font-size:var(--ts-sm);font-weight:600;text-decoration:none; transition:all var(--dur-base)} .faq-contact-cta:hover{background:var(--gold-bg);border-color:var(--gold)} .faq-list{display:flex;flex-direction:column;gap:2px;border-radius:var(--r-lg); overflow:hidden;border:1px solid var(--border-dk)} .faq-item{background:rgba(255,255,255,.025); border-bottom:1px solid rgba(255,255,255,.05)} .faq-item:last-child{border-bottom:none} .faq-q{display:flex;align-items:center;justify-content:space-between; padding:var(--sp-6) var(--sp-7);cursor:pointer; transition:background var(--dur-fast);user-select:none;gap:var(--sp-5)} .faq-q:hover,.faq-q.open{background:rgba(255,255,255,.04)} .faq-q-text{font-size:var(--ts-base);font-weight:600; color:var(--t-secondary);line-height:var(--lh-snug)} .faq-q.open .faq-q-text{color:var(--t-primary)} .faq-arrow{width:28px;height:28px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.07); transition:transform var(--dur-base),background var(--dur-base)} .faq-q.open .faq-arrow{transform:rotate(180deg);background:var(--accent)} .faq-a{max-height:0;overflow:hidden; padding:0 var(--sp-7) 0; transition:max-height var(--dur-slow) var(--ease),padding var(--dur-slow) var(--ease)} .faq-a.open{max-height:400px;padding:0 var(--sp-7) var(--sp-6)} .faq-a p{font-size:var(--ts-base);line-height:var(--lh-loose);color:var(--t-secondary)} @media(max-width:800px){ .faq-cols{grid-template-columns:1fr;gap:var(--sp-10)} .faq-sticky{position:static}} /* ─── MILESTONE TRACK ─── */ .ms-title{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:700; color:var(--t-primary);margin-bottom:var(--sp-2);line-height:var(--lh-tight)} .ms-week{font-size:var(--ts-xs);font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--t-muted);margin-bottom:var(--sp-2)} .ms-desc{font-size:var(--ts-base);line-height:var(--lh-normal); color:var(--t-secondary);max-width:640px} .ms-unlock{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3); font-size:var(--ts-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill); background:var(--gold-bg);color:var(--gold-lt); border:1px solid var(--border-gold)} /* body styles moved to readability block */ a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ══════════ NAV ══════════ */ /* ══════════ PROGRESS BAR ══════════ */ /* ═══════════════════════════════════════ NAV — REDESIGNED Designer: flexbox, clear hierarchy, logo prominence, bold readable links ═══════════════════════════════════════ */ /* Progress bar */ .progress-bar{ position:fixed;top:0;left:0;height:3px;width:0%; background:linear-gradient(90deg,var(--burg) 0%,var(--cream) 100%); z-index:400;transition:width .15s linear; border-radius:0 2px 2px 0} /* Nav shell */ /* ═══════════════════════════════════════ HEADER / NAV — REDESIGNED v2 Premium dark nav: glass effect, clean layout, strong logo presence ═══════════════════════════════════════ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200; height:80px; background:rgba(13,21,32,0.96); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid rgba(212,197,164,.13); box-shadow:0 1px 0 rgba(212,197,164,.06),0 8px 32px rgba(0,0,0,.4); transition:height .35s cubic-bezier(.4,0,.2,1), background .35s,box-shadow .35s} .nav.up{ height:60px; background:rgba(10,16,26,0.98); box-shadow:0 1px 0 rgba(212,197,164,.1),0 12px 40px rgba(0,0,0,.55)} /* Thin gold accent line at top */ .nav::before{ content:''; position:absolute;top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,transparent 0%,rgba(212,197,164,.5) 30%,rgba(212,197,164,.8) 50%,rgba(212,197,164,.5) 70%,transparent 100%)} /* Inner layout */ .nav-inner{ max-width:1240px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 40px; gap:0} /* ── LOGO ── */ /* Logo pill: visible, high-contrast, proper size */ .nav-logo-wrap{ display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; margin-right:32px; /* No background pill — let the logo breathe on dark nav */ padding:6px 4px; border-radius:8px; transition:opacity .2s,transform .2s} .nav-logo-wrap:hover{ opacity:.88; transform:scale(1.03)} /* Logo image — tall enough to read comfortably */ .nav-logo{ height:48px; width:auto; display:block; transition:height .35s cubic-bezier(.4,0,.2,1); /* Slight brightness boost so light logo pops on dark bg */ filter:brightness(1.08) contrast(1.04)} .nav.up .nav-logo{height:38px} /* Remove old pill styles that got double-applied */ .nav.up .nav-logo-wrap{height:auto;padding:4px;margin-right:24px} /* ── NAV LINKS ── */ .nav-links{ display:flex; align-items:center; list-style:none; gap:0; flex:1; justify-content:center; margin:0; padding:0} .nav-links a{ position:relative; display:block; padding:8px 16px; font-family:var(--font-d); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(212,197,164,.55); border-radius:6px; transition:color .22s,background .22s; white-space:nowrap; text-decoration:none} .nav-links a::after{ content:''; position:absolute; bottom:2px;left:50%;right:50%; height:1.5px; background:var(--cream); transition:left .22s cubic-bezier(.4,0,.2,1),right .22s cubic-bezier(.4,0,.2,1); border-radius:2px} .nav-links a:hover{ color:var(--cream-l); background:rgba(212,197,164,.07)} .nav-links a:hover::after{left:16px;right:16px} .nav-links a.active{color:var(--cream-l)} .nav-links a.active::after{left:16px;right:16px} /* ── CTA BUTTON ── */ .nav-cta{ display:inline-flex; align-items:center; gap:6px; padding:11px 26px; border-radius:6px; background:var(--burg); color:var(--white) !important; font-family:var(--font-d) !important; font-size:12.5px !important; font-weight:800 !important; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; text-decoration:none; margin-left:24px; border:1px solid transparent; transition:background .22s,transform .18s,box-shadow .22s,border-color .22s !important; box-shadow:0 4px 16px rgba(107,24,32,.45)} .nav-cta::before{ content:'→'; font-size:13px; order:1; margin-left:2px; transition:transform .2s} .nav-cta:hover{ background:var(--burg-l) !important; transform:translateY(-2px); box-shadow:0 8px 24px rgba(107,24,32,.55) !important; border-color:rgba(212,197,164,.2) !important} .nav-cta:hover::before{transform:translateX(3px)} .nav-cta:active{transform:translateY(0) scale(.98) !important} /* ── BURGER (mobile) ── */ .burger{ display:none; flex-direction:column; gap:6px; background:none;border:none; cursor:pointer; padding:8px 6px; flex-shrink:0; z-index:300} .burger span{ display:block; width:26px;height:2px; background:var(--cream-l); border-radius:2px; transition:all .3s cubic-bezier(.4,0,.2,1)} .burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,6px)} .burger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)} /* ── MOBILE OVERLAY ── */ .mob{ display:none; position:fixed;inset:0;z-index:190; background:rgba(10,16,26,0.97); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:80px 40px 40px} .mob.open{display:flex} /* Decorative accent in mobile menu */ .mob::before{ content:''; position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,rgba(212,197,164,.6),transparent)} .mob a{ font-family:var(--font-d); font-size:clamp(28px,6vw,40px); font-weight:800; color:rgba(212,197,164,.55); padding:12px 20px; width:100%;text-align:center; transition:color .2s,background .2s; text-decoration:none; border-radius:8px; letter-spacing:.04em} .mob a:hover{ color:var(--cream-l); background:rgba(212,197,164,.06)} .mob .mc{ margin-top:20px; padding:16px 48px; border-radius:6px; background:var(--burg); color:var(--white) !important; font-size:clamp(16px,4vw,20px) !important; font-weight:800 !important; letter-spacing:.08em; box-shadow:0 4px 20px rgba(107,24,32,.5); width:100%;text-align:center} /* ── RESPONSIVE ── */ @media(max-width:1160px){ .nav-links a{padding:7px 11px;font-size:12px;letter-spacing:.08em}} @media(max-width:960px){ .nav-inner{padding:0 24px} .nav-links{display:none} .nav-cta{display:none} .burger{display:flex} .nav{height:68px} .nav.up{height:56px} .nav-logo{height:42px} .nav.up .nav-logo{height:34px}} @media(max-width:480px){ .nav-inner{padding:0 16px} .nav-logo{height:36px} .nav.up .nav-logo{height:30px}} /* ═══════════════════════════════════════ FOOTER — REDESIGNED Clean 4-col grid, readable, spaced ═══════════════════════════════════════ */ footer{ background:#0d1520; border-top:2px solid rgba(212,197,164,.18)} .ft-main{ display:grid; grid-template-columns:1.6fr 1fr 1.4fr 1.2fr; gap:52px; padding:72px 52px 56px; max-width:1200px; margin:0 auto} /* Column heads */ .ft-col-head{ font-family:var(--font-d); font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); margin-bottom:22px; padding-bottom:12px; border-bottom:2px solid rgba(212,197,164,.15); position:relative} /* Brand column */ .ft-logo-link{ display:flex; align-items:center; text-decoration:none; margin-bottom:18px} .ft-logo-img{ height:54px; width:auto; display:block} .ft-tagline{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.52); margin-bottom:6px} .ft-founding{ font-size:12px; color:rgba(255,255,255,.3); margin-top:4px} /* Nav list */ .ft-nav-list{ list-style:none; display:flex; flex-direction:column; gap:2px} .ft-nav-list li a{ font-family:var(--font-d); font-size:14.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); text-decoration:none; display:block; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); transition:color .2s,padding-left .2s} .ft-nav-list li a:hover{ color:var(--cream-l); padding-left:8px} .ft-nav-list li:last-child a{border-bottom:none} /* Contacts */ .ft-contact-list{ display:flex; flex-direction:column; gap:0} .ft-contact-link{ display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.05); text-decoration:none; transition:all .2s} .ft-contact-link:last-child{border-bottom:none} .ft-contact-link:hover .ft-contact-val{color:var(--cream-l)} .ft-contact-icon{ width:38px;height:38px; border-radius:10px; flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:16px;margin-top:1px} .fci-email{background:rgba(107,24,32,.28);border:1px solid rgba(107,24,32,.4);color:rgba(212,140,140,.9)} .fci-li{background:rgba(10,102,194,.22);border:1px solid rgba(10,102,194,.35);color:rgba(91,155,213,.9)} .ft-contact-lbl{ font-size:var(--ts-xs);font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.3); margin-bottom:3px} .ft-contact-val{ font-size:13.5px;font-weight:500; color:rgba(255,255,255,.65); line-height:1.45; word-break:break-all; transition:color .2s} /* Social / Experts */ .ft-social-grid{ display:flex; flex-direction:column; gap:10px} .ft-social-link{ display:flex;align-items:center;gap:14px; padding:12px 16px;border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); text-decoration:none; transition:background .25s,border-color .25s,transform .2s} .ft-social-link:hover{ background:rgba(255,255,255,.07); border-color:rgba(212,197,164,.18); transform:translateX(4px)} .ft-social-icon{ width:38px;height:38px;border-radius:10px;flex-shrink:0; display:flex;align-items:center;justify-content:center} .fsi-li{background:rgba(10,102,194,.28);border:1px solid rgba(10,102,194,.38);color:#5B9BD5} .fsi-ig{background:rgba(180,0,120,.22);border:1px solid rgba(180,0,120,.32);color:#dd5ba2} .ft-social-name{ font-family:var(--font-d);font-size:14.5px;font-weight:700; color:var(--white);margin-bottom:1px;line-height:1.2} .ft-social-handle{ font-size:11.5px;color:rgba(255,255,255,.38)} /* Bottom bar */ .ft-bottom{ max-width:1200px;margin:0 auto; padding:18px 52px; border-top:1px solid rgba(255,255,255,.06); display:flex;align-items:center; justify-content:space-between; flex-wrap:wrap;gap:12px} .ft-copy{ font-size:12px;color:var(--t-muted);line-height:1.6} .ft-bottom-links{display:flex;gap:22px;flex-wrap:wrap} .ft-bottom-links a{ font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--t-muted);transition:color .2s;text-decoration:none} .ft-bottom-links a:hover{color:var(--cream)} /* Responsive footer */ @media(max-width:1024px){ .ft-main{grid-template-columns:1fr 1fr;gap:40px;padding:56px 36px 44px}} @media(max-width:640px){ .ft-main{grid-template-columns:1fr;gap:32px;padding:44px 20px 36px} .ft-bottom{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:10px} .ft-bottom-links{flex-wrap:wrap;gap:14px}} /* ══════════ SCROLL REVEAL ══════════ */ .rv{opacity:0;transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} .rv:nth-child(2){transition-delay:.09s} .rv:nth-child(3){transition-delay:.17s} .rv:nth-child(4){transition-delay:.25s} /* ══════════ RESPONSIVE ══════════ */ @media(max-width:1024px){ .hero-inner{grid-template-columns:1fr} .hero-shapes{display:none} .trust-layout{grid-template-columns:1fr} .trust-person{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)} .trust-person:last-child{border-bottom:none} .mod-grid{grid-template-columns:1fr 1fr} .pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto} .cta-inner{grid-template-columns:1fr} .cta-photo{display:none} } @media(max-width:900px){ .nav-links{display:none} .nav-cta{display:none} .burger{display:flex} } @media(max-width:768px){ .nav{height:64px} .nav.up{height:52px} .nav-inner{padding:0 20px} .nav-logo{height:40px} .nav.up .nav-logo{height:34px} .w{padding:0 20px} section{padding:60px 0} .team-grid,.guests-grid,.mod-grid,.mod-grid-row2{grid-template-columns:1fr} .detail-layout{grid-template-columns:1fr} .acc-body{padding:0 24px 28px 24px} .acc-head{padding:22px 24px} .acc-num{font-size:32px;min-width:44px} .hero-btns{flex-direction:column} .hero-btns .btn{justify-content:center} footer{flex-direction:column;align-items:center;text-align:center} .ft-copy{text-align:center} } /* ══ STATS COUNTER ══ */ .stats{padding:72px 0;background:var(--navy-d); border-bottom:1px solid rgba(212,197,164,.08)} .stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px} .stat-card{padding:40px 24px;text-align:center; background:rgba(255,255,255,.02);border-right:1px solid rgba(255,255,255,.06); transition:background .3s} .stat-card:hover{background:rgba(255,255,255,.05)} .stat-card:last-child{border-right:none} .stat-num{font-family:var(--font-d);font-size:clamp(42px,5vw,64px); font-weight:800;color:var(--cream);line-height:1;display:block} .stat-suffix{color:var(--burg-l);font-size:.7em} .stat-label{font-size:var(--ts-xs);letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.58);margin-top:8px;line-height:1.5} @media(max-width:800px){.stats-grid{grid-template-columns:repeat(3,1fr)} .stat-card:nth-child(4){border-right:1px solid rgba(255,255,255,.06)}} @media(max-width:500px){.stats-grid{grid-template-columns:1fr 1fr} .stat-card:nth-child(even){border-right:none}} /* ══ FOR WHOM ══ */ .fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px} .fw-card{padding:36px 32px;border-radius:20px; background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07); display:flex;gap:20px;align-items:flex-start; transition:border-color .3s,transform .3s var(--ease)} .fw-card:hover{border-color:rgba(212,197,164,.2);transform:translateY(-4px)} .fw-icon{width:52px;height:52px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:24px} .fw-icon.i1{background:rgba(107,24,32,.3);border:1px solid rgba(107,24,32,.4)} .fw-icon.i2{background:rgba(122,143,163,.2);border:1px solid rgba(122,143,163,.3)} .fw-icon.i3{background:rgba(212,197,164,.1);border:1px solid rgba(212,197,164,.18)} .fw-icon.i4{background:rgba(10,102,194,.2);border:1px solid rgba(10,102,194,.3)} .fw-icon.i5{background:rgba(50,180,100,.15);border:1px solid rgba(50,180,100,.25)} .fw-icon.i6{background:rgba(200,140,60,.15);border:1px solid rgba(200,140,60,.25)} .fw-title{font-family:var(--font-d);font-size:21px;font-weight:700; margin-bottom:8px;color:var(--white)} .fw-desc{font-size:calc(var(--ts-base) - 1px);line-height:1.75;color:rgba(255,255,255,.58)} .fw-NOT{margin-top:56px;padding:36px 40px;border-radius:20px; background:rgba(212,197,164,.05);border:2px dashed rgba(212,197,164,.15)} .fw-NOT-title{font-family:var(--font-d);font-size:22px;font-weight:700; color:rgba(255,255,255,.5);margin-bottom:16px} .fw-NOT-list{display:flex;flex-wrap:wrap;gap:10px} .fw-NOT-tag{padding:8px 18px;border-radius:30px;font-size:13px; background:rgba(255,255,255,.04);color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.07)} @media(max-width:768px){.fw-grid{grid-template-columns:1fr}} /* ══ TESTIMONIALS ══ */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .tc{padding:36px 32px;border-radius:20px; background:var(--white); box-shadow:0 4px 24px rgba(27,42,68,.1); display:flex;flex-direction:column;gap:0; transition:transform .3s var(--ease),box-shadow .3s} .tc:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(27,42,68,.18)} .tc-stars{display:flex;gap:3px;margin-bottom:18px} .tc-star{color:#f59e0b;font-size:17px} .tc-text{font-size:var(--ts-base);line-height:1.8;color:var(--lt-secondary); font-style:italic;flex:1;margin-bottom:24px} .tc-text::before{content:'"';font-family:var(--font-d);font-size:48px; color:var(--burg);line-height:.5;display:block;margin-bottom:12px; font-style:normal} .tc-author{display:flex;align-items:center;gap:14px; padding-top:20px;border-top:1px solid rgba(0,0,0,.06)} .tc-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--white)} .tc-av1{background:linear-gradient(135deg,var(--burg),#9b2632)} .tc-av2{background:linear-gradient(135deg,var(--slate-bg),#5a7a94)} .tc-av3{background:linear-gradient(135deg,var(--navy-m),#2a4a72)} .tc-av4{background:linear-gradient(135deg,#2d7a4f,#1a5c38)} .tc-av5{background:linear-gradient(135deg,#7a4f2d,#5c381a)} .tc-av6{background:linear-gradient(135deg,var(--burg-m),#6b1820)} .tc-name{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--lt-primary)} .tc-meta{font-size:12px;color:var(--lt-muted);margin-top:1px} .tc-result{margin-top:6px;display:inline-block;font-size:var(--ts-xs);font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px; background:rgba(10,150,80,.1);color:#0a9650} @media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.testi-grid{grid-template-columns:1fr}} /* ══ CAREER QUIZ ══ */ .quiz-wrap{max-width:760px;margin:56px auto 0; background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.1); border-radius:24px;overflow:hidden} .quiz-header{padding:36px 44px 28px; background:linear-gradient(135deg,rgba(107,24,32,.35),rgba(30,50,86,.6)); border-bottom:1px solid rgba(255,255,255,.08)} .quiz-header h3{font-family:var(--font-d);font-size:var(--ts-xl);font-weight:800; margin-bottom:8px;color:var(--white)} .quiz-header p{font-size:15px;color:rgba(255,255,255,.6);line-height:1.65} .quiz-progress-bar{height:4px;background:rgba(255,255,255,.1);margin-top:20px;border-radius:2px} .quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--burg),var(--cream)); border-radius:2px;transition:width .4s var(--ease)} .quiz-body{padding:36px 44px} .quiz-q-label{font-size:var(--ts-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--cream);margin-bottom:14px} .quiz-question{font-family:var(--font-d);font-size:24px;font-weight:700; color:var(--white);margin-bottom:28px;line-height:1.2} .quiz-options{display:flex;flex-direction:column;gap:10px} .quiz-opt{padding:16px 20px;border-radius:14px;border:1.5px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);color:rgba(255,255,255,.72); font-size:15px;cursor:pointer;text-align:left;width:100%; transition:all .2s;font-family:var(--font-b)} .quiz-opt:hover{border-color:rgba(212,197,164,.35);background:rgba(212,197,164,.06); color:var(--cream-l);transform:translateX(4px)} .quiz-opt.selected{border-color:var(--cream);background:rgba(212,197,164,.1); color:var(--cream-l)} .quiz-nav{display:flex;justify-content:space-between;align-items:center; margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06)} .quiz-back{background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5); padding:10px 22px;border-radius:30px;font-size:14px;cursor:pointer; transition:all .2s;font-family:var(--font-b)} .quiz-back:hover{border-color:rgba(255,255,255,.3);color:var(--white)} .quiz-next{padding:12px 30px;border-radius:30px;background:var(--burg); color:var(--white);font-weight:700;font-size:15px;border:none;cursor:pointer; transition:all .2s;font-family:var(--font-b)} .quiz-next:hover:not(:disabled){background:var(--burg-l);transform:translateY(-2px)} .quiz-next:disabled{opacity:.35;cursor:not-allowed} .quiz-counter{font-size:12px;color:var(--t-tertiary);letter-spacing:.06em} .quiz-result{padding:40px 44px;display:none;flex-direction:column;gap:0} .quiz-result.show{display:flex} .qr-score-wrap{display:flex;align-items:center;gap:24px;margin-bottom:28px} .qr-ring{width:96px;height:96px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--font-d);font-size:var(--ts-xl);font-weight:800;color:var(--white); border:4px solid var(--cream)} .qr-title{font-family:var(--font-d);font-size:var(--ts-xl);font-weight:800; color:var(--white);margin-bottom:6px;line-height:1.1} .qr-subtitle{font-size:15px;color:rgba(255,255,255,.6);line-height:1.6} .qr-recs{margin-top:24px;display:flex;flex-direction:column;gap:10px} .qr-rec{padding:16px 20px;border-radius:14px; background:rgba(255,255,255,.04);border-left:3px solid var(--burg); font-size:calc(var(--ts-base) - 1px);line-height:1.7;color:rgba(255,255,255,.7)} .qr-rec strong{color:var(--cream-l);font-weight:600} .qr-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap} .qr-retry{background:none;border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6);padding:11px 24px;border-radius:30px; font-size:14px;cursor:pointer;transition:all .2s;font-family:var(--font-b)} .qr-retry:hover{border-color:rgba(255,255,255,.4);color:var(--white)} @media(max-width:600px){.quiz-body,.quiz-header,.quiz-result{padding:24px 22px} .qr-score-wrap{flex-direction:column;text-align:center}} /* ══ FAQ ══ */ .faq-cols{display:grid;grid-template-columns:1fr 2fr;gap:80px;margin-top:56px;align-items:start} .faq-sticky{position:sticky;top:100px} .faq-sticky-title{font-family:var(--font-d);font-size:clamp(32px,4vw,50px);font-weight:800; line-height:1.05;margin-bottom:18px} .faq-sticky-text{font-size:15px;color:rgba(255,255,255,.55);line-height:1.75;margin-bottom:28px} .faq-contact-cta{display:inline-flex;align-items:center;gap:10px; padding:13px 26px;border-radius:40px; border:1.5px solid rgba(212,197,164,.3);color:var(--cream-l); font-size:14px;font-weight:600;text-decoration:none; transition:all .25s} .faq-contact-cta:hover{background:rgba(212,197,164,.08);border-color:var(--cream)} .faq-list{display:flex;flex-direction:column;gap:2px; border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.07)} .faq-item{background:rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.06)} .faq-item:last-child{border-bottom:none} .faq-q{display:flex;align-items:center;justify-content:space-between; padding:24px 30px;cursor:pointer;gap:20px; transition:background .2s;user-select:none} .faq-q:hover{background:rgba(255,255,255,.04)} .faq-q.open{background:rgba(255,255,255,.05)} .faq-q-text{font-size:16px;font-weight:600;color:var(--cream-l);line-height:1.4} .faq-q.open .faq-q-text{color:var(--white)} .faq-arrow{width:28px;height:28px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.07);transition:transform .3s,background .2s} .faq-q.open .faq-arrow{transform:rotate(180deg);background:var(--burg)} .faq-a{max-height:0;overflow:hidden; transition:max-height .45s var(--ease),padding .45s var(--ease); padding:0 30px 0 30px} .faq-a.open{max-height:400px;padding:0 30px 24px} .faq-a p{font-size:var(--ts-base);line-height:1.82;color:rgba(255,255,255,.70)} .faq-a ul{margin-top:10px;padding-left:20px;display:flex;flex-direction:column;gap:6px} .faq-a li{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.58)} @media(max-width:800px){.faq-cols{grid-template-columns:1fr;gap:40px} .faq-sticky{position:static}} /* ════════════════════════════════════════ AUDIT RECOMMENDATIONS CSS Team: Dev + Design + Psychology + Coach + Gamification ════════════════════════════════════════ */ /* ── GDPR COOKIE BANNER (Web Dev — legal req. Denmark) ── */ .cookie-banner{ position:fixed;bottom:0;left:0;right:0;z-index:500; background:var(--navy-deep); border-top:2px solid rgba(212,197,164,.2); padding:16px 32px; display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:14px; box-shadow:0 -4px 24px rgba(0,0,0,.4); transform:translateY(100%); transition:transform .5s var(--ease)} .cookie-banner.show{transform:translateY(0)} .cookie-text{font-size:13px;color:rgba(255,255,255,.7);line-height:1.55;max-width:680px} .cookie-text a{color:var(--cream-l);text-decoration:underline} .cookie-btns{display:flex;gap:10px;flex-shrink:0} .cookie-accept{padding:9px 22px;border-radius:30px;background:var(--burg); color:var(--white);font-size:var(--ts-sm);font-weight:700;border:none;cursor:pointer; transition:background .2s} .cookie-accept:hover{background:var(--burg-l)} .cookie-decline{padding:9px 22px;border-radius:30px; border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.6); font-size:13px;background:none;cursor:pointer;transition:all .2s} .cookie-decline:hover{border-color:rgba(255,255,255,.4);color:var(--white)} @media(max-width:600px){.cookie-banner{padding:14px 16px} .cookie-btns{width:100%}.cookie-accept,.cookie-decline{flex:1;text-align:center}} /* ── BACK TO TOP (Dev) ── */ .back-top{ position:fixed;bottom:90px;right:24px;z-index:180; width:44px;height:44px;border-radius:50%; background:var(--navy-m);border:1.5px solid rgba(212,197,164,.25); display:flex;align-items:center;justify-content:center; color:var(--cream);font-size:18px;cursor:pointer; opacity:0;pointer-events:none; transition:opacity .3s,transform .3s,background .2s; box-shadow:0 4px 16px rgba(0,0,0,.3)} .back-top.show{opacity:1;pointer-events:auto} .back-top:hover{background:var(--burg);border-color:var(--burg);transform:translateY(-3px)} /* ── COMPANIES HIRED BAR (Design + Psychology: Social Proof) ── */ .hired-bar{ padding:52px 0; background:var(--cream-pale); border-top:1px solid rgba(27,42,68,.06)} .hired-label{ text-align:center; font-size:var(--ts-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:#8a9ab0;margin-bottom:28px} .hired-track{ overflow:hidden;position:relative; mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%)} .hired-scroll{ display:flex;gap:40px;align-items:center; animation:scroll-left 22s linear infinite; width:max-content} .hired-scroll:hover{animation-play-state:paused} @keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .hired-co{ font-family:var(--font-d);font-size:17px;font-weight:700; color:#2a3a5a;letter-spacing:.04em;white-space:nowrap; padding:8px 20px;border-radius:30px; background:rgba(27,42,68,.07); border:1px solid rgba(27,42,68,.1)} /* ── TRANSFORMATION JOURNEY (Career Coach) ── */ .journey-track{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;margin-top:var(--sp-16);align-items:center} .journey-col{display:flex;flex-direction:column;gap:16px} .journey-col.before .j-item{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08)} .journey-col.after .j-item{ background:rgba(50,180,80,.06); border:1px solid rgba(50,180,80,.18)} .j-item{ padding:18px 22px;border-radius:14px; display:flex;align-items:flex-start;gap:14px} .j-icon{font-size:20px;flex-shrink:0;margin-top:1px} .j-text{font-size:calc(var(--ts-base) - 1px);line-height:1.65;color:rgba(255,255,255,.65)} .j-text strong{display:block;font-size:15px;font-weight:600; margin-bottom:3px;color:var(--white)} .journey-arrow{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px} .journey-arrow-line{ width:2px;height:80px; background:linear-gradient(to bottom,rgba(212,197,164,.1),var(--cream),rgba(212,197,164,.1))} .journey-arrow-icon{ font-size:28px;color:var(--cream); background:rgba(212,197,164,.1);border-radius:50%; width:52px;height:52px;display:flex;align-items:center;justify-content:center; border:2px solid rgba(212,197,164,.25);flex-shrink:0} .journey-label{ font-family:var(--font-d);font-size:var(--ts-xs);font-weight:700; letter-spacing:.16em;text-transform:uppercase; margin-bottom:20px;padding:8px 18px;border-radius:20px;display:inline-block} .j-before-label{background:rgba(255,255,255,.06);color:rgba(255,255,255,.45)} .j-after-label{background:rgba(50,180,80,.12);color:rgba(100,220,130,.85)} @media(max-width:768px){ .journey-track{grid-template-columns:1fr;gap:24px} .journey-arrow{flex-direction:row;justify-content:center} .journey-arrow-line{width:60px;height:2px} } /* ── VIP SPOTS COUNTER (Psychology: Scarcity) ── */ .vip-spots{ display:flex;align-items:center;gap:10px; padding:12px 16px;border-radius:12px; background:rgba(107,24,32,.08); border:1px solid rgba(107,24,32,.2); margin-bottom:14px} .vip-spots-bar{flex:1;height:6px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden} .vip-spots-fill{height:100%;background:linear-gradient(90deg,#e06060,var(--burg)); border-radius:3px;width:75%} .vip-spots-text{font-size:var(--ts-xs);font-weight:700;color:var(--burg);white-space:nowrap} /* ── QUIZ GAMIFICATION: Ring + Confetti + Badges (Gamifier) ── */ .qr-ring{position:relative} .qr-score-badge{ display:flex;flex-direction:column;align-items:center;gap:4px; min-width:100px} .score-ring-svg{transform:rotate(-90deg)} .score-ring-num{ font-family:var(--font-d);font-size:32px;font-weight:800; color:var(--white);position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);text-align:center;line-height:1} .score-ring-label{font-size:10px;color:rgba(255,255,255,.45);margin-top:2px} .confetti-canvas{ position:fixed;top:0;left:0;width:100%;height:100%; pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s} .confetti-canvas.show{opacity:1} .quiz-badge{ display:inline-flex;align-items:center;gap:8px; padding:8px 16px;border-radius:20px; background:rgba(212,197,164,.1);border:1px solid rgba(212,197,164,.2); font-size:var(--ts-sm);font-weight:600;color:var(--cream-l);margin-bottom:16px} .quiz-badge-icon{font-size:18px} /* ── OUTCOME MILESTONES (Career Coach + Gamifier) ── */ .milestones{padding:100px 0;background:var(--navy-m)} .milestone-track{ position:relative;margin-top:56px; padding-left:32px} .milestone-track::before{ content:'';position:absolute;left:11px;top:0;bottom:0; width:2px;background:linear-gradient(to bottom, var(--burg) 0%,var(--cream) 40%,rgba(212,197,164,.2) 100%)} .milestone{ display:flex;gap:28px;margin-bottom:40px; position:relative} .milestone:last-child{margin-bottom:0} .m-dot{ width:24px;height:24px;border-radius:50%;flex-shrink:0; position:absolute;left:-43px;top:4px; display:flex;align-items:center;justify-content:center; font-size:var(--ts-xs);font-weight:800;color:var(--white)} .m-dot.w0{background:var(--burg)} .m-dot.w1{background:var(--burg-m)} .m-dot.w2{background:var(--slate)} .m-dot.w3{background:#2d7a4f} .m-dot.w4{background:#1a5c38} .m-week{ font-size:var(--ts-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--cream);margin-bottom:6px} .m-title{ font-family:var(--font-d);font-size:22px;font-weight:700; color:var(--white);margin-bottom:8px;line-height:1.1} .m-desc{font-size:14px;color:rgba(255,255,255,.58);line-height:1.7} .m-outcome{ display:inline-flex;align-items:center;gap:7px;margin-top:10px; padding:6px 14px;border-radius:20px; background:rgba(50,180,80,.1);border:1px solid rgba(50,180,80,.2); font-size:var(--ts-xs);font-weight:600;color:rgba(100,220,130,.9)} /* ── PSYCHOLOGIST: Reciprocity — Free Resource Card ── */ /* ═══════════════════════════════════════ RECIPROCITY / FREE TOOLS SECTION — REDESIGNED v2 Full-width editorial layout, premium feel ═══════════════════════════════════════ */ .reciprocity-bar{ position:relative; margin:0; padding:80px 0; background:#0b1219; overflow:hidden} /* Diagonal colour band */ .reciprocity-bar::before{ content:''; position:absolute; inset:0; background: linear-gradient(135deg,rgba(107,24,32,.22) 0%,transparent 45%), linear-gradient(225deg,rgba(26,45,68,.35) 0%,transparent 50%); pointer-events:none} /* Grain texture overlay */ .reciprocity-bar::after{ content:''; position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); opacity:.5;pointer-events:none} .rec-inner{ position:relative;z-index:1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px} /* Left: text block */ .rec-text{ max-width:520px} .rec-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-d); font-size:11px;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:var(--cream); opacity:.65; margin-bottom:16px} .rec-eyebrow::before{ content:''; display:inline-block;width:28px;height:1.5px; background:var(--cream);opacity:.5} .rec-text h3{ font-family:var(--font-d); font-size:clamp(32px,3.5vw,52px); font-weight:900; color:var(--white); margin-bottom:14px; line-height:1.05; letter-spacing:-.01em} .rec-text h3 em{ font-style:normal; color:var(--cream-l)} .rec-text p{ font-size:15px; color:rgba(212,197,164,.6); line-height:1.75; max-width:420px} /* Right: cards */ .rec-cards{ display:flex; gap:16px; flex-wrap:nowrap} .rec-card{ position:relative; flex:none; width:172px; padding:28px 20px 24px; border-radius:16px; background:rgba(212,197,164,.05); border:1px solid rgba(212,197,164,.14); text-align:center; cursor:pointer; transition:transform .25s cubic-bezier(.4,0,.2,1), background .25s,border-color .25s,box-shadow .25s; text-decoration:none; overflow:hidden} .rec-card::before{ content:''; position:absolute;top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(212,197,164,.4),transparent); opacity:0; transition:opacity .25s} .rec-card:hover{ background:rgba(212,197,164,.09); border-color:rgba(212,197,164,.3); transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.4)} .rec-card:hover::before{opacity:1} .rec-card-icon{ font-size:36px; margin-bottom:12px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))} .rec-card-title{ font-family:var(--font-d); font-size:16px;font-weight:800; color:var(--cream-l); margin-bottom:6px; letter-spacing:.03em} .rec-card-label{ display:inline-block; font-size:10px; font-weight:700; color:var(--cream); opacity:.5; text-transform:uppercase; letter-spacing:.14em; padding:3px 10px; border:1px solid rgba(212,197,164,.2); border-radius:30px} .rec-card-arrow{ display:block; margin-top:14px; font-size:18px; color:var(--cream); opacity:0; transition:opacity .2s,transform .2s; transform:translateY(4px)} .rec-card:hover .rec-card-arrow{ opacity:.7; transform:translateY(0)} /* Responsive */ @media(max-width:900px){ .rec-inner{ grid-template-columns:1fr; gap:36px; text-align:center} .rec-text{max-width:100%} .rec-eyebrow{margin:0 auto 16px} .rec-text p{margin:0 auto} .rec-cards{justify-content:center}} @media(max-width:520px){ .reciprocity-bar{padding:60px 0} .rec-cards{gap:12px} .rec-card{width:148px;padding:22px 14px 18px}} /* ══ SKIP NAV + FOCUS ACCESSIBILITY ══ */ .skip-nav{position:absolute;top:-100px;left:16px;z-index:9999; padding:10px 20px;border-radius:8px; background:var(--cream);color:var(--navy-d); font-weight:700;font-size:14px;text-decoration:none; transition:top .2s} .skip-nav:focus{top:8px} *:focus-visible{ outline:2.5px solid var(--cream); outline-offset:3px; border-radius:4px} button:focus-visible,a:focus-visible{ outline:2.5px solid var(--cream); outline-offset:3px} /* ══ TRANSFORMATION JOURNEY ══ */ .jb-head,.ja-head{ font-family:var(--font-d); font-size:18px;font-weight:800; letter-spacing:.06em;text-transform:uppercase; margin-bottom:20px;display:flex;align-items:center;gap:10px} .jb-head{color:var(--burg)} .ja-head{color:#1a7a4a} .jb-text{font-family:var(--font-d);font-size:24px;font-weight:700; color:var(--navy);line-height:1.2} .jb-sub{font-size:14px;color:var(--lt-muted);margin-top:4px} @media(max-width:768px){ } /* ══ RISK REVERSAL ══ */ .risk-banner{ padding:28px 40px; background:linear-gradient(90deg,rgba(212,197,164,.08) 0%,rgba(107,24,32,.08) 100%); border:1px solid rgba(212,197,164,.18); border-radius:18px; margin-top:48px; display:flex;align-items:center;gap:24px;flex-wrap:wrap} .risk-icon{font-size:36px;flex-shrink:0} .risk-text h4{font-family:var(--font-d);font-size:20px;font-weight:700; color:var(--white);margin-bottom:6px} .risk-text p{font-size:14px;color:var(--t60);line-height:1.7} /* ══ MILESTONES / PROGRESS GAMIFICATION ══ */ .ms-track{ display:flex; flex-direction:column; gap:0; margin-top:60px; position:relative} .ms-track::before{ content:''; position:absolute;left:28px;top:40px;bottom:40px;width:3px; background:linear-gradient(to bottom,var(--burg),var(--slate-bg),var(--cream)); border-radius:2px} .ms-item{ display:flex;align-items:flex-start;gap:28px; padding:28px 0; position:relative} .ms-dot{ width:58px;height:58px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:22px;z-index:1; border:3px solid transparent; transition:transform .3s var(--ease),box-shadow .3s} .ms-item:hover .ms-dot{transform:scale(1.1)} .ms-dot.d1{background:linear-gradient(135deg,var(--burg),var(--burg-l));border-color:rgba(107,24,32,.4);box-shadow:0 0 0 6px rgba(107,24,32,.1)} .ms-dot.d2{background:linear-gradient(135deg,var(--slate-bg),#5a7a94);border-color:rgba(122,143,163,.4);box-shadow:0 0 0 6px rgba(122,143,163,.1)} .ms-dot.d3{background:linear-gradient(135deg,#2d6a9f,#1a4a78);border-color:rgba(45,106,159,.4);box-shadow:0 0 0 6px rgba(45,106,159,.1)} .ms-dot.d4{background:linear-gradient(135deg,#1a7a4a,#0d5533);border-color:rgba(26,122,74,.4);box-shadow:0 0 0 6px rgba(26,122,74,.1)} .ms-dot.d5{background:linear-gradient(135deg,var(--cream),#b8a478);border-color:rgba(212,197,164,.4);box-shadow:0 0 0 6px rgba(212,197,164,.1)} .ms-dot.d6{background:linear-gradient(135deg,#7a4a9f,#5a2d7a);border-color:rgba(122,74,159,.4);box-shadow:0 0 0 6px rgba(122,74,159,.1)} .ms-content{padding-top:12px} .ms-week{font-size:var(--ts-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--t40);margin-bottom:6px} .ms-title{font-family:var(--font-d);font-size:24px;font-weight:700; color:var(--cream-l);margin-bottom:6px;line-height:1.1} .ms-desc{font-size:14px;color:var(--t60);line-height:1.7;max-width:640px} .ms-unlock{display:inline-flex;align-items:center;gap:6px;margin-top:10px; font-size:var(--ts-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:5px 14px;border-radius:20px; background:rgba(212,197,164,.08);color:var(--cream);border:1px solid rgba(212,197,164,.15)} @media(max-width:600px){ .ms-track::before{left:22px} .ms-dot{width:46px;height:46px;font-size:18px} .ms-item{gap:18px}} /* ══ COOKIE BANNER ══ */ .cookie-banner{ position:fixed;bottom:0;left:0;right:0;z-index:999; background:var(--navy-d); border-top:1px solid rgba(212,197,164,.15); padding:16px 28px; display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap; transform:translateY(0); transition:transform .4s var(--ease)} .cookie-banner.hidden{transform:translateY(110%)} .cookie-text{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;max-width:700px} .cookie-text a{color:var(--cream-l);text-decoration:underline} .cookie-btns{display:flex;gap:10px;flex-shrink:0} .cookie-accept{padding:9px 22px;border-radius:30px;background:var(--burg); color:var(--white);font-size:var(--ts-sm);font-weight:700;border:none;cursor:pointer; transition:background .2s} .cookie-accept:hover{background:var(--burg-l)} .cookie-decline{padding:9px 22px;border-radius:30px; border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5); font-size:13px;background:none;cursor:pointer;transition:all .2s} .cookie-decline:hover{border-color:rgba(255,255,255,.3);color:var(--white)} @media(max-width:600px){.cookie-banner{padding:14px 16px}} /* ══ BACK TO TOP ══ */ .back-top{ position:fixed;right:24px;bottom:80px;z-index:170; width:44px;height:44px;border-radius:50%; background:rgba(27,42,68,.85); border:1.5px solid rgba(212,197,164,.25); color:var(--cream);font-size:18px;line-height:1; display:flex;align-items:center;justify-content:center; cursor:pointer;opacity:0;pointer-events:none; transition:opacity .3s,transform .2s,background .2s; backdrop-filter:blur(8px); text-decoration:none} .back-top.show{opacity:1;pointer-events:auto} .back-top:hover{background:var(--burg);transform:translateY(-3px)} @media(max-width:768px){.back-top{right:16px;bottom:72px;width:40px;height:40px}} /* ══ HERO SOCIAL PROOF ══ */ .hero-social-proof{display:flex;align-items:center;gap:14px;margin-bottom:22px} .hsp-avatars{display:flex;align-items:center} .hsp-av{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--font-d);font-size:var(--ts-xs);font-weight:700;color:var(--white); border:2px solid rgba(27,42,68,.9); margin-right:-8px;flex-shrink:0} .hsp-av-more{ background:rgba(212,197,164,.15); border-color:rgba(212,197,164,.3); color:var(--cream);font-size:9px;letter-spacing:-.5px} .hsp-text{margin-left:18px} .hsp-stars{color:#f59e0b;font-size:14px;letter-spacing:1px;display:block;margin-bottom:2px} .hsp-label{font-size:13px;color:rgba(255,255,255,.65);font-weight:400} /* ══ COMPARISON TABLE ══ */ .compare{padding:0 0 60px;background:var(--navy)} @media(max-width:768px){ .hero-social-proof{flex-wrap:wrap} .compare{padding:0 0 40px} .ct-head th:first-child,.ct-row td:first-child{font-size:11px} .contact-method-btn{font-size:12px;padding:9px 10px} } /* ═══════════════════════════════════════ FINAL POLISH — Micro-interactions, Transitions, Visual Refinements ═══════════════════════════════════════ */ /* Selection color — branded */ ::selection{background:rgba(107,24,32,.35);color:var(--white)} /* Smooth image transitions */ img{transition:opacity .3s var(--ease)} /* Section entrance animations */ .forwhom, /* Better button press feedback */ .btn:active{transform:scale(.97) translateY(0) !important} .pr-btn:active{transform:scale(.97)} /* Improved heading hierarchy */ .hd .hl{ background:linear-gradient(90deg,var(--cream) 0%,var(--cream-l) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text} /* Pill hover animation */ .pill{transition:background .2s,border-color .2s,transform .15s} .pill:hover{transform:scale(1.05)} /* Accordion improved */ .acc-head{border-radius:0} .acc-head:first-child{border-radius:18px 18px 0 0} .acc-title{transition:color .2s} .acc-head.open .acc-title{color:var(--white)} /* FAQ hover */ .faq-q{transition:background .2s,padding-left .2s} .faq-q:hover{padding-left:34px} .faq-q.open{padding-left:30px} /* Team card refined */ .team-photo-wrap{border-radius:0} .team-card:first-child .team-photo-wrap{border-radius:22px 22px 0 0} /* Milestone dot pulse on hover */ @keyframes ms-pulse{ 0%{box-shadow:0 0 0 0 rgba(107,24,32,.4)} 70%{box-shadow:0 0 0 12px rgba(107,24,32,0)} 100%{box-shadow:0 0 0 0 rgba(107,24,32,0)}} .ms-item:hover .ms-dot.d1{animation:ms-pulse .8s 1} /* Stats card subtle shimmer */ @keyframes shimmer{ 0%{background-position:200% center} 100%{background-position:-200% center}} /* Scroll reveal stagger for grids */ .fw-grid .rv:nth-child(1){transition-delay:.0s} .fw-grid .rv:nth-child(2){transition-delay:.08s} .fw-grid .rv:nth-child(3){transition-delay:.16s} .fw-grid .rv:nth-child(4){transition-delay:.24s} .fw-grid .rv:nth-child(5){transition-delay:.32s} .fw-grid .rv:nth-child(6){transition-delay:.40s} .testi-grid .rv:nth-child(1){transition-delay:.0s} .testi-grid .rv:nth-child(2){transition-delay:.1s} .testi-grid .rv:nth-child(3){transition-delay:.2s} .testi-grid .rv:nth-child(4){transition-delay:.0s} .testi-grid .rv:nth-child(5){transition-delay:.1s} .testi-grid .rv:nth-child(6){transition-delay:.2s} /* Quiz options hover with icon */ .quiz-opt::before{content:'○ ';color:rgba(212,197,164,.3);font-size:12px} .quiz-opt.selected::before{content:'● ';color:var(--cream)} .quiz-opt:hover::before{content:'○ ';color:rgba(212,197,164,.6)} /* Risk banner icon pulse */ .risk-icon{display:inline-block;animation:shield-pulse 3s ease-in-out infinite} @keyframes shield-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}} /* Journey arrow animation */ @keyframes arrow-bounce{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)}} /* Countdown units glow on change */ /* Sticky CTA bar slide-in animation */ /* Back to top hover */ .back-top::after{content:'Наверх'; position:absolute;right:52px; font-size:var(--ts-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--cream);white-space:nowrap;opacity:0; transition:opacity .2s} .back-top:hover::after{opacity:.7} .back-top{position:relative} /* Footer column hover line */ .ft-col-head::after{ content:'';display:block;width:0;height:2px; background:var(--burg);margin-top:6px; transition:width .3s var(--ease)} .ft-col:hover .ft-col-head::after{width:40px} /* Mobile: float CTA positioned above sticky bar */ @media(max-width:768px){ .float-cta{bottom:80px !important} .back-top{right:16px;bottom:130px} .back-top::after{display:none}} /* ── Unique from CSS1 ── */ .wrap{max-width:760px;margin:0 auto;padding:0 24px} .ft-logo-link{display:flex;align-items:center;text-decoration:none} .ft-brand-col{} .ft-contact-list{display:flex;flex-direction:column;gap:0} .ft-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px; border-radius:20px;font-size:var(--ts-xs);font-weight:700;letter-spacing:.1em; text-transform:uppercase} .ft-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} /* ═══════════════════════════════════════════════════ RESTORED SECTION CSS — All missing styles ═══════════════════════════════════════════════════ */ /* ── LAYOUT UTILITIES ── */ .w{max-width:1160px;margin:0 auto;padding:0 48px} .ey,.eyebrow{display:block;font-size:var(--ts-xs);font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--slate-l);margin-bottom:14px} .hd{font-family:var(--font-d);font-size:clamp(36px,5vw,64px); font-weight:800;line-height:1.05;letter-spacing:-.01em} .hd .hl,.hd span[style*="color"]{color:var(--cream)} .lead{font-size:17px;font-weight:300;line-height:1.85; color:rgba(255,255,255,.60);max-width:640px;margin-top:18px} .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px; border-radius:40px;font-size:15px;font-weight:700;letter-spacing:.04em; transition:transform .2s,background .25s;cursor:pointer;text-decoration:none} .btn:hover{transform:translateY(-2px)} .btn-r{background:var(--burg);color:var(--white)} .btn-r:hover{background:var(--burg-l)} .btn-cr{border:1.5px solid rgba(212,197,164,.30);color:var(--cream-l);background:transparent} .btn-cr:hover{background:rgba(212,197,164,.07);border-color:var(--cream)} /* ── BODY ── */ /* body in restored CSS */ /* ── HERO ── */ .hero{min-height:100vh;display:flex;align-items:center; padding:102px 0 70px;position:relative;overflow:hidden; background:var(--navy)} .hero::before{content:'';position:absolute;inset:0; background:radial-gradient(ellipse 50% 55% at 55% 50%,rgba(212,197,164,.06) 0%,transparent 70%), radial-gradient(ellipse 30% 40% at 10% 80%,rgba(122,143,163,.08) 0%,transparent 60%)} .hero-bg{position:absolute;inset:0;z-index:0; background-image:linear-gradient(rgba(212,197,164,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(212,197,164,.025) 1px,transparent 1px); background-size:56px 56px} .hero-inner{position:relative;z-index:1; display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center} .hero-tag{display:inline-flex;align-items:center;gap:9px; font-size:var(--ts-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--cream);margin-bottom:20px} .hero-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--cream)} .hero-h1{font-family:var(--font-d);font-size:clamp(52px,6.5vw,92px); font-weight:800;line-height:.96;letter-spacing:-.02em;margin-bottom:22px} .hero-h1 .it{font-style:italic;font-weight:300;color:var(--cream);display:block} .hero-p{font-size:18px;font-weight:300;line-height:1.85;color:var(--t60); max-width:520px;margin-bottom:36px} .hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px} .pill{padding:8px 18px;border-radius:30px;font-size:14px;font-weight:500; border:1px solid rgba(212,197,164,.28);color:var(--cream-l); transition:background .2s,border-color .2s} .pill:hover{background:rgba(212,197,164,.08);border-color:rgba(212,197,164,.45)} .hero-btns{display:flex;gap:14px;flex-wrap:wrap} .hero-kpi{display:flex;gap:52px;flex-wrap:wrap; padding-top:44px;margin-top:44px;border-top:1px solid rgba(212,197,164,.12)} .kpi-num{font-family:var(--font-d);font-size:48px;font-weight:700; color:var(--cream);line-height:1} .kpi-lbl{font-size:12px;color:var(--t40);margin-top:4px;font-weight:300} .hero-shapes{position:relative;height:360px;display:flex;align-items:center;justify-content:center} .sh{position:absolute;border-radius:16px;opacity:.9} .sh1{width:160px;height:190px;background:var(--slate-bg);top:20px;left:40px;transform:rotate(-8deg)} .sh2{width:200px;height:170px;background:var(--cream);bottom:40px;left:120px;transform:rotate(5deg)} .sh3{width:130px;height:200px;background:var(--burg);top:10px;right:20px;transform:rotate(3deg); clip-path:polygon(0 0,100% 8%,100% 100%,0 92%)} .start-badge{position:absolute;bottom:50px;right:50px;z-index:2; padding:20px 28px;border-radius:16px;background:var(--cream); box-shadow:0 8px 32px rgba(0,0,0,.25)} .start-badge .sb-label{font-size:var(--ts-xs);font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:#6b5a3a;margin-bottom:4px} .start-badge .sb-date{font-family:var(--font-d);font-size:32px;font-weight:800; color:var(--navy);line-height:1} /* ── TRUST ── */ ;position:relative;overflow:hidden} .trust::before{content:'';position:absolute;inset:0; background:radial-gradient(ellipse 70% 100% at 50% 50%,rgba(157,38,50,.35) 0%,transparent 70%)} .trust-inner{position:relative;z-index:1} .trust-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:50px} .trust-person{padding:48px 44px;border-right:1px solid rgba(255,255,255,.1)} .trust-person:last-child{border-right:none} .tp-creds{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:8px} .tp-creds li{font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.78);padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08);line-height:1.4} .tp-name{font-family:var(--font-d);font-size:40px;font-weight:800;line-height:1;margin-top:12px} .tp-photo{width:140px;height:140px;border-radius:50%;margin-bottom:4px; object-fit:cover;object-position:top; border:3px solid var(--t-muted);box-shadow:0 6px 24px rgba(0,0,0,.3)} .tp-li{display:inline-flex;align-items:center;gap:8px;margin-top:20px; padding:10px 22px;border-radius:30px;border:1.5px solid rgba(255,255,255,.22); color:rgba(255,255,255,.75);font-size:var(--ts-sm);font-weight:600; text-decoration:none;transition:all .25s} .tp-li:hover{background:rgba(10,102,194,.3);border-color:rgba(91,155,213,.5);color:var(--white)} /* ── MODULES OVERVIEW ── */ .modules-overview .ey{color:var(--slate)} .mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px} .mod-grid-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px;margin-top:16px} .mod-card{padding:32px 28px;border-radius:18px;color:var(--white)} .mod-card.m1{background:var(--burg);border:1px solid var(--burg-m)} .mod-card.m2{background:var(--navy);border:1px solid var(--navy-m)} .mod-card.m3{background:var(--slate-bg);border:1px solid var(--slate)} .mod-card.m4{background:var(--navy-m);border:1px solid rgba(255,255,255,.08)} .mod-card.m5{background:var(--cream);border:1px solid #c0ad8a;color:var(--navy)} .mod-num{font-family:var(--font-d);font-size:var(--ts-xs);font-weight:700;letter-spacing:.2em; text-transform:uppercase;opacity:.65;margin-bottom:10px} .mod-title{font-family:var(--font-d);font-size:22px;font-weight:800;letter-spacing:.02em; text-transform:uppercase;line-height:1.15;margin-bottom:10px} .mod-desc{font-size:calc(var(--ts-base) - 1px);line-height:1.65;opacity:.75} /* ── DETAIL ── */ .detail-layout{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:start;margin-top:50px} .detail-badge{background:var(--burg);border-radius:20px;padding:36px 28px;text-align:center} .detail-badge .d-n{font-family:var(--font-d);font-size:52px;font-weight:800; line-height:1;color:var(--white)} .detail-badge .d-l{font-size:var(--ts-sm);font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:4px} .detail-badge .d-sep{width:40px;height:2px;background:rgba(255,255,255,.2);margin:20px auto} .detail-text p{font-size:16px;line-height:1.85;color:var(--t60);margin-bottom:18px} .detail-text strong{color:var(--cream-l);font-weight:600} .stream-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px; padding:8px 18px;border-radius:30px; background:rgba(212,197,164,.1);border:1px solid rgba(212,197,164,.2)} .stream-badge span{font-size:var(--ts-sm);font-weight:600;color:var(--cream)} /* ── MODULES ACCORDION ── */ .acc{margin-top:50px;display:flex;flex-direction:column;gap:2px; border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.07)} .acc-item{background:rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.07)} .acc-item:last-child{border-bottom:none} .acc-head{display:flex;align-items:center;justify-content:space-between; padding:28px 36px;cursor:pointer;transition:background .2s;user-select:none} .acc-head:hover,.acc-head.open{background:rgba(255,255,255,.05)} .acc-title-wrap{display:flex;align-items:center;gap:20px} .acc-num{font-family:var(--font-d);font-size:44px;font-weight:800; color:rgba(255,255,255,.07);line-height:1;min-width:60px} .acc-title{font-family:var(--font-d);font-size:22px;font-weight:700; color:var(--cream-l);letter-spacing:.01em;transition:color .2s} .acc-head.open .acc-title{color:var(--white)} .acc-sub{font-size:13px;color:var(--t40);margin-top:3px} .acc-arrow{width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; background:rgba(255,255,255,.07);transition:transform .3s,background .2s} .acc-head.open .acc-arrow{transform:rotate(180deg);background:var(--burg)} .acc-body{max-height:0;overflow:hidden;padding:0 36px 0 116px; transition:max-height .45s var(--ease),padding .45s var(--ease)} .acc-body.open{max-height:600px;padding:0 36px 36px 116px} .acc-intro{font-size:15px;color:var(--t60);margin-bottom:20px;line-height:1.8;font-style:italic} .acc-list{list-style:none;display:flex;flex-direction:column;gap:10px} .acc-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--t60);line-height:1.65} .acc-list li::before{content:'→';color:var(--cream);font-weight:600;flex-shrink:0;margin-top:2px} .acc-result{margin-top:20px;padding:16px 20px;border-radius:12px; background:rgba(212,197,164,.07);border-left:3px solid var(--cream); font-size:14px;color:rgba(255,255,255,.72);font-style:italic;line-height:1.7} /* ── BONUSES ── */ .bonus-inner{max-width:820px} .bonus-head{font-family:var(--font-d);font-size:clamp(26px,3.5vw,38px); font-weight:300;color:rgba(255,255,255,.75);margin-bottom:32px;line-height:1.3} .bonus-list{display:flex;flex-direction:column;gap:16px;margin-bottom:40px} .bonus-item{display:flex;align-items:flex-start;gap:18px;padding:22px 26px; border-radius:14px;background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);transition:border-color .3s} .bonus-item:hover{border-color:rgba(212,197,164,.18)} .bonus-n{font-family:var(--font-d);font-size:32px;font-weight:700; color:var(--burg-l);flex-shrink:0;line-height:1;min-width:32px} .bonus-text{font-size:var(--ts-base);line-height:1.7;color:var(--t60)} .bonus-text strong{color:var(--cream-l);font-weight:600} /* ── TEAM ── */ .team{padding:90px 0; background:linear-gradient(160deg,#dde4ec 0%,#c8d3df 50%,#d4dce6 100%)} .team .ey{color:var(--lt-muted)} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px} .team-card{border-radius:22px;overflow:hidden;background:#fff; border:1px solid rgba(27,42,68,.10);box-shadow:0 4px 24px rgba(27,42,68,.12); transition:transform .35s var(--ease),box-shadow .35s;display:flex;flex-direction:column} .team-card:hover{transform:translateY(-7px);box-shadow:0 20px 50px rgba(27,42,68,.22)} .team-photo-wrap{width:100%;overflow:hidden;position:relative;flex-shrink:0} .team-photo-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0; height:90px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.2) 40%,rgba(255,255,255,.92) 100%)} .team-photo{width:100%;height:auto;display:block;transition:transform .45s var(--ease)} .team-card:hover .team-photo{transform:scale(1.04)} .team-body{padding:22px 26px 28px;display:flex;flex-direction:column;flex:1} .team-name{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:800; margin-bottom:5px;color:var(--lt-primary);letter-spacing:.01em;line-height:1.1} .team-role{font-size:var(--ts-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--burg);margin-bottom:12px} .team-bio{font-size:13.5px;line-height:1.75;color:var(--lt-secondary);margin-bottom:18px;flex:1} .team-li{display:inline-flex;align-items:center;gap:8px; padding:9px 20px;border-radius:30px;align-self:flex-start; border:1.5px solid rgba(10,102,194,.35);color:#0a66c2; font-size:var(--ts-xs);font-weight:600;letter-spacing:.05em; transition:all .25s;text-decoration:none;background:rgba(10,102,194,.05)} .team-li:hover{background:rgba(10,102,194,.12);border-color:#0a66c2; color:#084e96;transform:translateY(-1px)} .team-li svg{flex-shrink:0} /* ── TESTIMONIALS ── */ .testi{padding:100px 0;background:var(--navy-d)} .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .tc{padding:36px 32px;border-radius:20px;background:var(--white); box-shadow:0 4px 24px rgba(27,42,68,.1);display:flex;flex-direction:column; transition:transform .3s var(--ease),box-shadow .3s} .tc:hover{transform:translateY(-5px);box-shadow:0 16px 48px rgba(27,42,68,.18)} .tc-stars{display:flex;gap:3px;margin-bottom:18px} .tc-star,.tc-stars{color:#f59e0b;font-size:17px} .tc-text{font-size:var(--ts-base);line-height:1.8;color:var(--lt-secondary);font-style:italic;flex:1;margin-bottom:24px} .tc-text::before{content:'"';font-family:var(--font-d);font-size:48px; color:var(--burg);line-height:.5;display:block;margin-bottom:12px;font-style:normal} .tc-author{display:flex;align-items:center;gap:14px; padding-top:20px;border-top:1px solid rgba(0,0,0,.06)} .tc-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--white)} .tc-av1{background:linear-gradient(135deg,var(--burg),#9b2632)} .tc-av2{background:linear-gradient(135deg,var(--slate-bg),#5a7a94)} .tc-av3{background:linear-gradient(135deg,var(--navy-m),#2a4a72)} .tc-av4{background:linear-gradient(135deg,#2d7a4f,#1a5c38)} .tc-av5{background:linear-gradient(135deg,#7a4f2d,#5c381a)} .tc-av6{background:linear-gradient(135deg,var(--burg-m),#6b1820)} .tc-name{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--lt-primary)} .tc-meta{font-size:12px;color:var(--lt-muted);margin-top:1px} .tc-result{margin-top:6px;display:inline-block;font-size:var(--ts-xs);font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px; background:rgba(10,150,80,.1);color:#0a9650} /* ── PRICING ── */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:28px;margin-top:56px;align-items:stretch} .pr-card{border-radius:22px;overflow:hidden;background:var(--white);color:var(--navy); display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s} .pr-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.3)} .pr-card.featured{transform:translateY(-10px);box-shadow:0 32px 80px rgba(0,0,0,.4); border:2px solid var(--burg)} .pr-card.featured:hover{transform:translateY(-14px)} .pr-top{padding:32px 28px 20px;flex:1;display:flex;flex-direction:column; min-width:0;overflow:hidden} .pr-pip{width:44px;height:12px;border-radius:6px;margin-bottom:20px;flex-shrink:0} .pip-cream{background:var(--cream)}.pip-slate{background:var(--slate-bg)}.pip-red{background:var(--burg)} .pr-title{font-family:var(--font-d);font-size:var(--ts-lg);font-weight:800;color:var(--navy); margin-bottom:10px;line-height:1.15;word-wrap:break-word;overflow-wrap:break-word} .pr-tag{display:inline-block;margin-bottom:18px;font-size:var(--ts-xs);font-weight:700; letter-spacing:.14em;text-transform:uppercase;padding:5px 13px;border-radius:20px; background:rgba(27,42,68,.08);color:var(--lt-secondary);line-height:1.4} .pr-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;flex:1} .pr-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px; line-height:1.65;color:var(--lt-secondary);min-width:0} .pr-list li::before{content:'✓';color:var(--burg);font-weight:800;flex-shrink:0; font-size:calc(var(--ts-base) - 1px);line-height:1.5;margin-top:1px} .pr-highlight{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.6; margin-bottom:0;padding:14px 0 0;border-top:1px solid rgba(27,42,68,.07)} .pr-bottom{padding:22px 28px 32px;border-top:1px solid rgba(0,0,0,.07);flex-shrink:0} .pr-price{font-family:var(--font-d);font-size:48px;font-weight:800; color:var(--navy);line-height:1;display:flex;align-items:baseline;gap:6px} .pr-price small{font-size:16px;font-weight:400;color:#888} .pr-vip-note{margin-top:8px;font-size:var(--ts-sm);font-weight:700;color:var(--burg)} .pr-btn{margin-top:18px;display:block;width:100%;padding:15px;border-radius:40px; text-align:center;font-size:15px;font-weight:700;letter-spacing:.04em; background:var(--burg);color:var(--white);transition:background .25s;text-decoration:none} .pr-btn:hover{background:var(--burg-l)} /* ── CTA SECTION ── */ .cta-inner{display:grid;grid-template-columns:500px 1fr; align-items:stretch;min-height:580px} .cta-photo{height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center} .cta-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .cta-text{padding:80px 64px;display:flex;flex-direction:column;justify-content:center} .cta-title{font-family:var(--font-d);font-size:clamp(30px,4vw,52px); font-weight:700;line-height:1.1;margin-bottom:20px} .cta-desc{font-size:16px;line-height:1.8;color:var(--t60);margin-bottom:12px} .cta-sub{font-size:var(--ts-base);line-height:1.75;color:var(--t60);margin-bottom:36px} .cta-links{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap} .cta-site{font-size:var(--ts-sm);font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--cream);text-decoration:underline;text-underline-offset:3px} /* ── GUESTS ── */ .guests{padding:70px 0; background:linear-gradient(160deg,#c8d3df 0%,#dde4ec 100%); border-top:1px solid rgba(27,42,68,.08)} .guests .hd{color:var(--lt-primary)} .guests-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px; margin-top:44px;max-width:820px;margin-left:auto;margin-right:auto} .guest-card{display:flex;align-items:center;gap:28px;padding:32px 36px; border-radius:20px;background:#fff;border:1px solid rgba(27,42,68,.10); box-shadow:0 4px 20px rgba(27,42,68,.10);transition:transform .35s,box-shadow .35s} .guest-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(27,42,68,.18)} .guest-photo{width:100px;height:100px;border-radius:50%;flex-shrink:0; object-fit:cover;object-position:top; border:3px solid rgba(27,42,68,.15);box-shadow:0 6px 20px rgba(0,0,0,.15)} .guest-name{font-family:var(--font-d);font-size:22px;font-weight:700; margin-bottom:4px;color:var(--lt-primary)} .guest-role{font-size:13px;line-height:1.6;color:var(--lt-secondary)} /* ── RESPONSIVE ── */ @media(max-width:1024px){ .hero-inner{grid-template-columns:1fr} .hero-shapes{display:none} .trust-layout{grid-template-columns:1fr} .trust-person{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)} .trust-person:last-child{border-bottom:none} .mod-grid{grid-template-columns:1fr 1fr} .pricing-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto} .cta-inner{grid-template-columns:1fr} .cta-photo{display:none}} /* compare table removed */ .ct-head th:first-child{width:130px;font-size:10px} .ct-row td:first-child{font-size:12px;padding-left:12px} .ct-row td,.ct-head th{padding:12px 10px;font-size:12px} .ct-price{font-size:28px}} /* ════════════════════════════════════════════════════════ MOBILE RESPONSIVE SYSTEM v2 Breakpoints: --mob-sm: 480px (small phones) --mob-md: 640px (large phones) --mob-lg: 768px (tablets portrait) --tab: 1024px (tablets landscape / small laptops) ════════════════════════════════════════════════════════ */ /* ── 1024px: Tablet landscape ── */ @media(max-width:1024px){ .w{padding:0 var(--sp-9)} .hero-inner{grid-template-columns:1fr;text-align:center} .hero-shapes{display:none} .hero-p,.lead{margin-left:auto;margin-right:auto} .hero-btns{justify-content:center} .hero-kpi{justify-content:center} .hero-social-proof{justify-content:center} .cta-inner{grid-template-columns:1fr} .cta-photo{display:none} .cta-text{padding:64px 48px} .detail-layout{grid-template-columns:1fr} .detail-badge{display:none} .pricing-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto} .pr-card.featured{transform:none} .faq-cols{grid-template-columns:1fr;gap:var(--sp-10)} .faq-sticky{position:static} .ft-main{grid-template-columns:1fr 1fr;gap:var(--sp-10);padding:var(--sp-14) var(--sp-9) var(--sp-11)} .mod-grid{grid-template-columns:1fr 1fr} .mod-grid-row2{grid-template-columns:1fr 1fr;max-width:100%} } /* ── 768px: Tablets portrait / large phones ── */ @media(max-width:768px){ /* Layout */ .w{padding:0 var(--sp-5)} section{padding:72px 0 !important} .bonuses{padding:60px 0 !important} /* Typography */ .hd{font-size:clamp(28px,8vw,44px)} .lead{font-size:16px;max-width:100%} .ey,.eyebrow{font-size:10px} /* Nav */ .nav{height:64px;top:0} .nav-inner{padding:0 var(--sp-5)} .nav-links,.nav-cta{display:none !important} .burger{display:flex} .nav-logo-wrap{height:44px;padding:4px 7px;margin-right:0} .nav-logo{height:34px} .nav.up{height:54px} /* Hero */ .hero{padding:80px 0 56px} .hero-h1{font-size:clamp(42px,10vw,72px);text-align:left} .hero-tag{justify-content:flex-start} .hero-social-proof{flex-wrap:wrap} .hero-btns{flex-direction:column;align-items:flex-start} .hero-btns .btn{width:100%;justify-content:center} .hero-kpi{gap:var(--sp-8);justify-content:flex-start} /* Stats */ .stats-grid{grid-template-columns:repeat(3,1fr)} .stat-card:nth-child(4){border-right:1px solid var(--border-dk)} .stat-num{font-size:clamp(32px,8vw,48px)} /* Trust */ .trust-layout{grid-template-columns:1fr} .trust-person{border-right:none;border-bottom:1px solid rgba(255,255,255,.12)} .trust-person:last-child{border-bottom:none} .trust-person{padding:var(--sp-9) var(--sp-6)} .tp-name{font-size:28px} /* ForWhom */ .fw-grid{grid-template-columns:1fr} .fw-card{padding:var(--sp-6) var(--sp-5)} .fw-NOT{padding:var(--sp-6) var(--sp-5)} /* Journey */ .journey-track{grid-template-columns:1fr;gap:var(--sp-4)} .journey-arrow{flex-direction:row;justify-content:center;font-size:22px} .journey-arrow span{writing-mode:horizontal-tb} .journey-bottom{flex-direction:column;text-align:center;gap:var(--sp-5)} .journey-before,.journey-after{padding:var(--sp-7) var(--sp-6)} /* Modules */ .mod-grid{grid-template-columns:1fr} .mod-grid-row2{grid-template-columns:1fr;max-width:100%} .acc-head{padding:var(--sp-5) var(--sp-6)} .acc-num{font-size:28px;min-width:40px} .acc-body{padding:0 var(--sp-6) 0 var(--sp-6)} .acc-body.open{padding:0 var(--sp-6) var(--sp-6) var(--sp-6)} .acc-title-wrap{gap:var(--sp-4)} /* Milestones */ .ms-track::before{left:20px;top:30px;bottom:30px} .ms-dot{width:42px;height:42px;font-size:18px} .ms-item{gap:var(--sp-5)} .ms-title{font-size:18px} .ms-desc{font-size:14px} /* Quiz */ .quiz-header,.quiz-body,.quiz-result{padding:var(--sp-6) var(--sp-5)} .qr-score-wrap{flex-direction:column;align-items:center;text-align:center} .qr-ring{width:80px;height:80px;font-size:24px} .qr-actions{flex-direction:column} .qr-actions .btn{width:100%;justify-content:center} /* Team */ .team-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto} /* Guests */ .guests-grid{grid-template-columns:1fr;max-width:420px;margin:var(--sp-11) auto 0} .guest-card{flex-direction:column;text-align:center;padding:var(--sp-7) var(--sp-6)} .guest-photo{margin:0 auto var(--sp-4)} /* Testimonials */ .testi-grid{grid-template-columns:1fr} /* Pricing */ .pricing-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto} .pr-card.featured{transform:none;margin:var(--sp-5) 0} /* FAQ */ .faq-q{padding:var(--sp-5) var(--sp-5)} .faq-q-text{font-size:14px} .faq-a{padding:0 var(--sp-5) 0} .faq-a.open{padding:0 var(--sp-5) var(--sp-5)} /* CTA */ .cta-text{padding:56px var(--sp-5)} .cta-title{font-size:clamp(26px,7vw,40px)} /* Footer */ .ft-main{grid-template-columns:1fr;gap:var(--sp-8);padding:var(--sp-11) var(--sp-5) var(--sp-9)} .ft-bottom{padding:var(--sp-4) var(--sp-5);flex-direction:column;align-items:flex-start;gap:var(--sp-3)} .ft-copy{text-align:left} /* Bonuses */ .bonus-item{flex-direction:column;gap:var(--sp-3)} .bonus-inner{max-width:100%} /* Countdown */ /* Sticky CTA */ /* Floating CTA */ .float-cta{bottom:80px;right:var(--sp-4)} .back-top{right:var(--sp-4);bottom:128px} .back-top::after{display:none} /* ForWhom NOT tags */ .fw-NOT-list{flex-direction:column;gap:var(--sp-2)} /* Mobile menu */ .mob a{font-size:30px} } /* ── 640px: Large phones ── */ /* ── 480px: Small phones ── */ /* ═══════════════════════════════════════════════════════ COMPREHENSIVE MOBILE — Audited & Complete Breakpoints: 1024 / 900 / 768 / 640 / 480 / 360 ═══════════════════════════════════════════════════════ */ /* ── 1024px: Large tablet / small laptop ── */ @media(max-width:1024px){ .w{padding:0 32px} .hero-inner{grid-template-columns:1fr;text-align:center} .hero-p,.hero-pills,.hero-btns,.hero-social-proof{justify-content:center;margin-left:auto;margin-right:auto} .hero-shapes{display:none} .hero-kpi{justify-content:center} .hero-h1{font-size:clamp(48px,8vw,72px)} .trust-layout{grid-template-columns:1fr} .trust-person{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)} .trust-person:last-child{border-bottom:none} .mod-grid{grid-template-columns:1fr 1fr} .mod-grid-row2{grid-template-columns:1fr 1fr;max-width:100%} .detail-layout{grid-template-columns:1fr} .detail-badge{max-width:200px} .pricing-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto} .pr-card.featured{transform:none} .cta-inner{grid-template-columns:1fr} .cta-photo{display:none} .cta-text{padding:64px 40px} .ft-main{grid-template-columns:1fr 1fr;gap:40px;padding:56px 32px 44px} .ms-track::before{left:24px} .faq-cols{grid-template-columns:1fr;gap:40px} .faq-sticky{position:static} .testi-grid{grid-template-columns:1fr 1fr} .guests-grid{grid-template-columns:1fr} .journey-track{grid-template-columns:1fr;gap:20px} .journey-arrow{flex-direction:row;font-size:22px;justify-content:center;padding:8px 0} .journey-arrow span{writing-mode:horizontal-tb} .journey-bottom{flex-direction:column;text-align:center;align-items:center} .compare-title-row{padding:28px 32px 16px} .ct-wrap{padding:0 32px 40px} .ms-dot{width:52px;height:52px;font-size:22px} } /* ── 768px: Tablet portrait / large phone ── */ @media(max-width:768px){ .w{padding:0 20px} .nav{height:64px} .nav.up{height:52px} .nav-inner{padding:0 20px} .nav-logo-wrap{height:44px;padding:4px 7px;margin-right:0} .nav-logo{height:34px} .nav-links,.nav-cta{display:none} .burger{display:flex} .hero{padding:90px 0 60px} .hero-h1{font-size:clamp(36px,9vw,56px)} .hero-p{font-size:16px} .hero-btns{flex-direction:column;gap:12px} .hero-btns .btn{justify-content:center;width:100%;max-width:340px;margin:0 auto} .hero-kpi{gap:28px;padding-top:32px;margin-top:32px} .kpi-num{font-size:36px} .stats-grid{grid-template-columns:repeat(3,1fr)} .stat-num{font-size:36px} .fw-grid{grid-template-columns:1fr} .fw-card{padding:24px 20px} .journey-before,.journey-after{padding:28px 24px} .acc-head{padding:22px 24px} .acc-title-wrap{gap:14px} .acc-num{font-size:32px;min-width:44px} .acc-title{font-size:18px} .acc-body{padding:0 24px 0} .acc-body.open{padding:0 24px 28px} .team-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto} .testi-grid{grid-template-columns:1fr} .tc{padding:28px 24px} .ms-dot{width:46px;height:46px;font-size:18px} .ms-item{gap:18px;padding:22px 0} .ms-track::before{left:20px} .ms-title{font-size:20px} .quiz-wrap{border-radius:16px} .quiz-header,.quiz-body,.quiz-result{padding:24px 22px} .quiz-question{font-size:20px} .qr-score-wrap{flex-direction:column;align-items:flex-start;gap:16px} .cta-text{padding:48px 24px} .ft-main{grid-template-columns:1fr;gap:32px;padding:44px 20px 36px} .ft-bottom{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:10px} .ft-bottom-links{flex-wrap:wrap;gap:14px} .compare-title-row{padding:20px 20px 12px;font-size:12px} .ct-wrap{padding:0 0 32px} .ct-head th{padding:14px 10px;font-size:12px} .ct-row td{padding:12px 8px;font-size:12px} .ct-row td:first-child{font-size:11px;padding-left:10px;max-width:130px} .ct-price{font-size:24px} .journey-bottom{padding:22px 20px} .jb-text{font-size:18px} .hsp-avatars .hsp-av{width:32px;height:32px;font-size:10px} .risk-banner{padding:20px 18px;gap:14px} .reciprocity-bar{padding:48px 0} .rec-inner{flex-direction:column;gap:28px;text-align:center} .rec-cards{justify-content:center} section{scroll-margin-top:67px} } /* ── 640px: Standard phone ── */ @media(max-width:640px){ .w{padding:0 16px} .hero-h1{font-size:clamp(32px,10vw,48px)} .hero-social-proof{flex-direction:column;align-items:center;gap:10px;text-align:center} .stats-grid{grid-template-columns:1fr 1fr} .stat-card:nth-child(5){grid-column:1/-1} .stat-card{border-right:none;border-bottom:1px solid var(--border-dk)} .stat-card:last-child{border-bottom:none} .pricing-grid{max-width:100%} .pr-top{padding:24px 20px 16px} .pr-bottom{padding:18px 20px 28px} .pr-title{font-size:22px} .pr-price{font-size:40px} .mod-grid,.mod-grid-row2{grid-template-columns:1fr} .fw-NOT-list{flex-direction:column} .ms-content{padding-top:8px} .ms-title{font-size:18px} .ms-desc{font-size:14px} .ms-unlock{font-size:10px;padding:4px 10px} .guest-card{flex-direction:column;text-align:center;padding:24px 20px} .guest-photo{margin:0 auto} .team-card{max-width:100%} .faq-q{padding:18px 20px} .faq-q-text{font-size:14.5px} .faq-a{padding:0 20px 0} .faq-a.open{padding:0 20px 20px} .float-cta{bottom:80px;right:16px;font-size:14px;padding:12px 20px} .back-top{right:16px;bottom:136px} .cta-text{padding:40px 20px} .cta-title{font-size:clamp(24px,7vw,38px)} .footer .ft-col-head{font-size:11px} .ft-nav-list li a{font-size:13px} .ft-contact-val{font-size:12.5px} } /* ── 480px: Small phone ── */ @media(max-width:480px){ .hero{padding:80px 0 52px} .hero-h1{font-size:32px} .hero-tag{font-size:10px} .pill{font-size:12px;padding:6px 14px} .kpi-num{font-size:30px} .kpi-lbl{font-size:11px} .stats-grid{grid-template-columns:1fr 1fr} .stat-num{font-size:30px} .hd{font-size:clamp(28px,9vw,42px)} .lead{font-size:15px} .quiz-opt{font-size:14px;padding:14px 16px} .quiz-question{font-size:18px} .acc-title{font-size:16px} .acc-num{font-size:28px} .tc{padding:24px 18px} .tc-text{font-size:14px} .tc-name{font-size:16px} .ms-item{gap:14px} .ms-dot{width:40px;height:40px;font-size:16px} .ms-track::before{left:17px} .nav-links a{font-size:12px;padding:6px 10px} .ft-main{padding:36px 16px 28px;gap:28px} .ft-logo-img{height:42px} .ft-social-link{padding:10px 12px;gap:10px} .ft-social-name{font-size:13px} } /* ── 360px: Very small phone ── */ @media(max-width:360px){ .w{padding:0 14px} .hero-h1{font-size:28px} .hd{font-size:26px} .nav-inner{padding:0 14px} .pricing-grid{max-width:100%} .pr-price{font-size:34px} .stats-grid{grid-template-columns:1fr} }