:root {
  --ink: #111a2d;
  --muted: #68758b;
  --blue: #3169ea;
  --blue-dark: #2455cc;
  --green: #2fb58c;
  --surface: #f5f7fc;
  --line: #e2e7f0;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "DM Sans", sans-serif; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 105px 0; }
.brand { font: 800 23px "Manrope", sans-serif; letter-spacing: -1.3px; }
.brand span { color: var(--blue); }

.site-header { position: absolute; z-index: 30; width: 100%; top: 0; }
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.desktop-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 35px; }
.desktop-nav a { color: #4f5a6d; font-size: 12px; font-weight: 600; }
.desktop-nav a:hover { color: var(--blue); }
.nav-cta { color: white; background: var(--ink); padding: 11px 15px; border-radius: 9px; font-size: 11px; font-weight: 700; }
.nav-cta span { color: #8cb0ff; margin-left: 6px; }
.menu-button { display: none; border: 0; background: transparent; font-size: 22px; }
.mobile-nav { display: none; }
.audience-switch-shell { position:absolute; z-index:25; top:88px; left:50%; transform:translateX(-50%); width:min(520px,calc(100% - 30px)); }
.audience-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; border:1px solid rgba(255,255,255,.95); border-radius:16px; background:rgba(255,255,255,.76); box-shadow:0 10px 27px rgba(28,48,92,.14); backdrop-filter:blur(17px); }
.audience-button { display:grid; grid-template-columns:31px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; border:0; border-radius:12px; padding:10px 13px; text-align:left; color:#69758a; background:transparent; cursor:pointer; transition:.25s; }
.audience-button>span { grid-row:1/3; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:var(--blue); background:#e9f0ff; font-weight:800; }
.audience-button strong,.audience-button small { display:block; }.audience-button strong { font-size:10px; }.audience-button small { font-size:7px; margin-top:2px; }
.audience-button.active { color:white; background:var(--blue); box-shadow:0 7px 16px rgba(49,105,234,.25); }
.audience-button.active>span { color:var(--blue); background:white; }
body[data-mode="creator"] [data-audience="brand"],body[data-mode="brand"] [data-audience="creator"],body[data-mode="creator"] [data-audience-nav="brand"],body[data-mode="brand"] [data-audience-nav="creator"]{display:none!important}

.hero { position: relative; min-height: 800px; padding: 195px 0 0; overflow: hidden; background: linear-gradient(120deg, #f3f6ff, #fafbff 48%, #eef3ff); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(15px); }
.glow-left { width: 470px; height: 470px; left: -210px; top: -170px; background: rgba(75,126,245,.15); }
.glow-right { width: 530px; height: 530px; right: -240px; bottom: -100px; background: rgba(98,68,214,.12); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; min-height: 540px; }
.eyebrow, .section-label, .section-heading > span { color: var(--blue); font-size: 10px; letter-spacing: 1.5px; font-weight: 800; }
.hero h1, .section-heading h2, .creator-copy h2, .brand-intro h2, .inquiry h2, .faq h2 { font-family: "Manrope"; letter-spacing: -3px; margin: 20px 0; }
.hero h1 { font-size: clamp(53px, 5.6vw, 75px); line-height: .99; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-copy > p { color: var(--muted); max-width: 560px; font-size: 17px; line-height: 1.7; }
.hero-actions { display: flex; gap: 10px; margin: 29px 0 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 0; border-radius: 10px; padding: 15px 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; cursor: pointer; transition: .22s; }
.button:hover { transform: translateY(-2px); }
.primary { color: white; background: var(--blue); box-shadow: 0 10px 24px rgba(49,105,234,.22); }
.primary:hover { background: var(--blue-dark); }
.secondary { background: rgba(255,255,255,.75); border: 1px solid white; text-transform: none; font-weight: 700; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; color: #647087; font-size: 10px; }
.trust-row i { display: inline-grid; place-items: center; width: 17px; height: 17px; color: var(--green); background: #e6f8f1; border-radius: 50%; font-style: normal; margin-right: 4px; }
.hero-visual { min-height: 500px; position: relative; display: grid; place-items: center; }
.phone { width: 255px; height: 478px; position: relative; overflow: hidden; padding: 45px 20px 22px; color: white; border-radius: 43px; background: linear-gradient(160deg,#316be5,#294fbd 42%,#3a1b91); box-shadow: 0 35px 70px rgba(47,63,158,.3); transform: rotate(2deg); }
.notch { position: absolute; top: 13px; left: 50%; width: 80px; height: 19px; border-radius: 20px; transform: translateX(-50%); background: #111a2d; }
.phone-head { display: flex; justify-content: space-between; font-weight: 800; font-size: 11px; }
.phone-head i { color: #94f0c9; font-style: normal; font-size: 8px; background: rgba(255,255,255,.1); padding: 4px 6px; border-radius: 20px; }
.phone-video { height: 270px; position: relative; margin: 18px 0 13px; padding: 16px; border-radius: 22px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(25deg,rgba(6,8,21,.85),transparent 70%), radial-gradient(circle at 70% 35%,#ef79a4,#6f43d4 43%,#172653); }
.video-label { position: absolute; left: 13px; top: 13px; font-size: 7px; letter-spacing: 1px; background: rgba(0,0,0,.25); padding: 4px 6px; border-radius: 20px; }
.play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 47px; height: 47px; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--blue); border-radius: 50%; font-size: 12px; }
.phone-video strong { font: 800 18px/1.05 "Manrope"; }
.phone-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.phone-stats div { padding: 9px; background: rgba(255,255,255,.09); border-radius: 10px; }
.phone-stats small, .phone-stats strong { display: block; }
.phone-stats small { opacity: .55; font-size: 7px; }
.phone-stats strong { font-size: 11px; margin-top: 3px; }
.floating-card { position: absolute; z-index: 3; padding: 11px 14px; border: 1px solid white; border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 12px 28px rgba(32,48,85,.12); animation: float 4s ease-in-out infinite; }
.floating-card small, .floating-card strong { display: block; }
.floating-card small { color: #8a93a3; font-size: 8px; }
.floating-card strong { font-size: 13px; margin-top: 2px; }
.fc-one { left: 1%; bottom: 20%; }
.fc-one strong { color: var(--green); }
.fc-two { right: 1%; top: 20%; animation-delay: -2s; }
.fc-two strong { color: var(--green); }
@keyframes float { 50% { transform: translateY(-9px); } }
.client-strip { position: relative; z-index: 2; height: 92px; margin-top: 36px; display: flex; align-items: center; gap: 55px; border-top: 1px solid rgba(92,110,148,.13); }
.client-strip > span { color: #9aa3b2; font-size: 8px; letter-spacing: 1.3px; font-weight: 800; white-space: nowrap; }
.client-strip > div { flex: 1; display: flex; justify-content: space-between; color: #8e98aa; font: 700 12px "Manrope"; }

.section-heading { text-align: center; margin-bottom: 50px; }
.section-heading h2, .creator-copy h2, .brand-intro h2, .inquiry h2, .faq h2 { font-size: clamp(39px,4.4vw,57px); line-height: 1.08; }
.section-heading p { color: var(--muted); font-size: 14px; margin: 0; }
.whop-guide { background:#fff; }
.guide-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:80px; margin-bottom:38px; }
.guide-intro h2 { font:800 clamp(39px,4.4vw,57px)/1.08 "Manrope"; letter-spacing:-3px; margin:17px 0 0; }
.guide-intro h2 em { color:var(--blue); font-style:normal; }
.guide-explanation>p { color:var(--muted); font-size:13px; line-height:1.75; }
.guide-explanation>span { display:flex; align-items:center; gap:10px; color:#4e5b72; font-size:9px; line-height:1.5; }
.guide-explanation>span i { flex:0 0 auto; width:29px; height:29px; display:grid; place-items:center; color:white; background:#ff654e; border-radius:8px; font:800 13px "Manrope"; font-style:normal; }
.guide-flow { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:50px; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:#f8f9fc; }
.guide-flow span { color:#6f7b8f; font-size:9px; font-weight:700; white-space:nowrap; }
.guide-flow span.active { color:var(--blue); }.guide-flow i { color:#bbc2ce; font-style:normal; }
.guide-steps { display:grid; gap:75px; }
.guide-step { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; }
.guide-step.reverse .guide-copy { order:2; }.guide-step.reverse .mock-browser { order:1; }
.guide-copy>span { color:var(--blue); font-size:8px; letter-spacing:1.4px; font-weight:800; }
.guide-copy h3 { font:700 27px/1.15 "Manrope"; letter-spacing:-1.2px; margin:8px 0 11px; }
.guide-copy>p { color:var(--muted); font-size:11px; line-height:1.75; }
.guide-copy ul { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:9px; }
.guide-copy li { color:#4f5b70; font-size:9px; }.guide-copy li::before { content:"✓"; color:var(--green); background:#e8f8f2; border-radius:50%; padding:2px 4px; margin-right:7px; font-weight:800; }
.guide-whop-link { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; margin-top:18px; padding:12px 15px; border-radius:9px; color:white; background:#ff654e; font-size:9px; font-weight:800; box-shadow:0 9px 20px rgba(255,101,78,.2); }
.our-campaigns-link { display:grid; grid-template-columns:34px 1fr auto; grid-template-rows:auto auto; align-items:center; column-gap:10px; margin-top:18px; padding:13px; border:2px solid var(--blue); border-radius:11px; color:white; background:linear-gradient(120deg,#3169ea,#5546cf); box-shadow:0 12px 26px rgba(49,105,234,.24); transition:.22s; }
.our-campaigns-link:hover { transform:translateY(-3px); box-shadow:0 17px 32px rgba(49,105,234,.3); }
.our-campaigns-link>span { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:var(--blue); background:white; }
.our-campaigns-link strong { font-size:10px; letter-spacing:.8px; }.our-campaigns-link small { color:#cfdbfb; font-size:7px; margin-top:2px; }.our-campaigns-link>b { grid-column:3; grid-row:1/3; font-size:17px; }
.mock-browser { position:relative; overflow:hidden; border:1px solid #dce2ec; border-radius:14px; background:white; box-shadow:0 20px 45px rgba(25,42,78,.13); }
.mock-browser-top { height:34px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#f1f3f7; border-bottom:1px solid #e0e4eb; }
.mock-browser-top>i { width:7px; height:7px; border-radius:50%; background:#d5d9e1; }.mock-browser-top>i:first-child{background:#fb7b72}.mock-browser-top>i:nth-child(2){background:#f4c45e}.mock-browser-top>i:nth-child(3){background:#63c989}
.mock-browser-top>span { width:55%; margin:auto; padding:4px 9px; border-radius:5px; color:#8992a1; background:white; text-align:center; font-size:6px; }
.mock-app { min-height:295px; display:grid; grid-template-columns:48px 1fr; background:#fafbfc; }
.mock-sidebar { padding:11px 9px; display:flex; flex-direction:column; align-items:center; gap:14px; background:#15171c; }
.mock-sidebar b { width:25px; height:25px; display:grid; place-items:center; color:white; background:#ff654e; border-radius:7px; font:800 11px "Manrope"; }
.mock-sidebar i { width:17px; height:4px; border-radius:3px; background:#343840; }
.mock-content { padding:20px; }
.mock-campaign-banner { height:112px; padding:17px; border-radius:10px; display:flex; flex-direction:column; justify-content:flex-end; color:white; background:linear-gradient(20deg,rgba(7,9,18,.72),transparent),radial-gradient(circle at 75% 30%,#ed70a2,#6742d1 45%,#18254c); }
.mock-campaign-banner span { font-size:6px; letter-spacing:1px; }.mock-campaign-banner strong { font:700 18px "Manrope"; margin:3px 0; }.mock-campaign-banner small { color:#d7dcf0; font-size:7px; }
.mock-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0; }
.mock-stats-row div,.mock-earning-cards div { padding:9px; border:1px solid #e7e9ee; border-radius:7px; background:white; }
.mock-stats-row small,.mock-stats-row b,.mock-earning-cards small,.mock-earning-cards strong { display:block; }.mock-stats-row small,.mock-earning-cards small { color:#8c95a4; font-size:6px; }.mock-stats-row b { font-size:8px; margin-top:3px; }.mock-live { color:var(--green); }
.mock-main-button,.mock-payout-button { width:100%; border:0; border-radius:7px; padding:9px; color:white; background:#ff654e; font-size:7px; font-weight:800; }
.illustration-note { position:absolute; right:8px; bottom:6px; color:#9ba3af; font-size:6px; }
.mock-page-title small,.mock-page-title strong { display:block; }.mock-page-title small { color:#979fab; font-size:6px; letter-spacing:.8px; }.mock-page-title strong { font:700 14px "Manrope"; margin-top:3px; }
.mock-brief,.mock-submit,.mock-earnings { padding-top:25px; }
.mock-check { display:flex; align-items:center; gap:8px; padding:9px; border:1px solid #e7e9ee; border-radius:7px; background:white; margin-top:7px; }
.mock-check>b { width:20px; height:20px; display:grid; place-items:center; color:var(--green); background:#e8f8f2; border-radius:5px; font-size:8px; }.mock-check strong,.mock-check small { display:block; }.mock-check strong { font-size:7px; }.mock-check small { color:#8a93a2; font-size:6px; margin-top:2px; }
.mock-download { margin-top:8px; padding:8px; border-radius:7px; color:var(--blue); background:#edf3ff; font-size:7px; font-weight:700; }
.mock-submit label { display:block; margin-top:10px; color:#5a6578; font-size:7px; font-weight:700; }
.mock-input { display:flex; justify-content:space-between; margin-top:4px; padding:9px; border:1px solid #dde2ea; border-radius:6px; background:white; color:#293348; font-size:7px; }.muted-input { color:#939baa; }
.mock-rules-confirm { margin:9px 0; color:#526075; font-size:6px; }
.mock-signup label { display:block; margin-top:12px; color:#5b6678; font-size:7px; font-weight:700; }.mock-signup .mock-main-button { margin-top:13px; }.mock-account-note { margin-top:10px; color:var(--green); text-align:center; font-size:6px; }
.mock-video-result { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:8px; margin:13px 0; padding:9px; border:1px solid #e7e9ee; border-radius:7px; background:white; }
.mock-video-thumb { width:35px; height:30px; display:grid; place-items:center; color:white; border-radius:6px; background:linear-gradient(135deg,#5c46ce,#e668a0); font-size:7px; }
.mock-video-result strong,.mock-video-result small { display:block; }.mock-video-result strong { font-size:7px; }.mock-video-result small { color:#8a93a2; font-size:6px; margin-top:2px; }.mock-video-result>b { color:var(--green); background:#e7f7f0; padding:4px 6px; border-radius:12px; font-size:6px; }
.mock-earning-cards { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:9px; }.mock-earning-cards strong { font:700 14px "Manrope"; margin-top:3px; }.mock-payout-button { background:#171a20; }
.guide-warning { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:13px; margin-top:65px; padding:16px; border:1px solid #dce4f5; border-radius:12px; background:#f1f5ff; }
.guide-warning>span { width:34px; height:34px; display:grid; place-items:center; color:var(--blue); background:white; border-radius:9px; font-weight:800; }
.guide-warning p { color:#647087; font-size:9px; line-height:1.5; margin:0; }.guide-warning p strong { color:var(--ink); }.guide-warning .button { white-space:nowrap; padding:11px 14px; }
.full-tutorial { display:grid; grid-template-columns:.75fr 1.25fr; gap:35px; align-items:center; margin-top:70px; padding:28px; border-radius:18px; color:white; background:#111b31; }
.full-tutorial-copy>span { color:#83a8ff; font-size:8px; letter-spacing:1.2px; font-weight:800; }.full-tutorial-copy h3 { font:700 23px "Manrope"; margin:7px 0; }.full-tutorial-copy p { color:#9caac0; font-size:10px; line-height:1.65; }
.full-tutorial-copy ul { list-style:none; padding:0; display:grid; gap:7px; }.full-tutorial-copy li { color:#c3ccdb; font-size:8px; }.full-tutorial-copy li::before { content:"✓"; color:#6ce0b5; margin-right:7px; }
.full-video-placeholder { min-height:260px; position:relative; display:grid; place-items:center; text-align:center; border:1px solid #33415a; border-radius:14px; overflow:hidden; background:linear-gradient(20deg,rgba(7,10,20,.82),transparent),radial-gradient(circle at 70% 30%,#6b48d8,#284d9c 46%,#121a2d); }
.full-video-placeholder button { width:59px; height:59px; border:0; border-radius:50%; color:var(--blue); background:white; cursor:pointer; font-size:13px; }.full-video-placeholder>span { position:absolute; left:15px; top:15px; color:#aac0f6; font-size:7px; letter-spacing:1px; font-weight:800; }.full-video-placeholder>strong { position:absolute; bottom:34px; font:700 18px/1.2 "Manrope"; }.full-video-placeholder>small { position:absolute; bottom:15px; color:#8d9ab0; font-size:7px; }
.campaign-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.campaign-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 13px 30px rgba(27,44,79,.07); transition: .25s; }
.campaign-card:hover { transform: translateY(-7px); box-shadow: 0 20px 40px rgba(27,44,79,.12); }
.campaign-cover { height: 190px; position: relative; padding: 16px; color: white; display: flex; align-items: flex-end; }
.campaign-cover::after { content:""; position:absolute; inset:0; background: linear-gradient(24deg,rgba(4,8,19,.78),transparent 68%); }
.cover-purple { background: radial-gradient(circle at 75% 32%,#f077a4,#6a43d4 40%,#14234c); }
.cover-blue { background: radial-gradient(circle at 75% 32%,#72dce6,#2d72e9 44%,#142557); }
.cover-orange { background: radial-gradient(circle at 75% 32%,#f1ba70,#a95635 44%,#302125); }
.campaign-cover > span, .campaign-cover > b { position:absolute; z-index:2; top:13px; padding:5px 7px; border-radius:20px; font-size:7px; letter-spacing:.5px; background:rgba(0,0,0,.27); }
.campaign-cover > span { left:13px; }.campaign-cover > b { right:13px; color:#dbfff1; background:#32ad80; }
.upcoming .campaign-cover > b { color:white; background:rgba(255,255,255,.18); }
.campaign-cover > strong { position:relative; z-index:2; font:800 27px/1 "Manrope"; letter-spacing:-1.3px; }
.campaign-body { padding: 18px; }
.campaign-body > small { color: var(--muted); font-size: 8px; letter-spacing: .8px; font-weight: 700; }
.campaign-body h3 { font: 700 18px "Manrope"; margin: 5px 0 7px; }
.campaign-body > p { color: var(--muted); min-height: 55px; font-size: 11px; line-height: 1.55; }
.campaign-requirements { min-height:68px; list-style:none; padding:10px 0; margin:6px 0; border-top:1px solid #edf0f4; border-bottom:1px solid #edf0f4; display:grid; gap:5px; }
.campaign-requirements li { color:#647087; font-size:8px; }.campaign-requirements li::before { content:"✓"; color:var(--green); margin-right:6px; font-weight:800; }
.campaign-data { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 15px 0; }
.campaign-data div { padding: 10px; border-radius: 8px; background: #f6f8fb; }
.campaign-data small, .campaign-data strong { display: block; }
.campaign-data small { color: var(--muted); font-size: 7px; }
.campaign-data strong { margin-top: 3px; font-size: 9px; }
.whop-button, .notify-button { width: 100%; border: 0; border-radius: 9px; padding: 11px 12px; display: flex; justify-content: space-between; color: white; background: var(--blue); font-size: 10px; font-weight: 700; cursor: pointer; }
.notify-button { color: var(--blue); background: #edf3ff; }
.external-note { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; margin-top: 23px; padding: 16px; border: 1px solid #e1e6ef; border-radius: 13px; background: #f8f9fc; }
.external-note > span { width: 44px; height: 44px; display: grid; place-items: center; color: white; background: #ff644d; border-radius: 11px; font: 800 19px "Manrope"; }
.external-note p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }
.external-note p strong { color: var(--ink); }
.external-note a { color: var(--blue); font-size: 10px; font-weight: 700; }

.creator-section { background: var(--surface); }
.creator-grid { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 90px; }
.creator-copy > p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.creator-copy ul { list-style:none; padding:0; margin:28px 0; display:grid; gap:17px; }
.creator-copy li { display:flex; gap:13px; align-items:flex-start; }
.creator-copy li > i { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; color:var(--blue); background:#e7efff; border-radius:9px; font-style:normal; font-size:9px; font-weight:800; }
.creator-copy li strong,.creator-copy li small { display:block; }
.creator-copy li strong { font-size:12px; }.creator-copy li small { color:var(--muted); font-size:10px; margin-top:3px; }
.tutorial-card { overflow:hidden; border:1px solid #dfe5ef; border-radius:20px; background:white; box-shadow:0 20px 45px rgba(26,43,77,.1); }
.tutorial-top { display:flex; justify-content:space-between; padding:14px 17px; font-size:8px; letter-spacing:1px; font-weight:800; }
.tutorial-top span { color:var(--blue); }.tutorial-top b { color:var(--muted); }
.tutorial-video { height:245px; display:grid; place-items:center; text-align:center; color:white; position:relative; background:linear-gradient(20deg,rgba(5,8,21,.76),transparent),radial-gradient(circle at 65% 35%,#e96b9f,#6744cf 42%,#14244e); }
.tutorial-video button { width:58px; height:58px; border:0; border-radius:50%; color:var(--blue); background:white; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.22); }
.tutorial-video strong { position:absolute; bottom:21px; font:700 18px/1.2 "Manrope"; }
.tutorial-steps { padding:16px; display:grid; gap:8px; }
.tutorial-steps div { display:flex; align-items:center; gap:10px; padding:9px; background:#f7f8fb; border-radius:9px; }
.tutorial-steps i { width:25px; height:25px; display:grid; place-items:center; color:white; background:var(--blue); border-radius:7px; font-style:normal; font-size:8px; font-weight:800; }
.tutorial-steps strong,.tutorial-steps small { display:block; }
.tutorial-steps strong { font-size:9px; }.tutorial-steps small { color:var(--muted); font-size:8px; margin-top:2px; }

.brand-section { color: white; background: #111b31; }
.brand-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.brand-intro h2 { margin-bottom: 0; }
.brand-intro h2 em { color:#7da6ff; }
.light-label { color:#7da6ff; }
.brand-intro > p { color:#9eacc2; font-size:14px; line-height:1.8; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:55px 0 30px; }
.service-grid article { padding:22px; min-height:185px; border:1px solid #293650; border-radius:14px; background:#16233b; }
.service-grid article > span { color:#658ce9; font:800 31px "Manrope"; opacity:.35; }
.service-grid h3 { font:700 14px "Manrope"; margin:22px 0 7px; }
.service-grid p { color:#8998b0; font-size:10px; line-height:1.65; margin:0; }
.pricing { display:grid; grid-template-columns:1.2fr .9fr auto; gap:30px; align-items:center; padding:26px; border-radius:16px; background:linear-gradient(110deg,#285fcf,#3e55cd 55%,#6142bd); }
.pricing-copy > span { color:#c1d3ff; font-size:8px; letter-spacing:1.2px; font-weight:800; }
.pricing-copy h3 { font:700 20px "Manrope"; margin:5px 0; }.pricing-copy p { color:#ced9f5; font-size:10px; line-height:1.5; margin:0; }
.pricing-points { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pricing-points div { padding:11px; background:rgba(255,255,255,.1); border-radius:9px; }
.pricing-points small,.pricing-points strong { display:block; }
.pricing-points small { color:#bdcdf0; font-size:6px; }.pricing-points strong { font-size:10px; margin-top:3px; }
.white-button { color:var(--blue); background:white; white-space:nowrap; }
.purchase-paths { background:white; }
.path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.path-grid.single-path { grid-template-columns:minmax(280px,620px); justify-content:center; }
.path-grid article { display:flex; flex-direction:column; min-height:270px; padding:25px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 12px 30px rgba(26,43,77,.05); }
.path-grid article.path-featured { color:white; border-color:transparent; background:linear-gradient(135deg,#285fce,#5743c0); }
.path-icon { width:43px; height:43px; display:grid; place-items:center; margin-bottom:22px; color:var(--blue); background:#eaf1ff; border-radius:11px; font-weight:800; }.path-featured .path-icon { color:white; background:rgba(255,255,255,.14); }
.path-grid article>small { color:var(--blue); font-size:7px; letter-spacing:1.1px; font-weight:800; }.path-featured>small { color:#bfd0fb; }
.path-grid h3 { font:700 20px "Manrope"; margin:7px 0; }.path-grid p { color:var(--muted); font-size:10px; line-height:1.65; }.path-featured p { color:#cbd7f3; }
.path-grid a,.path-grid button { margin-top:auto; display:flex; justify-content:space-between; border:0; border-radius:8px; padding:11px; color:var(--blue); background:#edf3ff; font-size:9px; font-weight:800; cursor:pointer; }.path-featured a { color:var(--blue); background:white; }
.packages { background:#f6f8fc; }
.package-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.package-card { position:relative; display:flex; flex-direction:column; padding:26px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 12px 30px rgba(26,43,77,.06); }
.featured-package { border:2px solid var(--blue); transform:translateY(-8px); box-shadow:0 18px 40px rgba(49,105,234,.15); }
.popular { position:absolute; right:17px; top:17px; padding:5px 7px; border-radius:20px; color:white; background:var(--blue); font-size:7px; letter-spacing:.6px; font-weight:800; }
.package-name { color:var(--blue); font-size:8px; letter-spacing:1.3px; font-weight:800; }
.package-card h3 { font:800 31px "Manrope"; letter-spacing:-1.5px; margin:10px 0 6px; }
.package-card>p { min-height:47px; color:var(--muted); font-size:10px; line-height:1.6; }
.package-card ul { list-style:none; padding:15px 0; margin:5px 0 18px; border-top:1px solid #edf0f4; display:grid; gap:10px; }
.package-card li { color:#4e5a70; font-size:9px; }.package-card li::before { content:"✓"; color:var(--green); font-weight:800; margin-right:7px; }
.package-button { width:100%; margin-top:auto; display:flex; justify-content:space-between; border:0; border-radius:9px; padding:12px; color:white; background:var(--ink); font-size:9px; font-weight:800; cursor:pointer; }
.featured-package .package-button { background:var(--blue); }
.package-disclaimer { color:#9099a8; text-align:center; font-size:8px; margin:20px 0 0; }

.results { background:#fff; }
.result-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:17px; overflow:hidden; }
.result-grid div { padding:30px; text-align:center; border-right:1px solid var(--line); }
.result-grid div:last-child { border-right:0; }
.result-grid strong,.result-grid span { display:block; }
.result-grid strong { color:var(--blue); font:800 35px "Manrope"; letter-spacing:-1.5px; }
.result-grid span { color:var(--muted); font-size:9px; margin-top:5px; }

.inquiry { background:var(--surface); }
.inquiry-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:85px; align-items:start; }
.inquiry h2 { margin-bottom:18px; }
.inquiry-grid > div > p { color:var(--muted); font-size:14px; line-height:1.7; }
.contact-card { display:flex; align-items:center; gap:10px; margin-top:28px; }
.contact-card > span { width:39px; height:39px; display:grid; place-items:center; color:var(--blue); background:#e8efff; border-radius:10px; }
.contact-card small,.contact-card strong { display:block; }.contact-card small { color:var(--muted); font-size:7px; }.contact-card strong { font-size:11px; margin-top:3px; }
.inquiry-form { padding:25px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 16px 35px rgba(26,43,77,.07); }
.inquiry-form label { display:grid; gap:6px; color:#344058; font-size:9px; font-weight:700; margin-bottom:13px; }
.bot-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.inquiry-form input,.inquiry-form select,.inquiry-form textarea { width:100%; border:1px solid #dfe4ed; border-radius:8px; padding:11px; outline:none; background:white; color:var(--ink); font-size:10px; }
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(49,105,234,.09); }
.inquiry-form textarea { min-height:95px; resize:vertical; }
.consent { display:flex!important; grid-template-columns:auto 1fr; align-items:flex-start; gap:8px!important; color:var(--muted)!important; font-weight:400!important; }
.consent input { width:auto; accent-color:var(--blue); }
.form-submit { width:100%; }
.form-note { display:block; color:#9aa3b2; text-align:center; font-size:8px; margin-top:9px; }

.faq-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; }
.accordion article { border-bottom:1px solid var(--line); }
.accordion button { width:100%; border:0; background:transparent; padding:18px 0; display:flex; justify-content:space-between; text-align:left; cursor:pointer; font-weight:700; font-size:12px; }
.accordion button span { color:var(--blue); font-size:18px; transition:.2s; }
.accordion p { max-height:0; overflow:hidden; color:var(--muted); font-size:10px; line-height:1.7; margin:0; transition:.3s; }
.accordion article.open p { max-height:130px; padding-bottom:17px; }
.accordion article.open button span { transform:rotate(45deg); }
.newsletter { padding:45px 0; color:white; background:linear-gradient(120deg,#2e68df,#4356cd,#6540b9); }
.newsletter-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.newsletter span { color:#c3d3fa; font-size:8px; letter-spacing:1.2px; font-weight:800; }
.newsletter h2 { font:700 24px "Manrope"; margin:5px 0 0; }
.newsletter form { display:flex; width:min(450px,100%); padding:4px; border-radius:10px; background:white; }
.newsletter input { flex:1; min-width:0; border:0; outline:0; padding:0 12px; font-size:10px; }
.newsletter button { border:0; border-radius:8px; padding:11px 13px; color:white; background:var(--ink); font-size:9px; font-weight:700; cursor:pointer; }

.footer { padding:65px 0 22px; color:white; background:#0c1425; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:45px; }
.footer-brand { color:white; }
.footer-grid > div:first-child p { color:#7d899e; max-width:290px; font-size:10px; line-height:1.6; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:10px; }
.footer-grid strong { font-size:10px; margin-bottom:3px; }
.footer-grid a,.footer-grid button { padding:0; border:0; text-align:left; color:#7f8ba0; background:transparent; font-size:9px; cursor:pointer; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:50px; padding-top:20px; border-top:1px solid #222c3f; color:#657187; font-size:8px; }

.modal-backdrop { position:fixed; z-index:100; inset:0; padding:20px; display:grid; place-items:center; background:rgba(8,14,26,.67); backdrop-filter:blur(7px); }
.modal { width:min(450px,100%); position:relative; padding:28px; border-radius:19px; background:white; box-shadow:0 30px 80px rgba(0,0,0,.28); }
.modal-close { position:absolute; right:12px; top:12px; width:30px; height:30px; border:0; border-radius:50%; background:#f0f2f6; cursor:pointer; font-size:18px; }
.modal-label { color:var(--blue); font-size:8px; letter-spacing:1.2px; font-weight:800; }
.modal h2 { font:700 24px "Manrope"; letter-spacing:-1px; margin:6px 0 8px; }
.modal > p { color:var(--muted); font-size:10px; line-height:1.7; }
.modal-list { display:grid; gap:7px; margin:18px 0; }
.modal-list div { display:flex; align-items:center; gap:9px; padding:9px; border-radius:8px; background:#f6f8fb; font-size:9px; font-weight:600; }
.modal-list i { width:24px; height:24px; display:grid; place-items:center; color:white; background:var(--blue); border-radius:7px; font-style:normal; font-size:8px; }
.modal-action { width:100%; }
.modal > small { display:block; color:#9aa3b2; font-size:7px; line-height:1.5; text-align:center; margin-top:10px; }
.legal-modal { max-height:80vh; overflow:auto; }
.order-price { padding:13px; margin:17px 0; border-radius:10px; background:#edf3ff; }
.order-price small,.order-price strong { display:block; }.order-price small { color:var(--blue); font-size:7px; }.order-price strong { font:700 19px "Manrope"; margin-top:3px; }
.order-modal form { display:grid; gap:11px; }.order-modal form>label:not(.consent) { display:grid; gap:5px; font-size:8px; font-weight:700; }
.order-modal input,.order-modal select { width:100%; border:1px solid #dfe4ed; border-radius:8px; padding:11px; outline:none; font-size:10px; background:white; }
.order-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.order-form-grid label { display:grid; gap:5px; font-size:8px; font-weight:700; }
.order-addons { display:grid; gap:8px; margin:0; padding:12px; border:1px solid #e0e5ed; border-radius:9px; }.order-addons legend { padding:0 5px; font-size:8px; font-weight:700; }.order-addons label { display:flex; align-items:flex-start; gap:7px; color:#596579; font-size:8px; }.order-addons input { width:auto; padding:0; accent-color:var(--blue); }
.toast { position:fixed; z-index:200; right:22px; bottom:22px; max-width:350px; padding:13px 16px; border-radius:10px; color:white; background:#15213a; box-shadow:0 15px 35px rgba(10,20,44,.25); font-size:10px; font-weight:600; opacity:0; transform:translateY(20px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:none; }
.reveal { opacity:0; transform:translateY(20px); transition:.65s ease; }
.reveal.visible { opacity:1; transform:none; }

@media(max-width:950px){
  .desktop-nav{display:none}.menu-button{display:block}.nav-cta{margin-left:auto;margin-right:10px}
  .mobile-nav{position:absolute;left:20px;right:20px;top:70px;padding:13px;border:1px solid var(--line);border-radius:12px;background:white;box-shadow:0 15px 35px rgba(20,35,65,.15)}
  .mobile-nav.open{display:grid;gap:4px}.mobile-nav a{padding:10px;border-radius:7px;font-size:11px}.mobile-nav a:hover{background:#f3f6fb}
  .hero{padding-top:195px}.hero-grid,.creator-grid,.inquiry-grid{grid-template-columns:1fr;gap:50px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}
  .campaign-grid{grid-template-columns:repeat(2,1fr)}.campaign-card:last-child{grid-column:1/-1;max-width:560px;width:100%;justify-self:center}
  .guide-intro{grid-template-columns:1fr;gap:12px}.guide-step{grid-template-columns:1fr;gap:30px}.guide-step.reverse .guide-copy,.guide-step.reverse .mock-browser{order:initial}.guide-copy{max-width:650px}.guide-warning{grid-template-columns:34px 1fr}.guide-warning .button{grid-column:2;justify-self:start}
  .full-tutorial{grid-template-columns:1fr}.path-grid{grid-template-columns:1fr 1fr}.path-grid article:last-child{grid-column:1/-1}
  .brand-intro{grid-template-columns:1fr;gap:10px}.service-grid{grid-template-columns:repeat(2,1fr)}.pricing{grid-template-columns:1fr}.pricing-points{max-width:480px}
  .result-grid{grid-template-columns:repeat(2,1fr)}.result-grid div:nth-child(2){border-right:0}.result-grid div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .faq-grid{grid-template-columns:1fr;gap:25px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
  .footer-grid>div:last-child{grid-column:2}
  .package-grid{grid-template-columns:1fr 1fr}.package-card:last-child{grid-column:1/-1}.featured-package{transform:none}
}
@media(max-width:620px){
  .wrap{width:min(100% - 30px,1160px)}.section{padding:75px 0}.nav{height:68px}.nav-cta{display:none}
  .audience-switch-shell{top:78px}.audience-button{padding:8px}.audience-button>span{display:none}.audience-button{grid-template-columns:1fr}.audience-button strong{font-size:9px}.audience-button small{font-size:6px}
  .hero{padding-top:175px}.hero h1{font-size:47px;letter-spacing:-2.7px}.hero-copy>p{font-size:15px}.hero-actions{flex-direction:column}.hero-actions .button{width:100%}.trust-row{gap:9px}
  .hero-visual{min-height:495px;transform:scale(.91);margin-inline:-20px}.client-strip{height:auto;padding:25px 0;display:block;text-align:center}.client-strip>div{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:18px}
  .section-heading h2,.creator-copy h2,.brand-intro h2,.inquiry h2,.faq h2{font-size:37px;letter-spacing:-2px}.campaign-grid{grid-template-columns:1fr}.campaign-card:last-child{grid-column:auto}.external-note{grid-template-columns:40px 1fr}.external-note>a{grid-column:2}
  .guide-intro h2{font-size:37px;letter-spacing:-2px}.guide-flow{justify-content:flex-start;overflow-x:auto}.guide-flow i{display:none}.guide-flow span{padding:6px 8px;border-radius:7px;background:#eef2f8}.guide-steps{gap:55px}.mock-app{grid-template-columns:38px 1fr;min-height:270px}.mock-content{padding:13px}.mock-stats-row{grid-template-columns:1fr 1fr}.mock-stats-row div:last-child{display:none}.guide-warning{grid-template-columns:1fr;text-align:center}.guide-warning>span{margin:auto}.guide-warning .button{grid-column:auto;justify-self:stretch}
  .full-tutorial{padding:18px}.full-video-placeholder{min-height:230px}.path-grid{grid-template-columns:1fr}.path-grid article:last-child{grid-column:auto}.order-form-grid{grid-template-columns:1fr}
  .service-grid,.result-grid{grid-template-columns:1fr}.result-grid div{border-right:0;border-bottom:1px solid var(--line)!important}.result-grid div:last-child{border-bottom:0!important}
  .pricing-points,.form-row{grid-template-columns:1fr}.newsletter-inner{align-items:flex-start;flex-direction:column}.newsletter form{width:100%}
  .package-grid{grid-template-columns:1fr}.package-card:last-child{grid-column:auto}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}