/* ═══════════════════════════════════════════════════════════════════ index-premium.css — Next Horizon Homepage "Premium Skin" v1.0 Loaded LAST in . Pure visual layer on top of index1-2-0.css: no layout mechanics, JS hooks, or PHP bindings are touched. Rollback: remove the two /font lines in index.php (or restore index.backup-2026-07-19.php). ═══════════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN TOKENS ─────────────────────────────────────────────── */ :root{ /* fonts: every var(--fd)/var(--fb) usage across the old CSS silently upgrades to the new pairing */ --fd:'Space Grotesk','Cairo',sans-serif; --fb:'Inter','Cairo',system-ui,sans-serif; --bg:#05070c; --bg-card:#0a0d16; --bg-deep:#070910; --bm:#3b8ef0; --teal:#39b3c9; --soft:#aab3c2; --white:#f4f7fb; --nx-ink:rgba(244,247,251,.92); --nx-dim:rgba(170,179,194,.68); --nx-faint:rgba(170,179,194,.42); --nx-line:rgba(255,255,255,.07); --nx-line-strong:rgba(255,255,255,.13); --nx-surface:rgba(255,255,255,.025); --nx-surface-2:rgba(13,17,27,.85); --nx-accent:#3b8ef0; --nx-accent-2:#6cc4ff; --nx-grad:linear-gradient(120deg,#4a97f2 0%,#6cc4ff 55%,#59d3e8 100%); --nx-radius:18px; --nx-shadow:0 24px 70px rgba(2,4,10,.6); } [dir="rtl"] body, [dir="rtl"] .hero-tagline, [dir="rtl"] .hero-slogan, [dir="rtl"] .sec-title{font-family:'Cairo','Space Grotesk',sans-serif;letter-spacing:0} /* ── 2. BASE ──────────────────────────────────────────────────────── */ body{ background:var(--bg); color:var(--soft); font-family:var(--fb); font-size:15.5px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:rgba(59,142,240,.85);color:#fff} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)} /* kill the dated decorations site-wide */ #torch-light, .hero-chess-bg, .deco-sq, .hero-bg-txt, .rev-star-bg{display:none!important} #particles-canvas{opacity:.28} #cursor-glow{background:radial-gradient(circle,rgba(59,142,240,.045) 0%,transparent 70%)} #scroll-prog{background:var(--nx-grad);box-shadow:0 0 10px rgba(108,196,255,.55);height:2px} /* ── 3. NAVBAR ────────────────────────────────────────────────────── */ .navbar{ height:62px; background:rgba(5,7,12,.66); backdrop-filter:blur(24px) saturate(160%); border-bottom:1px solid var(--nx-line); } .navbar.scrolled{ background:rgba(5,7,12,.92); box-shadow:0 12px 40px rgba(0,0,0,.5); border-bottom-color:var(--nx-line-strong); } .nav-pill{ background:rgba(255,255,255,.03); border:1px solid var(--nx-line); backdrop-filter:blur(12px); } .nav-pill > li > a{font-family:var(--fb);font-weight:500;letter-spacing:.2px} .nav-pill > li > a.active{ background:rgba(59,142,240,.14); box-shadow:inset 0 0 0 1px rgba(59,142,240,.3); } .nav-signin{ background:linear-gradient(135deg,#3b8ef0,#2467c9); border-radius:10px; box-shadow:0 2px 14px rgba(59,142,240,.35),inset 0 1px 0 rgba(255,255,255,.18); letter-spacing:.3px; } .nav-signin:hover{background:linear-gradient(135deg,#4a97f2,#2b74da);transform:translateY(-1px)} .lang-btn{ background:rgba(255,255,255,.04); border:1px solid var(--nx-line-strong); border-radius:10px; color:var(--nx-dim); } .lang-btn:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); box-shadow:none; color:#fff; } .nav-dropdown{border:1px solid var(--nx-line-strong);background:rgba(9,12,19,.97)} /* ── 4. HERO ──────────────────────────────────────────────────────── */ .hero{ background: radial-gradient(ellipse 90% 60% at 70% -10%,rgba(59,142,240,.14) 0%,transparent 55%), radial-gradient(ellipse 70% 55% at 12% 20%,rgba(57,179,201,.08) 0%,transparent 60%), var(--bg); } .hero::before{ content:'';position:absolute;inset:0; background: radial-gradient(1px 1px at 18% 32%,rgba(255,255,255,.35) 0,transparent 100%), radial-gradient(1px 1px at 64% 18%,rgba(255,255,255,.28) 0,transparent 100%), radial-gradient(1.5px 1.5px at 82% 58%,rgba(255,255,255,.22) 0,transparent 100%), radial-gradient(1px 1px at 35% 74%,rgba(255,255,255,.25) 0,transparent 100%), radial-gradient(1px 1px at 90% 84%,rgba(255,255,255,.2) 0,transparent 100%); opacity:.5;animation:none; } .hero::after{display:none} .hero-grid{ background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 10%,transparent 90%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,black 10%,transparent 90%); } .hero-fade{height:220px;background:linear-gradient(transparent,var(--bg))} .hero-orb{filter:blur(90px);opacity:.5} .hero-orb-1{background:radial-gradient(circle,rgba(59,142,240,.32),transparent 70%)} .hero-orb-2{background:radial-gradient(circle,rgba(57,179,201,.22),transparent 70%)} .hero-orb-3{background:radial-gradient(circle,rgba(94,109,255,.18),transparent 70%)} /* headline */ .hero-tagline{ font-family:var(--fd); font-weight:700; font-size:clamp(30px,4.4vw,60px)!important; letter-spacing:-.025em; line-height:1.07; color:var(--nx-ink); text-shadow:none; } .hero-tagline em{ background:var(--nx-grad); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .hero-tagline em::after{ height:3px;bottom:-6px;border-radius:3px; background:var(--nx-grad); box-shadow:0 0 18px rgba(108,196,255,.5); opacity:.9; } .hero-slogan{ font-family:var(--fb); font-weight:500; font-size:clamp(13px,1.3vw,17px)!important; letter-spacing:.16em; text-transform:uppercase; color:var(--nx-faint); text-shadow:none; } .hero-slogan em{color:var(--nx-accent-2);font-style:normal} /* video card */ .hvc-video-box{ border-radius:20px; border:1px solid var(--nx-line-strong); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px rgba(2,4,10,.75), 0 0 80px rgba(59,142,240,.1); } .hvc-badge{ background:rgba(7,9,15,.78); border:1px solid var(--nx-line-strong); box-shadow:0 8px 24px rgba(0,0,0,.4); font-family:var(--fb); font-weight:600; font-size:10.5px; letter-spacing:.8px; color:var(--nx-ink); } /* buttons */ .btn{ font-family:var(--fb); font-weight:600; font-size:13.5px; letter-spacing:.2px; border-radius:12px; padding:13px 30px; } .btn-primary{ background:linear-gradient(160deg,#4a97f2 0%,#2467c9 100%); border:1px solid rgba(108,196,255,.35); box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 28px rgba(43,116,218,.4); } .btn-primary:hover{ background:linear-gradient(160deg,#5aa3f6 0%,#2b74da 100%); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 36px rgba(43,116,218,.5); } .btn-outline{ background:rgba(255,255,255,.035); border:1px solid var(--nx-line-strong); color:var(--nx-ink); backdrop-filter:blur(8px); } .btn-outline:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.26); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.35); } /* hero stats */ .stat-card{ background:var(--nx-surface); border:1px solid var(--nx-line); border-radius:14px; backdrop-filter:blur(10px); } .stat-card::after{background:linear-gradient(90deg,transparent,rgba(108,196,255,.35),transparent)} .stat-card:hover{ transform:translateY(-3px); border-color:rgba(108,196,255,.3); box-shadow:0 14px 34px rgba(2,4,10,.5); } .stat-value{ font-family:var(--fd); font-weight:700; text-shadow:none; color:var(--nx-ink); } .stat-value span{color:var(--nx-accent-2)} .stat-label{color:var(--nx-faint);letter-spacing:1.6px;font-weight:600} .stat-sep{background:var(--nx-line-strong)} /* floating hero reviews */ .hero-rev{ background:rgba(8,11,18,.72); border:1px solid var(--nx-line); border-radius:16px; backdrop-filter:blur(18px); box-shadow:0 18px 44px rgba(2,4,10,.5); } .hero-rev:hover{border-color:rgba(108,196,255,.28);background:rgba(8,11,18,.86)} .hr-av{background:var(--nx-grad);color:#06202e} .hr-name{font-family:var(--fb)} /* scroll indicator */ .hero-scroll-down{color:var(--nx-faint)} .hero-scroll-text{font-family:var(--fb);font-weight:600;letter-spacing:3.5px;font-size:9px} /* ── 4b. HERO LAYOUT v2.2 — compact height, bigger content, no dead space ── */ .hero{min-height:0!important;padding-top:58px} .hero-inner{ gap:72px; max-width:1360px; padding:96px 48px 120px!important; } .hero-text-col{gap:30px} .hero-visual-col{width:640px} /* scale the core up so it owns the space */ .hero-tagline{font-size:clamp(34px,4.9vw,68px)!important} .hero-slogan{font-size:clamp(14px,1.4vw,18px)!important} .hero-text-col .hvc-actions .btn{padding:16px 30px;font-size:14px} .hvc-video-box{border-radius:22px} /* hero declutter: badges + stat cards removed (stats-bar section below keeps the numbers) */ .hero-social-proof, .hero-stats{display:none!important} /* CTA row now lives under the headline inside the text column */ .hero-text-col .hvc-actions{ justify-content:flex-start; width:auto; flex-wrap:wrap; gap:10px; } .hero-text-col .hvc-actions .btn{ flex:0 0 auto; padding:14px 26px; font-size:13.5px; } [dir="rtl"] .hero-text-col .hvc-actions{justify-content:flex-end} /* social proof + stats sit lower, quieter */ .hero-social-proof{margin-top:2px} .hero-stats{gap:10px} .stat-card{padding:12px 18px} /* video column: no buttons anymore, card breathes */ .hero-visual-col{gap:0} @media (max-width:1160px){ .hero-inner{gap:40px;padding:24px 36px 48px!important} .hero-visual-col{width:470px} } @media (max-width:900px){ /* column mode: original order (video first), CTAs centred */ .hero-inner{padding:28px 18px 44px!important;gap:28px} .hero-visual-col{width:100%;max-width:480px} .hero-text-col .hvc-actions{justify-content:center} [dir="rtl"] .hero-text-col .hvc-actions{justify-content:center} } /* ── 5. BRANDS STRIP ─────────────────────────────────────────────── */ .brands-strip{border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line);background:rgba(255,255,255,.012)} .brands-strip::before{background:linear-gradient(90deg,var(--bg),transparent)} .brands-strip::after{background:linear-gradient(270deg,var(--bg),transparent)} .brand-name-text, .brand-text-fallback{ font-family:var(--fd); font-size:15px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:rgba(244,247,251,.3); transition:color .3s; } .brand-item:hover .brand-name-text{color:rgba(244,247,251,.75)} /* ── 6. STATS BAR ─────────────────────────────────────────────────── */ .stats-bar{ background:rgba(255,255,255,.015); border-top:1px solid var(--nx-line); border-bottom:1px solid var(--nx-line); } .sbar-val{ font-family:var(--fd)!important; font-weight:700; font-size:34px; letter-spacing:-.02em; color:var(--nx-ink); text-shadow:none!important; } .sbar-lbl{color:var(--nx-faint);letter-spacing:1.6px;font-weight:600;font-size:10.5px} .sbar-sep{background:linear-gradient(to bottom,transparent,var(--nx-line-strong),transparent)} /* ── 7. SECTION SHELL ─────────────────────────────────────────────── */ section{padding:110px 44px} .sec-label{ font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:3.5px; color:var(--nx-accent-2); } .sec-label::before,.sec-label::after{ width:22px;background:linear-gradient(90deg,rgba(108,196,255,.6),transparent); } .sec-title{ font-family:var(--fd); font-weight:700; font-size:clamp(26px,3.4vw,44px); letter-spacing:-.02em; line-height:1.12; color:var(--nx-ink); } .sec-title em{ background:var(--nx-grad); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; text-shadow:none; } .sec-sub{font-size:15px;color:var(--nx-dim);line-height:1.85} /* ── 8. FEATURES ──────────────────────────────────────────────────── */ .features{background:var(--bg-deep)} .features::before{background:linear-gradient(90deg,transparent,rgba(108,196,255,.16),transparent)} .feat-tab{ background:var(--nx-surface); border:1px solid var(--nx-line); border-radius:14px; } .feat-tab:hover{background:rgba(255,255,255,.045);border-color:var(--nx-line-strong)} .feat-tab.active{ background:rgba(59,142,240,.09); border-color:rgba(108,196,255,.32); box-shadow:0 10px 30px rgba(2,4,10,.4); } .feat-tab-title{font-family:var(--fb);font-weight:600;color:var(--nx-dim)} .feat-tab.active .feat-tab-title{color:var(--nx-ink)} .feat-tab-arrow{color:var(--nx-accent-2)} .feat-panel{border-radius:20px;box-shadow:var(--nx-shadow)} .feat-pane{border:1px solid var(--nx-line);border-radius:20px;background:var(--nx-surface-2)} .feat-pane-title{ font-family:var(--fd)!important; font-weight:700; letter-spacing:-.015em; color:var(--nx-ink); } .feat-pane-desc{color:var(--nx-dim);font-size:15px;line-height:1.8} /* ── 9. VIDEO TYPES BENTO ─────────────────────────────────────────── */ .vbcard{ border-radius:var(--nx-radius); border:1px solid var(--nx-line); background:var(--nx-surface-2); } .vbcard:hover{border-color:var(--nx-line-strong)} .vbcard.active{ border-color:rgba(108,196,255,.4); box-shadow:0 24px 60px rgba(2,4,10,.55),0 0 44px rgba(59,142,240,.08); } .vbcard-foot{background:rgba(7,10,17,.94);border-top:1px solid var(--nx-line)} .vbcard-name{font-family:var(--fb);font-weight:600;font-size:13.5px;color:var(--nx-ink)} .vbcard-tag{color:var(--nx-faint)} .vbcard-goto{color:var(--nx-accent-2);font-weight:600} .vbcard-goto:hover{color:#9bd8ff} .vbcard-play{ border:1px solid rgba(255,255,255,.28); background:rgba(7,10,17,.4); color:rgba(255,255,255,.85); } .vbcard:hover .vbcard-play{ border-color:rgba(108,196,255,.8); background:rgba(59,142,240,.22); } /* ── 10. PROCESS ──────────────────────────────────────────────────── */ .proc-card{ background:var(--nx-surface); border:1px solid var(--nx-line); border-radius:var(--nx-radius); } .proc-card:hover{border-color:var(--nx-line-strong)} .proc-card.active{ background:rgba(59,142,240,.06); border-color:rgba(108,196,255,.32); box-shadow:0 20px 50px rgba(2,4,10,.45); } .proc-card::after{background:linear-gradient(90deg,transparent,rgba(108,196,255,.7),transparent)} .proc-num{font-family:var(--fd)!important;letter-spacing:2px;color:var(--nx-faint)} .proc-card.active .proc-num{color:var(--nx-accent-2)} .proc-ico{ border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--nx-line-strong); } .proc-card.active .proc-ico{background:rgba(59,142,240,.14);border-color:rgba(108,196,255,.4)} .proc-card.active .proc-ico i{color:var(--nx-accent-2)} .proc-title{font-family:var(--fd);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--nx-ink)} .proc-desc{color:var(--nx-dim)} .proc-check{ color:#4fd1c5; background:rgba(79,209,197,.07); border-color:rgba(79,209,197,.22); font-weight:600; } /* ── 11. APP STRIP ────────────────────────────────────────────────── */ .app-strip{background:rgba(255,255,255,.015);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)} .app-strip-title{font-family:var(--fb);font-weight:600;color:var(--nx-ink)} .app-strip-sub{color:var(--nx-faint)} /* ── 12. REVIEWS ──────────────────────────────────────────────────── */ .reviews{background:var(--bg-deep)} .reviews::before{background:linear-gradient(90deg,transparent,rgba(108,196,255,.14),transparent)} .reviews-pill{ background:rgba(255,255,255,.03); border:1px solid var(--nx-line-strong); color:var(--nx-dim); font-weight:600; font-size:12.5px; letter-spacing:.4px; } .rev-card{ background:var(--nx-surface); border:1px solid var(--nx-line); border-radius:var(--nx-radius); } .rev-card::before{background:linear-gradient(90deg,transparent,rgba(108,196,255,.6),transparent)} .rev-card:hover{ transform:translateY(-5px); border-color:var(--nx-line-strong); box-shadow:0 20px 50px rgba(2,4,10,.5); } .rev-name{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--nx-ink)} .rev-stars{color:#f6c453;text-shadow:none;font-size:12px} .rev-text{color:var(--nx-dim);font-size:13.5px;line-height:1.8} .rev-quote{color:rgba(255,255,255,.05);font-size:40px} .rev-av{border-radius:12px} /* ── 13. FAQ ──────────────────────────────────────────────────────── */ .faq-item{ border:1px solid var(--nx-line); border-radius:16px; background:var(--nx-surface); transition:border-color .3s,background .3s; } .faq-item.open{ border-color:rgba(108,196,255,.3); background:rgba(59,142,240,.05); box-shadow:0 14px 38px rgba(2,4,10,.4); } .faq-q{font-family:var(--fb);font-weight:600;color:var(--nx-ink);font-size:15.5px} .faq-q:hover{color:var(--nx-accent-2)} .faq-ico{color:var(--nx-accent-2)} .faq-a p{color:var(--nx-dim);font-size:14.5px;line-height:1.85} /* ── 14. FOOTER ───────────────────────────────────────────────────── */ .footer{background:#04050a;border-top:1px solid var(--nx-line)} .footer-glow{background:radial-gradient(ellipse,rgba(59,142,240,.08) 0%,transparent 70%)} .footer-tagline{ font-family:var(--fb); font-size:12px; font-weight:500; letter-spacing:1.6px; color:var(--nx-faint); } .footer-col-title{ font-family:var(--fb); font-size:11px; font-weight:700; letter-spacing:2.4px; color:rgba(244,247,251,.55); } .footer-col-list li a{color:var(--nx-dim);font-size:13.5px} .footer-col-list li a:hover{color:var(--nx-ink)} .fsoc{ border-radius:10px; background:rgba(255,255,255,.035); border:1px solid var(--nx-line); color:var(--nx-dim); } .fsoc:hover{ background:rgba(59,142,240,.14); border-color:rgba(108,196,255,.32); box-shadow:0 8px 22px rgba(2,4,10,.4); } .footer-contact-list li i{color:rgba(108,196,255,.6)} .footer-divider{background:linear-gradient(90deg,transparent,var(--nx-line-strong),transparent)} .footer-copy{color:rgba(170,179,194,.3)} /* ── 15. VIDEO OVERLAY / WELCOME ──────────────────────────────────── */ .vid-box{border:1px solid var(--nx-line-strong);box-shadow:0 40px 100px rgba(0,0,0,.8)} .welcome-overlay{background:var(--bg)} .welcome-sub{font-family:var(--fb);letter-spacing:4px;color:var(--nx-faint)} .welcome-bar-inner{background:var(--nx-grad)} /* ── 16. SOCIAL PROOF BADGES (hero) ──────────────────────────────── */ .btn-clutch,.btn-trustpilot{ border-radius:12px; box-shadow:0 6px 22px rgba(0,0,0,.28); } /* ── 17. RESPONSIVE POLISH ───────────────────────────────────────── */ @media(max-width:960px){ section{padding:80px 24px} .sbar-val{font-size:26px} } @media(max-width:480px){ section{padding:64px 18px} .hero-tagline{font-size:clamp(24px,7vw,32px)!important;white-space:normal} .hero-slogan{font-size:11px!important;letter-spacing:.12em} .btn{padding:12px 20px;font-size:12.5px} .sec-title{font-size:clamp(22px,6.4vw,30px)} } /* ── 18. MOTION SANITY ───────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }