:root { --header-height: 76px; --accent: #62d6ff; }
html { font-size: 14px; }
html, body { width: 100%; min-height: 100%; background: #101822; }
body { overflow: hidden; color: #f8fafc; }
.landing-header { position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5.5rem); background: linear-gradient(180deg, rgba(3, 8, 16, .8), rgba(3, 8, 16, 0)); }
.brand img { display: block; width: auto; height: 42px; max-width: min(190px, 42vw); object-fit: contain; }
.landing-nav { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.landing-nav a { color: #fff; text-decoration: none; padding: .65rem .9rem; border-radius: .55rem; transition: background-color .2s, color .2s, transform .2s; }
.landing-nav a:hover, .landing-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.13); }
.landing-nav .register-link { background: var(--accent); color: #07151e; }
.landing-nav .register-link:hover, .landing-nav .register-link:focus-visible { background: #a5ebff; color: #07151e; transform: translateY(-1px); }
#landing-sections { height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; }
#landing-sections::-webkit-scrollbar { display: none; }
.landing-section { position: relative; isolation: isolate; min-height: 100dvh; height: 100dvh; display: flex; align-items: center; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: #172332; }
.video-background { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(3, 11, 21, .9) 0%, rgba(3, 11, 21, .62) 44%, rgba(3, 11, 21, .22) 100%); }
.overlay-cyan { background: linear-gradient(90deg, rgba(4, 26, 34, .85), rgba(4, 26, 34, .44) 55%, rgba(4, 26, 34, .2)); }
.overlay-violet { background: linear-gradient(90deg, rgba(21, 10, 43, .9), rgba(21, 10, 43, .53) 55%, rgba(21, 10, 43, .18)); }
.overlay-amber { background: linear-gradient(90deg, rgba(41, 25, 5, .9), rgba(41, 25, 5, .47) 55%, rgba(41, 25, 5, .18)); }
.overlay-blue { background: linear-gradient(90deg, rgba(2, 17, 43, .91), rgba(2, 17, 43, .52) 55%, rgba(2, 17, 43, .2)); }
.overlay-security { background: linear-gradient(90deg, rgba(5, 33, 26, .92), rgba(5, 33, 26, .56) 55%, rgba(5, 33, 26, .2)); }
.overlay-plans { background: linear-gradient(90deg, rgba(15, 10, 38, .94), rgba(13, 18, 47, .70) 55%, rgba(12, 16, 35, .46)); }
.section-content { width: min(100% - 2.5rem, 650px); margin-left: clamp(1.25rem, 10vw, 12rem); padding-top: var(--header-height); }
.section-content-right { margin-left: auto; margin-right: clamp(1.25rem, 10vw, 12rem); }
.eyebrow, .feature-number { display: block; margin-bottom: 1rem; color: var(--accent); font-size: .8rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.section-content h1, .section-content h2 { margin: 0 0 1.25rem; color: #fff; font-weight: 750; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.section-content h1 { font-size: clamp(3rem, 7vw, 6.4rem); max-width: 850px; }
.section-content h2 { font-size: clamp(2.8rem, 6vw, 5.8rem); }
.section-content h1 span, .section-content h2 span { color: var(--accent); }
.section-content p { max-width: 600px; margin: 0; color: rgba(255,255,255,.88); font-size: clamp(1.03rem, 1.35vw, 1.28rem); line-height: 1.65; }
.hero-content { width: min(100% - 2.5rem, 850px); }
.hero-cta { margin-top: 2rem; padding: .78rem 1.3rem; border: 0; border-radius: .6rem; background: var(--accent); color: #06131d; font-weight: 700; box-shadow: 0 8px 30px rgba(83, 209, 255, .28); }
.hero-cta:hover, .hero-cta:focus-visible { background: #a5ebff; color: #06131d; }
.feature-link { display: inline-flex; gap: .6rem; align-items: center; margin-top: 1.8rem; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: .28rem; }
.feature-link:hover, .feature-link:focus-visible { color: var(--accent); }
.feature-link span { font-size: 1.35rem; line-height: .7; }
.plans-content { width: min(100% - 2.5rem, 1080px); }
.plans-content h2 { font-size: clamp(2.25rem, 4vw, 4.3rem); margin-bottom: .75rem; }
.plans-content p { max-width: 800px; font-size: clamp(.92rem, 1.15vw, 1.08rem); line-height: 1.45; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.35rem; }
.plan-card { min-height: 210px; padding: 1.1rem; border: 1px solid rgba(255,255,255,.18); border-radius: .9rem; background: rgba(5, 12, 28, .54); backdrop-filter: blur(12px); box-shadow: 0 16px 38px rgba(0,0,0,.18); }
.plan-card-featured { border-color: var(--accent); background: rgba(23, 58, 91, .58); box-shadow: 0 14px 40px rgba(98, 214, 255, .18); }
.plan-card h3 { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 750; }
.plan-price { margin: .3rem 0 .65rem; color: var(--accent); font-size: 1.05rem; font-weight: 800; }
.plan-card ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; color: rgba(255,255,255,.87); font-size: .84rem; line-height: 1.35; }
.plan-card li { position: relative; padding-left: 1rem; }
.plan-card li::before { position: absolute; left: 0; content: "✓"; color: var(--accent); font-weight: 800; }
.scroll-cue { position: absolute; bottom: 1.8rem; left: clamp(1.25rem, 5vw, 5.5rem); display: inline-flex; gap: .7rem; align-items: center; color: rgba(255,255,255,.85); font-size: .86rem; text-decoration: none; }
.scroll-cue i { width: .7rem; height: .7rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translateY(-2px); }
.section-dots { position: fixed; z-index: 10; right: clamp(1rem, 2.3vw, 2.5rem); top: 50%; transform: translateY(-50%); display: grid; gap: .7rem; }
.section-dots a { width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; transition: transform .2s, background .2s; }
.section-dots a.active { background: var(--accent); border-color: var(--accent); transform: scale(1.45); }
@media (max-width: 767.98px) { :root { --header-height: 65px; } .landing-header { padding-inline: 1rem; } .brand img { height: 34px; } .landing-nav { gap: 0; font-size: .9rem; } .landing-nav a { padding: .55rem .65rem; } .section-content, .section-content-right { width: calc(100% - 2.5rem); margin-left: 1.25rem; margin-right: 1.25rem; } .section-content h1 { font-size: clamp(2.75rem, 14vw, 4.3rem); } .section-content h2 { font-size: clamp(2.55rem, 13vw, 4rem); } .section-content p { font-size: 1rem; } .video-overlay, .overlay-cyan, .overlay-violet, .overlay-amber, .overlay-blue, .overlay-security, .overlay-plans { background: rgba(4, 13, 25, .72); } .plan-grid { grid-template-columns: 1fr; gap: .55rem; margin-top: .8rem; } .plan-card { min-height: 0; padding: .75rem .9rem; } .plan-card ul { grid-template-columns: 1fr 1fr; font-size: .76rem; } .plans-content h2 { font-size: 2rem; margin-bottom: .4rem; } .plans-content p { font-size: .82rem; line-height: 1.3; } .plans-content .hero-cta { margin-top: .85rem; padding: .6rem 1rem; } .section-dots { display: none; } .scroll-cue { left: 1.25rem; bottom: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { #landing-sections { scroll-snap-type: y proximity; } .video-background { display: none; } }