/* ========================================================================== 1 to 1 Capital — Landing page (hotsite público) Builds on system.css. Mobile-first. Alternating dark/ivory sections. ========================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 76px; } body { background: var(--navy-900); overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ============================ ACCESS GATE (pré-lançamento) ============================ Fail-closed: the gate covers the page by default; the inline script adds .unlocked to when this session is already authenticated. */ html:not(.unlocked) { overflow: hidden; } html.unlocked .gate { display: none; } .gate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px; background: var(--aurora); overflow: auto; } .gate-card { width: 100%; max-width: 420px; text-align: center; padding: 40px 32px; border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .gate-card .wordmark { font-size: 15px; margin-bottom: 22px; } .gate-card .eyebrow { justify-content: center; display: flex; margin-bottom: 14px; } .gate-title { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--ink); font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; } .gate-sub { color: var(--ink-3); font-size: var(--t-base); line-height: 1.55; margin: 12px 0 0; } .gate-form { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; } .gate-form .btn { width: 100%; } .gate-error { color: var(--neg); font-size: var(--t-meta); margin: 14px 0 0; min-height: 18px; } .gate-foot { color: var(--ink-4); font-size: var(--t-xs); line-height: 1.5; margin: 20px 0 0; } /* ---------- Wordmark (faithful CSS recreation of the 1 TO 1 CAPITAL logo) ---------- */ .wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; user-select: none; line-height: 1; } .wordmark-row { display: flex; align-items: baseline; gap: 7px; } .wm-1 { font-family: var(--font-sans); font-weight: 800; font-size: 1.65em; color: var(--brand-blue); letter-spacing: -0.02em; } .wm-to { font-family: var(--font-sans); font-weight: 800; font-size: 1.65em; color: var(--ink); letter-spacing: -0.01em; } .wordmark-sub { display: flex; align-items: center; gap: 6px; margin-top: 1px; } .wm-bar { width: 0.8em; height: 2px; background: var(--brand-blue); border-radius: 2px; } .wm-cap { font-family: var(--font-sans); font-weight: 500; font-size: 0.55em; letter-spacing: 0.42em; padding-left: 0.42em; color: var(--ink-2); } /* ---------- Generic section scaffold ---------- */ .sec { padding: 92px 24px; position: relative; } .wrap { max-width: 1140px; margin: 0 auto; } .wrap-narrow { max-width: 860px; margin: 0 auto; } /* Theme-tinted backgrounds (each section carries its own data-theme) */ .bg-dark { background: radial-gradient(900px 520px at 90% -10%, rgba(46,111,230,0.10), transparent 60%), radial-gradient(800px 560px at -8% 118%, rgba(198,167,101,0.08), transparent 60%), linear-gradient(180deg, var(--navy-900), var(--bg-2) 55%, var(--navy-900)); } .bg-light { background: radial-gradient(820px 520px at 105% -12%, rgba(198,167,101,0.22), transparent 58%), radial-gradient(760px 520px at -6% 112%, rgba(46,111,230,0.12), transparent 60%), linear-gradient(180deg, var(--bg) 0%, #E7E1D6 100%); } .sec-head { max-width: 720px; margin: 0 auto 52px; text-align: center; } .sec-head.left { margin-left: 0; text-align: left; } .eyebrow-c { justify-content: center; } h2.sec-title { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--ink); font-size: clamp(28px, 4.4vw, var(--t-4xl)); line-height: 1.1; letter-spacing: -0.01em; margin: 14px 0 0; } .sec-sub { color: var(--ink-3); font-size: var(--t-md); line-height: 1.6; margin: 16px auto 0; max-width: 56ch; text-wrap: pretty; } .sec-head.left .sec-sub { margin-left: 0; } /* ============================ TOP NAV ============================ */ .nav { position: sticky; top: 0; z-index: 100; } .nav-glass { background: color-mix(in srgb, var(--navy-900) 74%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1200px; margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 24px; padding: 0 24px; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 18px; } .nav-link { font-size: var(--t-base); font-weight: 500; color: var(--ink-2); padding: 9px 13px; border-radius: var(--r-md); transition: color .2s var(--ease), background .2s var(--ease); } .nav-link:hover { color: var(--ink); background: var(--surface-2); } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; } .nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; } /* mobile drawer */ .m-drawer-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 110; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .m-drawer-scrim.open { opacity: 1; pointer-events: auto; } .m-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 320px); z-index: 111; background: color-mix(in srgb, var(--navy-900) 92%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-left: 1px solid var(--line-2); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; padding: 22px; gap: 6px; } .m-drawer.open { transform: none; } .m-drawer .nav-link { font-size: var(--t-lg); padding: 14px 12px; } .m-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .m-close { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; } /* ============================ HERO ============================ */ .hero { padding: 104px 24px 96px; background: var(--aurora); position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); } .hero-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .hero h1 { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--ink); font-size: clamp(38px, 6.6vw, 68px); line-height: 1.05; letter-spacing: -0.018em; margin: 22px 0 0; text-wrap: balance; } .hero h1 .accent { color: var(--on-bg-gold); font-style: italic; font-weight: var(--fw-reg); } .hero-sub { color: var(--ink-2); font-size: clamp(15px, 1.7vw, 19px); line-height: 1.6; margin: 22px auto 0; max-width: 60ch; text-wrap: pretty; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; } .hero-cta .btn { padding: 15px 28px; font-size: var(--t-md); } /* trust seals */ .seals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 52px auto 0; max-width: 820px; } .seal { display: flex; align-items: center; gap: 13px; text-align: left; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .seal-ic { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; display: grid; place-items: center; color: var(--on-bg-gold); background: var(--gold-tint); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); } .seal-t { font-size: var(--t-meta); font-weight: 600; color: var(--ink); line-height: 1.25; } .seal-d { font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; line-height: 1.3; } /* ============================ PROBLEMA ============================ */ .prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .prob-card { padding: 28px 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .prob-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 18px; color: var(--neg); background: color-mix(in srgb, var(--neg) 11%, transparent); border: 1px solid color-mix(in srgb, var(--neg) 26%, transparent); } .prob-card h3 { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: 9px; } .prob-card p { color: var(--ink-3); font-size: var(--t-base); line-height: 1.6; } .prob-turn { margin-top: 40px; text-align: center; padding: 34px 28px; border-radius: var(--r-2xl); background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent), color-mix(in srgb, var(--brand-blue) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); } .prob-turn p { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--ink); font-size: clamp(21px, 2.8vw, 30px); line-height: 1.3; max-width: 22ch; margin: 0 auto; text-wrap: balance; } .prob-turn b { color: var(--on-bg-gold); font-weight: var(--fw-reg); font-style: italic; } /* ============================ COMO FUNCIONA ============================ */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .step { position: relative; padding: 26px 24px 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .step-n { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 40px; line-height: 1; color: var(--on-bg-gold); opacity: .9; } .step-ic { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; margin: 16px 0 14px; color: var(--accent); background: color-mix(in srgb, var(--brand-blue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, transparent); } [data-theme="light"] .step-ic { color: var(--brand-blue-2); } .step h3 { font-size: var(--t-md); font-weight: 600; color: var(--ink); margin-bottom: 7px; } .step p { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.55; } .step .click { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--t-xs); font-weight: 600; color: var(--on-bg-gold); font-family: var(--font-mono); letter-spacing: .04em; } .steps-note { text-align: center; margin-top: 30px; color: var(--ink-3); font-size: var(--t-base); } .steps-note b { color: var(--ink); font-weight: 600; } /* ============================ BENEFÍCIOS ============================ */ .ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ben { padding: 26px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .ben:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line-2); } .ben-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 16px; color: var(--on-bg-gold); background: var(--gold-tint); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); } .ben h3 { font-size: var(--t-md); font-weight: 600; color: var(--ink); margin-bottom: 8px; } .ben p { color: var(--ink-3); font-size: var(--t-base); line-height: 1.55; } /* ============================ PLATAFORMA · VEJA POR DENTRO ============================ */ .showcase { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 92px); margin-top: 8px; } .show-row { display: grid; grid-template-columns: 1fr 1.22fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .show-row:nth-child(even) .show-media { order: -1; } .show-text .show-n { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); } .show-text h3 { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.01em; margin: 6px 0 0; } .show-text .eyebrow { display: flex; } .show-text p { color: var(--ink-3); font-size: var(--t-md); line-height: 1.62; margin: 16px 0 0; max-width: 46ch; text-wrap: pretty; } .show-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .show-tag { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--ink-2); padding: 6px 12px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--line-2); } .show-tag svg { color: var(--on-bg-gold); flex-shrink: 0; } /* framed product screenshot */ .shot { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-pop); margin: 0; } .shot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07); } .shot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 1; background: radial-gradient(420px 200px at 12% -6%, var(--glow), transparent 60%); opacity: .7; } .shot img { width: 100%; height: auto; display: block; position: relative; z-index: 0; } .show-media { position: relative; } .show-media::after { content: ''; position: absolute; inset: auto -6% -14% -6%; height: 60%; z-index: -1; background: radial-gradient(60% 100% at 50% 0%, var(--glow), transparent 70%); filter: blur(18px); opacity: .5; } .plat-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(48px, 6vw, 72px); } /* ============================ DIFERENCIAL (comparação) ============================ */ .cmp { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .cmp-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: stretch; } .cmp-row > div { padding: 18px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; } .cmp-row:last-child > div { border-bottom: 0; } /* header */ .cmp-header > div { padding: 20px 18px; font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-2); } .cmp-header .cmp-feat-h { color: var(--ink-3); font-weight: 500; } /* feature label cell */ .cmp-feat { font-size: var(--t-base); color: var(--ink); font-weight: 500; line-height: 1.3; } /* value cells centered */ .cmp-val { justify-content: center; text-align: center; flex-direction: column; gap: 4px; font-size: var(--t-meta); color: var(--ink-3); } .cmp-val small { display: none; } .cmp-yes { color: var(--pos); } .cmp-no { color: var(--neg); opacity: .8; } .cmp-mid { color: var(--ink-4); } /* highlighted "us" column — continuous gold band */ .cmp-us { background: color-mix(in srgb, var(--gold) 13%, transparent); box-shadow: 1px 0 0 color-mix(in srgb,var(--gold) 45%,transparent) inset, -1px 0 0 color-mix(in srgb,var(--gold) 45%,transparent) inset; color: var(--gold-deep); justify-content: center; font-weight: 600; } [data-theme="dark"] .cmp-us { color: var(--gold-soft); } .cmp-header .cmp-us { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--gold) 40%, transparent); flex-direction: column; gap: 6px; } .cmp-us-tag { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #2A2008; background: var(--gold-soft); padding: 2px 8px; border-radius: var(--r-full); font-weight: 600; margin-top: 5px; } /* ============================ PLANOS ============================ */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .plan { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-2xl); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .plan.feat { background: var(--navy-800); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent); transform: translateY(-12px); position: relative; } .plan.feat * { --ink: #EEF3FA; --ink-2: #C3CFDE; --ink-3: #8A9AAE; } .plan-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: #2A2008; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); padding: 5px 14px; border-radius: var(--r-full); font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px -8px var(--glow); } .plan-name { font-size: var(--t-xl); font-weight: 600; color: var(--ink); } .plan.feat .plan-name { color: #fff; } .plan-for { color: var(--ink-3); font-size: var(--t-meta); margin-top: 6px; min-height: 38px; line-height: 1.45; } .plan.feat .plan-for { color: #C3CFDE; } .plan-price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; flex-wrap: wrap; } .plan-price .val { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 42px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; } .plan-price .val.val-text { font-size: 27px; } .plan-price .edit { display: inline-block; min-width: 1.2ch; text-align: center; border-bottom: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); line-height: 1; } .plan.feat .plan-price .val { color: #fff; } .plan-price .per { color: var(--ink-3); font-size: var(--t-meta); } .plan-price .edit { font-family: var(--font-mono); } .plan-pricenote { color: var(--ink-4); font-size: var(--t-xs); min-height: 16px; } .plan hr { border: 0; height: 1px; background: var(--line); margin: 22px 0; } .plan.feat hr { background: rgba(255,255,255,0.1); } .plan-feats { display: flex; flex-direction: column; gap: 12px; flex: 1; } .plan-feat { display: flex; gap: 11px; font-size: var(--t-base); color: var(--ink-2); line-height: 1.45; } .plan.feat .plan-feat { color: #C3CFDE; } .plan-feat svg { flex-shrink: 0; margin-top: 2px; color: var(--on-bg-gold); } .plan-feat .inc { font-weight: 600; color: var(--ink); } .plan.feat .plan-feat .inc { color: #fff; } .plan .btn { margin-top: 26px; width: 100%; padding: 14px; } .plans-note { display: flex; align-items: flex-start; gap: 10px; max-width: 760px; margin: 34px auto 0; padding: 14px 18px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-meta); line-height: 1.5; } .plans-note svg { flex-shrink: 0; margin-top: 1px; color: var(--on-bg-gold); } .plans-note b { color: var(--ink-2); font-weight: 600; } /* ============================ CONFIANÇA ============================ */ .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .trust-card { padding: 30px 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .trust-card .tc-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 18px; color: var(--on-bg-gold); background: var(--gold-tint); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); } .trust-card h3 { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-bottom: 10px; } .trust-card p { color: var(--ink-3); font-size: var(--t-base); line-height: 1.6; } .trust-card p b { color: var(--ink); font-weight: 600; } .trust-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; } .trust-row .item { display: flex; align-items: center; gap: 9px; font-size: var(--t-meta); color: var(--ink-2); } .trust-row .item svg { color: var(--on-bg-gold); flex-shrink: 0; } .testi { margin-top: 22px; padding: 36px 28px; border-radius: var(--r-xl); border: 1px dashed var(--line-2); background: var(--surface-3); text-align: center; color: var(--ink-3); } .testi .eyebrow { justify-content: center; display: flex; margin-bottom: 10px; } .testi p { font-size: var(--t-base); max-width: 46ch; margin: 0 auto; line-height: 1.55; } /* ============================ FAQ ============================ */ .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: border-color .25s var(--ease); } .faq-item[open] { border-color: var(--line-2); } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--t-md); font-weight: 600; color: var(--ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-q-ic { flex-shrink: 0; color: var(--on-bg-gold); transition: transform .25s var(--ease); } .faq-item[open] .faq-q-ic { transform: rotate(45deg); } .faq-a { padding: 0 22px 20px; color: var(--ink-3); font-size: var(--t-base); line-height: 1.6; max-width: 60ch; } /* ============================ CTA FINAL ============================ */ .cta-final { text-align: center; padding: 108px 24px; background: var(--aurora); position: relative; overflow: hidden; } .cta-final h2 { font-family: var(--font-display); font-weight: var(--fw-light); color: var(--ink); font-size: clamp(30px, 5vw, 54px); line-height: 1.08; letter-spacing: -0.015em; max-width: 18ch; margin: 16px auto 0; text-wrap: balance; } .cta-final .cta-sub { color: var(--ink-2); font-size: var(--t-md); margin: 20px auto 0; max-width: 52ch; line-height: 1.6; } .cta-final .hero-cta { margin-top: 34px; } /* ============================ FOOTER ============================ */ .footer { background: var(--navy-900); padding: 64px 24px 40px; border-top: 1px solid var(--line); } .foot-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; } .foot-brand p { color: var(--ink-3); font-size: var(--t-meta); line-height: 1.6; margin-top: 16px; max-width: 34ch; } .foot-col h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--on-bg-gold); font-weight: 500; margin-bottom: 16px; } .foot-col a, .foot-col span { display: block; color: var(--ink-3); font-size: var(--t-meta); padding: 6px 0; transition: color .2s var(--ease); } .foot-col a:hover { color: var(--ink); } .foot-legal { max-width: 1140px; margin: 44px auto 0; padding-top: 26px; border-top: 1px solid var(--line); } .foot-legal p { color: var(--ink-4); font-size: var(--t-xs); line-height: 1.65; margin-bottom: 10px; max-width: 92ch; } .foot-legal .copy { color: var(--ink-3); } .foot-disc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .foot-disc .chip { font-size: var(--t-xs); color: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r-full); padding: 5px 12px; display: inline-flex; gap: 7px; align-items: center; } .foot-disc .chip svg { color: var(--on-bg-gold); } /* ============================ RESPONSIVE ============================ */ @media (max-width: 980px) { .nav-links { display: none; } .nav-cta .show-md { display: none; } .nav-burger { display: flex; } .cmp-header { display: none; } .cmp-row { grid-template-columns: 1fr 1fr 1fr; } .cmp-feat { grid-column: 1 / -1; border-bottom: 1px solid var(--line-2) !important; background: var(--surface-2); font-weight: 600; } .cmp-val small { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-mono); color: var(--ink-4); margin-bottom: 2px; } .cmp-us { box-shadow: none; } .steps { grid-template-columns: repeat(2, 1fr); } .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 860px) { .sec { padding: 68px 20px; } .seals { grid-template-columns: 1fr; max-width: 420px; } .prob-grid, .steps, .ben-grid, .plans, .trust-grid { grid-template-columns: 1fr; } .show-row { grid-template-columns: 1fr; gap: 24px; } .show-row:nth-child(even) .show-media { order: 0; } .show-text p { max-width: none; } .plan.feat { transform: none; } .hero { padding: 72px 20px 64px; } .sec-head { margin-bottom: 38px; } .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } .hero-cta .btn, .cta-final .btn { width: 100%; } } /* ---------- Entrance safety: content is visible by default; never depend on animation playback to reveal it (screenshots / PDF / frozen-playback envs). ---------- */ .fade-up, .stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; }