:root{ --paper:#09090c;--paper-sunken:#050507;--paper-raised:#121217;--paper-deep:#1a1a22; --ink:#f4f2fa;--ink-soft:#dedbe9;--ink-muted:#a8a4b8;--ink-faint:#736f82;--ink-ghost:#46434f; --hairline:#ffffff18;--hairline-strong:#ffffff30;--hairline-ink:#ffffff52; --violet:#7d5aff;--violet-deep:#6346d8;--violet-glow:#7d5aff59; --gold:#e7ce94;--ochre:#f3c179;--ochre-deep:#d09b4f; --forest:#5fe1d6;--forest-deep:#3cc4b8;--forest-glow:#5fe1d640; --peach:#ffb494;--vermillion:#ff5e67;--vermillion-deep:#e54852; --font-display:"Playfair Display",Georgia,serif; --font-sans:"Quicksand",system-ui,sans-serif; --font-label:"Raleway",system-ui,sans-serif; --font-ui:"Nunito",system-ui,sans-serif; --font-data:"Plus Jakarta Sans",system-ui,sans-serif; --ease-spring:cubic-bezier(.22,1,.36,1); --ease-bounce:cubic-bezier(.34,1.56,.64,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* NOTE: no height:100% here — with overflow-x:hidden it would make a fixed-height scroll container, breaking window.scrollTo/scrollY (in-page nav + hero CTA). Let the viewport be the scroller so smooth-scroll anchors work on all browsers. */ html,body{min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} /* Admin stat numbers — clean premium numerals (no Impact / condensed display fonts) */ .lovelo{font-family:'Plus Jakarta Sans',var(--font-data),system-ui,-apple-system,sans-serif !important;font-weight:800;letter-spacing:-.015em} .orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .orb{position:absolute;border-radius:999px;mix-blend-mode:screen;filter:blur(100px);opacity:.46;will-change:transform} .orb-v{width:620px;height:620px;background:radial-gradient(circle,#7d5aff99 0%,transparent 62%);top:-220px;left:-120px;animation:of-a 26s ease-in-out infinite} .orb-g{width:520px;height:520px;background:radial-gradient(circle,#e7ce9440 0%,transparent 62%);top:30%;right:-180px;animation:of-b 30s ease-in-out infinite} .orb-f{width:460px;height:460px;background:radial-gradient(circle,#5fe1d640 0%,transparent 62%);bottom:-140px;left:30%;animation:of-c 22s ease-in-out infinite} @keyframes of-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,40px) scale(1.05)}66%{transform:translate(-40px,60px) scale(.95)}} @keyframes of-b{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-70px,-50px) scale(1.08)}70%{transform:translate(50px,30px) scale(.92)}} @keyframes of-c{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,-40px) scale(1.1)}} .bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 0,#000 0%,transparent 70%)} .glass{backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);background:#ffffff09;border:1px solid var(--hairline);box-shadow:inset 0 1px #ffffff0d,0 1px #0003} .glass-s{backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);background:#121217c7;border:1px solid var(--hairline-strong);box-shadow:inset 0 1px #ffffff12,0 20px 60px -20px #0009} #app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column} .hdr{position:sticky;top:0;z-index:40;padding:9px 24px;transition:background .3s,border-color .3s} .hdr-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px} /* Bordered brand-logo frame — premium signature mark */ .logo-link{text-decoration:none;display:inline-flex;align-items:center;gap:10px;padding:2px;border:0;background:none;box-shadow:none;transition:transform .35s cubic-bezier(.22,1,.36,1)} .logo-link:hover{transform:translateY(-1px)} .logo-icon{height:25px;width:auto;filter:invert(1);transition:transform .3s var(--ease-spring)} .logo-link:hover .logo-icon{transform:scale(1.05)} .logo-group{display:flex;flex-direction:column;line-height:1} .logo-main{font-family:var(--font-display);font-style:italic;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:.012em;text-transform:none;line-height:1} .logo-sub{font-family:var(--font-label);font-size:8px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:var(--violet);margin-top:4px} .logo-main em{font-family:var(--font-display);font-style:italic;color:var(--violet)} .nav-actions{display:flex;align-items:center;gap:10px} @property --nav-angle{syntax:'';initial-value:0deg;inherits:false} /* Rax-style floating nav: clean translucent pill, soft ambient glow, hover lift + animated underline */ .nav-links{position:relative;display:flex;align-items:center;gap:4px;margin:0 auto;padding:5px 10px;border-radius:999px; background:rgba(255,255,255,.022);border:1px solid var(--hairline); backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15); box-shadow:inset 0 1px rgba(255,255,255,.05),0 0 34px -10px rgba(255,255,255,.06); animation:navIn .7s var(--ease-spring) both} .nav-links a{position:relative;z-index:1;font-family:var(--font-label);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-muted);text-decoration:none;padding:7px 17px;white-space:nowrap;background:transparent; transition:color .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)} .nav-links a::after{content:"";position:absolute;left:17px;right:17px;bottom:1px;height:2px;border-radius:999px; background:linear-gradient(90deg,#4A5675 0%,#D8D8DC 100%);transform:scaleX(0);transform-origin:left center; transition:transform .35s cubic-bezier(.22,1,.36,1);box-shadow:0 0 5px -3px rgba(216,216,220,.3);pointer-events:none} .nav-links a:hover{color:var(--ink);transform:translateY(-2px)} .nav-links a:hover::after{transform:scaleX(1)} .nav-links a.active{color:#fff} .nav-links a.active::after{transform:scaleX(1)} .nav-links a:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:10px} @keyframes navIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes navBorder{to{--nav-angle:360deg}} @media(prefers-reduced-motion:reduce){.nav-links{animation:none}.nav-links::before{animation:none}} .nav-cta{padding:8px 17px;white-space:nowrap} .btn-liquid.nav-cta{font-weight:800;letter-spacing:.13em} @media(max-width:980px){.nav-links{display:none}} @media(max-width:560px){.nav-cta{display:none}} .main{flex:1;max-width:1180px;width:100%;margin:0 auto;padding:32px 24px 64px} .btn-p{font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f3e2b3,#e7ce94 48%,#d3aa61);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:11px 24px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:inset 0 1px rgba(255,255,255,.55),0 8px 24px -8px rgba(202,160,90,.7);transition:transform .24s var(--ease-spring),box-shadow .24s,filter .24s;position:relative;overflow:hidden;text-decoration:none} .btn-p::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,#ffffff38,transparent);transform:translate(-120%) skew(-20deg)} .btn-p:hover::after{animation:bshine .9s ease-out} @keyframes bshine{to{transform:translate(310%) skew(-20deg)}} .btn-p:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-p:active{filter:brightness(.98);transform:translateY(0)} .btn-g{font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);background:#ffffff0a;border:1px solid var(--hairline-strong);border-radius:999px;padding:11px 22px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;backdrop-filter:blur(12px);transition:background .24s,border-color .24s,transform .24s var(--ease-spring);text-decoration:none} .btn-g:hover{background:#ffffff14;border-color:#ffffff2e;transform:translateY(-1px)} /* Premium hover physics for the navbar action buttons (Admin + Grab The Deal) */ .nav-actions .btn-g{padding:9px 18px;white-space:nowrap;transition:background .35s cubic-bezier(.22,1,.36,1),border-color .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1)} .nav-actions .btn-g:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,0,0,.6),0 0 24px -10px rgba(255,255,255,.25)} .nav-actions .btn-liquid:hover{transform:scale(1.03) translateY(-2px)} .btn-g:active{transform:translateY(0)} .flash-wrap{position:fixed;top:80px;right:24px;z-index:50;display:flex;flex-direction:column;gap:10px;max-width:320px} .flash{padding:14px 18px;border-radius:12px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink);background:var(--paper-raised);border:1px solid var(--hairline-strong);box-shadow:0 12px 30px -10px #0008;animation:slideIn .4s var(--ease-spring)} .flash-success{border-color:var(--forest);color:var(--forest)} .flash-error{border-color:var(--vermillion);color:var(--vermillion)} .flash-warning{border-color:var(--ochre);color:var(--ochre)} @keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}} .footer{padding:64px 24px 32px;border-top:1px solid var(--hairline);background:linear-gradient(180deg,rgba(125,90,255,.03),transparent 120px)} .footer-inner{max-width:1180px;margin:0 auto} .footer-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:40px;margin-bottom:48px} .footer-brand{max-width:280px} .footer-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:18px;transition:transform .28s var(--ease-spring),filter .28s} .footer-logo:hover{transform:translateY(-1px);filter:drop-shadow(0 0 10px rgba(125,90,255,.25))} .footer-key{height:26px;width:auto;filter:invert(1);display:block} .footer-bottom .footer-key{height:22px} .footer-logo-text{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:.02em} .footer-tagline{font-family:var(--font-ui);font-size:14px;color:var(--ink-muted);line-height:1.7;margin-bottom:22px} .footer-socials{display:flex;align-items:center;gap:10px} .footer a,.footer-social,.footer-logo{cursor:pointer} .footer-social{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline-strong);display:flex;align-items:center;justify-content:center;color:var(--ink-muted);transition:all .28s var(--ease-spring)} .footer-social:hover{border-color:var(--violet);color:var(--violet);background:#ffffff08;transform:translateY(-2px);box-shadow:0 0 18px -4px rgba(125,90,255,.35)} .footer-social svg{width:16px;height:16px;transition:transform .28s var(--ease-spring)} .footer-social:hover svg{transform:scale(1.08)} .footer-col h4{font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--violet);margin-bottom:18px} .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .footer-col a{font-family:var(--font-ui);font-size:13px;color:var(--ink-muted);text-decoration:none;transition:color .25s,transform .25s var(--ease-spring),text-shadow .25s;display:inline-block} .footer-col a:hover{color:var(--ink);transform:translateX(2px);text-shadow:0 0 18px rgba(125,90,255,.35)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;border-top:1px solid var(--hairline);flex-wrap:wrap} .footer-bottom p{font-family:var(--font-ui);font-size:12px;color:var(--ink-muted);margin:0} .footer-bottom span{color:var(--violet);font-weight:700} @media(max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px} .footer-brand{grid-column:1 / -1;max-width:100%} } @media(max-width:640px){ .footer-grid{grid-template-columns:1fr 1fr;gap:28px} .footer-bottom{flex-direction:column;text-align:center;gap:10px} } input[type=text],input[type=email],input[type=password],select{width:100%;background:#ffffff06;border:1px solid var(--hairline-strong);border-radius:12px;padding:12px 14px;color:var(--ink);font-family:var(--font-sans);font-size:14px;font-weight:500;transition:border-color .2s,background .2s,box-shadow .2s;outline:none} select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393909f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px} input:focus,select:focus{border-color:var(--violet);background:#7d5aff0a;box-shadow:0 0 0 3px #7d5aff1a} input::placeholder{color:var(--ink-faint)} .fg{margin-bottom:18px} .flabel{font-family:var(--font-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:7px;display:block} .card{border-radius:22px;padding:28px;position:relative;overflow:hidden;transition:transform .42s var(--ease-spring),box-shadow .42s;--spot-x:50%;--spot-y:50%;background:#ffffff05;border:1px solid var(--hairline)} .card::before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--spot-x) var(--spot-y),rgba(125,90,255,.10),transparent 60%);opacity:0;transition:opacity .45s;pointer-events:none} .card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px #0009} .card:hover::before{opacity:1} .card > *{position:relative;z-index:3} .card-tag{font-family:var(--font-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--violet);padding:6px 12px;border-radius:999px;border:1px solid var(--hairline);display:inline-block;margin-bottom:16px;background:#ffffff08} .card-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;line-height:1.15} .card-title em{font-style:italic;color:var(--violet)} .card-text{font-family:var(--font-ui);font-size:14px;color:var(--ink-soft);line-height:1.7;font-weight:500} .card-list{margin-top:16px;display:flex;flex-direction:column;gap:8px} .card-list li{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--ink-muted);line-height:1.5;display:flex;align-items:flex-start;gap:9px;list-style:none} .card-list li::before{content:"→";color:var(--violet);font-weight:800;flex-shrink:0} .eyebrow{font-family:var(--font-label);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--violet);font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:8px} .eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hairline-strong),transparent)} .stitle{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.05;margin-bottom:10px} .stitle em{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-style:normal;color:var(--violet)} .ssub{font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.7;margin-bottom:38px;max-width:680px} .reveal{opacity:0;filter:blur(10px);transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);will-change:opacity,transform,filter} .reveal.in{opacity:1;filter:blur(0);transform:translateY(0)} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1!important;filter:none!important;transform:none!important;transition:none!important} } @media(max-width:640px){ .hdr-inner{padding:0} .nav-actions .btn-g{display:none} .logo-main{font-size:18px} .footer-inner{flex-direction:column;text-align:center} .stitle{font-size:28px} } /* Landing page slides */ .slide{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:54px 0;position:relative} /* Professional Hero */ .slide-hero{text-align:center;align-items:center;overflow:hidden;padding:0;position:relative;min-height:auto} /* Faded ~90% so the hero content-column edge no longer reads as a rectangle on the grid */ .slide-hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 30%,transparent 0%,transparent 55%,rgba(9,9,12,.35) 100%);pointer-events:none;opacity:.1} /* Native system cursor — clean and responsive everywhere */ a,button{cursor:pointer} /* Ambient orange glow that follows the cursor (background layer, behind content) */ .site-cursor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .site-cursor-glow{position:absolute;top:0;left:0;width:340px;height:340px;border-radius:50%;transform:translate3d(-50%,-50%,0);background:radial-gradient(circle,rgba(255,216,105,.11) 0%,rgba(255,176,60,.08) 38%,rgba(255,140,30,.04) 58%,transparent 72%);filter:blur(56px);mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;will-change:transform} .site-cursor-glow::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,228,150,.06) 0%,transparent 60%);animation:cursorBreathe 4.5s ease-in-out infinite} @keyframes cursorBreathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}} @media(prefers-reduced-motion:reduce){.site-cursor-glow::after{animation:none}} .hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(125,90,255,.009) 1px,transparent 1px),linear-gradient(to bottom,rgba(125,90,255,.009) 1px,transparent 1px);background-size:80px 80px;opacity:.1} .hero-orb{position:absolute;border-radius:999px;mix-blend-mode:screen;filter:blur(140px);opacity:.08;pointer-events:none} .hero-orb-1{width:600px;height:600px;background:radial-gradient(circle,#7d5aff 0%,transparent 70%);top:-220px;left:50%;margin-left:-300px;animation:orbFloat1 28s ease-in-out infinite} .hero-orb-2{width:420px;height:420px;background:radial-gradient(circle,#4f46e5 0%,transparent 70%);bottom:-160px;right:-100px;animation:orbFloat2 24s ease-in-out infinite} @keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.08)}} @keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,-30px) scale(1.05)}} .hero-wrap{display:flex;align-items:center;justify-content:center;width:100%;max-width:900px;margin:0 auto;padding:104px 32px 56px;min-height:auto;position:relative;z-index:2} .hero-copy{max-width:720px;padding:0;position:relative} .hero-copy::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;background:radial-gradient(ellipse at 50% 50%,rgba(125,90,255,.06),transparent 65%);pointer-events:none;z-index:-1;opacity:.7} .hero-title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,48px);font-weight:500;font-style:italic;line-height:1.08;letter-spacing:.01em;margin-bottom:24px;animation:heroIn 1s var(--ease-spring) both} .hero-title em{font-style:normal;font-family:'Sora','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:1.34em;display:inline-block;line-height:1.04;margin-top:10px;background:linear-gradient(175deg,#fff6e0 0%,#f7dca0 38%,#eebd6a 64%,#d99a44 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;position:relative;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(231,180,110,.28))} .hero-title em::after{content:"";position:absolute;left:6%;right:6%;bottom:-7px;height:2px;background:linear-gradient(90deg,transparent,rgba(243,200,120,.75),rgba(231,180,110,.4),transparent);border-radius:999px;opacity:.85;box-shadow:0 0 16px rgba(231,180,110,.45)} .hero-sub{font-family:var(--font-ui);font-size:clamp(17px,2vw,20px);color:var(--ink-soft);line-height:1.7;max-width:560px;margin:0 auto 38px;animation:heroIn 1s .12s var(--ease-spring) both} .hero-actions{animation:heroIn 1s .22s var(--ease-spring) both;margin-bottom:34px} /* ===== Liquid Glass CTA — Apple-style frosted button ===== */ .hero-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif; font-size:13px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:#fff; background:linear-gradient(180deg,#8f70ff 0%,#7a5cf5 46%,#6a47e6 100%); border:1px solid rgba(255,255,255,.30);border-radius:18px;padding:18px 40px;cursor:pointer;text-decoration:none;overflow:hidden;isolation:isolate; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -12px 24px -12px rgba(50,26,120,.6),0 18px 46px -14px rgba(125,90,255,.62),0 2px 8px -3px rgba(0,0,0,.35); transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),border-color .35s cubic-bezier(.22,1,.36,1)} /* glossy upper sheen (static) */ .hero-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:52%;z-index:1;pointer-events:none;border-radius:18px 18px 50% 50%/18px 18px 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 55%,transparent);opacity:.9;transition:opacity .35s ease} .cta-glow{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 130% at 50% -8%,rgba(255,255,255,.26),transparent 68%);opacity:.6} @keyframes pulseCta{0%,100%{opacity:.42}50%{opacity:.8}} .hero-cta svg{position:relative;z-index:2;transition:transform .35s cubic-bezier(.22,1,.36,1)} .hero-cta .cta-text{position:relative;z-index:2} .hero-cta:hover{transform:scale(1.03);border-color:rgba(255,255,255,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -12px 26px -12px rgba(50,26,120,.65),0 0 40px rgba(140,110,255,.5),0 28px 64px -16px rgba(125,90,255,.72),0 2px 8px -3px rgba(0,0,0,.35)} .hero-cta:hover::before{opacity:1} .hero-cta:hover svg{transform:translateX(5px)} /* Loading state — hide text/arrow (keeps button size), show centred spinner */ .hero-cta.loading{pointer-events:none;cursor:default} .hero-cta.loading .cta-text,.hero-cta.loading svg{opacity:0} .hero-cta.loading::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:ctaSpin .6s linear infinite;z-index:3} @keyframes ctaSpin{to{transform:rotate(360deg)}} .hero-cta:active{transform:scale(.99)} .hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-label);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);animation:float 3s ease-in-out infinite;z-index:10} .hero-scroll svg{animation:float 3s ease-in-out infinite .2s} @keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}} @media(max-width:640px){ .hero-wrap{padding:92px 24px 36px} .hero-title{font-size:46px} .hero-sub{font-size:16px} .hero-cta{padding:15px 30px;font-size:11px} .trust-pill{font-size:9px;padding:7px 12px} } .slide-transition{text-align:center;align-items:center;justify-content:center;min-height:auto;padding:16px 24px 20px} .transition-title{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:900px;margin:0 auto} .t-line1{font-family:var(--font-display);font-size:clamp(28px,3.2vw,44px);font-weight:500;font-style:italic;line-height:1.1;color:var(--ink)} .t-line2{font-family:var(--font-label);font-size:clamp(11px,1.1vw,13px);letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--violet)} /* Purchase board on slide 2 */ /* Bundle pricing showcase */ .slide-bundle{padding:28px 24px 100px;align-items:center} .bundle-showcase{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;max-width:1180px;width:100%;margin:0 auto} .bundle-pricing{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:42px;background:linear-gradient(165deg,#17141fe6,#0f0d15ea);border:1px solid transparent;box-shadow:inset 0 1px #ffffff10,0 20px 60px -28px #000a;position:relative;overflow:hidden} .bundle-pricing::after{content:"";position:absolute;inset:0;border-radius:22px;padding:1.4px;background:linear-gradient(135deg,var(--violet) 0%,var(--forest) 48%,var(--violet) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;z-index:2} .bundle-pricing > *{position:relative;z-index:3} .bundle-pricing-tag{font-family:var(--font-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--forest);padding:6px 14px;border:1px solid var(--forest);border-radius:999px;background:rgba(95,225,214,.08)} .bundle-pricing-title{font-family:var(--font-display);font-size:clamp(32px,3.2vw,46px);font-weight:700;line-height:1.05;color:var(--ink)} .bundle-pricing-title em{font-style:italic;color:var(--violet)} .bundle-pricing-desc{font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.7;max-width:420px} .bundle-price-block{width:100%} .bundle-price-block .price-row{display:flex;align-items:center;gap:16px;margin-bottom:10px} .bundle-price-block .price-original{font-family:var(--font-data);font-size:18px;color:var(--ink-faint);text-decoration:line-through} .bundle-price-block .price-current{display:flex;align-items:flex-start;gap:4px} .bundle-price-block .price-currency{font-family:var(--font-data);font-size:18px;color:var(--ink-muted);margin-top:8px} .bundle-price-block .price-value{font-family:var(--font-display);font-size:58px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.03em} .bundle-price-block .price-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .savings-badge{font-family:var(--font-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--vermillion),var(--ochre-deep));padding:5px 12px;border-radius:999px;box-shadow:0 4px 14px -4px rgba(255,94,103,.4)} .bundle-price-block .price-note{font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .bundle-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;width:100%} .bundle-features li{display:flex;align-items:center;gap:12px;font-family:var(--font-ui);font-size:14px;color:var(--ink-soft)} .bundle-features li svg{color:var(--forest);flex-shrink:0} .bundle-trust{display:flex;gap:10px;flex-wrap:wrap} .trust-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:11px;color:var(--ink-muted);background:#ffffff08;border:1px solid var(--hairline);border-radius:999px;padding:7px 12px} .bundle-cta{width:100%;padding:16px 28px;font-size:12px;letter-spacing:.16em} .bundle-products{display:flex;flex-direction:column;gap:18px} .bundle-products .bundle-card{padding:26px;min-height:0} .bundle-products .bundle-card .card-title{font-size:22px;margin-bottom:10px} .bundle-products .bundle-card .card-text{font-size:13px;margin-bottom:12px} .bundle-products .bundle-card .card-list{margin-top:0;gap:6px} .bundle-products .bundle-card .card-list li{font-size:12px} @media(max-width:980px){ .bundle-showcase{grid-template-columns:1fr} .bundle-pricing{padding:32px} .bundle-products{flex-direction:row;flex-wrap:wrap} .bundle-products .bundle-card{flex:1;min-width:260px} } @media(max-width:640px){ .slide-bundle{padding:72px 20px} .bundle-products{flex-direction:column} .bundle-products .bundle-card{min-width:0} .bundle-price-block .price-value{font-size:48px} } .price-promo-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:2px} .price-promo{font-family:var(--font-label);font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)} .price-promo strong{color:var(--gold);font-weight:800} .price-badge{font-family:var(--font-label);font-size:7px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--vermillion),var(--ochre-deep));padding:3px 7px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(255,94,103,.35)} /* Slide 3 — Full-screen Earth showcase */ /* Globe floats in open deep space — section bg covers the page grid; no box/frame artifacts */ /* Transparent section so it blends seamlessly with the page (same --paper, grid & cursor glow as neighbours) — no rectangular box. Depth comes from a soft centred glow only. */ .slide-purchase{padding:0;position:relative;overflow:hidden;justify-content:center;align-items:center;min-height:100vh} .earth-showcase{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:none;outline:none} .earth-showcase canvas{position:absolute;inset:0;width:100%!important;height:100%!important;z-index:2;border:none!important;outline:none!important;box-shadow:none!important;background:transparent!important} .earth-showcase .earth-fallback{position:absolute;inset:0;z-index:1;overflow:hidden;background:transparent} .earth-showcase .earth-grid{display:none} /* Soft navy depth glow behind the globe — radial, fades fully to transparent (no edges) */ .earth-showcase::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 47%,rgba(26,33,60,.5) 0%,rgba(15,18,34,.24) 38%,transparent 66%);pointer-events:none} /* Gentle edge softening that fades to transparent (never to a solid colour) so there is no visible boundary */ .earth-showcase::after{content:"";position:absolute;inset:0;z-index:6;background:radial-gradient(ellipse 75% 75% at 50% 48%,transparent 0%,transparent 70%,rgba(9,9,12,.35) 100%);pointer-events:none;opacity:.8} .earth-showcase .earth-fallback-stars{position:absolute;inset:-50%;background-image:radial-gradient(circle,#fff 1.2px,transparent 1.2px),radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1px),radial-gradient(circle,rgba(125,90,255,.35) 1.2px,transparent 1.2px),radial-gradient(circle,rgba(255,255,255,.2) .6px,transparent .6px);background-size:220px 220px,120px 120px,170px 170px,60px 60px;background-position:0 0,70px 100px,40px 30px,15px 50px;opacity:.4;animation:starsDrift 240s linear infinite} .earth-showcase .earth-fallback-planet{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(58vh,58vw);max-width:680px;aspect-ratio:1/1;border-radius:50%;background:url('/static/img/earth/earth_atmos_2048.jpg');background-size:200% 100%;box-shadow:inset -60px -60px 140px rgba(0,0,0,.98),inset 20px 20px 80px rgba(255,255,255,.08),0 0 60px rgba(79,70,229,.25);animation:spinMap 60s linear infinite;filter:saturate(0.85) contrast(1.35) brightness(0.78)} .earth-showcase .earth-fallback-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(70vh,70vw);max-width:820px;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle,rgba(59,89,160,.14) 0%,transparent 65%);pointer-events:none;animation:pulseGlow 8s ease-in-out infinite} @keyframes starsDrift{from{background-position:0 0,70px 100px,40px 30px,15px 50px}to{background-position:-220px 0,-140px 100px,-130px 30px,-45px 50px}} @keyframes spinMap{from{background-position:0 0}to{background-position:200% 0}} @keyframes pulseGlow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.04)}} /* Globe community overlay */ /* Globe intro slide — heading + stats above the globe */ .slide-globe-intro{min-height:auto;padding:72px 24px 44px;text-align:center;align-items:center;justify-content:flex-start;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .slide-globe-intro .globe-headline{text-align:center;max-width:840px;position:relative;z-index:10;padding:0 24px} .slide-globe-intro .eyebrow{justify-content:center;margin-bottom:14px;color:var(--violet);letter-spacing:.24em;font-size:10px;font-weight:700;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .slide-globe-intro .eyebrow::after{display:none} .slide-globe-intro h2{font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(36px,4.8vw,64px);font-weight:650;color:var(--ink);line-height:1.05;letter-spacing:-.025em} .slide-globe-intro h2 .accent{background:linear-gradient(120deg,#f6e8c4,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:650} .slide-globe-intro .globe-sub{font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(15px,1.35vw,18px);color:var(--ink-soft);line-height:1.65;max-width:620px;margin:16px auto 0;font-weight:400} .slide-globe-intro .globe-stats{margin-top:34px} .slide-globe-intro .globe-stats, .slide-globe-intro .gstat, .slide-globe-intro .stat-num, .slide-globe-intro .gstat span{font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .slide-globe-intro .stat-num{font-family:"Plus Jakarta Sans",system-ui,sans-serif !important} .globe-overlay{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:48px 48px 48px;pointer-events:none;font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .globe-overlay > *{pointer-events:auto} .globe-spacer{flex:1;min-height:0} .globe-overlay .tcard,.globe-overlay .globe-trust-bar{font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .globe-overlay .tavatar{font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important} .globe-headline .eyebrow{justify-content:center;margin-bottom:14px;color:var(--gold);letter-spacing:.24em;font-size:10px;font-weight:700} .globe-headline .eyebrow::after{display:none} .globe-headline h2{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-size:clamp(36px,4.8vw,64px);font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-.03em} .globe-headline h2 .accent{background:linear-gradient(120deg,#f6e8c4,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700} .globe-sub{font-family:var(--font-ui);font-size:clamp(15px,1.35vw,18px);color:var(--ink-soft);line-height:1.65;max-width:620px;margin:16px auto 0;font-weight:400} .globe-stats{display:flex;justify-content:center;align-items:stretch;gap:14px;margin-top:34px;flex-wrap:wrap} .gstat{display:flex;align-items:center;gap:14px;background:rgba(13,11,19,.58);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 24px;backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 14px 40px -18px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04);min-width:160px} .gstat-icon{width:40px;height:40px;border-radius:12px;background:rgba(125,90,255,.10);display:flex;align-items:center;justify-content:center;color:var(--violet);flex-shrink:0} .gstat > div{display:flex;flex-direction:column;align-items:flex-start;gap:3px} .gstat .stat-num{font-family:var(--font-data);font-size:clamp(24px,2.2vw,32px);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em} .gstat span{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-muted)} .globe-labels{position:absolute;inset:0;pointer-events:none} .glabel{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:rgba(13,11,19,.65);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 12px;backdrop-filter:blur(8px);pointer-events:auto;transition:transform .35s var(--ease-spring),box-shadow .35s} .glabel:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(125,90,255,.25)} .gflag{font-size:16px;margin-right:4px} .glabel strong{font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:5px} .gstatus{display:flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:10px;color:var(--ink-muted)} .gdot{width:6px;height:6px;border-radius:50%;background:var(--forest);box-shadow:0 0 8px var(--forest)} .globe-testimonials{position:absolute;inset:0;pointer-events:none} .tcard{position:absolute;width:190px;background:rgba(13,11,19,.68);backdrop-filter:blur(18px) saturate(1.25);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px;box-shadow:0 18px 44px -18px rgba(0,0,0,.55),0 0 28px -8px rgba(125,90,255,.10),inset 0 1px rgba(255,255,255,.04);pointer-events:auto;transition:transform .4s var(--ease-spring),box-shadow .4s,border-color .4s} .tcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -18px rgba(0,0,0,.6),0 0 36px -6px rgba(125,90,255,.16);border-color:rgba(255,255,255,.14)} .tcard:nth-child(1){top:20%;left:5%} .tcard:nth-child(2){top:20%;right:5%} .tcard:nth-child(3){bottom:16%;left:5%} .tcard:nth-child(4){bottom:16%;right:5%} .tcard-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .tavatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:11px;font-weight:800;color:#fff;letter-spacing:.04em;flex-shrink:0} .tmeta{display:flex;flex-direction:column;gap:1px} .tname{font-family:var(--font-ui);font-size:12px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:5px} .tflag{font-size:13px;line-height:1} .tstars{display:flex;gap:1px;color:#f3c179;font-size:11px;letter-spacing:-.05em} .tquote{font-family:var(--font-ui);font-size:12px;color:var(--ink-soft);line-height:1.55;margin:0;font-weight:400} .globe-trust-bar{display:inline-flex;align-items:center;gap:10px;background:rgba(13,11,19,.68);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:12px 22px;backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 14px 40px -18px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.04);margin-top:auto;color:var(--ink-soft);font-family:var(--font-ui);font-size:12px;line-height:1.5} .globe-trust-bar svg{color:var(--violet);flex-shrink:0} .globe-trust-bar strong{color:var(--ink);font-weight:650;margin-right:3px} @media(max-width:1280px){ .tcard{width:170px;padding:14px} .tcard:nth-child(1){top:20%;left:3%} .tcard:nth-child(2){top:20%;right:3%} .tcard:nth-child(3){bottom:16%;left:3%} .tcard:nth-child(4){bottom:16%;right:3%} } @media(max-width:1100px){ .tcard{width:160px;padding:13px} .tcard:nth-child(1){top:22%;left:2%} .tcard:nth-child(2){top:22%;right:2%} .tcard:nth-child(3){bottom:14%;left:2%} .tcard:nth-child(4){bottom:14%;right:2%} .globe-overlay{padding:40px 32px 40px} } @media(max-width:980px){ .slide-globe-intro{padding:90px 24px 50px} .globe-overlay{position:relative;padding:60px 24px 60px;justify-content:flex-start;gap:36px;background:radial-gradient(ellipse at 50% 0%,rgba(13,11,19,.55),transparent 60%)} .globe-spacer{display:none} .globe-labels{display:none} .globe-testimonials{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:720px} .tcard{position:static;width:100%} .globe-stats{gap:12px;margin-top:26px} .gstat{padding:14px 18px;min-width:140px} .globe-trust-bar{margin-top:0;text-align:center;max-width:720px} } @media(max-width:640px){ .slide-globe-intro{padding:72px 20px 40px} .slide-globe-intro h2{font-size:32px;letter-spacing:-.02em} .slide-globe-intro .globe-sub{font-size:15px} .globe-overlay{padding:48px 20px 52px} .globe-testimonials{grid-template-columns:1fr} .globe-stats{flex-direction:column;align-items:center;width:100%;gap:10px} .gstat{width:100%;max-width:280px;justify-content:flex-start} .globe-trust-bar{flex-direction:column;gap:8px;padding:14px 20px;border-radius:18px} } .section-head{margin-bottom:48px} .bundle-grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:22px;align-items:stretch} .bundle-card{height:auto;display:flex;flex-direction:column;position:relative;overflow:hidden} .bundle-card:nth-child(1){grid-row:1 / 3} .bundle-card .card-title{font-family:var(--font-display);font-size:clamp(26px,2.4vw,34px);font-weight:700;line-height:1.1;margin-bottom:14px} .bundle-card .card-title em{font-style:italic;color:var(--violet)} .bundle-card .card-text{flex:1} .bundle-card::after{content:"";position:absolute;top:0;left:-60%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none;z-index:4;transition:opacity .3s} .bundle-card:hover::after{opacity:1;animation:glassShine 1.2s ease-in-out} .card-controls{position:absolute;top:26px;right:26px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:5} .product-lock{color:var(--ink-muted)} .lock-sm{width:18px;height:18px} .lock-lg{width:32px;height:32px;color:var(--gold)} .brief-btn{font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink);background:#ffffff0a;border:1px solid var(--hairline-strong);border-radius:999px;padding:6px 12px;transition:background .2s,border-color .2s,color .2s} .brief-btn:hover{background:#ffffff12;border-color:var(--violet);color:var(--violet)} .builder-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px} .shot-wrap{position:relative;border-radius:14px;overflow:hidden;cursor:pointer} .shot-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35) 100%);opacity:0;transition:opacity .3s;pointer-events:none} .shot-wrap:hover::after{opacity:1} .builder-shot{width:100%;height:130px;object-fit:cover;border:1px solid var(--hairline);background:var(--paper-raised);transition:transform .35s var(--ease-spring)} .builder-shot-wide{grid-column:1 / -1;height:110px} .shot-wrap:hover .builder-shot{transform:scale(1.03)} .shot-open{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-label);font-size:8px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink);background:#ffffff10;border:1px solid var(--hairline-strong);border-radius:999px;padding:5px 10px;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s} .shot-wrap:hover .shot-open{border-color:var(--violet);color:var(--violet);background:#ffffff14} .gold-card{transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s} .gold-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at 50% 50%, rgba(231,206,148, .12), transparent 60%);opacity:0;transition:opacity .45s;pointer-events:none;z-index:0} .gold-card::after{background:linear-gradient(90deg,transparent,rgba(231,206,148,.12),transparent)} .gold-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -20px rgba(231,206,148, .25), 0 0 40px -10px rgba(231,206,148, .18);border-color:rgba(231,206,148, .35)} .gold-card:hover::before{opacity:1} .gold-card:hover::after{opacity:1;animation:glassShine 1.2s ease-in-out} @keyframes glassShine{0%{left:-60%}100%{left:140%}} @media(max-width:980px){ .bundle-grid{grid-template-columns:1fr;grid-template-rows:auto} .bundle-card:nth-child(1){grid-row:auto} .builder-shot{height:160px} .builder-shot-wide{height:140px} } .purchase-board-price{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .price-current{display:flex;align-items:flex-start;gap:4px} .price-currency{font-family:var(--font-data);font-size:16px;color:var(--ink-muted);margin-top:8px} .price-value{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-size:48px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.03em;font-style:normal} .price-note{font-family:var(--font-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);align-self:flex-end;margin-bottom:10px} .price-original{font-family:var(--font-data);font-size:14px;color:var(--ink-faint);text-decoration:line-through;margin-right:8px;align-self:center} .price-promo-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-top:2px} .price-promo{font-family:var(--font-label);font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)} .price-promo strong{color:var(--gold);font-weight:800} .price-badge{font-family:var(--font-label);font-size:7px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--vermillion),var(--ochre-deep));padding:3px 7px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(255,94,103,.35)} .modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(9,9,12,.85);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .3s ease} .modal-overlay.open{opacity:1;pointer-events:auto} .modal-panel{position:relative;width:100%;max-width:760px;max-height:90vh;overflow:auto;background:var(--paper-raised);border:1px solid var(--hairline-strong);border-radius:24px;padding:32px;box-shadow:0 40px 80px -30px #000c;transform:translateY(16px);transition:transform .3s var(--ease-spring)} .modal-overlay.open .modal-panel{transform:translateY(0)} .modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--hairline-strong);background:#ffffff08;color:var(--ink-soft);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s} .modal-close:hover{background:#ffffff14;color:var(--ink)} .modal-shot img{width:100%;border-radius:16px;border:1px solid var(--hairline);margin-bottom:18px} .modal-shot h3{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--ink);margin-bottom:10px} .modal-shot p{font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.7} .modal-info h3{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);margin-bottom:18px} .modal-info ul{list-style:none;display:flex;flex-direction:column;gap:12px} .modal-info li{font-family:var(--font-ui);font-size:14px;color:var(--ink-soft);line-height:1.6;padding-left:18px;position:relative} .modal-info li::before{content:"→";position:absolute;left:0;color:var(--violet);font-weight:800} .modal-info li strong{color:var(--ink)} /* ===== Premium product-detail modal (inner product representation) ===== */ /* Namespaced tkm-/tkv- to avoid the unrelated legacy .pm-* component. List rules are scoped under .modal-info to outrank the legacy .modal-info ul/li styling + arrows. */ .modal-info{--rc:#9b7bff} .modal-info>h3:empty{display:none} .modal-info .modal-close{z-index:6} .modal-info .tkm-li::before,.modal-info .tkv-checklist li::before{content:none} .tkm{display:flex;flex-direction:column} /* Hero — luxury software / dashboard showcase */ .tkm-hero{position:relative;margin:-32px -32px 28px;padding:32px 32px 0;overflow:hidden;border-bottom:1px solid var(--hairline); background:radial-gradient(130% 130% at 50% -16%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 58%),linear-gradient(180deg,color-mix(in srgb,var(--rc) 7%,#0c0b12),#0a0910)} .tkm-win{position:relative;border:1px solid color-mix(in srgb,var(--rc) 28%,var(--hairline));border-bottom:none;border-radius:14px 14px 0 0;overflow:hidden; background:linear-gradient(180deg,#100e16,#0a0910);box-shadow:0 34px 60px -34px #000,0 0 64px -32px color-mix(in srgb,var(--rc) 55%,transparent)} .tkm-win-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--hairline);background:#ffffff05} .tkm-win-bar i{width:9px;height:9px;border-radius:50%;background:var(--hairline-ink)} .tkm-win-bar i:first-child{background:color-mix(in srgb,var(--rc) 85%,#0000);box-shadow:0 0 8px color-mix(in srgb,var(--rc) 70%,transparent)} .tkm-win-bar span{margin-left:8px;font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--ink-faint)} .tkm-win-body{padding:18px;min-height:172px;display:flex;align-items:center} /* Shared mini-UI primitives */ .tkv{display:flex;gap:18px;width:100%} .tkv-hl{color:var(--rc)!important} .tkv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%} .tkv-stats>div{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:11px;border:1px solid var(--hairline);background:#ffffff04} .tkv-stats span{font-family:var(--font-label);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-muted)} .tkv-stats b{font-family:'Poppins',var(--font-data),sans-serif;font-size:16px;font-weight:800;color:#fff} /* Builder — pass-odds gauge + plan rows */ .tkv-builder{align-items:center} .tkv-gauge{position:relative;width:104px;height:104px;flex-shrink:0} .tkv-gauge svg{width:100%;height:100%;transform:rotate(-90deg)} .tkv-ring-bg{fill:none;stroke:#ffffff12;stroke-width:3} .tkv-ring{fill:none;stroke:var(--rc);stroke-width:3;stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:11.7;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rc) 70%,transparent))} .tkv-gauge-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .tkv-gauge-v b{font-family:'Poppins',var(--font-data),sans-serif;font-size:26px;font-weight:800;color:#fff;line-height:1} .tkv-gauge-v span{font-family:var(--font-label);font-size:8px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--rc);margin-top:4px} .tkv-rows{flex:1;display:flex;flex-direction:column;gap:9px} .tkv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--hairline);font-family:var(--font-ui);font-size:12.5px;color:var(--ink-muted)} .tkv-row:last-child{border-bottom:none;padding-bottom:0} .tkv-row b{font-family:var(--font-data);font-weight:700;font-size:12.5px;color:var(--ink)} /* Checklist — confirmation rows + discipline score */ .tkv-check{flex-direction:column;gap:12px} .tkv-checklist{list-style:none;display:flex;flex-direction:column;gap:8px;width:100%} .tkv-checklist li{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:10px;border:1px solid var(--hairline);background:#ffffff04;font-family:var(--font-ui);font-size:12.5px;color:var(--ink-muted)} .tkv-checklist li.on{color:var(--ink-soft);border-color:color-mix(in srgb,var(--rc) 30%,var(--hairline));background:color-mix(in srgb,var(--rc) 8%,transparent)} .tkv-checklist li i{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--hairline-ink);flex-shrink:0} .tkv-checklist li.on i{border-color:var(--rc);background:var(--rc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0910' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat} .tkv-score{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:11px;background:color-mix(in srgb,var(--rc) 10%,transparent);border:1px solid color-mix(in srgb,var(--rc) 28%,var(--hairline))} .tkv-score span{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-muted)} .tkv-score b{font-family:'Poppins',var(--font-data),sans-serif;font-size:14px;color:var(--rc)} /* XAUUSD — price curve with entry / target markers */ .tkv-xau{flex-direction:column;gap:14px} .tkv-chart{width:100%;height:138px;display:block} .tkv-area{fill:var(--rc);fill-opacity:.12} .tkv-curve{fill:none;stroke:var(--rc);stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--rc) 60%,transparent))} .tkv-line{stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.55} .tkv-line.tp{stroke:var(--forest)} .tkv-line.entry{stroke:var(--rc)} .tkv-pt{stroke:#0a0910;stroke-width:2} .tkv-pt.entry{fill:var(--rc)} .tkv-pt.tp{fill:var(--forest)} /* Name section */ .tkm-cat{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--rc);margin-bottom:13px} .tkm-cat::before{content:"";width:20px;height:1px;background:color-mix(in srgb,var(--rc) 60%,transparent)} .tkm-name{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,sans-serif;font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.025em;text-transform:none;line-height:1.06;color:#fff;text-shadow:0 0 28px color-mix(in srgb,var(--rc) 34%,transparent)} .tkm-tag{font-family:var(--font-ui);font-size:15px;line-height:1.65;color:var(--ink-muted);margin-top:13px;max-width:52ch} .tkm-rule{height:1px;background:var(--hairline);margin:26px 0} /* Detail sections — What's Included / Why It Works */ .tkm-secs{display:grid;grid-template-columns:1fr 1fr;gap:30px} .tkm-sec-h{display:flex;align-items:center;gap:12px;font-family:var(--font-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--ink);margin-bottom:17px} .tkm-sec-h::after{content:"";flex:1;height:1px;background:var(--hairline)} .modal-info .tkm-list{list-style:none;display:flex;flex-direction:column;gap:13px} .modal-info .tkm-li{display:flex;align-items:flex-start;gap:11px;padding:0;position:static;font-family:var(--font-ui);font-size:13.5px;line-height:1.5;color:var(--ink-soft)} .modal-info .tkm-li svg{width:17px;height:17px;flex-shrink:0;margin-top:1px;color:var(--rc)} /* Membership footer */ .tkm-foot{display:flex;align-items:center;gap:11px;margin-top:28px;padding:14px 17px;border-radius:13px;border:1px solid color-mix(in srgb,var(--rc) 22%,var(--hairline));background:color-mix(in srgb,var(--rc) 7%,transparent);font-family:var(--font-ui);font-size:13px;line-height:1.5;color:var(--ink-soft)} .tkm-foot svg{width:17px;height:17px;flex-shrink:0;color:var(--rc)} .tkm-foot b{color:#fff;font-weight:700} @media(max-width:640px){ .modal-panel{padding:24px} .modal-shot h3{font-size:20px} .modal-info h3{font-size:22px} .tkm-hero{margin:-24px -24px 22px;padding:22px 18px 0} .tkm-win-body{padding:15px;min-height:0} .tkv-builder{flex-direction:column;text-align:center} .tkv-rows{width:100%} .tkm-secs{grid-template-columns:1fr;gap:24px} .tkm-rule{margin:22px 0} } /* Why Traders Choose */ .slide-why{text-align:center;align-items:center;padding:120px 24px} .why-content{max-width:1180px;width:100%;margin:0 auto} .why-headline{max-width:720px;margin:0 auto 60px} .why-headline .eyebrow{justify-content:center} .why-headline .eyebrow::after{display:none} .why-headline h2{font-family:var(--font-display);font-size:clamp(34px,4.2vw,52px);font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-.02em;margin-bottom:16px} .why-headline h2 em{font-style:italic;color:var(--violet)} .why-headline .ssub{margin:0 auto;font-size:clamp(15px,1.4vw,18px);color:var(--ink-soft);line-height:1.7} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .why-card{text-align:left;padding:32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:linear-gradient(165deg,#ffffff08,#ffffff03);border:1px solid var(--hairline);border-radius:22px;transition:transform .42s var(--ease-spring),box-shadow .42s,border-color .42s} .why-card:hover{transform:translateY(-6px);border-color:rgba(125,90,255,.35);box-shadow:0 24px 50px -22px rgba(0,0,0,.5),0 0 40px -12px rgba(125,90,255,.12)} .why-icon{width:52px;height:52px;border-radius:14px;background:rgba(125,90,255,.12);display:flex;align-items:center;justify-content:center;color:var(--violet);flex-shrink:0} .why-num{font-family:var(--font-data);font-size:34px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em} .why-num span{color:var(--violet)} .why-card h3{font-family:var(--font-ui);font-size:17px;font-weight:700;color:var(--ink);margin:0} .why-card p{font-family:var(--font-ui);font-size:14px;color:var(--ink-soft);line-height:1.7;margin:0} @media(max-width:980px){ .why-grid{grid-template-columns:repeat(2,1fr)} .slide-why{padding:100px 24px} } @media(max-width:640px){ .why-grid{grid-template-columns:1fr} .why-headline{margin-bottom:40px} .why-card{padding:26px} } @media(max-width:640px){ .slide{padding:60px 0} .hero-title{font-size:48px} .price-value{font-size:54px} .bundle-grid{grid-template-columns:1fr} } /* Auth pages */ .slide-auth{align-items:center;justify-content:center;min-height:calc(100vh - 80px);padding:40px 0} /* FAQ accordion */ .slide-faq .content-card{max-width:900px} .faq-search{position:relative;max-width:560px;margin:0 auto 38px} .faq-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-muted);pointer-events:none} .faq-search input{width:100%;background:#ffffff08;border:1px solid var(--hairline-strong);border-radius:999px;padding:14px 18px 14px 46px;color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:500;outline:none;transition:border-color .2s,background .2s,box-shadow .2s} .faq-search input:focus{border-color:var(--violet);background:#7d5aff0a;box-shadow:0 0 0 3px #7d5aff1a} .faq-search input::placeholder{color:var(--ink-faint)} .faq-accordion{display:flex;flex-direction:column;gap:32px;text-align:left} .faq-section-title{font-family:"Inter",system-ui,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--violet);margin-bottom:16px} .faq-item{background:#ffffff05;border:1px solid var(--hairline);border-radius:16px;overflow:hidden;transition:border-color .25s,background .25s} .faq-item:hover{background:#ffffff08;border-color:rgba(255,255,255,.12)} .faq-item.open{background:#ffffff08;border-color:rgba(125,90,255,.25);box-shadow:0 12px 30px -16px rgba(125,90,255,.15)} .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:transparent;border:none;color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:color .2s} .faq-question:hover{color:#fff} .faq-question:focus{outline:none} .faq-icon{position:relative;width:18px;height:18px;flex-shrink:0} .faq-icon::before,.faq-icon::after{content:"";position:absolute;background:currentColor;transition:transform .25s var(--ease-spring)} .faq-icon::before{top:8px;left:0;width:18px;height:2px} .faq-icon::after{top:0;left:8px;width:2px;height:18px} .faq-icon.open::after{transform:scaleY(0)} .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s var(--ease-spring)} .faq-answer p{padding:0 22px 18px;margin:0;font-family:"Inter",system-ui,sans-serif;font-size:14px;color:var(--ink-soft);line-height:1.7} .faq-answer a{color:var(--violet);text-decoration:none} .faq-answer a:hover{text-decoration:underline} .faq-no-results{text-align:center;font-family:"Inter",system-ui,sans-serif;font-size:15px;color:var(--ink-muted);margin-top:24px} .faq-no-results a{color:var(--violet);text-decoration:none} .faq-no-results a:hover{text-decoration:underline} @media(max-width:640px){ .faq-search input{font-size:14px;padding:13px 16px 13px 42px} .faq-question{padding:16px 18px;font-size:14px} .faq-answer p{padding:0 18px 16px;font-size:13px} } .content-card{max-width:820px;width:100%;margin:0 auto;background:var(--paper-raised);border:1px solid var(--hairline-strong);border-radius:24px;padding:42px;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)} .content-card h1{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--ink);margin-bottom:10px} .content-card h2{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);margin:32px 0 12px} .content-card p{font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.8;margin-bottom:16px} .content-card ul{margin:16px 0 16px 20px;font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.8} .content-card li{margin-bottom:8px} .content-card a{color:var(--violet);text-decoration:none} .content-card a:hover{text-decoration:underline} .content-date{font-family:var(--font-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:28px} .faq-item{margin-bottom:24px} .faq-item h3{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px} .contact-card{padding:24px;background:#ffffff05;border:1px solid var(--hairline);border-radius:16px;text-align:center} .contact-card h3{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px} @media(max-width:640px){ .content-card{padding:28px} .content-card h1{font-size:28px} .contact-grid{grid-template-columns:1fr} } .auth-card{max-width:420px;width:100%} .auth-head{margin-bottom:28px} .auth-foot{font-family:var(--font-ui);font-size:13px;color:var(--ink-muted);text-align:center;margin-top:20px} .auth-foot a{color:var(--violet);text-decoration:none;font-weight:700} .auth-foot a:hover{text-decoration:underline} /* Admin */ .admin-body{overflow-x:hidden} .admin-wrap{display:grid;grid-template-columns:220px 1fr;gap:24px;max-width:1400px;margin:0 auto;padding:100px 24px 64px} @media(max-width:860px){.admin-wrap{grid-template-columns:1fr;padding-top:90px}} .admin-sidebar{position:sticky;top:80px;height:fit-content;border-radius:20px;padding:18px} .admin-nav{display:flex;flex-direction:column;gap:4px} .admin-link{font-family:var(--font-label);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:12px 16px;border-radius:12px;transition:background .2s,color .2s} .admin-link:hover{background:#ffffff0a;color:var(--ink)} .admin-link.on{background:linear-gradient(135deg,#8a6bff,#6a47e6);color:#fff;box-shadow:inset 0 1px #ffffff38} .admin-main{min-width:0} .admin-section{width:100%} .admin-head{margin-bottom:32px} .admin-toolbar{margin-bottom:20px} .admin-search{display:flex;gap:12px;flex-wrap:wrap} .admin-search input,.admin-search select{max-width:260px} .admin-card{margin-bottom:24px} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px} @media(max-width:980px){.stats-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.stats-grid{grid-template-columns:1fr}} .stat-card{padding:22px;text-align:center} .stat-label{font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:10px} .stat-value{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--ink);line-height:1} .stat-sub{font-family:var(--font-ui);font-size:11px;color:var(--ink-muted);margin-top:8px} .admin-metrics-head{margin:6px 0 14px} .admin-metrics-head .eyebrow{margin-bottom:0} .data-table-wrap{overflow-x:auto} .data-table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:13px;color:var(--ink-soft)} .data-table th{text-align:left;padding:14px 16px;font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;border-bottom:1px solid var(--hairline-strong)} .data-table td{padding:14px 16px;border-bottom:1px solid var(--hairline);vertical-align:middle} .data-table tr:last-child td{border-bottom:none} .data-table code{font-family:var(--font-data);font-size:11px;color:var(--ink-faint);background:#ffffff08;padding:3px 6px;border-radius:6px} .data-table .muted{color:var(--ink-faint)} .status-pill{font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid} .status-pending{color:var(--ochre);border-color:#f3c17940;background:#f3c17910} .status-approved,.status-approve{color:var(--forest);border-color:#5fe1d640;background:#5fe1d610} .status-rejected,.status-reject{color:var(--vermillion);border-color:#ff5e6740;background:#ff5e6710} .status-paid{color:var(--violet);border-color:#7d5aff40;background:#7d5aff10} .action-btns{display:flex;gap:8px;flex-wrap:wrap} .btn-action{font-family:var(--font-label);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid;text-decoration:none;transition:background .2s} .btn-action.approve{color:var(--forest);border-color:#5fe1d640;background:#5fe1d610} .btn-action.approve:hover{background:#5fe1d620} .btn-action.pending{color:var(--ochre);border-color:#f3c17940;background:#f3c17910} .btn-action.pending:hover{background:#f3c17920} .btn-action.reject{color:var(--vermillion);border-color:#ff5e6740;background:#ff5e6710} .btn-action.reject:hover{background:#ff5e6720} .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:640px){.frow{grid-template-columns:1fr}} /* Admin affiliates */ .admin-grid-2{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start} .admin-card{padding:24px} .aff-form{display:flex;flex-direction:column;gap:14px} .field-hint{display:block;font-family:var(--font-ui);font-size:11px;color:var(--ink-muted);margin-top:6px;line-height:1.4} .reset-btn{color:var(--vermillion);border-color:#ff5e6740;background:#ff5e6710} .reset-btn:hover{background:#ff5e6722;border-color:var(--vermillion)} .aff-form textarea{resize:vertical} .affiliate-list-card{min-height:500px} .affiliate-list{display:flex;flex-direction:column;gap:10px} .affiliate-row{display:grid;grid-template-columns:44px 1fr 100px 70px 80px auto;align-items:center;gap:14px;padding:14px;background:#ffffff05;border:1px solid var(--hairline);border-radius:14px;transition:background .2s,border-color .2s,transform .2s var(--ease-spring);position:relative} .affiliate-row:hover{background:#ffffff0a;border-color:rgba(125,90,255,.35);transform:translateX(4px)} .affiliate-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--violet),var(--violet-deep))} .affiliate-name{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .affiliate-email{font-family:var(--font-ui);font-size:11px;color:var(--ink-muted)} .affiliate-code{font-family:var(--font-data);font-size:12px;font-weight:700;color:var(--gold);background:#ffffff08;padding:4px 10px;border-radius:999px;text-align:center} .affiliate-commission{font-family:var(--font-data);font-size:13px;font-weight:700;color:var(--forest);text-align:right} .affiliate-actions{display:flex;gap:8px} .affiliate-portal{position:fixed;top:50%;right:24px;transform:translateY(-50%) translateX(20px);width:320px;z-index:90;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease-spring)} .affiliate-portal.visible{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto} .affiliate-portal-inner{background:var(--paper-raised);border:1px solid var(--hairline-strong);border-radius:22px;padding:24px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 40px -10px rgba(125,90,255,.12)} .portal-header{display:flex;align-items:center;gap:14px;margin-bottom:20px} .portal-avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--violet),var(--forest))} .portal-name{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--ink)} .portal-email{font-family:var(--font-ui);font-size:12px;color:var(--ink-muted)} .portal-body{display:grid;grid-template-columns:1fr 1fr;gap:12px} .portal-stat{display:flex;flex-direction:column;gap:3px;background:#ffffff05;border:1px solid var(--hairline);border-radius:12px;padding:12px} .portal-stat-full{grid-column:1 / -1} .portal-stat span{font-family:var(--font-label);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .portal-stat strong{font-family:var(--font-ui);font-size:13px;color:var(--ink);font-weight:700} .portal-stat p{font-family:var(--font-ui);font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0} .portal-stat ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0} .portal-stat li{font-family:var(--font-ui);font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px} .portal-sale-status{font-family:var(--font-label);font-size:8px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--forest)} @media(max-width:1100px){ .admin-grid-2{grid-template-columns:1fr} .affiliate-portal{display:none} } @media(max-width:760px){ .affiliate-row{grid-template-columns:44px 1fr auto;gap:10px;padding:12px} .affiliate-code,.affiliate-commission{display:none} } .admin-body{overflow-x:hidden} .admin-wrap{display:grid;grid-template-columns:220px 1fr;gap:24px;max-width:1400px;margin:0 auto;padding:100px 24px 64px} @media(max-width:860px){.admin-wrap{grid-template-columns:1fr;padding-top:90px}} .admin-sidebar{position:sticky;top:80px;height:fit-content;border-radius:20px;padding:18px} .admin-nav{display:flex;flex-direction:column;gap:4px} .admin-link{font-family:var(--font-label);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:12px 16px;border-radius:12px;transition:background .2s,color .2s} .admin-link:hover{background:#ffffff0a;color:var(--ink)} .admin-link.on{background:linear-gradient(135deg,#8a6bff,#6a47e6);color:#fff;box-shadow:inset 0 1px #ffffff38} .admin-main{min-width:0} .admin-section{width:100%} .admin-head{margin-bottom:32px} .admin-toolbar{margin-bottom:20px} .admin-search{display:flex;gap:12px;flex-wrap:wrap} .admin-search input,.admin-search select{max-width:260px} .admin-card{margin-bottom:24px} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px} @media(max-width:980px){.stats-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.stats-grid{grid-template-columns:1fr}} .stat-card{padding:22px;text-align:center} .stat-label{font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:10px} .stat-value{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--ink);line-height:1} .stat-sub{font-family:var(--font-ui);font-size:11px;color:var(--ink-muted);margin-top:8px} .admin-metrics-head{margin:6px 0 14px} .admin-metrics-head .eyebrow{margin-bottom:0} .data-table-wrap{overflow-x:auto} .data-table{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:13px;color:var(--ink-soft)} .data-table th{text-align:left;padding:14px 16px;font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;border-bottom:1px solid var(--hairline-strong)} .data-table td{padding:14px 16px;border-bottom:1px solid var(--hairline);vertical-align:middle} .data-table tr:last-child td{border-bottom:none} .data-table code{font-family:var(--font-data);font-size:11px;color:var(--ink-faint);background:#ffffff08;padding:3px 6px;border-radius:6px} .data-table .muted{color:var(--ink-faint)} .status-pill{font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid} .status-pending{color:var(--ochre);border-color:#f3c17940;background:#f3c17910} .status-approved,.status-approve{color:var(--forest);border-color:#5fe1d640;background:#5fe1d610} .status-rejected,.status-reject{color:var(--vermillion);border-color:#ff5e6740;background:#ff5e6710} .status-paid{color:var(--violet);border-color:#7d5aff40;background:#7d5aff10} .action-btns{display:flex;gap:8px;flex-wrap:wrap} .btn-action{font-family:var(--font-label);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid;text-decoration:none;transition:background .2s} .btn-action.approve{color:var(--forest);border-color:#5fe1d640;background:#5fe1d610} .btn-action.approve:hover{background:#5fe1d620} .btn-action.pending{color:var(--ochre);border-color:#f3c17940;background:#f3c17910} .btn-action.pending:hover{background:#f3c17920} .btn-action.reject{color:var(--vermillion);border-color:#ff5e6740;background:#ff5e6710} .btn-action.reject:hover{background:#ff5e6720} .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:640px){.frow{grid-template-columns:1fr}} /* Prop firm capsules on hero */ .prop-firms{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:34px;position:relative;z-index:2} .prop-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} .prop-capsule{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:999px;font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink);background:transparent;white-space:nowrap;overflow:hidden;transition:transform .3s var(--ease-spring),box-shadow .3s,color .3s} .prop-capsule::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(125,90,255,.55),rgba(255,255,255,.18),rgba(125,90,255,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0;opacity:.75;transition:opacity .3s} .prop-capsule::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(120% 120% at 50% 0%,rgba(125,90,255,.16),rgba(231,206,148,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));z-index:-1;opacity:0;transition:opacity .35s ease} .prop-row:first-child .prop-capsule{padding:18px 40px;font-size:14px} .prop-row:nth-child(2) .prop-capsule:first-child{padding-left:18px;padding-right:18px} .prop-capsule:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(125,90,255,.25),0 0 22px -4px rgba(125,90,255,.18);color:#fff} .prop-capsule:hover::before{opacity:1} .prop-capsule:hover::after{opacity:1} /* Products page */ .slide-products{padding-top:120px;text-align:center} .products-foot{margin-top:42px;text-align:center} .products-foot p{font-family:var(--font-ui);font-size:14px;color:var(--ink-muted)} .products-foot a{color:var(--violet);text-decoration:none;font-weight:700} .products-foot a:hover{text-decoration:underline} .back-home{margin-top:6px} @media(max-width:640px){ .prop-capsule{padding:13px 22px;font-size:11px} } /* User account dropdown menu */ .user-menu{position:relative} .user-trigger{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:var(--ink);background:#ffffff0a;border:1px solid var(--hairline-strong);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;transition:background .2s,border-color .2s} .user-trigger:hover{background:#ffffff14;border-color:#ffffff2e} .user-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-label);font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8a6bff,#6a47e6)} .user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-trigger svg{color:var(--ink-muted);transition:transform .25s var(--ease-spring)} .user-menu.open .user-trigger svg{transform:rotate(180deg)} .user-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:230px;background:var(--paper-raised);border:1px solid var(--hairline-strong);border-radius:16px;padding:8px;box-shadow:0 24px 50px -18px #000c;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s,transform .22s var(--ease-spring);z-index:60} .user-menu.open .user-dropdown{opacity:1;transform:translateY(0);pointer-events:auto} .user-dd-head{padding:12px 12px 10px;border-bottom:1px solid var(--hairline);margin-bottom:6px} .user-dd-name{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .user-dd-email{font-family:var(--font-ui);font-size:11px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-dropdown a{display:block;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:10px 12px;border-radius:10px;transition:background .18s,color .18s} .user-dropdown a:hover{background:#ffffff0c;color:var(--ink)} .user-dd-logout{color:var(--vermillion) !important;border-top:1px solid var(--hairline);margin-top:6px;padding-top:12px !important} @media(max-width:640px){ .user-name{display:none} .nav-actions .user-menu{display:block} } /* User dashboard area */ .slide-dashboard{min-height:calc(100vh - 80px);padding:40px 0;display:block} .dash-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px} .dash-tab{font-family:var(--font-label);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:11px 18px;border-radius:999px;border:1px solid var(--hairline-strong);background:#ffffff06;transition:.2s} .dash-tab:hover{color:var(--ink);border-color:#ffffff2e} .dash-tab.on{background:linear-gradient(135deg,#8a6bff,#6a47e6);color:#fff;border-color:transparent} .dash-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:760px){.dash-info-grid{grid-template-columns:1fr}} .dash-info-card{display:flex;flex-direction:column;align-items:flex-start} .info-rows{width:100%;display:flex;flex-direction:column;gap:2px;margin-top:8px} .info-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--hairline)} .info-row:last-child{border-bottom:none} .info-row span{font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .info-row strong{font-family:var(--font-ui);font-size:14px;color:var(--ink);font-weight:600;text-align:right} .dash-status-big{font-family:var(--font-display);font-size:32px;font-weight:800;font-style:italic;margin:6px 0 12px;line-height:1.05} /* Membership board */ .member-board{display:flex;flex-direction:column} .member-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .member-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:6px 12px;border-radius:999px;border:1px solid} .member-pill.ok{color:var(--forest);border-color:rgba(95,225,214,.4);background:rgba(95,225,214,.08)} .member-pill.wait{color:var(--ochre);border-color:rgba(243,193,121,.4);background:rgba(243,193,121,.08)} .member-pill.off{color:var(--ink-muted);border-color:var(--hairline-strong)} .member-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor} .member-hero{display:flex;align-items:center;gap:16px;padding:18px;border-radius:16px;background:linear-gradient(135deg,rgba(231,206,148,.08),transparent);border:1px solid var(--hairline);margin-bottom:16px} .member-key{width:52px;height:52px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(231,206,148,.12);border:1px solid rgba(231,206,148,.3)} .member-key svg{width:26px;height:26px} .member-plan-name{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);line-height:1.15} .member-plan-name em{font-style:italic;color:var(--gold)} .member-plan-sub{font-family:var(--font-ui);font-size:12.5px;color:var(--ink-muted);margin-top:4px;line-height:1.45} .member-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px} .member-grid > div{padding:13px 15px;border:1px solid var(--hairline);border-radius:12px;background:#ffffff04} .member-grid span{display:block;font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:5px} .member-grid strong{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .is-active .member-statx{color:var(--forest)} .is-pending .member-statx{color:var(--ochre)} .member-cta{width:100%;margin-top:auto} .locked-card{opacity:.72} .locked-card .lock-overlay{position:absolute;top:24px;right:24px;width:26px;height:26px;color:var(--ink-faint);z-index:5} /* Admin: revenue bar, quick links, coupons */ .revenue-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 32px;background:linear-gradient(135deg,#1a1622,#241d14);border:1px solid var(--hairline-strong)} .revenue-label{font-family:var(--font-label);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:800} .revenue-amount{font-size:42px;color:var(--gold);line-height:1} .quick-links{display:flex;gap:10px;flex-wrap:wrap} .check-row{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;margin-bottom:6px} .check-row input{width:auto;margin:0} .admin-quick{margin-top:8px} input[type=date]{width:100%;background:#ffffff06;border:1px solid var(--hairline-strong);border-radius:12px;padding:12px 14px;color:var(--ink);font-family:var(--font-sans);font-size:14px;font-weight:500;outline:none;color-scheme:dark} input[type=date]:focus{border-color:var(--violet);background:#7d5aff0a;box-shadow:0 0 0 3px #7d5aff1a} input[type=number]{width:100%;background:#ffffff06;border:1px solid var(--hairline-strong);border-radius:12px;padding:12px 14px;color:var(--ink);font-family:var(--font-sans);font-size:14px;font-weight:500;outline:none} input[type=number]:focus{border-color:var(--violet);background:#7d5aff0a;box-shadow:0 0 0 3px #7d5aff1a} textarea{width:100%;background:#ffffff06;border:1px solid var(--hairline-strong);border-radius:12px;padding:12px 14px;color:var(--ink);font-family:var(--font-sans);font-size:14px;font-weight:500;outline:none} textarea:focus{border-color:var(--violet);background:#7d5aff0a;box-shadow:0 0 0 3px #7d5aff1a} /* ===== Why this bundle exists ===== */ .slide-why-bundle{min-height:auto;padding:70px 24px 64px;align-items:center;text-align:center} .why-bundle{max-width:720px;margin:0 auto} .why-bundle-title{font-family:var(--font-display);font-size:clamp(28px,3.6vw,44px);font-weight:700;color:var(--ink);line-height:1.12;letter-spacing:-.01em;margin-bottom:20px} .why-bundle-title em{font-style:italic;color:var(--violet)} .why-bundle-text{font-family:var(--font-ui);font-size:16px;color:var(--ink-soft);line-height:1.75;margin:0 auto;max-width:560px} /* ===== What's included — combined into bundle ===== */ .slide-combined{min-height:auto;padding:26px 24px 30px;align-items:center;text-align:center} .combined{max-width:1080px;width:100%;margin:0 auto} .combined-title{font-family:var(--font-display);font-size:clamp(24px,2.8vw,34px);font-weight:700;color:var(--ink);line-height:1.1;margin-bottom:28px} .combined-title em{font-style:italic;color:var(--gold)} .combined-row{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap} .combined-chip,.combined-bundle{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 18px;min-width:158px;border:1px solid var(--hairline);border-radius:16px;background:linear-gradient(165deg,#ffffff08,#ffffff02);transition:transform .35s var(--ease-spring),border-color .35s,box-shadow .35s} .combined-chip:hover{transform:translateY(-3px);border-color:rgba(125,90,255,.4);box-shadow:0 18px 40px -22px rgba(125,90,255,.4)} .combined-chip svg,.combined-bundle svg{width:26px;height:26px;color:var(--violet)} .combined-chip strong,.combined-bundle strong{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .combined-chip span,.combined-bundle span{font-family:var(--font-ui);font-size:11.5px;color:var(--ink-muted)} .combined-bundle{border-color:rgba(231,206,148,.5);background:linear-gradient(165deg,rgba(231,206,148,.12),rgba(231,206,148,.03));box-shadow:0 0 40px -16px rgba(231,206,148,.4)} .combined-bundle svg{color:var(--gold)} .combined-bundle strong{color:var(--gold)} .combined-op{display:flex;align-items:center;font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink-faint)} .combined-eq{color:var(--gold)} @media(max-width:760px){ .combined-row{flex-direction:column;align-items:stretch;gap:10px} .combined-chip,.combined-bundle{flex-direction:row;justify-content:center;min-width:0;gap:12px;padding:14px 18px} .combined-op{justify-content:center;font-size:20px} } /* ===== Trust statistics bar ===== */ .trust-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:30px} .tstat{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:150px;padding:18px 22px;border:1px solid var(--hairline-strong);border-radius:16px;background:rgba(13,11,19,.5);backdrop-filter:blur(12px);transition:transform .35s var(--ease-spring),border-color .35s} .tstat:hover{transform:translateY(-3px);border-color:rgba(125,90,255,.4)} .tstat strong{font-family:'Poppins','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:28px;font-weight:800;font-style:normal;letter-spacing:-.01em;color:var(--ink);line-height:1} .tstat span{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-muted)} @media(max-width:560px){.tstat{min-width:130px;flex:1;padding:14px}.tstat strong{font-size:22px}} /* ===== Certificate benefit checklist ===== */ .lic-benefits{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0} .lic-benefits li{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-soft);padding:8px 14px;border:1px solid rgba(95,225,214,.28);border-radius:999px;background:rgba(95,225,214,.07)} .lic-benefits li::before{content:"✓";color:var(--forest);font-weight:800} @media(max-width:560px){.lic-benefits li{flex:1 1 calc(50% - 10px);justify-content:center}} /* ===== The Trading Process timeline ===== */ .slide-process{min-height:auto;padding:60px 24px;align-items:center} .process{max-width:720px;width:100%;margin:0 auto} .process-head{text-align:center;margin-bottom:40px} .process-head .eyebrow{justify-content:center} .process-head .eyebrow::after{display:none} .process-timeline{position:relative;display:flex;flex-direction:column;gap:18px;padding-left:8px} .process-timeline::before{content:"";position:absolute;left:30px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--violet),var(--forest),var(--gold));opacity:.4} .pstep{display:flex;align-items:center;gap:22px;position:relative} .pstep-num{position:relative;z-index:2;flex-shrink:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-style:normal;font-size:19px;font-weight:600;letter-spacing:-.01em;color:#fff;background:linear-gradient(135deg,#8a6bff,#6a47e6);box-shadow:0 8px 22px -8px rgba(125,90,255,.6),0 0 0 6px var(--paper);transition:transform .35s var(--ease-spring)} .pstep:hover .pstep-num{transform:scale(1.08)} .pstep-body{flex:1;padding:16px 22px;border:1px solid var(--hairline);border-radius:14px;background:linear-gradient(165deg,#ffffff07,#ffffff02);transition:transform .35s var(--ease-spring),border-color .35s,box-shadow .35s} .pstep:hover .pstep-body{transform:translateX(4px);border-color:rgba(125,90,255,.35);box-shadow:0 16px 36px -22px rgba(125,90,255,.4)} .pstep-body h3{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px} .pstep-body p{font-family:var(--font-ui);font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin:0} @media(max-width:560px){ .process-timeline::before{left:24px} .pstep{gap:16px} .pstep-num{width:40px;height:40px;font-size:17px} } /* ===== Homepage FAQ ===== */ .slide-faq-home{min-height:auto;padding:50px 24px 60px;align-items:center} .faq-home{max-width:760px;width:100%;margin:0 auto} /* ===== Final CTA ===== */ .slide-final{text-align:center;align-items:center;min-height:84vh;padding:60px 24px} .final-content{max-width:680px;margin:0 auto} .final-title{font-family:var(--font-display);font-size:clamp(32px,4.4vw,52px);font-weight:700;color:var(--ink);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px} .final-title em{font-style:italic;color:var(--violet)} .final-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:26px auto 30px;padding:0;max-width:560px} .final-points li{display:flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink);padding:11px 18px;border:1px solid var(--hairline-strong);border-radius:999px;background:#ffffff06} .final-points svg{width:15px;height:15px;color:var(--forest);flex-shrink:0} .final-cta{max-width:340px;margin:0 auto} .final-note{font-family:var(--font-ui);font-size:13px;color:var(--ink-muted);margin-top:16px} .final-note b{color:var(--gold);font-weight:800} /* ===== Promo bar ===== */ .promo-bar{position:relative;z-index:41;display:flex;align-items:center;justify-content:center;gap:14px;padding:9px 44px;text-align:center;font-family:var(--font-ui);font-size:13px;color:#1a1407;background:linear-gradient(135deg,#f3c179,#e7ce94 55%,#caa05a);box-shadow:0 2px 12px -4px rgba(202,160,90,.5)} .promo-bar strong{font-weight:800} .promo-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.12);color:#1a1407;width:24px;height:24px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;transition:background .2s} .promo-close:hover{background:rgba(0,0,0,.22)} @media(max-width:560px){.promo-bar{font-size:11px;padding:8px 38px}} .nav-affiliate{display:inline-flex} @media(max-width:640px){.nav-affiliate{display:none}} /* ===== Your Ultimate Power — products header ===== */ .power-head{text-align:center;max-width:680px;margin:0 auto 14px} .power-head .eyebrow{justify-content:center} .power-head .eyebrow::after{display:none} .power-title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);font-weight:700;color:var(--ink);line-height:1.08;letter-spacing:-.01em;margin-bottom:12px} .power-title em{font-style:italic;color:var(--violet)} .power-sub{font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0 auto;max-width:560px} /* ===== User dashboard: pending banner + affiliate ===== */ .dash-active{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;margin-bottom:22px;background:linear-gradient(135deg,rgba(95,225,214,.12),rgba(95,225,214,.03));border:1px solid rgba(95,225,214,.4)} .dash-active svg{color:var(--forest);flex-shrink:0} .dash-active strong{display:block;font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--ink)} .dash-active span{font-family:var(--font-ui);font-size:13px;color:var(--ink-soft);line-height:1.5} .dash-pending{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;margin-bottom:22px;background:linear-gradient(135deg,rgba(243,193,121,.12),rgba(243,193,121,.03));border:1px solid rgba(243,193,121,.4)} .dash-pending svg{color:var(--ochre);flex-shrink:0} .dash-pending strong{display:block;font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--ink)} .dash-pending span{font-family:var(--font-ui);font-size:13px;color:var(--ink-soft);line-height:1.5} .aff-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} @media(max-width:980px){.aff-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.aff-stats{grid-template-columns:1fr 1fr}} .aff-stat{padding:22px;text-align:center} .aff-stat-label{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:10px} .aff-stat-val{font-family:'Poppins','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:32px;font-weight:800;font-style:normal;color:#ece9f3;line-height:1;letter-spacing:-.01em} .aff-stat-val.gold{color:#d8c089} .aff-code-row{display:flex;align-items:center;gap:12px;margin-top:6px} .aff-code{font-family:var(--font-data);font-size:22px;font-weight:800;letter-spacing:.08em;color:var(--gold);background:rgba(231,206,148,.1);border:1px dashed rgba(231,206,148,.5);border-radius:10px;padding:10px 16px} .aff-link-label{font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin:18px 0 8px} .aff-link-row{display:flex;gap:10px} .aff-link-row input{flex:1;background:#ffffff06;border:1px solid var(--hairline-strong);border-radius:12px;padding:11px 14px;color:var(--ink-soft);font-family:var(--font-data);font-size:13px;outline:none} .aff-link-row input:focus{border-color:var(--violet)} .aff-link-row .btn-p{white-space:nowrap;padding:11px 18px} .aff-min-note{font-family:var(--font-ui);font-size:12px;color:var(--ink-muted);margin:10px 0} .aff-min-note strong{color:var(--forest)} /* ===== Admin payment review ===== */ .admin-badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--vermillion);color:#fff;font-family:var(--font-data);font-size:10px;font-weight:800;text-align:center;margin-left:4px} .pay-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:980px){.pay-review-grid{grid-template-columns:1fr}} .pay-review{padding:22px} .pay-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px} .pay-review-name{font-family:var(--font-ui);font-size:16px;font-weight:700;color:var(--ink)} .pay-review-meta{font-family:var(--font-ui);font-size:12px;color:var(--ink-muted);margin-top:2px} .pay-review-body{display:flex;gap:16px} .pay-shot{position:relative;flex-shrink:0;width:120px;height:150px;border-radius:12px;overflow:hidden;border:1px solid var(--hairline-strong);display:block} .pay-shot img{width:100%;height:100%;object-fit:cover} .pay-shot span{position:absolute;inset:auto 0 0 0;padding:5px;text-align:center;font-family:var(--font-label);font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#fff;background:rgba(0,0,0,.6)} .pay-shot-empty{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:var(--font-ui);font-size:12px;text-align:center;background:#ffffff05} .pay-review-info{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;min-width:0} .pay-review-info span{font-family:var(--font-label);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;display:block} .pay-review-info strong{font-family:var(--font-ui);font-size:12.5px;color:var(--ink);font-weight:600;word-break:break-word} .pay-review-notes{margin-top:14px;padding:12px 14px;border-radius:10px;background:#ffffff05;border:1px solid var(--hairline);font-family:var(--font-ui);font-size:13px;color:var(--ink-soft);font-style:italic} /* ===== Product presentation — 3-step journey ===== */ .slide-journey{min-height:auto;padding:28px 24px 70px;align-items:center} .journey{max-width:1080px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px} .journey-intro{text-align:center;max-width:680px;margin:0 auto 14px} .journey-intro .eyebrow{justify-content:center} .journey-intro .eyebrow::after{display:none} .journey-title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);font-weight:700;color:var(--ink);line-height:1.08;letter-spacing:-.01em;margin-bottom:12px} .journey-title em{font-style:italic;color:var(--violet)} .journey-sub{font-family:var(--font-ui);font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0 auto 22px} .journey-flow{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 18px;border:1px solid var(--hairline-strong);border-radius:999px;background:#ffffff05} .journey-flow span{font-family:var(--font-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)} .journey-flow svg{color:var(--violet);flex-shrink:0} .pcard{position:relative;--pc:#7d5aff;--pc-soft:rgba(125,90,255,.12);display:grid;grid-template-columns:236px 1fr;gap:0;border:1px solid var(--hairline);border-radius:22px;overflow:hidden;background:linear-gradient(165deg,#ffffff09,#ffffff02);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15);transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s} .pcard::after{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none;z-index:4;transition:opacity .3s} .pcard:hover::after{opacity:1;animation:glassShine 1.1s ease-in-out} .pcard-1{--pc:#7d5aff;--pc-soft:rgba(125,90,255,.13)} .pcard-2{--pc:#5fe1d6;--pc-soft:rgba(95,225,214,.13)} .pcard-3{--pc:#e7ce94;--pc-soft:rgba(231,206,148,.14)} .pcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pc) 45%,transparent);box-shadow:0 28px 60px -28px rgba(0,0,0,.6),0 0 46px -16px var(--pc-soft)} .pcard-aside{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:30px 26px;background:linear-gradient(165deg,var(--pc-soft),transparent 70%);border-right:1px solid var(--hairline)} .pcard-aside::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--pc),transparent)} .pcard-step{font-family:var(--font-display);font-size:46px;font-weight:700;font-style:italic;line-height:.8;color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--pc) 70%,transparent);letter-spacing:-.02em} .pcard-ico{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:var(--pc);background:var(--pc-soft);border:1px solid color-mix(in srgb,var(--pc) 30%,transparent)} .pcard-ico svg{width:28px;height:28px} .pcard-bestfor{font-family:var(--font-ui);font-size:12px;color:var(--ink-soft);line-height:1.45;margin-top:auto;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--pc) 36%,transparent);border-radius:12px;background:var(--pc-soft)} .pcard-bestfor em{display:block;font-style:normal;font-family:var(--font-label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--pc);margin-bottom:3px} .pcard-body{padding:28px 30px} .pcard-eyebrow{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--pc);margin-bottom:10px} .pcard-name{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);font-weight:700;color:var(--ink);line-height:1.1;margin-bottom:8px} .pcard-desc{font-family:var(--font-ui);font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:20px;max-width:640px} .pcard-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:18px} .pcard-col h4{font-family:var(--font-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-muted);margin-bottom:12px} .pcard-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0} .pcard-list li{font-family:var(--font-ui);font-size:13.5px;color:var(--ink-soft);line-height:1.45;display:flex;align-items:flex-start;gap:9px} .pcard-list li::before{flex-shrink:0;margin-top:1px;font-weight:800} .pcard-list-check li::before{content:"✓";color:var(--pc)} .pcard-list-get li::before{content:"◆";font-size:9px;margin-top:3px;color:var(--pc);opacity:.75} .pcard-outcome{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:13px;background:var(--pc-soft);border:1px solid color-mix(in srgb,var(--pc) 24%,transparent);margin-bottom:18px} .pcard-outcome svg{color:var(--pc);flex-shrink:0} .pcard-outcome span{font-family:var(--font-ui);font-size:13.5px;color:var(--ink);line-height:1.45} .pcard-outcome em{font-style:normal;font-weight:800;color:var(--pc);letter-spacing:.02em} .pcard-more{font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink);background:transparent;border:1px solid var(--hairline-strong);border-radius:999px;padding:10px 18px;cursor:pointer;transition:border-color .25s,color .25s,background .25s,transform .25s var(--ease-spring)} .pcard-more:hover{border-color:var(--pc);color:var(--pc);background:var(--pc-soft);transform:translateY(-1px)} @media(max-width:860px){ .pcard{grid-template-columns:1fr} .pcard-aside{flex-direction:row;align-items:center;gap:16px;padding:20px 22px;border-right:0;border-bottom:1px solid var(--hairline)} .pcard-aside::before{top:0;bottom:auto;left:0;right:0;width:auto;height:3px;background:linear-gradient(90deg,var(--pc),transparent)} .pcard-step{font-size:38px} .pcard-bestfor{margin-top:0;margin-left:auto;max-width:200px} } @media(max-width:620px){ .pcard-cols{grid-template-columns:1fr;gap:16px} .pcard-aside{flex-wrap:wrap} .pcard-bestfor{margin-left:0;max-width:100%;width:100%} .pcard-body{padding:22px} } /* Lean admin dashboard grid (3 columns) */ .stats-3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.stats-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.stats-3{grid-template-columns:1fr}} /* ===== Pricing card (compact premium) ===== */ .slide-bundle{justify-content:center;align-items:center;padding:44px 24px 80px} .pboard{position:relative;width:100%;max-width:560px;margin:0 auto;transition:transform .45s var(--ease-spring)} /* soft breathing glow halo behind the card */ .pboard::before{content:"";position:absolute;inset:-7% -5%;z-index:0;pointer-events:none;border-radius:34px; background:radial-gradient(58% 52% at 50% 50%,rgba(231,206,148,.16),transparent 72%);filter:blur(22px); animation:pbBreath 6s ease-in-out infinite} .pboard>*{position:relative;z-index:1} @keyframes pbBreath{0%,100%{opacity:.4;transform:scale(.985)}50%{opacity:.72;transform:scale(1.015)}} .pboard:hover{transform:translateY(-6px)} .pboard-card{position:relative;overflow:hidden;padding:42px 42px 32px;border-radius:24px;text-align:center;--spot-x:50%;--spot-y:0%; background:radial-gradient(340px circle at var(--spot-x) var(--spot-y),rgba(231,206,148,.13),transparent 55%),linear-gradient(168deg,rgba(28,23,14,.90),rgba(12,10,7,.96)); border:1px solid rgba(231,206,148,.32); box-shadow:0 40px 90px -42px rgba(0,0,0,.9),inset 0 1px rgba(231,206,148,.12); backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2); animation:pboardFloat 6.5s ease-in-out infinite; transition:box-shadow .5s,border-color .5s,transform .5s var(--ease-spring)} .pboard-card::before{content:"";position:absolute;top:-45%;left:50%;transform:translateX(-50%);width:130%;height:80%;background:radial-gradient(ellipse at 50% 0,rgba(231,206,148,.12),transparent 62%);pointer-events:none} /* cursor-following border illumination */ /* animated glowing gradient border travelling around the card edge */ .pboard-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:5;transition:filter .4s ease; background:conic-gradient(from var(--pb-angle),transparent 0deg,rgba(231,206,148,.95) 58deg,rgba(255,244,216,.78) 96deg,transparent 178deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; filter:drop-shadow(0 0 5px rgba(231,206,148,.5));animation:pbRotate 5s linear infinite} .pboard:hover .pboard-card::after{filter:drop-shadow(0 0 9px rgba(231,206,148,.85))} .pboard:hover .pboard-card{border-color:rgba(231,206,148,.6);box-shadow:0 50px 110px -42px rgba(0,0,0,.92),0 0 64px -20px rgba(231,206,148,.4),inset 0 1px rgba(231,206,148,.18)} @property --pb-angle{syntax:'';initial-value:0deg;inherits:false} @keyframes pbRotate{to{--pb-angle:360deg}} @keyframes pboardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .pboard-card>*{position:relative;z-index:1} .pboard-badge{display:inline-flex;align-items:center;gap:7px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold);padding:7px 16px;border:1px solid rgba(231,206,148,.4);border-radius:999px;background:rgba(231,206,148,.06);margin-bottom:20px} .pboard-title{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:clamp(25px,3vw,33px);font-weight:700;letter-spacing:-.032em;color:#fff;line-height:1.08;margin-bottom:9px} .pboard-title em{font-style:normal;font-weight:700;background:linear-gradient(120deg,#f3e3bd,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent} .pboard-sub{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:14.5px;font-weight:400;letter-spacing:-.01em;color:var(--ink-muted);line-height:1.55;max-width:400px;margin:0 auto 26px} .pboard-price{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:26px} .pboard-old{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink-faint);text-decoration:line-through} .pboard-now{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:56px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.035em} .pboard-cur{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:22px;font-weight:600;color:var(--gold);vertical-align:super;margin-right:1px} .pboard-off{align-self:center;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f3c179,#e7ce94);padding:6px 13px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(231,206,148,.5)} .pboard-values{list-style:none;display:flex;flex-direction:column;gap:13px;max-width:330px;margin:0 auto 28px;padding:0;text-align:left} .pboard-values li{display:flex;align-items:center;gap:13px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:15px;font-weight:500;letter-spacing:-.012em;color:#f0ecdf} .pboard-values li::before{content:"";display:inline-flex;width:22px;height:22px;border-radius:50%;flex-shrink:0;border:1px solid rgba(231,206,148,.42);box-shadow:0 0 14px -3px rgba(231,206,148,.5); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7ce94' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat,radial-gradient(circle at 50% 35%,rgba(231,206,148,.26),rgba(231,206,148,.08))} .pb-soon{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);border:1px solid var(--hairline);border-radius:999px;padding:2px 8px;margin-left:4px} .pboard-cta{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;max-width:400px;margin:0 auto;padding:20px;border-radius:14px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f6e3b8,#e7ce94 45%,#caa05a);border:1px solid rgba(255,255,255,.25);text-decoration:none;position:relative;overflow:hidden;box-shadow:0 20px 46px -16px rgba(202,160,90,.7),inset 0 1px rgba(255,255,255,.5);transition:transform .3s var(--ease-spring),box-shadow .3s,filter .3s} .pboard-cta::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skew(-20deg)} .pboard-cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 26px 58px -16px rgba(202,160,90,.85),inset 0 1px rgba(255,255,255,.6)} .pboard-cta:hover::after{animation:licshine 1s ease-out} .pboard-cta svg{transition:transform .3s var(--ease-spring)} .pboard-cta:hover svg{transform:translateX(4px)} /* Liquid/glass flowing light + soft golden glow */ .pboard-cta>span,.pboard-cta>svg{position:relative;z-index:2} .pboard-cta::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit; background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.45) 50%,transparent 82%);background-size:220% 100%;background-position:150% 0;opacity:0;transition:opacity .4s ease} .pboard-cta:hover::before{opacity:.8;animation:pbFlow 2.2s linear infinite} .pboard-cta:hover{box-shadow:0 26px 58px -16px rgba(202,160,90,.9),0 0 32px -4px rgba(231,206,148,.62),inset 0 1px rgba(255,255,255,.6)} .pboard-cta:active{transform:translateY(0) scale(.99);box-shadow:0 0 0 4px rgba(231,206,148,.28),0 14px 36px -14px rgba(202,160,90,.95),inset 0 1px rgba(255,255,255,.55)} @keyframes pbFlow{from{background-position:150% 0}to{background-position:-150% 0}} @media(prefers-reduced-motion:reduce){.pboard-cta::before{animation:none}} .pboard-coupon{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;font-size:12.5px;color:var(--ink-muted);margin-top:16px} .pboard-coupon b{color:var(--gold);font-weight:800;letter-spacing:.04em} @media(max-width:560px){ .pboard-card{padding:32px 22px 26px} .pboard-now{font-size:46px} .pboard-values{max-width:100%} .pboard-cta{max-width:100%} } @media(prefers-reduced-motion:reduce){ .pboard-card{animation:none} .pboard::before,.pboard-card::after{animation:none} .pboard,.pboard-card,.pboard-cta{transition:none} } /* ===== Trading License — certificate pricing board (legacy) ===== */ .slide-bundle.legacy-license{justify-content:center} .license{ position:relative;width:100%;max-width:1040px;margin:0 auto;padding:38px 44px 34px; border-radius:6px;color:var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18'%3E%3Cpath d='M0 9 Q11 2 22 9 T44 9' fill='none' stroke='%23e7ce94' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(120% 80% at 50% 0%, rgba(231,206,148,.06), transparent 60%), linear-gradient(168deg,#14110b 0%,#0c0a07 55%,#100d08 100%); border:1px solid rgba(231,206,148,.42); box-shadow:0 50px 110px -50px rgba(0,0,0,.9),0 0 70px -36px rgba(231,206,148,.22),inset 0 1px rgba(231,206,148,.10); transition:box-shadow .5s var(--ease-spring),transform .5s var(--ease-spring); } .license::before{content:"";position:absolute;inset:9px;border:1px solid rgba(231,206,148,.20);border-radius:3px;pointer-events:none} .license:hover{transform:translateY(-3px);box-shadow:0 60px 120px -50px rgba(0,0,0,.92),0 0 90px -30px rgba(231,206,148,.34),inset 0 1px rgba(231,206,148,.16)} .lic-corner{position:absolute;width:24px;height:24px;border:1.5px solid var(--gold);z-index:2;opacity:.85} .lic-corner-tl{top:16px;left:16px;border-right:0;border-bottom:0} .lic-corner-tr{top:16px;right:16px;border-left:0;border-bottom:0} .lic-corner-bl{bottom:16px;left:16px;border-right:0;border-top:0} .lic-corner-br{bottom:16px;right:16px;border-left:0;border-top:0} .lic-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid rgba(231,206,148,.22)} .lic-register{font-family:var(--font-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold)} .lic-no{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.16em;color:var(--ochre);opacity:.85} .lic-main{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;padding:34px 0 28px} /* Wax-seal stamp */ .lic-stamp{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 26px;border:1px solid rgba(231,206,148,.28);border-radius:4px;background:linear-gradient(160deg,rgba(231,206,148,.05),transparent)} .stamp-label{font-family:var(--font-label);font-size:10px;letter-spacing:.34em;text-transform:uppercase;font-weight:800;color:var(--gold);padding:5px 12px;border:1px solid rgba(231,206,148,.4);border-radius:2px} .seal{position:relative;width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 32%,#f8e9c2 0%,#e7ce94 36%,#caa05a 66%,#9a7434 100%);box-shadow:0 10px 26px -10px rgba(154,116,52,.7),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -6px 14px rgba(120,86,30,.55)} .seal-key{width:48px;height:48px;position:relative;z-index:2;opacity:.92} .seal-ring{position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(231,206,148,.55)} .seal-ticks{position:absolute;inset:-11px;border-radius:50%;background:repeating-conic-gradient(rgba(231,206,148,.6) 0deg 1deg,transparent 1deg 9deg);-webkit-mask:radial-gradient(closest-side,transparent 80%,#000 82%,#000 93%,transparent 95%);mask:radial-gradient(closest-side,transparent 80%,#000 82%,#000 93%,transparent 95%);animation:sealspin 48s linear infinite} @keyframes sealspin{to{transform:rotate(360deg)}} .stamp-foot{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center} .stamp-foot span{font-family:var(--font-label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-muted)} .stamp-no{font-family:ui-monospace,Menlo,monospace !important;letter-spacing:.12em !important;color:var(--ochre) !important;text-transform:none !important} /* Title + price */ .lic-eyebrow{font-family:var(--font-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--gold);margin-bottom:14px} .lic-title{font-family:var(--font-display);font-style:italic;font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.04;letter-spacing:.005em;background:linear-gradient(120deg,#f3e3bd 0%,#e7ce94 42%,#caa05a 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .lic-title em{font-style:italic;font-weight:700} .lic-desc{font-family:var(--font-ui);font-size:15px;line-height:1.7;color:var(--ink-soft);max-width:520px;margin:14px 0 26px} .lic-price{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap} .lic-price-main{display:flex;align-items:flex-end;gap:14px} .lic-strike{font-family:var(--font-data);font-size:20px;color:var(--ink-faint);text-decoration:line-through;margin-bottom:10px} .lic-now{font-family:var(--font-display);font-size:60px;font-weight:700;line-height:.9;color:var(--ink);letter-spacing:-.02em} .lic-cur{font-family:var(--font-data);font-size:24px;color:var(--gold);vertical-align:super;margin-right:2px} .lic-price-side{display:flex;flex-direction:column;gap:7px;margin-bottom:6px} .lic-save{font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f3c179,#e7ce94);padding:5px 12px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(231,206,148,.5);text-align:center} .lic-once{font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .lic-deal{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:10px 16px;border:1px dashed rgba(231,206,148,.45);border-radius:999px;background:linear-gradient(135deg,rgba(231,206,148,.10),rgba(231,206,148,.03))} .lic-deal-save{font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f3c179,#e7ce94);padding:5px 11px;border-radius:999px;flex-shrink:0} .lic-deal-txt{font-family:var(--font-ui);font-size:13px;color:var(--ink-soft)} .lic-deal-txt b{color:var(--gold);font-weight:800;letter-spacing:.04em} .lic-deal-price{font-family:var(--font-display);font-style:italic;font-weight:700;color:var(--gold);font-size:16px} @media(max-width:860px){.lic-deal{margin-left:auto;margin-right:auto}} @media(max-width:560px){.lic-deal{flex-direction:column;gap:8px;border-radius:14px;text-align:center}} /* Divider label */ .lic-divider{display:flex;align-items:center;gap:18px;margin:6px 0 22px} .lic-divider::before,.lic-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(231,206,148,.32),transparent)} .lic-divider span{font-family:var(--font-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold)} /* Included items */ .lic-items{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px} .lic-item{display:flex;align-items:center;gap:15px;width:100%;text-align:left;padding:16px 18px;border:1px solid rgba(231,206,148,.16);border-radius:5px;background:rgba(231,206,148,.025);cursor:pointer;font-family:inherit;transition:border-color .3s,background .3s,transform .3s var(--ease-spring),box-shadow .3s} .lic-item:hover{border-color:rgba(231,206,148,.5);background:rgba(231,206,148,.06);transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(231,206,148,.4)} .lic-item-static{cursor:default} .lic-item-static:hover{transform:none;box-shadow:none;border-color:rgba(231,206,148,.16);background:rgba(231,206,148,.025)} .lic-item-ico{width:44px;height:44px;flex-shrink:0;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:radial-gradient(circle at 40% 35%,rgba(231,206,148,.18),rgba(231,206,148,.04));border:1px solid rgba(231,206,148,.22)} .lic-item-ico svg{width:21px;height:21px} .lic-item-gold .lic-item-ico{color:var(--ochre);border-color:rgba(243,193,121,.4)} .lic-item-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} .lic-item-txt strong{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .lic-item-txt span{font-family:var(--font-ui);font-size:12px;color:var(--ink-muted);line-height:1.4} .lic-item-view{font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gold);opacity:.7;flex-shrink:0;transition:opacity .3s,transform .3s var(--ease-spring)} .lic-item:hover .lic-item-view{opacity:1;transform:translateX(2px)} .lic-item-badge{color:var(--forest);opacity:.85} /* CTA */ .lic-cta{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:18px;border-radius:6px;font-family:var(--font-label);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f6e3b8,#e7ce94 45%,#caa05a);border:1px solid rgba(255,255,255,.25);cursor:pointer;text-decoration:none;position:relative;overflow:hidden;box-shadow:0 18px 44px -16px rgba(202,160,90,.65),inset 0 1px rgba(255,255,255,.5);transition:transform .3s var(--ease-spring),box-shadow .3s,filter .3s} .lic-cta::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skew(-20deg)} .lic-cta:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 24px 56px -16px rgba(202,160,90,.8),inset 0 1px rgba(255,255,255,.6)} .lic-cta:hover::after{animation:licshine 1s ease-out} @keyframes licshine{to{transform:translateX(320%) skew(-20deg)}} .lic-cta svg{transition:transform .3s var(--ease-spring)} .lic-cta:hover svg{transform:translateX(4px)} /* Register meta row */ .lic-meta{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid rgba(231,206,148,.22)} .lic-meta-col{display:flex;flex-direction:column;gap:5px;padding:22px 26px} .lic-meta-col+.lic-meta-col{border-left:1px solid rgba(231,206,148,.16)} .lic-meta-label{font-family:var(--font-label);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);opacity:.85} .lic-meta-val{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--ink)} .lic-meta-sub{font-family:var(--font-ui);font-size:11px;color:var(--ink-muted);line-height:1.4} @media(max-width:860px){ .license{padding:34px 26px 26px} .lic-main{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center} .lic-body{display:flex;flex-direction:column;align-items:center} .lic-desc{margin-left:auto;margin-right:auto} .lic-price{justify-content:center} .lic-items{grid-template-columns:1fr} .lic-item{text-align:left} .lic-meta{grid-template-columns:1fr} .lic-meta-col{align-items:center;text-align:center;padding:18px 20px} .lic-meta-col+.lic-meta-col{border-left:0;border-top:1px solid rgba(231,206,148,.16)} } @media(max-width:560px){ .license{padding:30px 18px 22px} .lic-now{font-size:48px} .lic-corner{width:18px;height:18px} .lic-register{font-size:10px;letter-spacing:.16em} } @media(prefers-reduced-motion:reduce){ .seal-ticks{animation:none} .lic-cta:hover::after{animation:none} .license,.lic-item,.lic-cta{transition:none} } /* ===================== ADMIN LIGHT THEME (Creators Club) ===================== */ .admin-light{ --bg:#f4f3f0;--panel:#fff;--line:#e9e7e2;--line-2:#f1efea; --tx:#1b1a18;--tx-soft:#5c5853;--tx-faint:#9a958d;--accent-soft:#f3f1ec; background:var(--bg);color:var(--tx); font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;overflow-x:hidden; } .admin-light .reveal{opacity:1 !important;transform:none !important;filter:none !important} .admin-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh} .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 18px;background:#fafaf8;border-right:1px solid var(--line)} .side-brand{display:flex;align-items:center;gap:11px;padding:6px 10px 16px} .side-logo{width:38px;height:38px;border-radius:11px;background:var(--tx);display:flex;align-items:center;justify-content:center} .side-logo img{width:22px;height:22px;filter:invert(1)} .side-brand b{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--tx)} .side-nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto} .side-group{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--tx-faint);padding:16px 12px 8px} .side-link{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;text-decoration:none;color:var(--tx-soft);font-size:14px;font-weight:600;transition:background .18s,color .18s;border:1px solid transparent} .side-link svg{width:19px;height:19px;flex-shrink:0;color:var(--tx-faint);transition:color .18s} .side-link:hover{background:#f0eee9;color:var(--tx)} .side-link:hover svg{color:var(--tx-soft)} .side-link.on{background:#fff;color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.04),0 5px 16px -8px rgba(0,0,0,.16);border-color:var(--line)} .side-link.on svg{color:var(--tx)} .side-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--tx);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;font-style:normal} .side-foot{display:flex;flex-direction:column;gap:12px;padding-top:12px} .side-site{font-size:12px;font-weight:700;color:var(--tx-soft);text-decoration:none;padding:0 12px} .side-site:hover{color:var(--tx)} .side-profile{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff} .side-avatar{width:38px;height:38px;border-radius:50%;background:var(--tx);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px} .side-pinfo{flex:1;min-width:0} .side-pinfo b{display:block;font-size:13px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side-pinfo span{font-size:11px;color:var(--tx-faint)} .side-logout{color:var(--tx-faint);display:flex}.side-logout:hover{color:var(--tx)} .side-logout svg{width:18px;height:18px} .admin-light .admin-main{padding:26px 40px 60px;max-width:1300px;min-width:0} .admin-topbar{display:flex;justify-content:flex-end;min-height:6px;margin-bottom:6px} .reset-btn{font-family:inherit;font-size:12px;font-weight:700;color:#b4453c;background:#fff;border:1px solid #f0d4d1;border-radius:999px;padding:8px 16px;cursor:pointer;transition:.2s} .reset-btn:hover{background:#fdeceb;border-color:#e0a8a3} .admin-light .eyebrow{font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--tx-faint);margin-bottom:8px;display:block} .admin-light .eyebrow::after{display:none} .admin-light .stitle{font-family:inherit;font-size:40px;font-weight:800;letter-spacing:-.025em;color:var(--tx);line-height:1.05;margin-bottom:8px} .admin-light .stitle em{font-style:normal;color:var(--tx-faint)} .admin-light .ssub{font-family:inherit;font-size:16px;color:var(--tx-soft);line-height:1.6;max-width:700px;margin-bottom:0;font-weight:400} .admin-light .admin-head{margin-bottom:28px} .admin-light .admin-toolbar{margin-bottom:20px} .admin-light .card,.admin-light .admin-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.03);backdrop-filter:none} .admin-light .card::before,.admin-light .card::after{display:none} .admin-light .card:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.03)} .admin-light .admin-card{padding:24px} .admin-light .stats-grid{gap:16px} .admin-light .stat-card{padding:24px;text-align:left;position:relative} .admin-light .stat-label{font-family:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint);font-weight:700;margin-bottom:14px} .admin-light .stat-value,.admin-light .stat-value.lovelo{font-family:'Plus Jakarta Sans',sans-serif !important;font-size:34px;font-weight:800;color:var(--tx) !important;letter-spacing:-.02em} .admin-light .stat-sub{font-family:inherit;font-size:13px;color:var(--tx-faint);margin-top:8px} .stat-ico{position:absolute;top:22px;right:22px;color:var(--tx-faint)} .stat-ico svg{width:20px;height:20px} .admin-light .data-table{color:var(--tx-soft)} .admin-light .data-table th{color:var(--tx-faint);border-bottom:1px solid var(--line)} .admin-light .data-table td{border-bottom:1px solid var(--line-2);color:var(--tx)} .admin-light .data-table code{background:var(--accent-soft);color:var(--tx-soft)} .admin-light .data-table .muted,.admin-light .muted{color:var(--tx-faint)} .admin-light .card-title{color:var(--tx)} .admin-light .card-title em{color:var(--tx-faint);font-style:normal} .admin-light .card-tag{color:var(--tx-soft);background:var(--accent-soft);border-color:var(--line)} .admin-light .card-text{color:var(--tx-soft)} .admin-light .btn-p{background:var(--tx);color:#fff;border:none;box-shadow:none} .admin-light .btn-p::after{display:none} .admin-light .btn-p:hover{background:#000;filter:none;transform:none} .admin-light .btn-g{background:#fff;color:var(--tx);border:1px solid var(--line)} .admin-light .btn-g:hover{background:var(--accent-soft);border-color:#dcd9d3;transform:none} .admin-light .status-pill{border:1px solid} .admin-light .status-pending{color:#9a6a1a;border-color:#f0dcb4;background:#fbf3e2} .admin-light .status-approved,.admin-light .status-approve,.admin-light .status-paid{color:#1f7a52;border-color:#bfe6d4;background:#e9f7f0} .admin-light .status-rejected,.admin-light .status-reject,.admin-light .status-refunded{color:#b4453c;border-color:#f0d4d1;background:#fdeceb} .admin-light .btn-action{border:1px solid} .admin-light .btn-action.approve{color:#1f7a52;border-color:#bfe6d4;background:#e9f7f0} .admin-light .btn-action.pending{color:#9a6a1a;border-color:#f0dcb4;background:#fbf3e2} .admin-light .btn-action.reject{color:#b4453c;border-color:#f0d4d1;background:#fdeceb} .admin-light input[type=text],.admin-light input[type=email],.admin-light input[type=password],.admin-light input[type=number],.admin-light input[type=date],.admin-light select,.admin-light textarea{background:#fff;border:1px solid var(--line);color:var(--tx)} .admin-light input:focus,.admin-light select:focus,.admin-light textarea:focus{border-color:var(--tx);box-shadow:0 0 0 3px rgba(0,0,0,.06);background:#fff} .admin-light .flabel{color:var(--tx-soft)} .admin-light input::placeholder,.admin-light textarea::placeholder{color:var(--tx-faint)} .admin-light select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a958d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .admin-light .flash-wrap{position:static;margin-bottom:18px;max-width:none} .admin-light .flash{background:#fff;border:1px solid var(--line);color:var(--tx);box-shadow:0 4px 14px -8px rgba(0,0,0,.15)} .admin-light .flash-success{border-color:#bfe6d4;color:#1f7a52} .admin-light .flash-error{border-color:#f0d4d1;color:#b4453c} /* admin component fixups */ .admin-light .info-row{border-color:var(--line-2)} .admin-light .info-row span{color:var(--tx-faint)} .admin-light .info-row strong{color:var(--tx)} .admin-light .dash-status-big{color:var(--tx)} .admin-light .field-hint{color:var(--tx-faint)} .admin-light .revenue-bar{background:linear-gradient(135deg,#fbf6ea,#f6f1e4);border-color:#ece4d2} .admin-light .revenue-label{color:#9a6a1a} .admin-light .revenue-amount{color:var(--tx)} .admin-light .pay-review-name,.admin-light .pay-review-info strong{color:var(--tx)} .admin-light .pay-review-meta,.admin-light .pay-review-info span{color:var(--tx-faint)} .admin-light .pay-review-notes{background:var(--accent-soft);border-color:var(--line);color:var(--tx-soft)} .admin-light .pay-shot-empty{color:var(--tx-faint);background:var(--accent-soft)} .admin-light .affiliate-row{background:#fff;border-color:var(--line)} .admin-light .affiliate-row:hover{background:var(--accent-soft);border-color:#dcd9d3} .admin-light .affiliate-name{color:var(--tx)} .admin-light .affiliate-email,.admin-light .affiliate-meta{color:var(--tx-faint)} .admin-light .modal-panel{background:#fff;border-color:var(--line);color:var(--tx)} .admin-light .modal-info h3{color:var(--tx)} .admin-light .modal-info li{color:var(--tx-soft)} .admin-light .modal-info li strong{color:var(--tx)} .admin-light .modal-close{background:var(--accent-soft);color:var(--tx-soft);border-color:var(--line)} /* Dashboard: needs attention + recent activity */ .admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;align-items:start} .queue{display:flex;flex-direction:column;gap:12px} .queue-head h3{font-family:inherit;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--tx);margin-bottom:4px} .queue-head p{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-faint);font-weight:700;margin-bottom:10px} .queue-card{display:flex;align-items:center;gap:14px;padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;transition:.2s} .queue-card:hover{border-color:#dcd9d3;box-shadow:0 8px 22px -14px rgba(0,0,0,.2);transform:translateY(-1px)} .queue-ico{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--tx);flex-shrink:0} .queue-ico svg{width:19px;height:19px} .queue-txt{flex:1} .queue-txt b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--tx)} .queue-txt span{font-size:13px;color:var(--tx-faint)} .queue-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-soft);color:var(--tx-soft);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center} .queue-arrow{color:var(--tx-faint)} .recent{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px} .recent-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .recent-head h3{font-family:inherit;font-size:20px;font-weight:800;color:var(--tx)} .recent-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)} .recent-row:last-child{border-bottom:none} .recent-av{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--tx-soft);flex-shrink:0} .recent-m{flex:1;min-width:0} .recent-m b{font-size:13.5px;font-weight:700;color:var(--tx)} .recent-m span{display:block;font-size:12px;color:var(--tx-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .recent-time{font-size:11px;color:var(--tx-faint);white-space:nowrap} @media(max-width:1000px){.admin-cols{grid-template-columns:1fr}} @media(max-width:860px){ .admin-shell{grid-template-columns:1fr} .side{position:static;height:auto} .admin-light .admin-main{padding:22px 18px 50px} .admin-light .stitle{font-size:30px} } /* ===== Bundle 2-column: compact pricing + live preview ===== */ .slide-bundle .bundle2{display:grid;grid-template-columns:.92fr 1.45fr;gap:26px;max-width:1340px;width:100%;margin:0 auto;align-items:start} @media(max-width:1024px){.slide-bundle .bundle2{grid-template-columns:1fr;gap:22px}} .pboard-compact{width:100%;max-width:none} .pboard-compact .pboard-card{padding:30px 30px 24px;animation:pboardFloat 6.5s ease-in-out infinite} .pboard-compact .pboard-badge{font-size:9px;padding:6px 13px;margin-bottom:16px} .pboard-compact .pboard-title{font-size:clamp(21px,2.1vw,25px);margin-bottom:6px} .pboard-compact .pboard-sub{font-size:13px;max-width:none;margin-bottom:18px} .pboard-compact .pboard-price{gap:12px;margin-bottom:18px} .pboard-compact .pboard-old{font-size:18px;margin-bottom:10px} .pboard-compact .pboard-now{font-size:44px} .pboard-compact .pboard-cur{font-size:17px} .pboard-compact .pboard-off{font-size:10px;padding:5px 10px} .pboard-compact .pboard-values{gap:12px;margin:0 0 22px;max-width:none} .pboard-compact .pboard-values li{font-size:14.5px} .pboard-compact .pboard-values li::before{width:21px;height:21px} .pboard-compact .pboard-cta{padding:18px 18px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:20px;letter-spacing:-.015em;text-transform:none;max-width:none;font-weight:800;color:#1a1407;--lq-ink:#1a1407;--lq-bd:transparent;--lq-bd-h:transparent} .pboard-cta svg{width:23px;height:23px;stroke-width:2.4} .pboard-compact .pboard-coupon{font-size:11.5px;margin-top:13px} /* ===== Price Board — Apple-style blur reveal + staggered child wave ===== */ /* Container: opacity 0 · blur 14px · translateY 50px · scale .97 → clear, GPU-accelerated */ .pboard-compact.reveal{opacity:0;filter:blur(14px);transform:translateY(50px) scale(.97); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1); will-change:opacity,transform,filter} .pboard-compact.reveal.in{opacity:1;filter:blur(0);transform:translateY(0) scale(1)} /* Children start hidden — soft blur + lift — then wave in once the parent reveals */ .pboard-compact.reveal .pboard-badge, .pboard-compact.reveal .pboard-title, .pboard-compact.reveal .pboard-sub, .pboard-compact.reveal .pboard-price, .pboard-compact.reveal .pboard-values, .pboard-compact.reveal .pboard-cta, .pboard-compact.reveal .pboard-coupon{opacity:0;filter:blur(10px);transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s cubic-bezier(.22,1,.36,1); will-change:opacity,transform,filter} .pboard-compact.reveal.in .pboard-badge, .pboard-compact.reveal.in .pboard-title, .pboard-compact.reveal.in .pboard-sub, .pboard-compact.reveal.in .pboard-price, .pboard-compact.reveal.in .pboard-values, .pboard-compact.reveal.in .pboard-cta, .pboard-compact.reveal.in .pboard-coupon{opacity:1;filter:blur(0);transform:translateY(0)} /* 130ms stagger — title leads after the badge, CTA lands last for a premium reveal */ .pboard-compact.reveal.in .pboard-badge{transition-delay:.13s} .pboard-compact.reveal.in .pboard-title{transition-delay:.26s} .pboard-compact.reveal.in .pboard-sub{transition-delay:.39s} .pboard-compact.reveal.in .pboard-price{transition-delay:.52s} .pboard-compact.reveal.in .pboard-values{transition-delay:.65s} .pboard-compact.reveal.in .pboard-cta{transition-delay:.78s} .pboard-compact.reveal.in .pboard-coupon{transition-delay:.91s} @media (prefers-reduced-motion: reduce){ .pboard-compact.reveal, .pboard-compact.reveal .pboard-badge, .pboard-compact.reveal .pboard-title, .pboard-compact.reveal .pboard-sub, .pboard-compact.reveal .pboard-price, .pboard-compact.reveal .pboard-values, .pboard-compact.reveal .pboard-cta, .pboard-compact.reveal .pboard-coupon{opacity:1!important;filter:none!important;transform:none!important;transition:none!important} } .lpv{background:linear-gradient(168deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--hairline-strong);border-radius:26px;padding:24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 32px 80px -46px rgba(0,0,0,.85)} .lpv-eyebrow{display:flex;align-items:center;justify-content:center;gap:7px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:18px} /* keep letter-spacing on the text but cancel its trailing space so the dot sits ~13px from the last letter */ .lpv-eyebrow span{margin-right:-.24em} /* live status dot — part of the heading (matches .hd-live i, blue-violet) */ .lpv-live-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#7d5aff;box-shadow:0 0 9px #7d5aff,0 0 3px #7d5aff;animation:pulseCta 2s ease-in-out infinite} .lpv-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#ffffff06;border:1px solid var(--hairline);border-radius:14px;padding:6px;margin-bottom:20px} .lpv-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--ink-muted);background:transparent;border:none;border-radius:10px;padding:12px 6px;cursor:pointer;transition:background .3s var(--ease-spring),color .3s,box-shadow .3s} .lpv-tab svg{width:16px;height:16px;flex-shrink:0} .lpv-tab:hover{color:var(--ink-soft)} .lpv-tab.on{background:linear-gradient(135deg,rgba(125,90,255,.24),rgba(125,90,255,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(125,90,255,.45)} @media(max-width:560px){.lpv-tabs{grid-template-columns:repeat(2,1fr)}} /* Trade Journal Pro — equity curve preview */ .lpv-equity svg{position:absolute;inset:0;width:100%;height:100%;display:block} .lpv-eq-dot{position:absolute;top:28px;right:13px;width:9px;height:9px;border-radius:50%;background:#5fe1d6;box-shadow:0 0 0 4px rgba(95,225,214,.22);z-index:3} .lpv-stage{position:relative;border:1px solid var(--hairline);border-radius:18px;background:linear-gradient(165deg,#13111b,#0b0910);padding:28px;min-height:440px} .lpv-pane{display:none} .lpv-pane.on{display:block;animation:lpvIn .45s var(--ease-spring)} @keyframes lpvIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .lpv-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} /* product title — clean Apple SF Pro (MacBook Air style) */ .lpv-head h3{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:30px;font-weight:700;letter-spacing:-.022em;line-height:1.15;color:#fff} /* LIVE PREVIEW badge — minimal Apple UI status tag */ .lpv-badge{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;font-weight:500;color:#b9a8ff;border:1px solid rgba(125,90,255,.32);background:rgba(125,90,255,.07);border-radius:999px;padding:4px 11px 4px 13px} /* main sub-headline — refined editorial serif italic */ .lpv-line{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-style:normal;font-size:22px;font-weight:600;line-height:1.28;letter-spacing:-.02em;color:#fff} .lpv-line b{background:linear-gradient(120deg,#a78bfa,#7d5aff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600} .lpv-sub{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;font-size:clamp(16px,1.5vw,19px);font-weight:450;color:#fff;line-height:1.5;margin:16px auto 0;max-width:440px;text-align:center;letter-spacing:-.01em} .lpv-chart{position:relative;margin-top:20px;height:210px;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;background:radial-gradient(120% 80% at 72% 18%,rgba(125,90,255,.14),transparent 60%)} .lpv-candles{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);filter:blur(4.5px);opacity:.92} .lpv-tag{position:absolute;z-index:3;font-family:var(--font-label);font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;padding:3px 8px;border-radius:6px} .lpv-entry{top:18px;right:18px;background:#5fe1d6;color:#06231f} .lpv-tp{top:30%;right:16px;background:rgba(95,225,214,.85);color:#06231f} .lpv-sl{top:55%;right:16px;background:rgba(255,94,103,.9);color:#fff} .lpv-lock{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--gold);background:rgba(11,9,16,.72);border:1px solid rgba(231,206,148,.4);border-radius:999px;padding:8px 15px;backdrop-filter:blur(4px)} .lpv-lock svg{width:13px;height:13px} .lpv-chart-photo{background:#06050a} .lpv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block} .lpv-chart-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,10,.34) 0%,rgba(6,5,10,.05) 38%,rgba(6,5,10,.62) 100%);pointer-events:none} .lpv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px} .lpv-stats>div{text-align:center;padding:13px 8px;border:1px solid var(--hairline);border-radius:12px;background:#ffffff04} .lpv-stats span{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin-bottom:6px} .lpv-stats strong{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} @media(max-width:560px){.lpv-stats{grid-template-columns:1fr 1fr}} .lpv-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} .lf label{display:block;font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:7px} .lf-in{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink-soft);background:#ffffff06;border:1px solid var(--hairline-strong);border-radius:11px;padding:12px 14px} .lf-in svg{width:14px;height:14px;color:var(--ink-muted);flex-shrink:0} .lpv-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:24px} .lpv-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--ink-soft);padding:18px 8px;border:1px solid var(--hairline);border-radius:12px;background:linear-gradient(160deg,rgba(231,206,148,.07),transparent)} .lpv-si{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(231,206,148,.12);border:1px solid rgba(231,206,148,.28)} .lpv-si svg{width:20px;height:20px} .lpv-arrow{color:var(--gold);font-size:20px;flex-shrink:0} @media(max-width:560px){.lpv-form{grid-template-columns:1fr}.lpv-flow{flex-direction:column}.lpv-arrow{transform:rotate(90deg)}} .lpv-check{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px} .lpv-check li{display:flex;align-items:center;gap:13px;font-family:var(--font-ui);font-size:15px;color:var(--ink-muted)} .lpv-check li.done{color:var(--ink)} .cb{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;background:rgba(95,225,214,.15);color:var(--forest);border:1px solid rgba(95,225,214,.4)} .cb-off{background:#ffffff05;border:1px solid var(--hairline-strong)} .lpv-score{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:14px 16px;border:1px solid rgba(95,225,214,.3);border-radius:12px;background:rgba(95,225,214,.06)} .lpv-score span{font-family:var(--font-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .lpv-score strong{font-family:var(--font-ui);font-size:15px;color:var(--forest);font-weight:800} .bundle-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1340px;margin:24px auto 0;padding:22px 26px;border:1px solid var(--hairline);border-radius:18px;background:#ffffff04} .bs{display:flex;align-items:center;gap:13px} .bs-i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(231,206,148,.1);border:1px solid rgba(231,206,148,.25);flex-shrink:0} .bs-i svg{width:19px;height:19px} .bs b{display:block;font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .bs span{font-family:var(--font-ui);font-size:12px;color:var(--ink-muted)} @media(max-width:900px){.bundle-steps{grid-template-columns:1fr 1fr;gap:14px}} @media(max-width:520px){.bundle-steps{grid-template-columns:1fr}} /* ============================================================ LIVE PREVIEW — luxury SaaS dashboard rebuild ============================================================ */ .lpv-fx-sf{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif} /* tighter, matte-black, glassmorphism */ .lpv{background:linear-gradient(168deg,rgba(255,255,255,.04),rgba(255,255,255,.008));box-shadow:0 30px 80px -48px rgba(0,0,0,.9)} .lpv-stage{padding:16px;min-height:0;border:1px solid rgba(255,255,255,.06);background:linear-gradient(165deg,#0b0a0d,#090909)} .lpv-pane.on{animation:lpvSlide .5s cubic-bezier(.22,1,.36,1)} @keyframes lpvSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}} /* premium glassmorphism active tab with gold+purple glow, thinner icons */ .lpv-tab svg{stroke-width:1.6} .lpv-tab.on{background:linear-gradient(135deg,rgba(231,206,148,.16),rgba(125,90,255,.16));color:#fff;box-shadow:inset 0 0 0 1px rgba(231,206,148,.30),0 0 20px -8px rgba(125,90,255,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .lpv-live-dot{animation:lpvRec 2s ease-in-out infinite} @keyframes lpvRec{0%,100%{opacity:1;box-shadow:0 0 8px #7d5aff,0 0 3px #7d5aff}50%{opacity:.5;box-shadow:0 0 14px #7d5aff,0 0 5px #7d5aff}} /* topbar */ .lpv-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px} .lpv-title{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em;color:#fff} .lpv-mo{display:inline-flex;align-items:center;gap:7px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:#e7ce94;border:1px solid rgba(231,206,148,.28);background:rgba(231,206,148,.06);border-radius:999px;padding:5px 11px;flex-shrink:0} .lpv-mo i{width:6px;height:6px;border-radius:50%;background:#e7ce94;box-shadow:0 0 8px #e7ce94} /* dashboard card (glassmorphism, soft border, float on hover) */ .lpv-card{background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .32s var(--ease-spring),box-shadow .32s,border-color .32s} .lpv-card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -28px rgba(0,0,0,.95);border-color:rgba(255,255,255,.11)} .lpv-2col{display:grid;grid-template-columns:1.2fr 1fr;gap:12px} @media(max-width:560px){.lpv-2col{grid-template-columns:1fr}} /* chart preview (blurred institutional) */ .lpv-chartcard{padding:11px} .lpv-chartwrap{position:relative;height:206px;border-radius:11px;overflow:hidden;background:radial-gradient(120% 92% at 68% 12%,rgba(231,206,148,.10),transparent 60%)} .lpv-chartsvg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);filter:blur(2.2px);opacity:.9} .lpv-mk{position:absolute;z-index:2;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:6px} .lpv-mk-buy{top:11px;left:11px;background:#5fe1d6;color:#06231f} .lpv-mk-tp{top:11px;right:11px;background:rgba(231,206,148,.92);color:#231b06} /* data rows list */ .lpv-rows{display:flex;flex-direction:column;gap:8px;justify-content:center} .lpv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid rgba(255,255,255,.06);border-radius:11px;background:rgba(255,255,255,.02)} .lpv-row span{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;font-size:12.5px;color:var(--ink-muted);font-weight:450} .lpv-row b{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;font-size:13px;font-weight:600;color:#fff} .lpv-row.is-locked{border-color:rgba(231,206,148,.22);background:rgba(231,206,148,.045)} .lpv-row.is-locked b{color:#e7ce94} .lpv-lk{display:inline-flex;align-items:center;gap:6px} .lpv-lk svg{width:13px;height:13px} /* plan builder */ .lpv-plancard{padding:16px 18px} .lpv-plan-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .lpv-plan-h span:first-child{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-size:13px;font-weight:600;color:#fff} .lpv-plan-firm{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:11px;color:#e7ce94;font-weight:500} .lpv-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px} .lpv-field label{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin-bottom:6px} .lpv-fv{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-size:16px;font-weight:600;letter-spacing:-.01em;color:#fff;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:11px 13px} .lpv-datarow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:11px 14px;border-radius:10px;border:1px solid rgba(231,206,148,.22);background:rgba(231,206,148,.05)} .lpv-datarow span{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);font-weight:600} .lpv-datarow b{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-size:16px;color:#e7ce94;font-weight:700;letter-spacing:-.01em} @media(max-width:560px){.lpv-fields{grid-template-columns:1fr}} /* checklist */ .lpv-checks{display:flex;flex-direction:column;gap:10px} .lpv-ck{display:flex;align-items:center;gap:12px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:14px;color:var(--ink-muted)} .lpv-ck.done{color:#fff} .lpv-ckb{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(95,225,214,.16);border:1px solid rgba(95,225,214,.42);color:#5fe1d6;flex-shrink:0} .lpv-ckb svg{width:12px;height:12px} .lpv-ckb.off{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.13)} .lpv-prog{display:flex;align-items:center;gap:13px;margin-top:16px} .lpv-prog-bar{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden} .lpv-prog-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5fe1d6,#3cc4b8);transition:width .8s cubic-bezier(.22,1,.36,1)} .lpv-prog-t{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-size:12px;font-weight:600;color:#5fe1d6;white-space:nowrap} /* journal */ .lpv-jstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px} .lpv-jstats>div{text-align:center;padding:14px 8px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02)} .lpv-jstats span{display:block;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-muted);font-weight:500;margin-bottom:6px} .lpv-jstats b{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#fff} .lpv-notes-h{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);font-weight:600;margin-bottom:8px} .lpv-notes{display:flex;flex-direction:column;gap:8px} .lpv-note{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:12.5px;color:var(--ink-soft);line-height:1.5;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)} .lpv-note b{color:#fff;font-weight:600;margin-right:6px} /* premium content blur */ .lpv-prem{filter:blur(5px);opacity:.9;pointer-events:none;-webkit-user-select:none;user-select:none} /* unlock badge (floating, gold) */ .lpv-unlock{display:flex;width:fit-content;align-items:center;gap:8px;margin:14px auto 0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:#e7ce94;text-decoration:none;border:1px solid rgba(231,206,148,.35);background:rgba(231,206,148,.07);border-radius:999px;padding:10px 18px;transition:background .3s,border-color .3s,box-shadow .3s} .lpv-unlock:hover{background:rgba(231,206,148,.13);border-color:rgba(231,206,148,.6);box-shadow:0 0 22px -8px rgba(231,206,148,.5)} .lpv-unlock svg{width:15px;height:15px;transition:transform .3s var(--ease-spring)} .lpv-unlock:hover svg{transform:translateX(4px)} /* premium footer bar */ .lpv-foot{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.06);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:11.5px;font-weight:400;color:rgba(255,255,255,.42);text-align:center;letter-spacing:.01em} /* Unlock Complete Framework → glass shine + blue glow sweep on the price board */ .pboard-card{position:relative} .pboard-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:30;overflow:hidden;box-shadow:0 0 0 2px rgba(91,140,255,.55),0 0 48px -4px rgba(91,140,255,.5);animation:pboardShineFade 1.2s ease-out forwards} .pboard-shine::before{content:"";position:absolute;top:-55%;left:-45%;width:36%;height:210%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(180,205,255,.06),rgba(255,255,255,.24),rgba(180,205,255,.06),transparent);filter:blur(2px);animation:pboardSweep 1.05s cubic-bezier(.22,1,.36,1) forwards} @keyframes pboardSweep{to{left:138%}} @keyframes pboardShineFade{0%{opacity:0}18%{opacity:1}82%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion: reduce){.pboard-shine{display:none}} /* ============================================================ MOBILE NAVIGATION + RESPONSIVE & POLISH AUDIT (appended) ============================================================ */ /* --- Mobile slide-down menu --- */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;border:1px solid var(--hairline-strong);border-radius:12px;background:rgba(255,255,255,.05);cursor:pointer;flex-shrink:0;transition:background .25s,border-color .25s,box-shadow .25s} .nav-burger:hover{background:rgba(125,90,255,.14);border-color:rgba(125,90,255,.45);box-shadow:0 0 18px -6px rgba(125,90,255,.4)} .nav-burger span{display:block;height:2px;width:100%;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease-spring),opacity .2s} .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger.open span:nth-child(2){opacity:0} .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:4px;padding:16px 20px 22px;background:linear-gradient(180deg,rgba(14,12,20,.96),rgba(9,8,13,.97));backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);border-bottom:1px solid var(--hairline-strong);box-shadow:0 30px 70px -26px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .32s var(--ease-spring),transform .32s var(--ease-spring),visibility .32s;max-height:calc(100vh - 60px);overflow-y:auto;z-index:39} .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0)} .mm-links{display:flex;flex-direction:column} .mm-links a{font-family:var(--font-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);text-decoration:none;padding:14px 12px;border-radius:12px;transition:background .2s,color .2s,padding-left .2s} .mm-links a:hover,.mm-links a:active{background:rgba(125,90,255,.13);color:#fff;padding-left:18px} .mm-account a{font-family:var(--font-ui);font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--ink-muted);padding:12px} .mm-divider{height:1px;background:linear-gradient(90deg,transparent,var(--hairline-strong),transparent);margin:8px 0} .mm-actions{display:flex;flex-direction:column;gap:10px;margin-top:10px} .mm-actions .btn-p,.mm-actions .btn-g{width:100%;padding:15px;font-size:12px} body.menu-open{overflow:hidden} @media(max-width:980px){ .nav-burger{display:flex} .nav-actions .btn-g,.nav-affiliate,.user-menu{display:none} .nav-actions{gap:8px} } @media(min-width:981px){ .mobile-menu{display:none} } /* --- Premium polish: richer card definition, stronger highlights --- */ .card{background:linear-gradient(168deg,#ffffff09,#ffffff03)} .card:hover{box-shadow:0 28px 56px -24px rgba(0,0,0,.95),0 0 40px -18px rgba(125,90,255,.22)} .pcard-more:hover,.faq-item.open{box-shadow:0 14px 34px -18px rgba(125,90,255,.28)} /* Brighter eyebrow / label accents */ .eyebrow,.pcard-eyebrow,.lpv-eyebrow{text-shadow:0 0 18px rgba(125,90,255,.25)} /* Stronger primary button glow */ .btn-p{box-shadow:inset 0 1px rgba(255,255,255,.6),0 10px 28px -10px rgba(202,160,90,.75)} /* Crisper checkmarks / list bullets */ .pboard-values li::before{box-shadow:0 0 14px -3px rgba(231,206,148,.5)} /* --- Small-phone safety (<=480px): keep everything inside the viewport --- */ @media(max-width:480px){ img,svg,video{max-width:100%} /* Header on small phones: logo + burger only (CTA lives in the menu) */ .nav-actions .nav-cta{display:none} .logo-main{font-size:17px} .slide-why-bundle,.slide-combined,.slide-journey,.slide-process,.slide-faq-home,.slide-final{padding-left:16px;padding-right:16px} .slide-bundle{padding-left:16px;padding-right:16px} .hero-wrap{padding-left:18px;padding-right:18px} .hero-title{font-size:clamp(34px,9.5vw,46px)} .hero-sub{font-size:15px} .stitle,.power-title,.journey-title,.why-bundle-title,.final-title{font-size:25px} .combined-title{font-size:22px} .prop-capsule{padding:11px 16px;font-size:10px} .prop-row:first-child .prop-capsule{padding:13px 20px;font-size:11px} /* Pricing board */ .pboard-card{padding:30px 20px 26px} .pboard-title{font-size:24px;overflow-wrap:anywhere} .pboard-now{font-size:42px} .pboard-cta{padding:17px;font-size:13px} /* Live preview */ .lpv{padding:16px} .lpv-stage{padding:20px} .lpv-tabs{gap:4px;padding:5px} .lpv-tab{font-size:10px;padding:11px 6px;gap:6px} .lpv-tab svg{width:15px;height:15px} .lpv-line{font-size:19px} .lpv-head h3{font-size:25px} .lpv-sub{font-size:13px} /* Forms full width, comfortable tap targets */ .aff-link-row{flex-direction:column} .aff-link-row .btn-p{width:100%} .footer-grid{grid-template-columns:1fr;gap:24px;text-align:center} .footer-socials{justify-content:center} } /* ============================================================ VISUAL-FIRST PRODUCT CARDS + PRODUCT MOCKUPS (show-first) ============================================================ */ .pcard{grid-template-columns:1fr 1fr;align-items:stretch} .pcard-visual{display:flex;align-items:center;justify-content:center;padding:32px 30px;background:radial-gradient(120% 90% at 50% 0,var(--pc-soft),transparent 72%);border-right:1px solid var(--hairline)} .pcard-flip .pcard-visual{order:2;border-right:0;border-left:1px solid var(--hairline)} .pcard-flip .pcard-body{order:1} .pcard-body{padding:36px 38px;display:flex;flex-direction:column;justify-content:center} .pcard-head{display:flex;align-items:center;gap:15px;margin-bottom:14px} .pcard-head .pcard-step{font-size:36px;line-height:.8;flex-shrink:0} .pcard-headtext .pcard-eyebrow{margin-bottom:5px} .pcard-feats{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0} .pcard-feats li{font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pc) 28%,var(--hairline));background:var(--pc-soft);display:inline-flex;align-items:center;gap:7px} .pcard-feats li::before{content:"✓";color:var(--pc);font-weight:800;font-size:11px} .pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;flex-wrap:wrap} .pcard-foot .pcard-bestfor{margin:0;flex:1 1 200px;min-width:0} /* --- Shared mockup frame --- */ .pmock{width:100%;max-width:350px;border-radius:16px;border:1px solid color-mix(in srgb,var(--pc) 26%,var(--hairline));background:linear-gradient(168deg,#16141f,#0b0a10);padding:15px;box-shadow:inset 0 1px rgba(255,255,255,.06),0 24px 54px -26px #000;display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden} .pmock::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;background:radial-gradient(120% 100% at 50% 0,color-mix(in srgb,var(--pc) 24%,transparent),transparent 72%);pointer-events:none} .pm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1} .pm-sym{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-data);font-size:13px;font-weight:800;color:var(--ink)} .pm-sym em{font-style:normal;font-family:var(--font-label);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pc);font-weight:800;border:1px solid color-mix(in srgb,var(--pc) 40%,transparent);border-radius:5px;padding:2px 6px} .pm-dot{width:8px;height:8px;border-radius:50%;background:var(--pc);box-shadow:0 0 12px var(--pc)} .pm-px{font-family:var(--font-data);font-size:13px;font-weight:800;color:var(--ink)} .pm-up{color:#5fe1d6;font-size:11px;font-weight:800;margin-left:3px} .pm-badge{font-family:var(--font-label);font-size:8px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#06231f;background:#5fe1d6;border-radius:5px;padding:3px 8px} .pm-acct{font-family:var(--font-data);font-size:13px;font-weight:800;color:var(--gold)} .pm-foot{display:flex;align-items:center;gap:10px;position:relative;z-index:1} .pm-foot-split{justify-content:space-between} .pm-buy{font-family:var(--font-label);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#5fe1d6;flex:1} .pm-kv{font-family:var(--font-label);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink-muted)} .pm-kv b{font-family:var(--font-data);color:var(--ink);font-size:12px;margin-left:4px} /* --- XAU chart mockup --- */ .pm-chart{position:relative;height:118px;border-radius:10px;border:1px solid var(--hairline);background:linear-gradient(180deg,#0e0d14,#0a0910);overflow:hidden} .pm-chart svg{width:100%;height:100%;display:block} .pm-cn line{stroke-width:2} .pm-uc{fill:#5fe1d6;stroke:#5fe1d6} .pm-dn{fill:#ff6b73;stroke:#ff6b73} .pm-cn rect{rx:1.5} .pm-tpline{stroke:#5fe1d6;stroke-dasharray:4 4;stroke-width:1;opacity:.55} .pm-enline{stroke:#e7ce94;stroke-dasharray:4 4;stroke-width:1;opacity:.7} .pm-slline{stroke:#ff6b73;stroke-dasharray:4 4;stroke-width:1;opacity:.5} .pm-tag{position:absolute;right:7px;font-family:var(--font-label);font-size:7.5px;letter-spacing:.08em;font-weight:800;padding:2px 6px;border-radius:4px} .pm-tp{top:11px;background:rgba(95,225,214,.9);color:#06231f} .pm-en{top:48px;background:rgba(231,206,148,.9);color:#1a1407} .pm-sl{top:75px;background:rgba(255,107,115,.9);color:#fff} /* --- Checklist mockup --- */ .pm-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0;padding:0;position:relative;z-index:1} .pm-list li{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:var(--ink-muted)} .pm-list li i{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--hairline-ink);flex-shrink:0;position:relative} .pm-list li.ok{color:var(--ink-soft)} .pm-list li.ok i{background:#5fe1d6;border-color:#5fe1d6} .pm-list li.ok i::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#06231f;font-size:11px;font-weight:900} .pm-approve{font-family:var(--font-label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#5fe1d6;background:rgba(95,225,214,.12);border:1px solid rgba(95,225,214,.4);border-radius:999px;padding:6px 12px} /* --- Plan builder mockup --- */ .pm-bars{display:flex;flex-direction:column;gap:13px;position:relative;z-index:1} .pm-bar label{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-label);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-muted);margin-bottom:7px} .pm-bar label b{font-family:var(--font-data);color:var(--ink);font-size:12px} .pm-track{display:block;height:8px;border-radius:999px;background:#ffffff0e;overflow:hidden} .pm-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7d5aff,#5fe1d6)} .pm-track i.warn{background:linear-gradient(90deg,#f3c179,#ff6b73)} .pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1} .pm-grid>div{text-align:center;padding:11px 6px;border:1px solid var(--hairline);border-radius:10px;background:#ffffff05} .pm-grid span{display:block;font-family:var(--font-label);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:5px} .pm-grid b{font-family:var(--font-data);font-size:16px;font-weight:800;color:var(--ink)} .pm-good{color:#5fe1d6!important} /* --- Responsive: stack mockup on top --- */ @media(max-width:860px){ .pcard,.pcard-flip{grid-template-columns:1fr} .pcard-visual,.pcard-flip .pcard-visual{order:0;border-right:0;border-left:0;border-bottom:1px solid var(--hairline);padding:26px} .pcard-flip .pcard-body{order:1} .pcard-body{padding:26px 24px} } @media(max-width:480px){ .pcard-body{padding:22px 18px} .pcard-visual{padding:22px 18px} .pcard-head .pcard-step{font-size:30px} .pmock{max-width:100%} } /* ============================================================ PREMIUM REFINEMENT — gold rebalance, elegant hero, tighter spacing ============================================================ */ /* --- Palette rebalance: gold as primary accent (less purple) --- */ .eyebrow{color:var(--gold)} .eyebrow::after{background:linear-gradient(90deg,rgba(231,206,148,.4),transparent)} .why-bundle-title em,.power-title em,.journey-title em,.final-title em{ background:linear-gradient(120deg,#f6e8c4,#e7ce94 48%,#caa05a); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-style:italic} .stitle em{ background:linear-gradient(120deg,#f6e8c4,#e7ce94 48%,#caa05a); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-style:normal} /* Calmer violet ambiance, richer gold glow */ .orb-v{opacity:.30} .orb-g{opacity:.58;background:radial-gradient(circle,#f3c17999 0%,transparent 62%)} /* --- Centered section eyebrow (pill) --- */ .eyebrow-c{display:inline-flex;justify-content:center;margin-bottom:14px} .eyebrow-c::after{display:none} /* --- Hero typography: elegant high-end serif --- */ .hero-wrap{flex-direction:column;max-width:1060px;padding:104px 32px 60px} .hero-copy{max-width:780px} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--gold);padding:8px 17px;border:1px solid rgba(231,206,148,.34);border-radius:999px;background:rgba(231,206,148,.07);margin-bottom:26px;box-shadow:0 0 26px -10px rgba(231,206,148,.4)} /* Rax-style premium glowing status indicator (right of the badge) */ .hero-eyebrow::after{content:"";width:13px;height:13px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 35% 30%,#e3e9ff 0%,#7d8cff 42%,#4350f0 78%); border:1px solid rgba(190,202,255,.55); box-shadow:inset 0 0 4px rgba(255,255,255,.7),0 0 6px 1px rgba(99,116,255,.9),0 0 16px 3px rgba(80,96,255,.55),0 0 36px 9px rgba(70,86,255,.35); animation:eyebrowPulse 3s ease-in-out infinite} @keyframes eyebrowPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}} @media(prefers-reduced-motion:reduce){.hero-eyebrow::after{animation:none}} .hero-title{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;font-weight:800;font-style:normal;font-size:clamp(44px,6.4vw,80px);line-height:1.03;letter-spacing:-.03em;color:#f6f4fc;margin-bottom:20px;display:inline-block;position:relative} .hero-title::after{content:"";display:block;width:72px;height:4px;border-radius:999px;margin-top:14px;background:linear-gradient(90deg,#f3c87f,#e7ce94);box-shadow:0 0 14px rgba(231,180,110,.5)} .hero-title em{font-family:Impact,'Anton','Haettenschweiler','Arial Narrow Bold',sans-serif;font-style:normal;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:1.62em;margin-top:6px;display:inline-block} .hero-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(18px,2vw,23px);color:var(--ink-soft);max-width:520px;margin:0 auto 34px} /* --- Hero command-center deck mockup --- */ .hero-deck{width:100%;max-width:940px;margin:8px auto 0;position:relative;z-index:2} .hd-frame{position:relative;border-radius:18px;border:1px solid var(--hairline-strong);background:linear-gradient(168deg,#16141f,#0b0a10);box-shadow:0 60px 130px -44px #000,0 0 60px -30px rgba(231,206,148,.18),inset 0 1px rgba(255,255,255,.07);overflow:hidden} .hd-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:radial-gradient(120% 100% at 50% 0,rgba(231,206,148,.14),transparent 70%);pointer-events:none} .hd-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--hairline);background:rgba(255,255,255,.025);position:relative} .hd-dots{display:inline-flex;gap:6px} .hd-dots i{width:9px;height:9px;border-radius:50%;background:var(--hairline-ink)} .hd-dots i:nth-child(1){background:#ff6b6b9c}.hd-dots i:nth-child(2){background:#f3c179a8}.hd-dots i:nth-child(3){background:#5fe1d69c} .hd-title{font-family:var(--font-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--ink-muted);margin:0 auto} .hd-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#5fe1d6} .hd-live i{width:7px;height:7px;border-radius:50%;background:#5fe1d6;box-shadow:0 0 9px #5fe1d6;animation:pulseCta 2s ease-in-out infinite} .hd-body{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;padding:16px;text-align:left;position:relative} .hd-main{display:flex;flex-direction:column;gap:12px} .hd-row{display:flex;align-items:center;justify-content:space-between;gap:10px} .hd-chart{position:relative;height:150px;border-radius:12px;border:1px solid var(--hairline);background:linear-gradient(180deg,#0e0d14,#0a0910);overflow:hidden} .hd-chart svg{width:100%;height:100%;display:block} .hd-chart .pm-tag{right:9px} .hd-chart .pm-tp{top:17px}.hd-chart .pm-en{top:78px}.hd-chart .pm-sl{top:119px} .hd-tags{display:flex;align-items:center;gap:16px} .hd-side{display:flex;flex-direction:column;gap:14px} .hd-card{border:1px solid var(--hairline);border-radius:12px;background:#ffffff05;padding:14px} .hd-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--ink);margin-bottom:13px} .hd-card-h b{font-family:var(--font-data);color:var(--gold)} .hd-mini{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-family:var(--font-label);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .hd-mini b{font-family:var(--font-data);font-size:19px} .hd-check{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0} .hd-check li{display:flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--ink-soft)} .hd-check li i{width:16px;height:16px;border-radius:5px;background:#5fe1d6;flex-shrink:0;position:relative} .hd-check li i::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#06231f;font-size:10px;font-weight:900} /* --- Hero trust strip --- */ .hero-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px} .hero-trust-label{font-family:var(--font-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-right:4px} .hero-trust .prop-capsule{padding:8px 16px;font-size:10px} .hero-trust .prop-capsule::before{opacity:.5} /* --- Tighter, more premium vertical rhythm (sections ~35% closer) --- */ .slide-why-bundle{padding:46px 24px 40px} .why-bundle-title{margin-bottom:0} .slide-combined{padding:20px 24px 22px} .combined-title{margin-bottom:20px} .slide-journey{padding:24px 24px 48px} .journey{gap:16px} .power-title{margin-bottom:0} .slide-process{padding:44px 24px} .process-head{margin-bottom:30px} .slide-faq-home{padding:36px 24px 42px} .slide-final{padding:48px 24px;min-height:auto} /* --- Responsive (kept last so it wins) --- */ @media(max-width:860px){ .hd-body{grid-template-columns:1fr} .hero-wrap{padding:96px 22px 44px} } @media(max-width:600px){ .hero-title{font-size:clamp(36px,10vw,52px)} .hd-body{padding:13px;gap:11px} .hd-title{display:none} .hd-tags{gap:12px;flex-wrap:wrap} .hero-trust{gap:8px} .hero-trust-label{width:100%;text-align:center;margin:0 0 2px} } /* ============================================================ 3-UP VISUAL PRODUCT CARDS (show-first, glass, gold accents) ============================================================ */ .prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;width:100%;margin:14px auto 0} .prodcard{--pc:#e7ce94;--pc-soft:rgba(231,206,148,.13);display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--hairline);background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.02));backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);overflow:hidden;transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s} .prodcard:hover{transform:translateY(-8px);border-color:rgba(231,206,148,.45);box-shadow:0 46px 92px -38px #000,0 0 64px -22px rgba(231,206,148,.3)} .prodcard-shot{position:relative;height:262px;padding:16px;display:flex;flex-direction:column;align-items:stretch;gap:13px;background:radial-gradient(120% 95% at 50% 0,var(--pc-soft),transparent 70%);border-bottom:1px solid var(--hairline);overflow:hidden} .prodcard-shot::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% -10%,rgba(231,206,148,.10),transparent 60%);pointer-events:none} .prodcard-badge{position:relative;align-self:flex-start;z-index:4;font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--gold);background:rgba(8,7,12,.55);border:1px solid rgba(231,206,148,.35);border-radius:999px;padding:6px 13px} .prodcard-info{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1} .prodcard-kicker{font-family:var(--font-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold)} .prodcard-h{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--ink);line-height:1.2} .prodcard-h em{font-style:italic;background:linear-gradient(120deg,#f6e8c4,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .prodcard-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink);background:transparent;border:1px solid var(--hairline-strong);border-radius:999px;padding:11px 18px;cursor:pointer;transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease-spring)} .prodcard-cta:hover{border-color:var(--gold);color:var(--gold);background:rgba(231,206,148,.08);transform:translateY(-1px)} .prodcard-cta svg{transition:transform .3s var(--ease-spring)} .prodcard-cta:hover svg{transform:translateX(3px)} /* Card 1 — blurred chart preview with sharp markers */ .ps-chart{position:relative;width:100%;flex:1;min-height:0;border-radius:12px;border:1px solid var(--hairline);background:linear-gradient(180deg,#0e0d14,#0a0910);overflow:hidden} .ps-chartblur{position:absolute;inset:0} .ps-chartblur svg{width:100%;height:100%;display:block} .ps-area{fill:url(#psarea)} .ps-line{stroke:#e7ce94;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} .ps-dot{fill:#e7ce94} .ps-chart .pm-tag{right:9px;z-index:3} .ps-chart .pm-tp{top:13%}.ps-chart .pm-en{top:52%}.ps-chart .pm-sl{top:80%} .ps-px{position:absolute;left:12px;top:11px;z-index:3;font-family:var(--font-data);font-size:11px;font-weight:700;color:var(--ink-soft)} .ps-px b{color:var(--ink);font-size:13px;margin:0 2px} .ps-px i{color:#5fe1d6;font-style:normal;font-size:10px} /* Card 2 — account → risk → plan flow */ .ps-flow{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;width:100%;flex:1} .ps-field{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--hairline-strong);border-radius:10px;background:#ffffff05} .ps-field span{font-family:var(--font-label);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:700} .ps-field b{font-family:var(--font-data);font-size:14px;color:var(--ink);font-weight:800} .ps-arrow{display:flex;justify-content:center;color:var(--gold)} .ps-arrow svg{width:15px;height:15px} .ps-plan{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;border:1px solid rgba(231,206,148,.42);background:linear-gradient(135deg,rgba(231,206,148,.15),rgba(231,206,148,.03));box-shadow:0 0 30px -14px rgba(231,206,148,.55)} .ps-plan span{font-family:var(--font-label);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800} .ps-plan b{font-family:var(--font-data);font-size:15px;color:var(--ink);font-weight:800} .ps-plan i{font-style:normal;font-family:var(--font-ui);font-size:11px;font-weight:700} /* Card 3 — completed checklist */ .ps-check{display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%;flex:1} .ps-check .pm-list{gap:10px} .ps-approve{align-self:flex-start} @media(max-width:920px){.prodgrid{grid-template-columns:1fr 1fr;gap:20px}} @media(max-width:640px){.prodgrid{grid-template-columns:1fr;gap:18px}.prodcard-shot{height:230px}} /* ============================================================ PREMIUM FAQ (compact, glass, gold, smooth) — homepage ============================================================ */ .faq-home .faq-accordion{gap:11px} .faq-home .faq-item{margin-bottom:0;border-radius:14px;border:1px solid var(--hairline);background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);transition:border-color .4s var(--ease-spring),background .4s,box-shadow .4s,transform .4s var(--ease-spring)} .faq-home .faq-item:hover{border-color:rgba(231,206,148,.34);background:rgba(255,255,255,.05);box-shadow:0 16px 36px -22px rgba(231,206,148,.35);transform:translateY(-2px)} .faq-home .faq-item.open{border-color:rgba(231,206,148,.42);background:rgba(231,206,148,.04);box-shadow:0 18px 40px -20px rgba(231,206,148,.28)} .faq-home .faq-question{padding:17px 22px;font-size:15px;transition:color .3s} .faq-home .faq-item.open .faq-question,.faq-home .faq-question:hover{color:#fff} /* + rotates into × on open */ .faq-home .faq-icon{transition:transform .4s var(--ease-spring)} .faq-home .faq-icon::before,.faq-home .faq-icon::after{transition:background .3s,transform .4s var(--ease-spring)} .faq-home .faq-icon.open{transform:rotate(45deg);color:var(--gold)} .faq-home .faq-icon.open::after{transform:none} .faq-home .faq-item.open .faq-icon::before,.faq-home .faq-item.open .faq-icon::after{background:var(--gold)} /* smooth answer reveal */ .faq-home .faq-answer{opacity:0;transition:max-height .45s var(--ease-spring),opacity .4s ease} .faq-home .faq-item.open .faq-answer{opacity:1} .faq-home .faq-answer p{padding:0 22px 18px;font-size:13.5px;color:var(--ink-soft)} /* ============================================================ NON-UNIFORM BACKGROUND GRID — visible in open space, fades elsewhere ============================================================ */ .bg-grid{ background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(72% 55% at 50% 0%,#000 0%,transparent 72%),radial-gradient(42% 38% at 13% 44%,rgba(0,0,0,.72) 0%,transparent 70%),radial-gradient(46% 40% at 88% 68%,rgba(0,0,0,.66) 0%,transparent 70%),radial-gradient(58% 46% at 50% 100%,rgba(0,0,0,.5) 0%,transparent 72%); mask-image:radial-gradient(72% 55% at 50% 0%,#000 0%,transparent 72%),radial-gradient(42% 38% at 13% 44%,rgba(0,0,0,.72) 0%,transparent 70%),radial-gradient(46% 40% at 88% 68%,rgba(0,0,0,.66) 0%,transparent 70%),radial-gradient(58% 46% at 50% 100%,rgba(0,0,0,.5) 0%,transparent 72%); } .hero-grid{background-image:linear-gradient(to right,rgba(231,206,148,.022) 1px,transparent 1px),linear-gradient(to bottom,rgba(231,206,148,.022) 1px,transparent 1px);background-size:72px 72px} /* ============================================================ THE ULTIMATE TRADER TOOLKIT — product section (reference build) ============================================================ */ .slide-toolkit{min-height:auto;padding:54px 24px 40px;align-items:center} .toolkit{max-width:1320px;width:100%;margin:0 auto} /* Header */ .tk-head{text-align:center;margin-bottom:34px} .tk-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--font-label);font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:800;color:var(--gold);margin-bottom:8px} .tk-deco{width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(231,206,148,.7));position:relative} .tk-deco::after{content:"";position:absolute;right:0;top:-1.5px;width:3px;height:3px;border-radius:50%;background:var(--gold)} .tk-deco-r{transform:scaleX(-1)} .tk-pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold);padding:10px 22px;border:1px solid rgba(231,206,148,.38);border-radius:999px;background:rgba(231,206,148,.06);box-shadow:0 0 30px -12px rgba(231,206,148,.5);margin-bottom:20px} .tk-pill svg{width:14px;height:14px} .tk-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px} .tk-trust-i{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)} .tk-trust-i svg{width:18px;height:18px;color:var(--gold)} .tk-trust-sep{width:1px;height:20px;background:var(--hairline-strong)} /* Cards grid */ .tkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .tkcard{display:flex;flex-direction:column;padding:24px 22px;border-radius:20px;border:1px solid rgba(231,206,148,.16);background:linear-gradient(168deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 30px 70px -40px #000,inset 0 1px rgba(255,255,255,.05);transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s} .tkcard:hover{transform:translateY(-6px);border-color:rgba(231,206,148,.45);box-shadow:0 46px 92px -38px #000,0 0 64px -26px rgba(231,206,148,.3)} .tkcard-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .tkcard-num{font-family:var(--font-data);font-size:16px;font-weight:800;color:#f6e4af;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(231,206,148,.5);border-radius:11px;background:rgba(231,206,148,.1);box-shadow:inset 0 0 16px -6px rgba(231,206,148,.5);flex-shrink:0} .tkcard-label{font-family:var(--font-label);font-size:14.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:900;color:#f7e6b3;text-shadow:0 0 20px rgba(231,206,148,.45)} .tkcard-h{font-family:var(--font-display);font-size:25px;font-weight:800;color:#fdfcff;line-height:1.16;margin-bottom:20px} .tkcard-h em{font-style:italic;background:linear-gradient(120deg,#f6e8c4,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .tkcard-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-family:var(--font-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--gold);background:transparent;border:1px solid rgba(231,206,148,.3);border-radius:12px;padding:14px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease-spring)} .tkcard-cta:hover{background:rgba(231,206,148,.1);border-color:rgba(231,206,148,.6);transform:translateY(-1px)} .tkcard-cta svg{width:15px;height:15px;transition:transform .3s var(--ease-spring)} .tkcard-cta:hover svg{transform:translateX(3px)} /* Card 1 — candlestick chart */ .tk-chart{border:1px solid var(--hairline);border-radius:14px;background:linear-gradient(180deg,#0d0c12,#090810);padding:12px 12px 6px;margin-bottom:18px} .tk-chart-photo{padding:0;overflow:hidden} .tk-chart-img{display:block;width:100%;height:200px;object-fit:cover;object-position:center 42%} .tk-candles{width:100%;height:172px;display:block} .tk-candles>line{stroke:rgba(255,255,255,.07);stroke-dasharray:4 5;stroke-width:1} .tk-candles .up rect{fill:rgba(234,234,244,.92)} .tk-candles .up line{stroke:rgba(234,234,244,.6);stroke-width:1.4} .tk-candles .dn rect{fill:rgba(120,123,140,.85)} .tk-candles .dn line{stroke:rgba(120,123,140,.6);stroke-width:1.4} .tk-axis{display:flex;justify-content:space-between;padding:8px 4px 2px;font-family:var(--font-data);font-size:9.5px;color:var(--ink-faint);font-weight:600} .tk-feats4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px} .tk-feats4>div{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--ink-soft);line-height:1.25} .tk-fi{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(231,206,148,.1);border:1px solid rgba(231,206,148,.2)} .tk-fi svg{width:17px;height:17px} /* Card 2 — plan builder */ .tk-builder{display:grid;grid-template-columns:1fr 1.08fr;gap:12px;margin-bottom:20px} .tk-form{display:flex;flex-direction:column;gap:10px} .tk-field label{display:block;font-family:var(--font-label);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:700;margin-bottom:5px} .tk-select{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:9px;background:#ffffff05;font-family:var(--font-data);font-size:13px;font-weight:700;color:var(--ink)} .tk-select svg{width:13px;height:13px;color:var(--ink-muted)} .tk-genbtn{margin-top:4px;text-align:center;font-family:var(--font-label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f6e3b8,#e7ce94 45%,#d6a850);border-radius:9px;padding:12px;box-shadow:0 10px 26px -10px rgba(202,160,90,.7)} .tk-plan{border:1px solid rgba(231,206,148,.22);border-radius:12px;background:linear-gradient(168deg,rgba(231,206,148,.06),rgba(255,255,255,.01));padding:14px} .tk-plan-label{font-family:var(--font-label);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:8px} .tk-plan-big{font-family:var(--font-display);font-size:19px;font-weight:700;color:#fdfcff;line-height:1.1} .tk-plan-odds{font-family:var(--font-ui);font-size:12px;font-weight:700;color:#4ade80;margin-top:3px} .tk-plan-chart{height:42px;margin:10px 0} .tk-plan-chart svg{width:100%;height:100%;display:block} .tk-plan-stats{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0} .tk-plan-stats li{display:flex;align-items:center;gap:9px} .tk-si{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(231,206,148,.1);flex-shrink:0} .tk-si svg{width:14px;height:14px} .tk-plan-stats b{display:block;font-family:var(--font-ui);font-size:10.5px;font-weight:600;color:var(--ink-muted);line-height:1.2} .tk-plan-stats span{font-family:var(--font-data);font-size:13px;font-weight:800;color:var(--ink)} /* Card 3 — checklist */ .tk-checkwrap{display:grid;grid-template-columns:1fr 116px;gap:14px;margin-bottom:20px;align-items:stretch} .tk-checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0} .tk-checks li{display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-soft)} .tk-chk{width:20px;height:20px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 12px -2px rgba(34,197,94,.6)} .tk-chk svg{width:12px;height:12px;color:#06210f} .tk-approved{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid rgba(34,197,94,.35);border-radius:14px;background:radial-gradient(120% 80% at 50% 0,rgba(34,197,94,.16),rgba(34,197,94,.02));box-shadow:inset 0 0 30px -10px rgba(34,197,94,.4)} .tk-shield{width:54px;height:54px;color:#4ade80;filter:drop-shadow(0 0 14px rgba(34,197,94,.6))} .tk-shield svg{width:100%;height:100%} .tk-approved-t{font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:#4ade80;text-align:center;line-height:1.25} /* Bottom feature bar */ .tk-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:30px;padding:20px 26px;border:1px solid var(--hairline);border-radius:18px;background:linear-gradient(168deg,rgba(255,255,255,.04),rgba(255,255,255,.012))} .tk-bf{display:flex;align-items:center;gap:12px;flex:1;min-width:180px} .tk-bf-i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--gold);background:rgba(231,206,148,.1);border:1px solid rgba(231,206,148,.2);flex-shrink:0} .tk-bf-i svg{width:19px;height:19px} .tk-bf b{display:block;font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink)} .tk-bf span{font-family:var(--font-ui);font-size:11.5px;color:var(--ink-muted)} .tk-bf-sep{width:1px;height:38px;background:var(--hairline);flex-shrink:0} @media(max-width:1080px){ .tkgrid{grid-template-columns:1fr;max-width:620px;margin:0 auto} .tk-bf-sep{display:none} .tk-bottom{justify-content:flex-start} } @media(max-width:560px){ .tk-feats4{grid-template-columns:repeat(2,1fr)} .tk-builder{grid-template-columns:1fr} .tk-trust{gap:10px}.tk-trust-sep{display:none} .tk-bf{min-width:calc(50% - 12px)} } /* ===== macOS-style dock magnification on the bottom feature bar ===== */ .tk-bottom{transform-style:preserve-3d} .tk-bf{transition:transform .2s cubic-bezier(.22,1,.36,1);transform-origin:center bottom;will-change:transform} .tk-bf.dock-on{transition:transform .12s cubic-bezier(.22,1,.36,1)} /* ===== Hero 2-column layout with 3D key ===== */ .hero-wrap.hero-2col{flex-direction:row;align-items:center;justify-content:space-between;gap:40px;max-width:1200px;text-align:left} .hero-2col .hero-copy{text-align:left;max-width:600px;margin:0;flex:1 1 auto} .hero-2col .hero-copy::before{left:30%} .hero-2col .hero-sub{margin:0 0 34px} .hero-2col .hero-title{margin-left:0;margin-right:0} .hero-key{position:relative;flex:0 0 46%;max-width:520px;width:46%;height:520px;display:flex;align-items:center;justify-content:center;overflow:visible} /* Ambient gold/violet glow behind the luminous key */ .hero-key-aura{position:absolute;top:46%;left:50%;width:88%;height:88%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 46%,rgba(255,206,128,.34),rgba(231,180,110,.22) 32%,rgba(202,160,90,.12) 55%,transparent 74%);filter:blur(38px);z-index:0;animation:keyAura 6.5s ease-in-out infinite;pointer-events:none} .hero-key-real{position:relative;z-index:2;height:90%;width:auto;max-width:92%;object-fit:contain;animation:keyFloat 7s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(231,180,110,.45)) drop-shadow(0 14px 28px rgba(0,0,0,.5))} @keyframes keyAura{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}} /* The glowing key — light spilling through a key-shaped opening */ .hero-key-svg{position:relative;z-index:2;height:90%;width:auto;animation:keyFloat 7s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,247,224,.95)) drop-shadow(0 0 34px rgba(255,210,140,.7)) drop-shadow(0 0 72px rgba(231,180,110,.5)) drop-shadow(0 0 130px rgba(231,180,110,.32))} /* Glass key — exact brand key shape (masked) with a translucent gold glass material */ .hero-key-glass{position:relative;z-index:2;width:min(84%,440px);aspect-ratio:1/1; -webkit-mask:url("../img/logo.png") center/contain no-repeat;mask:url("../img/logo.png") center/contain no-repeat; background:linear-gradient(152deg,rgba(255,249,228,.97) 0%,rgba(244,214,150,.9) 30%,rgba(214,170,97,.92) 58%,rgba(168,126,66,.95) 82%,rgba(120,88,46,.96) 100%); filter:drop-shadow(0 0 9px rgba(231,180,110,.42)) drop-shadow(0 14px 30px rgba(0,0,0,.55)); animation:keyFloat 7s ease-in-out infinite} .hkg-sheen,.hkg-rim{position:absolute;inset:0;-webkit-mask:url("../img/logo.png") center/contain no-repeat;mask:url("../img/logo.png") center/contain no-repeat;pointer-events:none} /* bright diagonal glass sheen + soft top-left specular */ .hkg-sheen{background:linear-gradient(133deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.32) 16%,rgba(255,255,255,0) 40%),radial-gradient(58% 42% at 30% 20%,rgba(255,255,255,.65),transparent 62%);mix-blend-mode:screen;opacity:.9} /* darker lower edge for depth + thin inner rim light */ .hkg-rim{background:linear-gradient(330deg,rgba(60,40,15,.55) 0%,rgba(60,40,15,0) 34%),linear-gradient(133deg,transparent 0%,transparent 92%,rgba(255,255,255,.5) 100%);mix-blend-mode:multiply;opacity:.55} .hero-key-svg .hkk{animation:keyPulse 4.5s ease-in-out infinite} @keyframes keyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} @keyframes keyPulse{0%,100%{opacity:.92}50%{opacity:1}} /* Light pooling on the floor at the key's base */ .hero-key-floor{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:62%;height:54px;background:radial-gradient(ellipse at center,rgba(255,224,160,.55),rgba(231,180,110,.2) 45%,transparent 72%);filter:blur(11px);z-index:1;animation:keyAura 6.5s ease-in-out infinite;pointer-events:none} @media(prefers-reduced-motion:reduce){.hero-key-aura,.hero-key-svg,.hero-key-floor{animation:none}} @media(max-width:900px){ .hero-wrap.hero-2col{flex-direction:column;text-align:center;gap:8px;max-width:760px} .hero-2col .hero-copy{text-align:center;max-width:680px} .hero-2col .hero-sub{margin:0 auto 30px} .hero-2col .hero-eyebrow{margin-left:auto;margin-right:auto} .hero-key{order:2;flex:none;width:100%;max-width:380px;height:360px} } @media(max-width:560px){ .hero-key{height:300px;max-width:320px} } /* ===== Products in the #41 card layout ===== */ .slide-products{min-height:auto;padding:48px 24px;align-items:center} .rv-grid-3{grid-template-columns:repeat(3,1fr);max-width:1080px;margin-left:auto;margin-right:auto} .rvcard-foot-cta{justify-content:flex-start} .rvcard-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--rc);background:transparent;border:1px solid color-mix(in srgb,var(--rc) 38%,var(--hairline));border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease-spring)} .rvcard-cta:hover{background:color-mix(in srgb,var(--rc) 12%,transparent);border-color:var(--rc);transform:translateY(-1px)} .rvcard-cta svg{width:14px;height:14px;transition:transform .3s var(--ease-spring)} .rvcard-cta:hover svg{transform:translateX(3px)} @media(max-width:920px){.rv-grid-3{grid-template-columns:1fr 1fr;max-width:680px}} @media(max-width:600px){.rv-grid-3{grid-template-columns:1fr;max-width:420px}} /* Desktop: 6-col track so the 2nd row (products IV & V) sits centered under row 1 */ @media(min-width:921px){ .rv-grid.rv-grid-3{grid-template-columns:repeat(6,1fr)} .rv-grid.rv-grid-3 > .rvcard:nth-child(1){grid-column:1 / span 2} .rv-grid.rv-grid-3 > .rvcard:nth-child(2){grid-column:3 / span 2} .rv-grid.rv-grid-3 > .rvcard:nth-child(3){grid-column:5 / span 2} .rv-grid.rv-grid-3 > .rvcard:nth-child(4){grid-column:2 / span 2} .rv-grid.rv-grid-3 > .rvcard:nth-child(5){grid-column:4 / span 2} } /* ============================================================ REVIEWS / CARD GRID — glowing themed icons (restored) ============================================================ */ .slide-reviews{min-height:auto;padding:44px 24px;align-items:center} .reviews-wrap{max-width:1180px;width:100%;margin:0 auto} .rv-head{text-align:center;margin-bottom:34px} .rv-title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);font-weight:700;color:var(--ink);line-height:1.1} .rv-title em{font-style:italic;background:linear-gradient(120deg,#f6e8c4,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* Product-section intro — clean Apple-style product header */ .rv-head-intro{margin-bottom:clamp(48px,6.5vw,88px);padding-top:clamp(24px,5vw,64px);text-align:center} .px-intro-title{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif; font-weight:800;font-size:clamp(40px,7.2vw,88px);letter-spacing:-.032em;line-height:1.03;color:#fff;margin:0} .px-intro-sub{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif; font-weight:400;font-size:clamp(18px,2.5vw,30px);letter-spacing:-.012em;line-height:1.3;color:var(--ink-muted);margin:clamp(12px,1.6vw,22px) auto 0;max-width:780px} /* Apple-style blur reveal for the intro header */ .rv-head-intro.reveal{opacity:0;filter:blur(14px);transform:translateY(50px) scale(.98); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform,filter} .rv-head-intro.reveal.in{opacity:1;filter:blur(0);transform:translateY(0) scale(1)} @media(prefers-reduced-motion:reduce){.rv-head-intro.reveal{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}} .rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rvcard{--rc:#e7ce94;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--hairline);background:linear-gradient(180deg,#100e16,#0a0910);transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s} .rvcard:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--rc) 45%,transparent);box-shadow:0 40px 80px -38px #000,0 0 56px -24px color-mix(in srgb,var(--rc) 60%,transparent)} /* Cinematic pointer-tracking 3D tilt + cursor-following spotlight (product showcase) */ /* Reveal + tilt are driven through custom properties so the slow staggered entrance (--rev-y/--rev-s, .85s) and the fast pointer tilt (--rx/--ry/--tz/--sc, .24s) never fight over a single `transform` transition. Registered so they interpolate. */ @property --rx{syntax:'';initial-value:0deg;inherits:false} @property --ry{syntax:'';initial-value:0deg;inherits:false} @property --tz{syntax:'';initial-value:0px;inherits:false} @property --sc{syntax:'';initial-value:1;inherits:false} @property --rev-y{syntax:'';initial-value:0px;inherits:false} @property --rev-s{syntax:'';initial-value:1;inherits:false} #products .rvcard{--rx:0deg;--ry:0deg;--tz:0px;--sc:1;--rev-y:0px;--rev-s:1;--spot-x:50%;--spot-y:38%; transform:perspective(1150px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc(var(--tz) + var(--rev-y))) scale(calc(var(--sc) * var(--rev-s))); transform-style:preserve-3d;will-change:transform,opacity,filter; transition:--rx .24s cubic-bezier(.22,1,.36,1),--ry .24s cubic-bezier(.22,1,.36,1),--tz .24s cubic-bezier(.22,1,.36,1),--sc .24s cubic-bezier(.22,1,.36,1),--rev-y .85s cubic-bezier(.16,1,.3,1) var(--rev-delay,0s),--rev-s .85s cubic-bezier(.16,1,.3,1) var(--rev-delay,0s),opacity .85s cubic-bezier(.16,1,.3,1) var(--rev-delay,0s),filter .85s cubic-bezier(.16,1,.3,1) var(--rev-delay,0s),box-shadow .5s ease,border-color .5s ease} /* Staggered wave entrance — hidden until the IntersectionObserver adds .in */ #products .rvcard.reveal{opacity:0;filter:blur(14px);--rev-y:54px;--rev-s:.97} #products .rvcard.reveal.in{opacity:1;filter:blur(0);--rev-y:0px;--rev-s:1} .rv-grid .rvcard:nth-child(2){--rev-delay:.15s} .rv-grid .rvcard:nth-child(3){--rev-delay:.3s} .rv-grid .rvcard:nth-child(4){--rev-delay:.15s} .rv-grid .rvcard:nth-child(5){--rev-delay:.3s} #products .rvcard:hover{--tz:-10px;--sc:1.028;box-shadow:0 50px 100px -40px #000,0 0 70px -22px color-mix(in srgb,var(--rc) 65%,transparent)} #products .rvcard::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0; transition:opacity .45s ease;mix-blend-mode:soft-light; background:radial-gradient(320px circle at var(--spot-x) var(--spot-y),color-mix(in srgb,var(--rc) 60%,transparent),transparent 60%)} #products .rvcard:hover::before{opacity:.9} .rv-gold{--rc:#e7ce94}.rv-red{--rc:#ff6f77}.rv-violet{--rc:#9b7bff}.rv-teal{--rc:#5fe1d6}.rv-amber{--rc:#f0a868} .rvcard-glow{position:relative;height:150px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 12%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 68%);border-bottom:1px solid var(--hairline)} .rvcard-icon{color:var(--rc);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--rc) 75%,transparent))} .rvcard-icon svg{width:62px;height:62px;display:block} .rvcard-who{display:flex;align-items:center;gap:12px;padding:14px 20px 0} .rvcard-av{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:13px;font-weight:800;color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 50%,transparent);background:color-mix(in srgb,var(--rc) 10%,transparent)} .rvcard-who{align-items:center;justify-content:flex-start} .rvcard-id{display:flex;flex-direction:column;gap:4px;border:none;background:none;text-align:left;align-items:flex-start} /* Premium, high-authority product title — dominant, bold, accent glow, no box */ .rvcard-name{font-family:'Poppins','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-style:normal;font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:.01em;text-transform:uppercase;line-height:1.1;color:#fff;border:none;background:none;text-shadow:0 0 22px color-mix(in srgb,var(--rc) 40%,transparent)} .rvcard-no{font-family:var(--font-label);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-muted)} .rvcard-body{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1} .rvcard-tag{display:flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-muted);margin-bottom:12px} .rvcard-tag i{width:7px;height:7px;border-radius:50%;background:var(--rc);flex-shrink:0;box-shadow:0 0 8px var(--rc)} .rvcard-q{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;font-style:normal;font-size:21px;font-weight:700;letter-spacing:-.02em;color:#fdfcff;line-height:1.2;margin-bottom:9px} .rvcard-txt{font-family:var(--font-ui);font-size:13.5px;color:var(--ink-muted);line-height:1.6} .rvcard-rule{height:1px;background:var(--hairline);margin:16px 0 14px;margin-top:auto} .rvcard-foot{display:flex;align-items:center;justify-content:space-between} .rvcard-stars{font-size:14px;letter-spacing:2px;color:#e7ce94} .rvcard-star-o{color:var(--ink-ghost)} .rvcard-badge{font-family:var(--font-label);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#1a1407;background:linear-gradient(135deg,#f6e3b8,#e7ce94);border-radius:6px;padding:4px 9px} @media(max-width:920px){.rv-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.rv-grid{grid-template-columns:1fr}} /* ===== Premium 3:1 product cards — bold visual (top 75%) + minimal meta (25%) ===== */ .rv-grid .rvcard,.cs-grid .rvcard{min-height:462px} .rvcard-visual{flex:3 1 0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;padding:26px 22px 22px;overflow:hidden;border-bottom:1px solid var(--hairline); background:radial-gradient(125% 86% at 50% 30%,color-mix(in srgb,var(--rc) 20%,transparent),transparent 66%),linear-gradient(180deg,#100e16,#0a0910)} .rvcard-art{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center} .rvcard-art svg{width:auto;height:min(100%,176px);max-width:90%;color:var(--rc);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--rc) 44%,transparent))} /* Premium Impact-style number plate — clean shape, subtle border, soft glow, pure-white digits */ .rvcard-num{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:42px;padding:0 14px;border-radius:13px; font-family:'Anton','Impact','Haettenschweiler','Franklin Gothic Bold',sans-serif;font-weight:400;font-size:24px;line-height:1;letter-spacing:1px; color:var(--gold);text-shadow:0 0 14px color-mix(in srgb,var(--gold) 45%,transparent); background:linear-gradient(180deg,rgba(231,206,148,.1),rgba(255,255,255,.015)); border:1px solid color-mix(in srgb,var(--gold) 42%,var(--hairline)); backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25); box-shadow:inset 0 1px rgba(255,255,255,.14),0 10px 24px -12px #000,0 0 18px -7px color-mix(in srgb,var(--gold) 48%,transparent)} /* Product title — Apple SF Pro section heading (San Francisco / Inter fallback), no capsule */ .rvcard-namebadge{position:relative;z-index:2;margin-top:16px;max-width:100%;display:inline-flex;align-items:center;justify-content:center;text-align:center; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,sans-serif;font-weight:700;text-transform:none;font-size:clamp(19px,1.55vw,22px);letter-spacing:-.022em;line-height:1.12;color:#fff; background:none;border:0;padding:0 6px;cursor:pointer; text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 20px color-mix(in srgb,var(--rc) 26%,transparent); transition:color .3s,text-shadow .3s,transform .3s var(--ease-spring)} .rvcard-namebadge.is-static{cursor:default} .rvcard-namebadge:not(.is-static):hover{transform:translateY(-1px);text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 26px color-mix(in srgb,var(--rc) 48%,transparent)} .rvcard-meta{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 20px;text-align:center} .rvcard-meta .rvcard-no{font-family:var(--font-label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:color-mix(in srgb,var(--rc) 72%,var(--ink-muted))} .rvcard-benefit{font-family:var(--font-display);font-size:clamp(15px,1.25vw,17px);font-weight:600;color:#fdfcff;line-height:1.32;max-width:26ch} .rvcard-meta .rvcard-cta{margin-top:4px} /* Liquid-glass 'See Full Breakdown' button — accent fill rises + sheen sweep on hover */ .rvcard-cta.pcard-more{position:relative;overflow:hidden;isolation:isolate;background:rgba(255,255,255,.035);backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15)} .rvcard-cta.pcard-more::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:radial-gradient(120% 175% at 50% 132%,color-mix(in srgb,var(--rc) 48%,transparent),color-mix(in srgb,var(--rc) 16%,transparent) 46%,transparent 72%); transform:translateY(80%);opacity:0;transition:transform .6s var(--ease-spring),opacity .5s ease} .rvcard-cta.pcard-more::after{content:"";position:absolute;top:0;left:-65%;width:48%;height:100%;z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);transition:left .7s ease} .rvcard-cta.pcard-more:hover{color:#fff;border-color:var(--rc);transform:translateY(-2px);background:rgba(255,255,255,.05); box-shadow:0 16px 32px -14px #000,0 0 26px -8px color-mix(in srgb,var(--rc) 58%,transparent)} .rvcard-cta.pcard-more:hover::before{transform:translateY(0);opacity:1} .rvcard-cta.pcard-more:hover::after{left:125%} @media(prefers-reduced-motion:reduce){.rvcard-cta.pcard-more::before,.rvcard-cta.pcard-more::after{transition:none}} @media(max-width:600px){.rv-grid .rvcard,.cs-grid .rvcard{min-height:430px}} /* Roadmap top — replaces icon glow on the Plan Builder dashboard card */ .rvcard-roadmap{position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:18px 22px; background:radial-gradient(120% 92% at 50% 8%,color-mix(in srgb,var(--rc) 22%,transparent),transparent 70%); border-bottom:1px solid var(--hairline)} .rmap-cap{text-align:center;font-family:var(--font-label);font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:color-mix(in srgb,var(--rc) 82%,var(--ink))} .rmap{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:0 2px} .rmap::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--rc) 60%,transparent) 0 6px,transparent 6px 12px)} .rmap-node{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px} .rmap-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:12px;font-weight:800;color:var(--rc);background:#0c0b12;border:1.5px solid color-mix(in srgb,var(--rc) 55%,transparent);box-shadow:0 0 0 4px #0c0b12} .rmap-dot svg{width:15px;height:15px} .rmap-node.is-goal .rmap-dot{color:#15110a;border-color:transparent;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 92%,#fff),var(--rc));box-shadow:0 0 0 4px #0c0b12,0 0 16px -2px var(--rc)} .rmap-lbl{font-family:var(--font-label);font-size:8px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--ink-muted)} .rmap-node.is-goal .rmap-lbl{color:var(--rc)} .rmap-note{text-align:center;font-family:var(--font-ui);font-size:10.5px;line-height:1.45;color:var(--ink-faint)} /* Coming Soon — upcoming products (same rvcard language, muted + locked) */ .cs-head{text-align:center;max-width:640px;margin:0 auto 30px} .cs-title{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--ink);line-height:1.15} .cs-title em{font-style:italic;background:linear-gradient(120deg,#f6e8c4,#e7ce94 50%,#caa05a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .cs-sub{font-family:var(--font-ui);font-size:14px;color:var(--ink-muted);margin-top:10px;line-height:1.6} .cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:744px;margin:0 auto} .rvcard.coming-soon{position:relative} .coming-soon .rvcard-icon{opacity:.72} .coming-soon .rvcard-name{color:var(--ink-soft)} .cs-badge{position:absolute;top:13px;right:13px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-soft);background:rgba(255,255,255,.06);border:1px solid var(--hairline-strong);border-radius:999px;padding:5px 11px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .cs-badge i{width:6px;height:6px;border-radius:50%;background:var(--rc);box-shadow:0 0 8px var(--rc);animation:csPulse 1.8s ease-in-out infinite} @keyframes csPulse{0%,100%{opacity:1}50%{opacity:.32}} .cs-cta{display:inline-flex;align-items:center;gap:7px;color:var(--ink-muted);border-color:var(--hairline-strong);background:rgba(255,255,255,.03);cursor:default} .cs-cta:hover{transform:none;background:rgba(255,255,255,.03);border-color:var(--hairline-strong)} .cs-cta svg{width:13px;height:13px} @media(max-width:560px){.cs-grid{grid-template-columns:1fr;max-width:420px}} /* ============================================================ Premium product showcase — alternating split rows + 3-step flow ============================================================ */ .psx-wrap{max-width:1160px;width:100%;margin:0 auto} .psx-item{--rc:#e7ce94;margin-top:84px} .psx-item:first-of-type{margin-top:40px} /* split row */ .psx-row{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} .psx-rev .psx-media{order:2} /* media / device frame — consistent scale across all products */ .psx-media{width:100%} .psx-frame{position:relative;width:100%;aspect-ratio:16/11;border-radius:20px;overflow:hidden; background:linear-gradient(180deg,#111019,#0a0910); border:1px solid color-mix(in srgb,var(--rc) 24%,var(--hairline)); box-shadow:0 50px 90px -46px #000,0 0 70px -40px color-mix(in srgb,var(--rc) 60%,transparent); transition:transform .5s var(--ease-spring),box-shadow .5s} .psx-row:hover .psx-frame{transform:translateY(-5px);box-shadow:0 60px 110px -44px #000,0 0 90px -36px color-mix(in srgb,var(--rc) 70%,transparent)} .psx-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px rgba(255,255,255,.08)} .psx-chrome{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:7px;padding:0 16px;z-index:2;background:linear-gradient(180deg,rgba(10,10,14,.85),rgba(10,10,14,0));backdrop-filter:blur(4px)} .psx-chrome i{width:9px;height:9px;border-radius:50%;background:#ffffff26} .psx-chrome i:first-child{background:color-mix(in srgb,var(--rc) 70%,#0000)} .psx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} /* pure-CSS checklist mockup (no real screenshot) */ .psx-frame-mock{background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--rc) 14%,#0c0b12),#08070c)} .psx-mock{position:absolute;inset:34px 22px 22px;display:flex;flex-direction:column;gap:13px;font-family:var(--font-ui)} .psx-mock-head{display:flex;align-items:center;justify-content:space-between} .psx-mock-title{font-family:'Poppins',var(--font-data),sans-serif;font-weight:800;font-size:15px;color:#fff;letter-spacing:.01em} .psx-mock-pill{font-family:var(--font-label);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0b1410;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 90%,#fff),var(--rc));border-radius:999px;padding:5px 11px} .psx-mock-list{display:flex;flex-direction:column;gap:9px;list-style:none} .psx-mock-list li{display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;color:var(--ink-muted);padding:9px 12px;border-radius:11px;background:#ffffff06;border:1px solid var(--hairline)} .psx-mock-list li span{width:17px;height:17px;border-radius:6px;flex-shrink:0;border:1.5px solid var(--hairline-ink)} .psx-mock-list li.on{color:var(--ink-soft);border-color:color-mix(in srgb,var(--rc) 32%,var(--hairline));background:color-mix(in srgb,var(--rc) 8%,transparent)} .psx-mock-list li.on span{border-color:var(--rc);background:var(--rc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat} .psx-mock-score{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-radius:11px;background:color-mix(in srgb,var(--rc) 10%,transparent);border:1px solid color-mix(in srgb,var(--rc) 28%,var(--hairline))} .psx-mock-score span{font-family:var(--font-label);font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)} .psx-mock-score strong{font-family:'Poppins',var(--font-data),sans-serif;font-size:13px;color:var(--rc)} /* content column */ .psx-content{text-align:left} .psx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--rc);margin-bottom:16px} .psx-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;font-family:var(--font-data);font-size:12px;font-weight:800;color:var(--rc);border:1px solid color-mix(in srgb,var(--rc) 50%,transparent);background:color-mix(in srgb,var(--rc) 10%,transparent);box-shadow:0 0 18px -6px color-mix(in srgb,var(--rc) 70%,transparent)} .psx-title{font-family:'Poppins',var(--font-data),sans-serif;font-size:clamp(26px,3.3vw,40px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:#fff;margin-bottom:10px} .psx-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(15px,1.5vw,18px);color:color-mix(in srgb,var(--rc) 78%,var(--ink));margin-bottom:18px} .psx-txt{font-family:var(--font-ui);font-size:15px;line-height:1.78;color:var(--ink-muted);max-width:40ch;margin-bottom:22px} .psx-benefits{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px} .psx-benefits li{display:flex;align-items:flex-start;gap:11px;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.4} .psx-benefits li svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--rc);padding:3px;border-radius:6px;background:color-mix(in srgb,var(--rc) 14%,transparent);box-sizing:content-box} .psx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:26px} .psx-bestfor{font-family:var(--font-ui);font-size:12.5px;color:var(--ink-muted);line-height:1.45} .psx-bestfor b{display:block;font-family:var(--font-label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-faint);margin-bottom:2px} .psx-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-label);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--rc);padding:7px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);background:color-mix(in srgb,var(--rc) 9%,transparent)} .psx-badge svg{width:13px;height:13px} .psx-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#15110a;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 88%,#fff),var(--rc));border:none;border-radius:999px;padding:13px 24px;cursor:pointer;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--rc) 85%,transparent);transition:transform .26s var(--ease-spring),box-shadow .26s,filter .26s} .psx-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 20px 44px -14px color-mix(in srgb,var(--rc) 90%,transparent)} .psx-cta svg{width:15px;height:15px;transition:transform .26s var(--ease-spring)} .psx-cta:hover svg{transform:translateX(4px)} /* 3 simple steps to use */ .psx-steps{margin-top:40px;padding-top:36px;border-top:1px solid var(--hairline)} .psx-steps-label{text-align:center;font-family:var(--font-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--ink-muted);margin-bottom:26px} .psx-steps-label::before,.psx-steps-label::after{content:"";display:inline-block;width:26px;height:1px;vertical-align:middle;margin:0 14px;background:color-mix(in srgb,var(--rc) 50%,var(--hairline))} .psx-steps-flow{display:flex;align-items:stretch;justify-content:center;gap:0} .psx-step{flex:1;max-width:300px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:24px 22px;border-radius:18px;background:color-mix(in srgb,var(--rc) 6%,#ffffff04);border:1px solid color-mix(in srgb,var(--rc) 18%,var(--hairline));transition:transform .4s var(--ease-spring),box-shadow .4s,border-color .4s} .psx-step:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--rc) 42%,transparent);box-shadow:0 30px 60px -34px #000,0 0 50px -30px color-mix(in srgb,var(--rc) 70%,transparent)} .psx-step-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;color:var(--rc);background:color-mix(in srgb,var(--rc) 13%,transparent);border:1px solid color-mix(in srgb,var(--rc) 30%,transparent)} .psx-step-ic svg{width:23px;height:23px} .psx-step-n{font-family:var(--font-label);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:color-mix(in srgb,var(--rc) 80%,var(--ink))} .psx-step h4{font-family:'Poppins',var(--font-data),sans-serif;font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em} .psx-step p{font-family:var(--font-ui);font-size:12.5px;line-height:1.55;color:var(--ink-muted)} .psx-step-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 56px;color:color-mix(in srgb,var(--rc) 70%,var(--ink-faint))} .psx-step-arrow svg{width:24px;height:24px} /* subtle divider between products */ .psx-divider{height:1px;max-width:1160px;margin:84px auto 0;background:linear-gradient(90deg,transparent,var(--hairline-strong),transparent)} @media(max-width:880px){ .psx-row{grid-template-columns:1fr;gap:28px} .psx-rev .psx-media{order:0} .psx-content{text-align:left} .psx-txt{max-width:none} .psx-steps-flow{flex-direction:column;align-items:stretch;gap:0} .psx-step{max-width:none} .psx-step-arrow{flex-basis:auto;height:34px;transform:rotate(90deg)} } /* Distinctive numerals in "3 Tools. 1 Goal." */ .num-accent{font-family:var(--font-display),Georgia,serif;font-weight:700;font-style:italic;font-size:1.06em;letter-spacing:0;color:var(--ink);-webkit-text-fill-color:currentColor;background:none;padding:0 .02em} /* Dock magnification items (nav pill + feature bar) */ .dock-item{transition:transform .2s cubic-bezier(.22,1,.36,1);transform-origin:center bottom;will-change:transform} .dock-item.dock-on{transition:transform .1s cubic-bezier(.22,1,.36,1)} .nav-links a.dock-item{display:inline-block} /* === Cancel Subscription (admin Sales & Orders) === */ .btn-action.cancel{color:var(--vermillion);border-color:#ff5e6755;background:#ff5e6712;cursor:pointer} .btn-action.cancel:hover{background:#ff5e671f} .cancel-reason-label{text-align:left;display:block;margin-bottom:7px} .cancel-reason{font-family:var(--font-sans);font-size:13px;font-weight:500;min-height:78px;padding:10px 12px;border-radius:12px;resize:vertical;width:100%;text-align:left;margin-bottom:18px} .cancel-flag{margin-top:6px;font-family:var(--font-label);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--vermillion);cursor:help} /* Compact, tidy action buttons in the orders table */ .action-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:230px} .btn-action{font-size:8px;padding:5px 10px;letter-spacing:.06em} /* Tidy purchase date column — date over time */ .order-date{display:flex;flex-direction:column;gap:2px;line-height:1.25;white-space:nowrap} .order-date .od-date{font-weight:600} .order-date .od-time{font-size:11px;color:var(--ink-muted)} .admin-light .order-date .od-time{color:var(--tx-faint)} .cancel-modal{max-width:460px;text-align:center} .cancel-modal-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--vermillion);background:#ff5e6714;border:1px solid #ff5e6740} .cancel-modal-text{color:var(--ink-soft);font-size:14px;line-height:1.6;margin:6px 0 14px} .cancel-modal-list{list-style:none;text-align:left;max-width:320px;margin:0 auto 22px;padding:0;display:flex;flex-direction:column;gap:9px} .cancel-modal-list li{position:relative;padding-left:24px;font-size:13px;color:var(--ink-soft);line-height:1.45} .cancel-modal-list li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;background:var(--vermillion)} .cancel-modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn-danger{font-family:var(--font-label);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#ff6b73,#e0454e);border:1px solid #ff5e6766;border-radius:999px;padding:12px 22px;cursor:pointer;transition:filter .2s,transform .2s} .btn-danger:hover{filter:brightness(1.07);transform:translateY(-1px)} .admin-light .btn-action.cancel{color:#b4453c;border-color:#f0d4d1;background:#fdeceb} .admin-light .btn-action.cancel:hover{background:#fbdedb} .admin-light .cancel-reason{background:#fff;border:1px solid var(--line);color:var(--tx)} .admin-light .cancel-modal-text,.admin-light .cancel-modal-list li{color:var(--tx-soft)} /* ===== Payment Approvals — premium data table ===== */ .pay-toolbar input[name=search]{max-width:340px;flex:1 1 240px} .pay-toolbar select{max-width:170px} /* Sticky header (desktop page-scroll) + horizontal scroll on mobile */ .pay-table-wrap{overflow:visible} @media (max-width:900px){.pay-table-wrap{overflow-x:auto}} .pay-table thead th{position:sticky;top:0;z-index:5;background:var(--paper-raised)} .admin-light .pay-table thead th{background:var(--panel)} .pay-table tbody tr{transition:background .18s ease} .pay-table tbody tr.pay-row:hover td{background:rgba(125,90,255,.05)} .admin-light .pay-table tbody tr.pay-row:hover td{background:rgba(0,0,0,.025)} /* Intersection fade-in for rows */ [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)} [data-reveal].in{opacity:1;transform:none} /* User cell — avatar + name button */ .pay-user{display:inline-flex;align-items:center;gap:10px;background:none;border:none;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit} .pay-user-name{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:7px} .admin-light .pay-user-name{color:var(--tx)} .pay-user:hover .pay-user-name{text-decoration:underline} .pay-avatar{flex:none;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-label);font-weight:800;font-size:13px;color:var(--violet);background:rgba(125,90,255,.12);border:1px solid rgba(125,90,255,.2)} .pay-avatar.lg{width:52px;height:52px;font-size:20px} .admin-light .pay-avatar{color:#6d4bf0;background:#efeaff;border-color:#dcd2ff} .pay-avatar.glow{border-color:rgba(125,90,255,.6);animation:avglow 2.4s ease-in-out infinite} @keyframes avglow{0%,100%{box-shadow:0 0 0 3px rgba(125,90,255,.14),0 0 10px rgba(125,90,255,.3)}50%{box-shadow:0 0 0 3px rgba(125,90,255,.22),0 0 18px rgba(125,90,255,.5)}} /* NEW badge */ .badge-new{font-family:var(--font-label);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#8f6bff,#6d4bf0);padding:3px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 0 10px rgba(125,90,255,.45)} .badge-new .nd{font-size:7px;line-height:1;animation:ndpulse 1.6s ease-in-out infinite} @keyframes ndpulse{0%,100%{opacity:.5}50%{opacity:1}} /* New-user row tint */ .pay-row.is-new td{background:rgba(125,90,255,.06)} .admin-light .pay-row.is-new td{background:#f6f3ff} .pay-row.is-new:hover td,.admin-light .pay-row.is-new:hover td{background:#f0ebff} /* Method pills */ .method-pill{font-family:var(--font-label);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid;white-space:nowrap} .method-inr{color:#1f9d6b;border-color:#bfe6d4;background:#eafaf2} .method-usdt{color:#7d5aff;border-color:#d9ceff;background:#f2eeff} .method-bank{color:#5a6675;border-color:#d6dce4;background:#f1f4f8} /* Payment detail modal */ .pay-detail-modal .modal-panel{max-width:720px;text-align:left} .pd-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-right:40px} .pd-name{font-size:19px;margin:0;display:flex;align-items:center;gap:8px;color:var(--ink)} .admin-light .pd-name{color:var(--tx)} .pd-sub{font-size:13px;color:var(--ink-muted);margin-top:3px} .admin-light .pd-sub{color:var(--tx-faint)} .pd-status{margin-left:auto} .pd-grid{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start} .pd-shot{border-radius:14px;overflow:hidden;border:1px solid var(--hairline-strong);background:#00000010} .admin-light .pd-shot{border-color:var(--line)} .pd-shot img{display:block;width:100%;height:auto} .pd-noshot{padding:48px 16px;text-align:center;color:var(--ink-faint);font-size:13px} .pd-info{display:flex;flex-direction:column} .pd-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--hairline)} .admin-light .pd-row{border-color:var(--line-2)} .pd-row:last-child{border-bottom:none} .pd-row span{color:var(--ink-muted);font-size:11px;font-family:var(--font-label);letter-spacing:.05em;text-transform:uppercase} .admin-light .pd-row span{color:var(--tx-faint)} .pd-row strong{font-size:13px;color:var(--ink);text-align:right;font-weight:600} .admin-light .pd-row strong{color:var(--tx)} .pd-row strong.brk{word-break:break-all;max-width:62%} .pd-block{margin-top:22px} .pd-block h4{font-family:var(--font-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 10px} .admin-light .pd-block h4{color:var(--tx-faint)} .pd-quote{font-style:italic;color:var(--ink-soft);font-size:14px;margin:0} .admin-light .pd-quote{color:var(--tx-soft)} .pd-history{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .pd-history li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)} .admin-light .pd-history li{color:var(--tx-soft)} .pd-history em{color:var(--ink-muted);font-style:normal;margin-left:4px} .pd-history .dot{width:8px;height:8px;border-radius:50%;flex:none} .dot-blue{background:#6d4bf0}.dot-green{background:#1f9d6b}.dot-red{background:#e0454e}.dot-amber{background:#e0a32e} .pd-note-save{margin-top:8px} .pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--hairline)} .admin-light .pd-actions{border-color:var(--line)} .btn-approve-lg{font-family:var(--font-label);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#34d39a,#11a36b);border:1px solid #11a36b66;border-radius:999px;padding:12px 22px;cursor:pointer;text-decoration:none;transition:filter .2s,transform .2s} .btn-approve-lg:hover{filter:brightness(1.06);transform:translateY(-1px)} /* Empty state */ .empty-state{text-align:center;padding:54px 20px} .empty-ill{width:72px;height:72px;margin:0 auto 18px;color:var(--ink-faint);opacity:.7} .admin-light .empty-ill{color:var(--tx-faint)} .empty-ill svg{width:100%;height:100%} .empty-state h3{font-size:17px;margin:0 0 6px;color:var(--ink)} .admin-light .empty-state h3{color:var(--tx)} .empty-state p{font-size:13px;color:var(--ink-muted);margin:0} .pay-empty-row:hover td{background:none!important} @media (max-width:760px){ .pd-grid{grid-template-columns:1fr} .pay-toolbar input[name=search]{max-width:none} } /* ===== Reusable Liquid Glass button — shared by ALL payment / checkout CTAs ===== */ .btn-liquid{position:relative;isolation:isolate;overflow:hidden; --lq-a:rgba(243,212,140,.92);--lq-b:rgba(202,160,90,.94);--lq-ink:#1a1407; --lq-shade:rgba(120,80,20,.5);--lq-glow:rgba(202,160,90,.6);--lq-bd:rgba(255,255,255,.42);--lq-bd-h:rgba(255,255,255,.66); display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif; font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--lq-ink);text-decoration:none;cursor:pointer; border:1px solid var(--lq-bd);border-radius:18px; background:linear-gradient(140deg,var(--lq-a),var(--lq-b)); -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 18px -10px var(--lq-shade),0 16px 40px -14px var(--lq-glow),0 2px 8px -3px rgba(0,0,0,.3); transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .4s cubic-bezier(.22,1,.36,1)} /* gloss sheen + liquid light sweep sit below the label (z-index:-1 within the isolated stacking context) */ .btn-liquid::before{content:"";position:absolute;left:0;right:0;top:0;height:54%;z-index:-1;pointer-events:none; border-radius:18px 18px 50% 50%/18px 18px 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06) 58%,transparent);opacity:.85;transition:opacity .4s ease} .btn-liquid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit; background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.55) 48%,transparent 74%);background-size:240% 100%;background-position:165% 0;opacity:0;transition:opacity .4s ease} .btn-liquid:hover{transform:scale(1.03);border-color:var(--lq-bd-h); box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -8px 20px -10px var(--lq-shade),0 0 30px var(--lq-glow),0 24px 56px -16px var(--lq-glow),0 2px 8px -3px rgba(0,0,0,.3)} .btn-liquid:hover::after{opacity:.9;animation:ctaLiquid 1.7s cubic-bezier(.22,1,.36,1) infinite} .btn-liquid:hover::before{opacity:1} .btn-liquid svg{transition:transform .4s cubic-bezier(.22,1,.36,1)} .btn-liquid:hover svg{transform:translateX(4px)} .btn-liquid:active{transform:scale(.99)} /* purple variant — for the hero "Get Access Now" palette */ .btn-liquid.lq-violet{--lq-a:rgba(140,110,255,.85);--lq-b:rgba(106,71,230,.82);--lq-ink:#fff;--lq-shade:rgba(60,32,140,.6);--lq-glow:rgba(125,90,255,.62)} @media(prefers-reduced-motion:reduce){.btn-liquid,.btn-liquid::before,.btn-liquid::after{transition:none}.btn-liquid:hover{transform:none}.btn-liquid:hover::after{animation:none}} /* ===== Admin payments — CRM section tabs (Paid / Pending / Rejected) ===== */ .admin-light .pay-tabs{display:inline-flex;flex-wrap:wrap;gap:5px;background:var(--accent-soft);border:1px solid var(--line);border-radius:14px;padding:5px;margin:18px 0 22px} .admin-light .pay-tab{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--tx-soft);text-decoration:none;padding:10px 17px;border-radius:10px;transition:background .25s cubic-bezier(.22,1,.36,1),color .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1)} .admin-light .pay-tab:hover{color:var(--tx);background:rgba(255,255,255,.6)} .admin-light .pay-tab.on{background:var(--panel);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.09),0 0 0 1px var(--line)} .admin-light .pay-tab em{font-style:normal;font-size:11.5px;font-weight:800;min-width:22px;height:21px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#e7e3da;color:var(--tx-soft);line-height:1} .admin-light .pay-tab.on em{background:var(--tx);color:#fff} .admin-light .pay-tab-pending.on em{background:#e6a23c;color:#fff} @media(max-width:560px){.admin-light .pay-tabs{width:100%}.admin-light .pay-tab{flex:1;justify-content:center;padding:10px 8px;font-size:12px}} /* ---- Activity timeline (grouped session view) ------------------------- */ .act-timeline{display:flex;flex-direction:column;gap:30px} .act-empty{padding:34px 4px;color:var(--tx-faint);font-size:14px} .act-day{display:flex;flex-direction:column;gap:14px} .act-day-label{font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-faint);margin:0 0 2px;padding-bottom:10px;border-bottom:1px solid var(--line)} .act-session{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.04)} .act-session-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} .act-session-no{font-family:inherit;font-size:13.5px;font-weight:800;color:var(--tx);letter-spacing:-.01em} .act-session-time{font-family:inherit;font-size:12.5px;font-weight:700;color:#a07a2b;background:#f6efdd;border:1px solid #ecdfbf;padding:3px 10px;border-radius:999px;line-height:1.3} .act-session-count{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--tx-faint)} .act-list{list-style:none;margin:0;padding:0;position:relative} .act-list::before{content:"";position:absolute;left:5px;top:7px;bottom:7px;width:1.5px;background:var(--line)} .act-item{position:relative;display:flex;gap:14px;padding:7px 0} .act-dot{flex:none;width:11px;height:11px;margin-top:4px;border-radius:50%;background:#fff;border:2.5px solid #c9a44e;z-index:1;box-shadow:0 0 0 3px var(--panel)} .act-body{flex:1;min-width:0} .act-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .act-action{font-family:inherit;font-size:14px;font-weight:600;color:var(--tx);letter-spacing:-.005em} .act-time{font-size:12px;font-weight:600;color:var(--tx-faint);font-variant-numeric:tabular-nums} .act-details{font-size:13px;color:var(--tx-soft);margin-top:3px;line-height:1.5;word-break:break-word} .act-meta{font-size:12px;color:var(--tx-faint);margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .act-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:var(--accent-soft);padding:1px 6px;border-radius:5px;color:var(--tx-soft)} .act-sep{color:var(--line);font-weight:700} @media(max-width:560px){.act-session{padding:14px}.act-session-count{margin-left:0;width:100%}}