:root{ --bg:#050505; --text:#e9f0ea; --muted:#EFF1F3; --accent:#1EFF00; /* unified brand green */ --accent-2:#1EFF00; --purple:var(--accent); --glow-x:50; /* centered */ --glow-y:58; /* slightly below center */ } /* ========================================== Light Theme (white) overrides Apply by setting data-theme="light" on ========================================== */ [data-theme="light"]{ --bg:#EFF1F3; --text:#0f1720; --muted:#475569; --accent:#18B800; /* brand green */ --accent-2:#18B800; --purple:var(--accent); } [data-theme="light"] body::after{ background:none; } [data-theme="light"] .hero::before{ background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%), radial-gradient(120vmax 70vmax at var(--gx, 0%) var(--gy1, 42%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%), radial-gradient(100vmax 60vmax at calc(var(--gx, 0%) + 38%) var(--gy2, 58%), color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%); } [data-theme="light"] .hero::after{ background: radial-gradient(46vmax 34vmax at var(--b1x, 18%) var(--b1y, 48%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%), radial-gradient(40vmax 30vmax at var(--b2x, 56%) var(--b2y, 62%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%), radial-gradient(52vmax 40vmax at var(--b3x, 84%) var(--b3y, 46%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 66%); filter:blur(24px) saturate(140%); opacity:.85; } [data-theme="light"] .btn{border-color:rgba(0,0,0,.12)} [data-theme="light"] .btn.ghost:hover{border-color:rgba(0,0,0,.22)} [data-theme="light"] .btn.solid{color:#052e13} [data-theme="light"] .and-more-word.and{color:#111827} [data-theme="light"] .ua{background:none} [data-theme="light"] .ua-col.bad h3{color:#1f2937} [data-theme="light"] .ua-step.bad{background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); color:#374151; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08)} [data-theme="light"] .ua-step.good{background:linear-gradient(180deg, rgba(24,184,0,.25), rgba(24,184,0,.15)); color:#052e13; box-shadow:inset 0 0 0 2px rgba(24,184,0,.45), 0 10px 22px rgba(24,184,0,.18)} [data-theme="light"] .ua-col.good::before{background:radial-gradient(circle at 50% 8%, rgba(24,184,0,.28), rgba(24,184,0,.14) 34%, rgba(255,255,255,0) 66%)} [data-theme="light"] .billing-toggle{background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} [data-theme="light"] .toggle{background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.14)} [data-theme="light"] .toggle .knob{background:radial-gradient(circle at 30% 30%, #ffffff, #18B800 68%); box-shadow:0 0 0 2px rgba(24,184,0,.35), 0 0 14px rgba(24,184,0,.25)} [data-theme="light"] .price-card{background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); border:1px solid rgba(0,0,0,.12); box-shadow:0 8px 18px rgba(0,0,0,.08)} [data-theme="light"] .price .currency{color:#065f46} [data-theme="light"] .price.custom .value{color:#0f1720} [data-theme="light"] .cta.outline-purple{color:#052e13; border-color:rgba(24,184,0,.35)} [data-theme="light"] .cta.outline-purple:hover{box-shadow:0 0 0 2px rgba(24,184,0,.35), 0 0 18px rgba(24,184,0,.18)} [data-theme="light"] .cta.solid-green{color:#052e13} [data-theme="light"] .price-card.featured{background:linear-gradient(180deg, rgba(24,184,0,.25), rgba(24,184,0,.15)); border:1px solid rgba(24,184,0,.45); box-shadow:inset 0 0 0 1px rgba(24,184,0,.28), 0 14px 28px rgba(24,184,0,.18)} [data-theme="light"] .contact{background:none} [data-theme="light"] .contact::before{background:none; filter:none} [data-theme="light"] .ua-left::before{background:none; filter:none} [data-theme="light"] .ua-col.good::before{background:none; filter:none} [data-theme="light"] .ua-col.bad::before{background:none; filter:none} [data-theme="light"] .contact-headline{color:#0f1720} [data-theme="light"] .contact::before{background:radial-gradient(circle 44vmax at 94% 72%, rgba(24,184,0,.18), rgba(255,255,255,0) 60%)} [data-theme="light"] .contact-points li{color:#374151} [data-theme="light"] .contact-card{background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); border:1px solid rgba(0,0,0,.12); box-shadow:0 10px 22px rgba(0,0,0,.1)} [data-theme="light"] .form-row input, [data-theme="light"] .form-row textarea{background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.12)} [data-theme="light"] .form-row input:focus, [data-theme="light"] .form-row textarea:focus{border-color:rgba(24,184,0,.45); box-shadow:0 0 0 2px rgba(24,184,0,.35), 0 0 18px rgba(24,184,0,.2); background:rgba(0,0,0,.02)} [data-theme="light"] .footer-logo{filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))} [data-theme="light"] .company-info{color:#4b5563} [data-theme="light"] .footer-nav a{color:#1f2937} [data-theme="light"] .footer-nav a:hover{color:#111827; text-shadow:0 0 10px rgba(24,184,0,.18)} [data-theme="light"] .social-icon{background:#ffffff; border:1px solid rgba(0,0,0,.08); box-shadow:0 4px 12px rgba(0,0,0,.08)} [data-theme="light"] .social-icon img{filter:none} [data-theme="light"] .social-icon:hover{background:linear-gradient(180deg, rgba(24,184,0,.18), rgba(24,184,0,.12)); box-shadow:0 0 0 2px rgba(24,184,0,.35), 0 0 18px rgba(24,184,0,.18)} [data-theme="light"] .footer-legal a{color:#1f2937} [data-theme="light"] .footer-legal a:hover{color:#111827; text-shadow:0 0 10px rgba(24,184,0,.18)} [data-theme="light"] .footer-legal .sep{color:#9ca3af} [data-theme="light"] .legal-title{color:#0f1720} [data-theme="light"] .legal h3{color:#1f2937} [data-theme="light"] .legal p, [data-theme="light"] .legal li{color:#374151} *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif; color:var(--text); background:var(--bg); overflow-x:hidden; } /* Moving green glow only behind the hero section */ .hero::before{ content:""; position:fixed; left:0; right:0; top:0; height:100vh; width:100vw; z-index:0; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%), radial-gradient(140vmax 80vmax at var(--gx, 0%) var(--gy1, 40%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), radial-gradient(110vmax 60vmax at calc(var(--gx, 0%) + 40%) var(--gy2, 60%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); filter:blur(18px) saturate(130%); pointer-events:none; animation:heroWave 40s ease-in-out infinite alternate; } .hero::after{ content:""; position:fixed; left:0; right:0; top:0; height:100vh; width:100vw; z-index:0; pointer-events:none; background: radial-gradient(46vmax 34vmax at var(--b1x, 18%) var(--b1y, 48%), color-mix(in srgb, var(--accent) 28%, transparent), transparent 62%), radial-gradient(40vmax 30vmax at var(--b2x, 56%) var(--b2y, 62%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 64%), radial-gradient(52vmax 40vmax at var(--b3x, 84%) var(--b3y, 46%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 66%); filter:blur(26px) saturate(150%); animation:lavaMove 70s ease-in-out infinite alternate; opacity:.9; } @keyframes heroWave{ 0%{ --gx: 0%; --gy1: 38%; --gy2: 62%; } 100%{ --gx: 100%; --gy1: 46%; --gy2: 54%; } } @keyframes lavaMove{ 0%{ --b1x: 16%; --b1y: 50%; --b2x: 58%; --b2y: 60%; --b3x: 86%; --b3y: 44%; } 50%{ --b1x: 24%; --b1y: 54%; --b2x: 52%; --b2y: 66%; --b3x: 78%; --b3y: 50%; } 100%{ --b1x: 30%; --b1y: 46%; --b2x: 44%; --b2y: 58%; --b3x: 70%; --b3y: 54%; } } /* removed vignette to keep circle-only glow */ /* Subtle vignette */ body::after{ content:""; position:fixed; inset:0; z-index:0; background:radial-gradient(circle at 60% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%); pointer-events:none; } .site-header{position:relative; z-index:1;} .nav{ max-width:1280px; margin:0 auto; padding:20px clamp(16px,3vw,32px); display:flex; align-items:center; gap:24px; justify-content:space-between; } .brand{display:flex; align-items:center} .brand .logo{height:clamp(28px, 5.2vw, 44px); width:auto; display:block} .menu{display:flex; gap:22px; align-items:center} .menu a{color:var(--muted); text-decoration:none; font-weight:500; font-size:14px} .menu a:hover{color:var(--text)} .actions{display:flex; gap:10px} .btn{font-family:inherit; font-size:14px; padding:8px 14px; border-radius:10px; cursor:pointer; border:1px solid rgba(255,255,255,.18); background:transparent; color:var(--text)} .btn.solid{background:linear-gradient(180deg, var(--accent), var(--accent-2)); border:none; color:#0b2b10; font-weight:700} .btn.ghost:hover{border-color:rgba(255,255,255,.35)} .hero{ position:relative; isolation:isolate; max-width:1440px; margin:0 auto 120px; padding:0 clamp(16px,3vw,32px); min-height:72vh; display:grid; align-items:start; grid-template-columns:1.5fr .5fr; } .hero-copy{z-index:2; margin-top:8vh; padding-left:3vw} .hero h1{ font-family:"Bebas Neue", sans-serif; font-size:clamp(48px, 7.4vw, 116px); line-height:.93; margin:0 0 16px; letter-spacing:1px; text-shadow:0 2px 0 rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.28); } [data-theme="light"] .hero h1{ text-shadow:0 1px 0 rgba(0,0,0,.04), 0 8px 18px rgba(0,0,0,.18) } .hero .accent{color:var(--accent)} .hero .accent-purple{color:var(--purple)} .subhead{color:var(--muted); font-size:clamp(14px,1.5vw,20px); margin:10px 0 0} /* Hero waitlist card (glass) */ .waitlist-wrap{margin:24px 0 0; max-width:980px; padding:22px 20px; border-radius:20px; position:absolute; left:50%; transform:translateX(-50%); top:clamp(340px, 50vh, 620px); z-index:3; background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.18); box-shadow:0 22px 60px rgba(0,0,0,.55); backdrop-filter:blur(12px) saturate(150%); } .waitlist-wrap::before{content:""; position:absolute; inset:-10px; border-radius:24px; pointer-events:none; background:radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(255,255,255,.22), rgba(0,0,0,0) 70%); filter:blur(18px); opacity:.9} .waitlist-title{font-family:"Bebas Neue", sans-serif; letter-spacing:1px; margin:0 0 6px; font-size:clamp(26px,4.4vw,40px); text-align:center} .waitlist-sub{color:var(--muted); margin:0 0 14px; text-align:center; font-size:clamp(13px,1.4vw,16px)} [data-theme="light"] .waitlist-sub{color:#0f1720} .waitlist-wrap .waitlist-card{margin-left:auto; margin-right:auto} .waitlist-card{ margin:18px 0 0; display:flex; gap:12px; align-items:center; width:min(740px, 100%); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px; box-shadow:0 12px 26px rgba(0,0,0,.35); position:relative; } .waitlist-card::before{ content:""; position:absolute; inset:-6px; border-radius:20px; pointer-events:none; background:radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(30,255,0,.25), rgba(0,0,0,0) 70%); filter:blur(16px); opacity:.85; } .waitlist-card input{ flex:1 1 auto; min-width:0; color:var(--text); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:999px; height:56px; padding:0 24px; font-size:18px; outline:none; transition:box-shadow .2s ease, border-color .2s ease, background .2s ease; } .waitlist-card input::placeholder{color:#c7cfc9} .waitlist-card input:focus{ border-color:rgba(30,255,0,.55); box-shadow:0 0 0 2px rgba(30,255,0,.5), 0 0 22px rgba(30,255,0,.28); background:rgba(255,255,255,.08) } .waitlist-card .cta{flex:0 0 auto; width:auto; white-space:nowrap; border-radius:999px; height:56px; padding:0 22px; font-size:15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #D9FF66, #C7F955); color:#0b2b10; border:none;} .waitlist-card .cta:hover{filter:saturate(115%)} @media (max-width: 520px){ .waitlist-card{flex-direction:column; align-items:stretch} .waitlist-card .cta{width:100%} } /* Tighter, cleaner mobile layout for the waitlist module */ @media (max-width: 540px){ .waitlist-wrap{padding:16px 14px; border-radius:16px; margin:18px auto 0; box-shadow:0 12px 30px rgba(0,0,0,.4)} .waitlist-wrap::before{opacity:.55; filter:blur(12px)} .waitlist-title{margin-bottom:4px} .waitlist-sub{margin:0 0 10px; line-height:1.45} .waitlist-card{gap:8px; padding:6px; border-radius:14px; box-shadow:0 10px 22px rgba(0,0,0,.35)} .waitlist-card::before{opacity:.6; filter:blur(12px)} .waitlist-card input{height:48px; padding:0 16px; font-size:16px} .waitlist-card .cta{height:48px; font-size:16px; padding:0 18px} } @media (max-width: 360px){ .waitlist-card input, .waitlist-card .cta{height:44px} } @media (max-width: 980px){ .waitlist-wrap{position:static; left:auto; transform:none; top:auto; margin:26px auto 0} } [data-theme="light"] .waitlist-card{background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.42)); border:1px solid rgba(0,0,0,.10); box-shadow:0 12px 24px rgba(0,0,0,.12);} [data-theme="light"] .waitlist-card::before{background:radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(24,184,0,.22), rgba(0,0,0,0) 70%)} [data-theme="light"] .waitlist-card input{background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.12); color:#0f1720} [data-theme="light"] .waitlist-card input:focus{border-color:rgba(24,184,0,.45); box-shadow:0 0 0 2px rgba(24,184,0,.35), 0 0 18px rgba(24,184,0,.2)} [data-theme="light"] .waitlist-wrap{background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.38)); border:1px solid rgba(0,0,0,.10); box-shadow:0 18px 36px rgba(0,0,0,.14); backdrop-filter:blur(18px) saturate(160%)} [data-theme="light"] .waitlist-wrap::before{background:radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(255,255,255,.16), rgba(0,0,0,0) 70%); opacity:.9; filter:blur(16px)} [data-theme="light"] .waitlist-card .cta{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#052e13; box-shadow:0 8px 18px rgba(24,184,0,.24)} [data-theme="light"] .waitlist-card input::placeholder{color:#6b7280} .hero-hashtag{ position:absolute; right:-4vw; bottom:-6vh; width:min(44vw, 720px); height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)); will-change:transform; } .icons{position:absolute; inset:0; z-index:1; pointer-events:none} .icon{position:absolute; width:clamp(64px,8vw,132px); height:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); will-change:transform; pointer-events:auto} /* Composition closer to reference */ .icon.tiktok{left:29%; top:65%; --base-rot:-18deg} .icon.youtube{left:15%; top:80%; --base-rot:8deg} .icon.instagram{left:37%; top:81%; --base-rot:10deg} .icon.facebook{left:21%; top:60%; --base-rot:-6deg} .icon.x{left:41%; top:52%; --base-rot:14deg} .icon.pinterest{left:47%; top:66%; --base-rot:-8deg} .icon.linkedin{left:53%; top:73%; --base-rot:6deg} .icon.tumblr{left:54%; top:45%; --base-rot:-6deg} /* Different icon sizes (larger) */ .icon.tiktok{width:clamp(86px,9vw,140px)} .icon.instagram{width:clamp(78px,8.4vw,130px)} .icon.youtube{width:clamp(74px,8vw,124px)} .icon.facebook{width:clamp(70px,7.4vw,118px)} .icon.x{width:clamp(66px,7vw,114px)} .icon.pinterest{width:clamp(68px,7.2vw,116px)} .icon.linkedin{width:clamp(62px,6.8vw,110px)} .icon.tumblr{width:clamp(58px,6.2vw,104px)} /* Responsive */ @media (max-width: 980px){ .hero{grid-template-columns:1fr; min-height:70vh} .hero-hashtag{position:relative; right:auto; bottom:auto; margin-top:30px; justify-self:end; width:min(68vw,620px)} .icons{position:absolute} } @media (max-width: 640px){ .menu{display:none} .actions .ghost{display:none} .hero{margin-top:10px} } /* Transforms handled in JS; keep filter transitions only */ .parallax{transition:filter .18s ease} /* Hover reaction */ .icon:hover{filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)) saturate(120%)} .hero-hashtag:hover{ transform:translate3d(0,-4px,0) scale(1.06) rotateZ(.6deg); filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)) saturate(120%); } /* Features section */ .features{position:relative; z-index:1; margin:0 auto; padding:50px clamp(16px,3vw,32px) 100px} .features-inner{max-width:1320px; margin:0 auto} .features h2{font-family:"Bebas Neue", sans-serif; font-size:clamp(32px,5.4vw,66px); letter-spacing:1px; margin:0 0 34px; text-align:center; opacity:0; transform:translateY(18px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .features h2 .accent{color:var(--accent)} .features h2.is-visible{opacity:1; transform:translateY(0)} .feature-grid{display:grid; grid-template-columns:repeat(2, minmax(440px,1fr)); gap:4px 28px; align-items:start} .feature-card{position:relative; background:transparent; border:none; border-radius:0; padding:12px 6px; box-shadow:none; transform:translateY(28px) scale(.98); opacity:0; transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0s), opacity .7s ease var(--reveal-delay, 0s)} .feature-card.is-visible{transform:translateY(0) scale(1); opacity:1} .feature-icon-wrap{width:100%; max-width:420px; margin:6px auto 12px; position:relative; background:linear-gradient(180deg, rgba(30,255,0,.28), rgba(30,255,0,.18)); border:1px solid rgba(30,255,0,.55); border-radius:22px; padding:16px; box-shadow:inset 0 0 0 1px rgba(30,255,0,.35), 0 14px 34px rgba(30,255,0,.35); display:flex; align-items:center; justify-content:center; min-height:220px} .feature-icon-wrap::before{content:""; position:absolute; inset:-6px; border-radius:24px; pointer-events:none; background:radial-gradient(60% 60% at 50% 0%, rgba(30,255,0,.35), rgba(0,0,0,0) 70%); filter:blur(16px); opacity:.85} .feature-card.purple .feature-icon-wrap{border-color:rgba(30,255,0,.55)} .feature-icon-wrap:hover{transform:translateY(-2px); transition:transform .18s ease} .feature-icon{width:clamp(192px,20vw,360px); height:auto; display:block; margin:0 auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); border-radius:22px} @media (prefers-reduced-motion: no-preference){.feature-icon-wrap:hover{filter:saturate(115%)}} [data-theme="light"] .feature-icon-wrap{background:linear-gradient(180deg, rgba(24,184,0,.25), rgba(24,184,0,.15)); border-color:rgba(24,184,0,.45); box-shadow:inset 0 0 0 1px rgba(24,184,0,.28), 0 10px 22px rgba(24,184,0,.18)} [data-theme="light"] .feature-icon-wrap::before{opacity:.9} .feature-card h3{color:var(--accent); font-family:"Bebas Neue", sans-serif; font-size:clamp(28px,3.8vw,48px); letter-spacing:.5px; margin:0 0 6px; text-align:center} .feature-sub{color:var(--muted); font-size:clamp(13px,1.2vw,16px); text-align:center; margin:0 auto 24px; max-width:400px} .feature-list{list-style:none; padding:0; margin:10px auto 0; display:grid; gap:14px; max-width:420px} .feature-list li{display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto; column-gap:8px; row-gap:2px; align-items:start} .feature-list li::before{content:"✦"; color:var(--accent); font-size:18px; line-height:1; margin-top:0; grid-column:1; grid-row:1; align-self:center; transform:translate(2px, -6px)} .feature-list li.task-create::before{content:""; width:34px; height:34px; background:url('Images/taskcreateicon.png') center/contain no-repeat; filter:none; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-calendar::before{content:""; width:34px; height:34px; background:url('Images/calendaricon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-content-creation::before{content:""; width:34px; height:34px; background:url('Images/contentcreationicon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-multi::before{content:""; width:34px; height:34px; background:url('Images/multiaccounting icon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-proxy::before{content:""; width:34px; height:34px; background:url('Images/proxyicon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-ai-content::before{content:""; width:34px; height:34px; background:url('Images/aicontent creation.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-ai-assistant::before{content:""; width:34px; height:34px; background:url('Images/airibiticon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-adv-analytics::before{content:""; width:34px; height:34px; background:url('Images/advancedanalyticsicon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list li.icon-trends::before{content:""; width:34px; height:34px; background:url('Images/hopontrendsicon.png') center/contain no-repeat; grid-row:1; align-self:center; transform:translate(0px, -7px)} .feature-list p{color:var(--muted); font-size:clamp(13px,1.3vw,16px); line-height:1.55; margin:2px 0 0; max-width:420px; grid-column:2} .feature-callout{color:var(--text); font-weight:800; font-size:clamp(16px,1.6vw,20px); grid-column:2} /* Purple variant for AI and Measure sections */ .feature-card.purple h3{color:var(--purple)} .feature-card.purple .feature-callout{color:var(--text)} .feature-card.purple .feature-list li::before{color:var(--accent)} /* If purple image assets are not present, tint existing icons to purple */ .feature-card.purple .feature-icon{filter:none} /* Checkerboard diagonal layout: alternate high/low by column with progressive drop */ .feature-card:nth-child(1){margin-top:0; left:0} .feature-card:nth-child(2){margin-top:0; left:0} .feature-card:nth-child(3){margin-top:0; left:0} .feature-card:nth-child(4){margin-top:0; left:0} @media (max-width: 1080px){ .feature-grid{grid-template-columns:repeat(2, minmax(420px,1fr)); gap:40px 80px} } @media (max-width: 640px){ .feature-grid{grid-template-columns:1fr; justify-items:center; gap:16px 0} .features{padding-bottom:80px} .feature-card{left:0; margin-top:0; width:100%; max-width:520px} .feature-list, .feature-list p{max-width:100%} } /* AND / MORE section */ .and-more{position:relative; z-index:1; padding:120px 16px 160px; overflow:hidden} .and-more::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:none; filter:none; } .and-more-inner{max-width:1440px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:54px} .and-more-word{font-family:"Bebas Neue", sans-serif; line-height:.86; letter-spacing:3px; text-align:center; opacity:0; transform:translateY(24px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .and-more-word.and{color:#f4f7f4; font-size:clamp(54px,8vw,140px); transform:translateY(24px) translateZ(0)} .and-more-word.more{color:var(--accent); font-size:clamp(80px,10vw,180px); margin-top:-44px} .and-more-word.is-visible{opacity:1; transform:translateY(0)} /* Unfair Advantages layout */ .ua{position:relative; z-index:2; padding:40px clamp(16px,3vw,32px) 220px; --ua-card-width:520px; --ua-card-height:128px; --ua-connector-h:44px; background:linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 100%)} .ua-inner{max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:60px} .ua-left{position:relative; z-index:0; opacity:0; transform:translateY(18px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease; overflow:visible} .ua-left::before{ content:""; position:absolute; left:-10%; top:-16%; width:min(70vmin, 720px); height:min(70vmin, 720px); pointer-events:none; z-index:-1; border-radius:50%; background:radial-gradient(circle at 36% 30%, rgba(30,255,0,.42) 0%, rgba(30,255,0,.18) 36%, rgba(0,0,0,0) 66%); filter:blur(26px) saturate(130%); } .ua-right{opacity:0; transform:translateY(24px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease; margin-top:120px} .ua-left.is-visible, .ua-right.is-visible{opacity:1; transform:translateY(0)} .ua h2{font-family:"Bebas Neue", sans-serif; font-size:clamp(34px,5.4vw,66px); margin:0 0 14px} .ua-unfair{color:var(--accent)} .ua p{color:var(--muted); font-size:clamp(14px,1.4vw,18px); line-height:1.55; max-width:560px} .ua-mark{background:rgba(30,255,0,.24); color:#ffffff; padding:.12em .5em; border-radius:8px; box-shadow:0 0 0 1px rgba(30,255,0,.35) inset, 0 0 14px rgba(30,255,0,.18)} [data-theme="light"] .ua-mark{background:rgba(24,184,0,.16); color:#0b2b10; box-shadow:0 0 0 1px rgba(24,184,0,.28) inset, 0 0 12px rgba(24,184,0,.12)} .ua-columns{display:grid; grid-template-columns:1fr 1fr; gap:44px} .ua-col{display:flex; flex-direction:column; align-items:center} .ua-col h3{font-family:"Bebas Neue", sans-serif; margin:0 0 18px; font-size:clamp(26px,3.2vw,40px); text-align:center; display:flex; align-items:center; justify-content:center; gap:10px} .emoji-img{width:1.3em; height:1.3em; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))} .ua-col.bad h3{color:#e9f0ea} .ua-col.good h3{color:var(--accent)} .ua-step{position:relative; width:min(var(--ua-card-width), 100%); padding:26px 28px; border-radius:22px; font-size:16px; line-height:1.5; min-height:var(--ua-card-height); display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:0 12px 24px rgba(0,0,0,.35); opacity:0; transform:translateY(16px); transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease} .ua-step.bad{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); color:#d6dbd7; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 24px rgba(0,0,0,.35)} .ua-step.good{background:linear-gradient(180deg, rgba(30,255,0,.28), rgba(30,255,0,.18)); color:#f1f6f2; box-shadow:inset 0 0 0 2px rgba(30,255,0,.55), 0 12px 26px rgba(30,255,0,.35)} .ua-col.good .ua-step{text-align:center; font-weight:600} .ua-step.is-visible{opacity:1; transform:translateY(0)} /* Connectors between steps */ .ua-connector{height:24px; width:3px; margin:0 auto; border-radius:2px; background:rgba(255,255,255,.18); opacity:.9; transform-origin:top; transform:scaleY(0); transition:transform .5s ease} .ua-connector.good{background:linear-gradient(180deg, rgba(30,255,0,1), rgba(30,255,0,.25))} .ua-connector.bad{background:rgba(255,255,255,.22)} .ua-connector.is-visible{transform:scaleY(1)} /* Green glow column background */ .ua-col.good{position:relative; overflow:visible} .ua-col.good::before{ content:""; position:absolute; left:-36px; right:-36px; top:-14px; height:min(64vmin, 520px); z-index:-1; pointer-events:none; border-radius:50%; background:radial-gradient(circle at 50% 8%, rgba(30,255,0,.62), rgba(30,255,0,.28) 34%, rgba(0,0,0,0) 66%); filter:blur(22px) saturate(130%); opacity:.95; } /* Subtle shadow behind WITHOUT US column */ .ua-col.bad{position:relative; overflow:visible} .ua-col.bad::before{ content:""; position:absolute; left:-28px; right:-28px; top:-10px; height:min(56vmin, 460px); z-index:-1; pointer-events:none; border-radius:50%/40%; background:radial-gradient(circle at 50% 10%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%); filter:blur(18px); opacity:.8; } /* Emoji rendering like iOS */ .ua-col h3 .emoji{display:inline-block; transform:translateY(2px); font-size:1.05em; -webkit-font-smoothing:antialiased} @media (max-width: 980px){ .ua-inner{grid-template-columns:1fr; gap:34px} .ua-columns{grid-template-columns:1fr; gap:22px} .ua-right{margin-top:24px} } /* Pricing */ .pricing{position:relative; z-index:3; padding:20px clamp(16px,3vw,32px) 120px; opacity:0; transform:translateY(24px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .pricing.sticky{position:sticky; top:0;} .pricing.is-sticky{opacity:1; transform:translateY(0)} .pricing-inner{max-width:1440px; margin:0 auto} .pricing-head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; opacity:0; transform:translateY(18px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .pricing-head.is-visible{opacity:1; transform:translateY(0)} .pricing h2{font-family:"Bebas Neue", sans-serif; font-size:clamp(32px,5.2vw,60px); margin:0; color:var(--accent)} .billing-toggle{display:flex; align-items:center; gap:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); padding:8px 12px; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .billing-label{color:var(--muted); font-size:14px} .discount-badge{color:var(--accent); font-weight:800; font-size:12px; padding:2px 6px; border-radius:8px; background:rgba(30,255,0,.12); box-shadow:inset 0 0 0 1px rgba(30,255,0,.35)} .toggle{position:relative; width:60px; height:32px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); cursor:pointer; outline:none} .toggle .knob{position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #ffffff, #c5ffc7 68%); box-shadow:0 0 0 2px rgba(30,255,0,.45), 0 0 18px rgba(30,255,0,.35); transition:left .25s ease} .toggle[aria-checked="true"] .knob{left:31px} .pricing-grid{display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:24px} .price-card{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:24px; box-shadow:0 10px 24px rgba(0,0,0,.35); --lift-y:0px; --reveal-offset:24px; transform:translateY(calc(var(--lift-y) + var(--reveal-offset))); opacity:0; transition:transform .6s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0s), opacity .6s ease var(--reveal-delay, 0s)} .price-card.is-visible{--reveal-offset:0px; opacity:1} .price-card .price-head .plan{font-family:"Bebas Neue", sans-serif; font-size:clamp(26px,3.2vw,40px); margin:0} .price-card .price-head .tag{color:var(--muted); margin:6px 0 0; font-size:14px} .price{display:flex; align-items:flex-end; gap:6px; margin:18px 0 12px} .price .currency{color:#cfe4d2} .price .value{font-family:"Bebas Neue", sans-serif; font-size:clamp(42px,6vw,72px); line-height:.9; color:var(--accent)} .price .period{color:var(--muted); margin-bottom:6px} .price.custom .value{color:#f2f5f3} .benefits{list-style:none; padding:0; margin:14px 0 20px; display:grid; gap:10px} .benefits li{color:var(--text); opacity:.9} .cta-wrap{margin-top:auto} .cta{width:100%; display:inline-block; text-align:center; text-decoration:none; font-family:inherit; font-weight:800; letter-spacing:.2px; padding:12px 16px; border-radius:14px; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; border:1px solid transparent} .cta:active{transform:translateY(1px)} .cta.outline-purple{background:transparent; color:#d1fae5; border-color:rgba(30,255,0,.45)} .cta.outline-purple:hover{box-shadow:0 0 0 2px rgba(30,255,0,.55), 0 0 22px rgba(30,255,0,.28)} .cta.solid-green{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#062b11; border:none} .cta.solid-green.glow{box-shadow:0 0 0 2px rgba(30,255,0,.65), 0 0 34px rgba(30,255,0,.45)} .cta.solid-green:hover{filter:saturate(120%); box-shadow:0 0 0 2px rgba(30,255,0,.75), 0 0 44px rgba(30,255,0,.55)} /* Featured Advanced card */ .price-card.featured{background:linear-gradient(180deg, rgba(30,255,0,.28), rgba(30,255,0,.18)); border:1px solid rgba(30,255,0,.55); box-shadow:inset 0 0 0 1px rgba(30,255,0,.35), 0 18px 38px rgba(30,255,0,.35); --lift-y:-10px} .price-card.featured .price .value{color:var(--accent)} .price-card .featured-glow{position:absolute; inset:-6px; pointer-events:none; border-radius:24px; background:radial-gradient(60% 60% at 50% 0%, rgba(30,255,0,.35), rgba(0,0,0,0) 70%); filter:blur(16px); opacity:.85} /* Interactions */ .price-card{transition:transform .2s ease, box-shadow .2s ease} .price-card:hover{transform:translateY(-4px)} .price-card.featured:hover{box-shadow:inset 0 0 0 1px rgba(30,255,0,.45), 0 24px 56px rgba(30,255,0,.45); --lift-y:-14px} /* Staggered reveal delays */ .pricing-grid .price-card:nth-child(1){--reveal-delay:.0s} .pricing-grid .price-card:nth-child(2){--reveal-delay:.08s} .pricing-grid .price-card:nth-child(3){--reveal-delay:.16s} @media (max-width: 980px){ .pricing-grid{grid-template-columns:1fr; gap:16px} .pricing-head{flex-direction:column; align-items:flex-start} .price-card.featured{--lift-y:0px} .price-card.featured:hover{--lift-y:-4px} } /* Contact */ .contact{position:relative; z-index:2; padding:60px clamp(16px,3vw,32px) 140px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%)} .contact-head{max-width:1280px; margin:0 auto 14px; display:flex; flex-direction:column; align-items:center; justify-content:center} .contact-head[data-animate]{opacity:0; transform:translateY(18px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .contact-head.is-visible{opacity:1; transform:translateY(0)} .contact-headline{font-family:"Bebas Neue", sans-serif; font-size:clamp(28px,4.8vw,54px); letter-spacing:2px; color:#fff; text-align:center; margin:0} .contact-subheadline{display:none} .contact-green{color:var(--accent)} /* Global purple accent utility */ .accent-purple{color:var(--accent)} .contact::before{content:""; position:absolute; inset:-10vmax; z-index:-1; pointer-events:none; background:radial-gradient(circle 38vmax at 94% 72%, rgba(30,255,0,.22), rgba(0,0,0,0) 58%); filter:blur(18px) saturate(130%)} .contact-inner{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:center} .contact-left{justify-self:center; opacity:0; transform:translateY(18px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .contact-right{opacity:0; transform:translateY(22px); transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease} .contact-left.is-visible, .contact-right.is-visible{opacity:1; transform:translateY(0)} .contact-avatar{width:min(58vw, 380px); height:auto; display:block; margin-top:-18px; filter:drop-shadow(0 18px 32px rgba(0,0,0,.55))} .contact-points{list-style:none; padding:16px 0 0; margin:8px 0 0; display:grid; gap:10px; max-width:560px} .contact-points li{color:#ffffff; font-size:clamp(14px,1.6vw,18px); line-height:1.6} .contact-points li strong{font-weight:800} [data-theme="light"] .contact-points li strong{color:var(--text)} /* Theme-aware contact titles: white in dark, black in light */ .contact-title{color:#ffffff} [data-theme="light"] .contact-title{color:#0f1720} .contact-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:26px; box-shadow:0 14px 34px rgba(0,0,0,.45); position:relative} .contact-card::before{content:""; position:absolute; inset:-8px; border-radius:24px; pointer-events:none; background:radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(30,255,0,.25), rgba(0,0,0,0) 70%); filter:blur(16px); opacity:.9} .contact h2{font-family:"Bebas Neue", sans-serif; margin:0 0 14px; font-size:clamp(32px,5.2vw,60px); letter-spacing:1px} .glow-human{color:#fff; text-shadow:0 0 12px rgba(30,255,0,.65), 0 0 32px rgba(30,255,0,.35)} .contact-form{display:grid; gap:14px} .form-row{display:grid; gap:8px} .form-row label{color:var(--muted); font-size:14px} .form-row input, .form-row textarea{ width:100%; color:var(--text); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:12px 14px; outline:none; transition:box-shadow .2s ease, border-color .2s ease, background .2s ease; } .form-row textarea{resize:vertical; min-height:140px} .form-row input:focus, .form-row textarea:focus{ border-color:rgba(30,255,0,.55); box-shadow:0 0 0 2px rgba(30,255,0,.5), 0 0 22px rgba(30,255,0,.28); background:rgba(255,255,255,.06) } .form-actions{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap} .contact-btn{font-family:inherit; font-weight:800; letter-spacing:.2px; padding:12px 16px; border-radius:14px; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; border:1px solid transparent} .contact-btn:active{transform:translateY(1px)} .contact-btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#062b11; border:none; box-shadow:0 0 0 2px rgba(30,255,0,.65), 0 0 34px rgba(30,255,0,.45)} .contact-btn.primary:hover{filter:saturate(120%); box-shadow:0 0 0 2px rgba(30,255,0,.75), 0 0 44px rgba(30,255,0,.55)} .contact-btn.outline{background:transparent; color:#d1fae5; border-color:rgba(30,255,0,.45); box-shadow:0 0 0 1px rgba(30,255,0,.35)} .contact-btn.outline:hover{box-shadow:0 0 0 2px rgba(30,255,0,.55), 0 0 22px rgba(30,255,0,.25)} @media (max-width: 980px){ .contact-inner{grid-template-columns:1fr; gap:28px} .contact-left{order:2} .contact-right{order:1} .contact-avatar{width:min(72vw, 340px); margin-top:-8px} .contact-head{margin-bottom:6px} } /* Footer */ .site-footer{position:relative; z-index:2; background:transparent} .footer-inner{max-width:1280px; margin:0 auto; padding:40px clamp(16px,3vw,32px) 60px; display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:start} .footer-col .footer-heading{margin:0 0 12px; font-family:"Bebas Neue", sans-serif; font-size:clamp(20px,2.8vw,28px); color:var(--accent); letter-spacing:1px} /* Left */ .footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px} .footer-logo{height:38px; width:auto; display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))} .footer-tagline{margin:8px 0 10px; color:var(--accent); font-weight:800} .company-info{color:#c7cfc9} .company-info a{color:var(--accent); text-decoration:none} .company-info a:hover{filter:saturate(120%); text-shadow:0 0 8px rgba(30,255,0,.45)} /* Center */ .footer-nav{display:grid; gap:8px} .footer-nav a{color:#eef3ee; text-decoration:none; opacity:.9; transition:color .15s ease, text-shadow .2s ease} .footer-nav a:hover{color:#ffffff; text-shadow:0 0 10px rgba(30,255,0,.3)} /* Right */ .social-list{display:flex; gap:12px; flex-wrap:wrap} .social-icon{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 18px rgba(0,0,0,.45); transition:transform .15s ease, box-shadow .2s ease, background .2s ease} .social-icon img{width:22px; height:22px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))} .social-icon:hover{transform:translateY(-2px); background:linear-gradient(180deg, rgba(30,255,0,.28), rgba(30,255,0,.18)); box-shadow:0 0 0 2px rgba(30,255,0,.65), 0 0 24px rgba(30,255,0,.45)} .social-icon:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(30,255,0,.75), 0 0 26px rgba(30,255,0,.55)} @media (max-width: 980px){ .footer-inner{grid-template-columns:1fr; gap:22px} } .footer-legal{grid-column:auto; margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap} .footer-legal a{color:#e8efe9; text-decoration:none; font-size:16px; font-weight:600; opacity:.95; transition:color .15s ease, text-shadow .2s ease} .footer-legal a:hover{color:#ffffff; text-shadow:0 0 12px rgba(30,255,0,.35)} .footer-legal .sep{color:#5a5f5b} /* Legal pages */ .legal-body{background:var(--bg); color:var(--text); margin:0; font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif} .legal{position:relative; z-index:1; padding:40px clamp(16px,3vw,32px) 100px} .legal-inner{max-width:920px; margin:0 auto} .legal-title{font-family:"Bebas Neue", sans-serif; font-size:clamp(42px,7vw,80px); margin:0 0 6px; letter-spacing:1px; color:#fff} .legal-meta{color:var(--muted); margin:0 0 18px; font-size:14px} .legal h2{margin:28px 0 10px; font-size:22px; color:var(--accent)} .legal h3{margin:16px 0 8px; font-size:18px; color:#dcdcdc} .legal p, .legal li{color:#dfe6e1; line-height:1.65} .legal a{color:var(--accent); text-decoration:none} .legal a:hover{text-shadow:0 0 10px rgba(30,255,0,.3)}