/* ════════════════════════════════════════════════════════════ THE MEGA FIVE — shared premium service-page system MTU design system: carmim primary + per-page secondary (--sv2), dark luxury, cinematic. Pages link this + set --sv2 on . ════════════════════════════════════════════════════════════ */ :root { --line: rgba(255,255,255,0.10); --text: #FFFFFF; --text-soft: rgba(255,255,255,0.78); --text-muted: rgba(255,255,255,0.50); --bg-section: #08081A; --sv-bg: #08081A; --sv-bg2: #0F0F2A; --sv-panel: rgba(255,255,255,0.04); --sv-line: rgba(255,255,255,0.10); --sv-line-strong: rgba(255,255,255,0.18); --sv-red: #D20E36; --sv-red-light: #E8344E; --sv-red-deep: #A00B28; --sv-red-soft: #ff6b82; --sv2: #E8344E; /* per-page secondary accent — SOLID (text gradients, dots) */ --sv2-glow: rgba(232,52,78,.30); /* per-page secondary accent — TRANSLUCENT (glows) */ --sv-soft: rgba(255,255,255,0.80); --sv-muted: #B9B9C6; --sv-ease: cubic-bezier(.2,.7,.2,1); } *,*::before,*::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.svc { margin: 0; background: var(--sv-bg); color: var(--text); font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.svc img { max-width: 100%; height: auto; display: block; } body.svc a { color: inherit; text-decoration: none; } ::selection { background: rgba(210,14,54,.30); color: #fff; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .sv-wide { max-width: 1300px; } /* ── primitives ── */ .sv-section { position: relative; padding: clamp(54px,7.5vw,104px) 0; } .sv-section--alt { background: linear-gradient(180deg, var(--sv-bg) 0%, var(--sv-bg2) 50%, var(--sv-bg) 100%); } .sv-head { margin-bottom: clamp(26px,4vw,44px); } .sv-head.center { text-align: center; } .sv-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: 'Sora',sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--sv-red-soft); padding: 6px 14px; border: 1px solid rgba(210,14,54,.30); border-radius: 999px; background: rgba(210,14,54,.06); margin-bottom: 16px; } .sv-kicker::before { content: '✦'; color: var(--sv-red); } .sv-h2 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(26px,4.4vw,46px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 12px; } .sv-h2 .g { background: linear-gradient(120deg, var(--sv-red-light), var(--sv2) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sv-lede { color: var(--sv-soft); font-size: clamp(15px,1.9vw,18.5px); max-width: 660px; margin: 0; line-height: 1.6; } .sv-head.center .sv-lede { margin: 0 auto; } .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 26px; border-radius: 14px; border: 0; cursor: pointer; font-family: 'Sora',sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--sv-ease), box-shadow .3s var(--sv-ease), background .25s, border-color .25s; } .sv-btn--primary { background: linear-gradient(135deg, #E8344E, #D20E36 55%, #A00B28); color: #fff; box-shadow: 0 12px 40px rgba(210,14,54,.42), inset 0 1px 0 rgba(255,255,255,.28); } .sv-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 56px rgba(210,14,54,.6), inset 0 1px 0 rgba(255,255,255,.4); } .sv-btn--outline { background: rgba(255,255,255,.05); color: #fff; border: 1px solid var(--sv-line-strong); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sv-btn--outline:hover { border-color: var(--sv-red-soft); background: rgba(210,14,54,.10); transform: translateY(-2px); } .sv-btn--ghost { background: transparent; color: var(--sv-soft); border: 1px solid var(--sv-line); } .sv-btn--ghost:hover { color: #fff; border-color: var(--sv-line-strong); transform: translateY(-2px); } /* ── HERO ── */ .sv-hero { position: relative; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; padding: 112px 0 84px; } .sv-hero-img { position: absolute; inset: -4%; z-index: -5; background-size: cover; background-position: center; background-color: #0d0d22; transform: scale(1.04); animation: svKen 18s ease-in-out infinite alternate; } @keyframes svKen { from { transform: scale(1.04); } to { transform: scale(1.12); } } .sv-hero-scrim { position: absolute; inset: 0; z-index: -4; background: radial-gradient(110% 80% at 50% 26%, transparent 34%, rgba(6,6,14,.5) 78%), linear-gradient(180deg, rgba(6,6,14,.66) 0%, rgba(6,6,14,.46) 36%, rgba(6,6,14,.88) 84%, var(--sv-bg) 100%); } .sv-hero-glow { position: absolute; inset: 0; z-index: -3; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(44% 40% at 20% 28%, rgba(210,14,54,.30), transparent 60%), radial-gradient(46% 42% at 82% 26%, var(--sv2-glow), transparent 62%); opacity: .9; animation: svGlow 16s ease-in-out infinite alternate; } @keyframes svGlow { from { opacity: .45; transform: translateY(1.4%); } to { opacity: .65; transform: translateY(-1.4%); } } .sv-particles { position: absolute; inset: 0; z-index: -2; pointer-events: none; } .sv-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; } .sv-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.72); margin-bottom: clamp(16px,3vh,34px); transition: color .2s, gap .2s; } .sv-back:hover { color: var(--sv-red-soft); gap: 11px; } .sv-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Sora',sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--sv-red-soft); padding: 7px 16px; border: 1px solid rgba(210,14,54,.30); border-radius: 999px; background: rgba(210,14,54,.07); margin-bottom: 20px; } .sv-eyebrow::before { content: '✦'; color: var(--sv-red); } .sv-title { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(46px,9vw,104px); line-height: .95; letter-spacing: -.03em; margin: 0 0 16px; background: linear-gradient(180deg,#fff 46%,#ffd1d8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 40px rgba(0,0,0,.5)); } .sv-sub { font-family: 'Sora',sans-serif; font-size: clamp(17px,2.5vw,25px); font-weight: 600; color: #fff; margin: 0 0 14px; max-width: 16ch; } .sv-supp { color: rgba(255,255,255,.86); font-size: clamp(15px,1.9vw,18px); max-width: 560px; margin: 0 0 30px; line-height: 1.6; text-shadow: 0 2px 16px rgba(0,0,0,.5); } .sv-cta { display: flex; flex-wrap: wrap; gap: 12px; } .sv-scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--sv-muted); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; } .sv-mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 12px; display: flex; justify-content: center; padding-top: 6px; } .sv-mouse > span { width: 3px; height: 7px; border-radius: 2px; background: var(--sv-red-soft); animation: svWheel 1.7s ease-in-out infinite; } @keyframes svWheel { 0%{opacity:0;transform:translateY(-3px)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translateY(9px)} } /* ── What it is (statement) ── */ .sv-statement { position: relative; border-radius: 26px; overflow: hidden; padding: clamp(30px,5vw,64px); border: 1px solid var(--sv-line-strong); text-align: center; background: radial-gradient(90% 130% at 100% 0%, rgba(210,14,54,.14), transparent 55%), radial-gradient(80% 130% at 0% 100%, var(--sv2-glow), transparent 58%), linear-gradient(160deg, #14143000, #0a0a1c 70%); } .sv-statement::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,22,58,.5), rgba(10,10,28,.7)); z-index: -1; } .sv-statement h2 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(24px,3.6vw,40px); line-height: 1.1; letter-spacing: -.02em; margin: 0 auto 14px; max-width: 20ch; } .sv-statement p { color: var(--sv-soft); font-size: clamp(15px,2vw,18px); max-width: 680px; margin: 0 auto; line-height: 1.65; } /* ── How it works (steps) ── */ .sv-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .sv-step { position: relative; padding: 26px 22px; border-radius: 18px; background: var(--sv-panel); border: 1px solid var(--sv-line); transition: transform .3s var(--sv-ease), border-color .3s, box-shadow .3s; } .sv-step:hover { transform: translateY(-5px); border-color: rgba(210,14,54,.4); box-shadow: 0 18px 44px rgba(0,0,0,.4); } .sv-step-n { font-family: 'Sora',sans-serif; font-size: 13px; font-weight: 800; color: #fff; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sv-red), var(--sv-red-deep)); box-shadow: 0 8px 20px rgba(210,14,54,.4); margin-bottom: 16px; } .sv-step h3 { font-family: 'Sora',sans-serif; font-size: 16px; font-weight: 700; margin: 0 0 6px; } .sv-step p { font-size: 13.5px; color: var(--sv-muted); margin: 0; line-height: 1.5; } @media (max-width: 880px) { .sv-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .sv-steps { grid-template-columns: 1fr; } } /* ── Benefits (cards w/ bullet lists) ── */ .sv-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } .sv-benefits.three { grid-template-columns: repeat(3,1fr); } .sv-bcard { padding: clamp(24px,3vw,34px); border-radius: 22px; border: 1px solid var(--sv-line-strong); background: linear-gradient(160deg, rgba(27,42,107,.18), rgba(255,255,255,.03)); } .sv-bcard.alt { background: linear-gradient(160deg, rgba(210,14,54,.14), rgba(255,255,255,.03)); } .sv-bcard h3 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(19px,2.3vw,24px); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } .sv-bcard h3 .ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--sv-red), var(--sv-red-deep)); } .sv-bcard.alt h3 .ico { background: linear-gradient(135deg, var(--sv2), rgba(0,0,0,.2)); } .sv-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .sv-list li { display: flex; align-items: flex-start; gap: 11px; color: var(--sv-soft); font-size: 14.5px; line-height: 1.5; } .sv-list .ck { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sv-red-light), var(--sv-red-deep)); margin-top: 1px; } @media (max-width: 860px) { .sv-benefits, .sv-benefits.three { grid-template-columns: 1fr; } } /* ── Use cases (pills) ── */ .sv-cases { display: flex; flex-wrap: wrap; gap: 11px; } .sv-case { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 14px; background: var(--sv-panel); border: 1px solid var(--sv-line); font-family: 'Sora',sans-serif; font-size: 14px; font-weight: 600; color: #fff; transition: transform .25s, border-color .25s, background .25s; } .sv-case:hover { transform: translateY(-3px); border-color: rgba(210,14,54,.4); background: rgba(210,14,54,.08); } .sv-case::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--sv-red-light), var(--sv2)); box-shadow: 0 0 8px rgba(210,14,54,.6); } /* ── Visual experience band ── */ .sv-visual { text-align: center; overflow: hidden; } .sv-visual-wrap { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--sv-line-strong); padding: clamp(46px,8vw,110px) clamp(22px,5vw,60px); } .sv-visual-img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; background-color: #0d0d22; filter: saturate(1.05); transform: scale(1.02); } .sv-visual-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 50% 0%, rgba(210,14,54,.28), transparent 60%), radial-gradient(70% 90% at 50% 120%, var(--sv2-glow), transparent 55%), linear-gradient(180deg, rgba(5,5,12,.62), rgba(5,5,12,.86)); } .sv-visual-wrap h2 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(26px,4vw,46px); line-height: 1.08; letter-spacing: -.02em; margin: 0 auto 14px; max-width: 18ch; } .sv-visual-wrap p { color: var(--sv-soft); font-size: clamp(15px,2vw,18px); max-width: 600px; margin: 0 auto; line-height: 1.6; } /* ── Integration band ── */ .sv-integration { border-radius: 24px; padding: clamp(28px,4vw,48px); border: 1px solid var(--sv-line); background: linear-gradient(160deg, rgba(27,42,107,.2), rgba(255,255,255,.03)); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; } .sv-integration .ico { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--sv-red), var(--sv-red-deep)); box-shadow: 0 12px 30px rgba(210,14,54,.4); } .sv-integration h3 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(18px,2.2vw,24px); margin: 0 0 8px; } .sv-integration p { color: var(--sv-soft); font-size: 15px; margin: 0; line-height: 1.6; } @media (max-width: 620px) { .sv-integration { grid-template-columns: 1fr; text-align: center; } .sv-integration .ico { margin: 0 auto; } } /* ── Final CTA ── */ .sv-cta-final { text-align: center; } .sv-cta-final h2 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(28px,5vw,52px); line-height: 1.05; letter-spacing: -.02em; margin: 0 auto 24px; max-width: 18ch; background: linear-gradient(180deg,#fff 50%,#ffd1d8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sv-cta-final .row { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; } /* ── Related (Part of The Mega Five) ── */ .sv-related-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; margin-top: 8px; } .sv-rel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 20px 12px; border-radius: 16px; background: var(--sv-panel); border: 1px solid var(--sv-line); transition: transform .25s, border-color .25s, box-shadow .25s; } .sv-rel:hover { transform: translateY(-4px); border-color: rgba(210,14,54,.4); box-shadow: 0 16px 36px rgba(0,0,0,.4); } .sv-rel .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, rgba(210,14,54,.22), rgba(27,42,107,.22)); border: 1px solid var(--sv-line); } .sv-rel b { font-family: 'Sora',sans-serif; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; } .sv-rel.is-active { border-color: var(--sv-red-light); background: linear-gradient(160deg, rgba(210,14,54,.16), rgba(27,42,107,.14)); box-shadow: inset 0 0 0 1px rgba(232,52,78,.3); } .sv-rel.is-active .ico { background: linear-gradient(135deg, var(--sv-red), var(--sv-red-deep)); } .sv-rel-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-family: 'Sora',sans-serif; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, var(--sv-red-light), var(--sv-red)); } @media (max-width: 860px) { .sv-related-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 460px) { .sv-related-grid { grid-template-columns: repeat(2,1fr); } } /* ── Trust band (Mega Dating) ── */ .sv-trust { border-radius: 24px; padding: clamp(28px,4vw,48px); border: 1px solid rgba(0,224,138,.22); background: linear-gradient(160deg, rgba(0,224,138,.08), rgba(255,255,255,.03)); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; } .sv-trust .ico { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #04241a; background: linear-gradient(135deg, #00E08A, #00b06e); } .sv-trust h3 { font-family: 'Sora',sans-serif; font-weight: 800; font-size: clamp(18px,2.2vw,24px); margin: 0 0 8px; } .sv-trust p { color: var(--sv-soft); font-size: 15px; margin: 0; line-height: 1.6; } @media (max-width: 620px) { .sv-trust { grid-template-columns: 1fr; text-align: center; } .sv-trust .ico { margin: 0 auto; } } /* ── reveal ── */ .sv-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--sv-ease), transform .7s var(--sv-ease); } .sv-reveal.in { opacity: 1; transform: none; } /* ── footer (shared look) ── */ .footer { border-top: 1px solid var(--line); background: var(--bg-section); padding: 48px 0 32px; color: var(--text-muted); font-size: 13px; } .footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } @media (max-width: 720px) { .footer .wrap { grid-template-columns: 1fr 1fr; } } .footer h5 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 14px; } .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer a:hover { color: #fff; } .footer-meta { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .footer .footer-logo img { height: 28px; width: auto; } @media (max-width: 680px) { .sv-hero { min-height: 90svh; padding-top: 100px; } .sv-cta .sv-btn, .sv-cta-final .row .sv-btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .sv-hero-img, .sv-hero-glow, .sv-particles, .sv-mouse > span { animation: none !important; } .sv-reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } }