/* * Marketing landing page (fangradesports.com for signed-out web visitors). * Ported from the approved mockup. Everything is scoped under .marketing-page * (set on by layouts/marketing.html.erb) so these tokens and resets * don't leak into the rest of the app. */ .marketing-page{ --pitch-night:#0A130E; /* deep green-black: floodlit pitch at night */ --pitch-deep:#07100B; /* darkest */ --panel:#101C15; /* raised surface */ --panel-2:#16271D; /* card surface */ --line:#23362B; /* hairline / chalk-faint */ --chalk:#F2F6F1; /* primary text */ --chalk-dim:#AFC0B5; /* secondary text */ --muted:#6E8378; /* labels / captions */ --green:#1FCB6B; /* grade-high / brand / primary action */ --green-bright:#36E884; /* glow */ --amber:#F6A723; /* grade-mid */ --red:#E94B50; /* grade-low / rival */ --radius:18px; --maxw:1180px; --ease:cubic-bezier(.2,.7,.2,1); } .marketing-page *{box-sizing:border-box;margin:0;padding:0} /* Only loaded on the marketing page, so this doesn't affect the app-wide :root{scroll-behavior:auto} */ html{scroll-behavior:smooth} .marketing-page{ background:var(--pitch-night); color:var(--chalk); font-family:'Inter',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .marketing-page a{color:inherit;text-decoration:none} .marketing-page ::selection{background:var(--green);color:#04140B} /* ---------- shared ---------- */ .marketing-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .marketing-page .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;color:var(--green); display:flex;align-items:center;gap:10px; } .marketing-page .eyebrow::before{content:"";width:24px;height:2px;background:var(--green);display:inline-block} .marketing-page h1,.marketing-page h2,.marketing-page h3{font-family:'Archivo',sans-serif;line-height:1.02;letter-spacing:-.02em} .marketing-page .mono{font-family:'JetBrains Mono',monospace} .marketing-page section{position:relative} .marketing-page .btn{ display:inline-flex;align-items:center;gap:9px; font-family:'Archivo',sans-serif;font-weight:700;font-size:15px; padding:13px 22px;border-radius:12px;cursor:pointer;border:none; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s; } .marketing-page .btn-primary{background:var(--green);color:#04140B;box-shadow:0 0 0 0 rgba(31,203,107,.5)} .marketing-page .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(31,203,107,.55)} .marketing-page .btn-ghost{background:transparent;color:var(--chalk);border:1px solid var(--line)} .marketing-page .btn-ghost:hover{border-color:var(--green);color:var(--green)} /* store badges */ .marketing-page .store{ display:inline-flex;align-items:center;gap:11px; padding:11px 18px;border-radius:13px;border:1px solid var(--line); background:var(--panel);transition:border-color .2s,transform .2s var(--ease),background .2s; } .marketing-page .store:hover{border-color:var(--green);transform:translateY(-2px)} .marketing-page .store svg{width:24px;height:24px;flex:0 0 auto} .marketing-page .store .lbl{display:flex;flex-direction:column;line-height:1.05} .marketing-page .store .lbl small{font-size:10px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase} .marketing-page .store .lbl strong{font-family:'Archivo';font-weight:700;font-size:16px} .marketing-page .store.soon{opacity:.55;cursor:default} .marketing-page .store.soon:hover{border-color:var(--line);transform:none} .marketing-page .store.soon .tag{font-family:'JetBrains Mono';font-size:9px;font-weight:700;color:var(--amber); border:1px solid rgba(246,167,35,.4);padding:2px 6px;border-radius:5px;margin-left:4px} /* ---------- nav ---------- */ .marketing-page header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s} .marketing-page header.scrolled{background:rgba(7,16,11,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .marketing-page .nav{display:flex;align-items:center;justify-content:space-between;height:72px} .marketing-page .brand{font-family:'Archivo';font-weight:900;font-size:22px;letter-spacing:.01em;display:flex;align-items:center;gap:2px} .marketing-page .brand .fan{color:var(--chalk)} .marketing-page .brand .grade{color:var(--green)} .marketing-page .brand-logo{height:24px;width:auto;display:block} .marketing-page .navlinks{display:flex;align-items:center;gap:34px} .marketing-page .navlinks a{font-size:14px;color:var(--chalk-dim);font-weight:500;transition:color .2s} .marketing-page .navlinks a:hover{color:var(--chalk)} .marketing-page .nav-cta{display:flex;align-items:center;gap:16px} .marketing-page .menu-toggle{display:none;background:none;border:none;color:var(--chalk);cursor:pointer} /* ---------- hero ---------- */ .marketing-page .hero{padding:150px 0 90px;position:relative;overflow:hidden} /* floodlight wash */ .marketing-page .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(120% 80% at 78% -10%, rgba(31,203,107,.14), transparent 55%), radial-gradient(90% 60% at 10% 0%, rgba(54,232,132,.06), transparent 60%); } /* faint pitch lines */ .marketing-page .pitch-lines{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none} .marketing-page .pitch-lines .circle{position:absolute;border:1px solid rgba(255,255,255,.035);border-radius:50%} .marketing-page .c1{width:520px;height:520px;right:-180px;top:-120px} .marketing-page .c2{width:260px;height:260px;right:-30px;top:0} .marketing-page .vline{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.04),transparent)} .marketing-page .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center} .marketing-page .live-pill{ display:inline-flex;align-items:center;gap:9px; font-family:'JetBrains Mono';font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--chalk); background:rgba(31,203,107,.1);border:1px solid rgba(31,203,107,.35); padding:7px 14px;border-radius:100px;margin-bottom:26px; } .marketing-page .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(31,203,107,.7);animation:marketing-pulse 2s infinite} @keyframes marketing-pulse{0%{box-shadow:0 0 0 0 rgba(31,203,107,.6)}70%{box-shadow:0 0 0 9px rgba(31,203,107,0)}100%{box-shadow:0 0 0 0 rgba(31,203,107,0)}} .marketing-page .hero h1{font-size:clamp(44px,6vw,76px);font-weight:900;letter-spacing:-.03em} .marketing-page .hero h1 .num{color:var(--green)} .marketing-page .hero .sub{font-size:clamp(17px,1.6vw,20px);color:var(--chalk-dim);max-width:33ch;margin:24px 0 34px;line-height:1.5} .marketing-page .hero .sub b{color:var(--chalk);font-weight:600} .marketing-page .cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .marketing-page .cta-foot{margin-top:20px;font-family:'JetBrains Mono';font-size:12.5px;color:var(--muted);letter-spacing:.02em;display:flex;gap:10px;align-items:center} .marketing-page .cta-foot .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)} /* ---------- phone mockup ---------- */ .marketing-page .phone-stage{display:flex;justify-content:center;position:relative} .marketing-page .phone-glow{position:absolute;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(31,203,107,.22),transparent 65%);filter:blur(20px);z-index:0} .marketing-page .phone{ position:relative;z-index:2;width:300px;border-radius:42px; background:#05100A;border:1px solid #1d2f25; box-shadow:0 40px 80px -30px rgba(0,0,0,.8),inset 0 0 0 6px #0a160f; padding:11px; } .marketing-page .phone-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:#05100A;border-radius:0 0 14px 14px;z-index:5} .marketing-page .screen{background:var(--pitch-deep);border-radius:33px;overflow:hidden;position:relative} .marketing-page .screen-shot{display:block;width:100%;height:auto} .marketing-page .app-status{display:flex;justify-content:space-between;align-items:center;padding:13px 20px 7px;font-family:'JetBrains Mono';font-size:11px;color:var(--chalk-dim)} .marketing-page .app-head{padding:6px 18px 14px;border-bottom:1px solid var(--line)} .marketing-page .app-head .wc{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;color:var(--green);text-transform:uppercase;font-weight:700} .marketing-page .app-head .match{display:flex;align-items:center;justify-content:space-between;margin-top:9px} .marketing-page .team{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px} .marketing-page .crest{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center; font-family:'Archivo';font-weight:800;font-size:13px;color:#04140B} .marketing-page .team span{font-size:11px;color:var(--chalk-dim);font-weight:600} .marketing-page .score{font-family:'JetBrains Mono';font-weight:800;font-size:30px;letter-spacing:.02em;display:flex;align-items:center;gap:11px} .marketing-page .score .live{font-family:'JetBrains Mono';font-size:9px;color:var(--red);border:1px solid rgba(233,75,80,.4); border-radius:5px;padding:2px 5px;letter-spacing:.1em;font-weight:700} /* grade ring */ .marketing-page .grade-block{display:flex;flex-direction:column;align-items:center;padding:20px 18px 14px} .marketing-page .grade-label{font-family:'JetBrains Mono';font-size:9.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:14px} .marketing-page .ring{position:relative;width:118px;height:118px} .marketing-page .ring svg{transform:rotate(-90deg)} .marketing-page .ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .marketing-page .ring .val b{font-family:'JetBrains Mono';font-weight:800;font-size:36px;line-height:1;color:var(--green)} .marketing-page .ring .val small{font-family:'JetBrains Mono';font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:3px} .marketing-page .affil{display:flex;gap:7px;padding:4px 18px 16px;justify-content:center} .marketing-page .affil .chip{font-family:'JetBrains Mono';font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:6px 9px;border-radius:8px;border:1px solid var(--line);color:var(--muted)} .marketing-page .affil .chip.on{color:#04140B;background:var(--green);border-color:var(--green)} .marketing-page .takes{padding:4px 16px 14px;border-top:1px solid var(--line)} .marketing-page .take{display:flex;gap:9px;padding:9px 0;align-items:flex-start} .marketing-page .take .av{width:24px;height:24px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,#1c3326,#0e1c14); display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;font-size:10px;color:var(--green)} .marketing-page .take .body{font-size:11px;color:var(--chalk-dim);line-height:1.4} .marketing-page .take .body u{text-decoration:none;color:var(--chalk);font-weight:600} .marketing-page .take .g{margin-left:auto;font-family:'JetBrains Mono';font-weight:800;font-size:13px;flex:0 0 auto} /* home screen (match list) */ .marketing-page .app-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 12px} .marketing-page .app-logo{font-family:'Archivo';font-weight:900;font-style:italic;font-size:18px;color:var(--green);letter-spacing:.01em} .marketing-page .app-burger{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--chalk-dim);font-size:14px} .marketing-page .app-date{display:flex;align-items:center;justify-content:center;gap:20px;padding:4px 0 12px;font-family:'Archivo';font-weight:700;font-size:14px;color:var(--chalk)} .marketing-page .app-date .arrow{color:var(--green);font-size:17px;font-weight:700} .marketing-page .app-sect{display:flex;align-items:center;gap:8px;padding:0 18px 12px;font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim);font-weight:700} .marketing-page .app-sect .d{width:7px;height:7px;border-radius:50%;background:var(--amber)} .marketing-page .mcard{margin:0 14px 10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px} .marketing-page .mc-top{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:11px} .marketing-page .mc-top .lv{color:var(--amber);display:flex;align-items:center;gap:5px} .marketing-page .mc-top .lv::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)} .marketing-page .mc-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .marketing-page .mc-team{display:flex;align-items:center;gap:8px;flex:1;min-width:0} .marketing-page .mc-team.r{justify-content:flex-end} .marketing-page .mc-team b{font-size:13px;font-weight:600;color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .marketing-page .mc-crest{width:26px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:800;font-size:8px;color:#fff;flex:0 0 auto} .marketing-page .mc-score{font-family:'JetBrains Mono';font-weight:800;font-size:19px;color:var(--chalk);display:flex;align-items:center;gap:8px;white-space:nowrap} .marketing-page .mc-score small{font-size:8px;color:var(--green);font-weight:700;letter-spacing:.06em} .marketing-page .mc-bot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)} .marketing-page .mc-bot .rt{font-family:'JetBrains Mono';font-size:10px;color:var(--muted)} .marketing-page .mc-grade{font-family:'JetBrains Mono';font-weight:800;font-size:14px;color:var(--green);display:flex;align-items:center;gap:4px} .marketing-page .app-link{text-align:center;color:var(--green);font-family:'Archivo';font-weight:700;font-size:11.5px;padding:6px 0 12px} .marketing-page .app-tabs{display:flex;justify-content:space-around;align-items:center;margin:4px 12px 0;padding:8px 6px;background:#0d1a13;border:1px solid var(--line);border-radius:22px} .marketing-page .app-tabs .tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 18px;border-radius:16px;font-family:'Archivo';font-weight:700;font-size:10px;color:var(--muted)} .marketing-page .app-tabs .tab.active{background:rgba(31,203,107,.16);color:var(--green)} .marketing-page .app-tabs .tab svg{width:17px;height:17px} /* coming-soon stat tile */ .marketing-page .stat.soon{opacity:.62} .marketing-page .stat.soon .n{font-size:22px} /* ---------- fixtures strip ---------- */ .marketing-page .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--pitch-deep);padding:18px 0} .marketing-page .strip-inner{display:flex;align-items:center;gap:30px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marketing-page .strip-lbl{font-family:'JetBrains Mono';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);white-space:nowrap;flex:0 0 auto;display:flex;align-items:center;gap:8px} .marketing-page .ticker{display:flex;gap:14px;animation:marketing-scroll 38s linear infinite} @keyframes marketing-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marketing-page .fx{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line); border-radius:11px;padding:9px 14px;white-space:nowrap;flex:0 0 auto} .marketing-page .fx .mt{font-size:13px;font-weight:600;color:var(--chalk)} .marketing-page .fx .sc{font-family:'JetBrains Mono';font-weight:800;font-size:13px;color:var(--chalk-dim)} .marketing-page .fx .grade{font-family:'JetBrains Mono';font-weight:800;font-size:14px;padding:3px 8px;border-radius:7px} .marketing-page .fx .grade small{font-size:8px;display:block;letter-spacing:.1em;color:var(--muted);font-weight:600;text-align:right} .marketing-page .g-green{color:var(--green);background:rgba(31,203,107,.1)} .marketing-page .g-amber{color:var(--amber);background:rgba(246,167,35,.1)} .marketing-page .g-red{color:var(--red);background:rgba(233,75,80,.1)} .marketing-page .fx .pending{font-family:'JetBrains Mono';font-size:10px;color:var(--amber);border:1px solid rgba(246,167,35,.35);border-radius:6px;padding:3px 7px;letter-spacing:.06em} /* ---------- features ---------- */ .marketing-page .features{padding:108px 0} .marketing-page .sec-head{max-width:680px;margin-bottom:54px} .marketing-page .sec-head h2{font-size:clamp(32px,4vw,50px);font-weight:800;margin-top:16px} .marketing-page .sec-head p{color:var(--chalk-dim);font-size:17px;margin-top:16px;max-width:52ch} .marketing-page .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .marketing-page .fcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 32px; position:relative;overflow:hidden;transition:border-color .25s,transform .25s var(--ease)} .marketing-page .fcard:hover{border-color:#2f4a39;transform:translateY(-4px)} .marketing-page .fcard .ix{font-family:'JetBrains Mono';font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.1em} .marketing-page .fcard h3{font-size:25px;font-weight:800;margin:22px 0 12px} .marketing-page .fcard p{color:var(--chalk-dim);font-size:15px;line-height:1.55} .marketing-page .fcard .icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:0;position:absolute;top:28px;right:26px} .marketing-page .fcard .icon svg{width:22px;height:22px} .marketing-page .ic-green{background:rgba(31,203,107,.13);color:var(--green)} .marketing-page .ic-amber{background:rgba(246,167,35,.13);color:var(--amber)} .marketing-page .ic-chalk{background:rgba(242,246,241,.08);color:var(--chalk)} /* ---------- moat / edge ---------- */ .marketing-page .edge{padding:100px 0;border-top:1px solid var(--line);background: radial-gradient(80% 100% at 50% 0%, rgba(31,203,107,.05), transparent 60%);} .marketing-page .edge-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .marketing-page .edge h2{font-size:clamp(30px,3.8vw,46px);font-weight:800;margin:18px 0 22px} .marketing-page .edge h2 em{font-style:normal;color:var(--green)} .marketing-page .edge p{color:var(--chalk-dim);font-size:16.5px;line-height:1.6;max-width:46ch} .marketing-page .edge p+p{margin-top:16px} /* affiliation demo */ .marketing-page .demo{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px} .marketing-page .demo .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px} .marketing-page .demo .dh .mt{font-family:'Archivo';font-weight:800;font-size:18px} .marketing-page .demo .dh .sc{font-family:'JetBrains Mono';font-weight:800;font-size:18px;color:var(--chalk-dim)} .marketing-page .seg{display:flex;background:var(--pitch-deep);border:1px solid var(--line);border-radius:12px;padding:5px;gap:5px;margin-bottom:26px} .marketing-page .seg button{flex:1;border:none;background:transparent;color:var(--chalk-dim);cursor:pointer; font-family:'Archivo';font-weight:700;font-size:13.5px;padding:11px 0;border-radius:8px;transition:all .25s var(--ease)} .marketing-page .seg button[data-on="favorite"].active{background:var(--green);color:#04140B} .marketing-page .seg button[data-on="neutral"].active{background:var(--amber);color:#1a1205} .marketing-page .seg button[data-on="rival"].active{background:var(--red);color:#fff} .marketing-page .demo-grade{display:flex;flex-direction:column;align-items:center;gap:6px} .marketing-page .demo-grade .big{font-family:'JetBrains Mono';font-weight:800;font-size:64px;line-height:1;transition:color .3s,transform .3s var(--ease)} .marketing-page .demo-grade .cap{font-size:13.5px;color:var(--chalk-dim);text-align:center;max-width:30ch;min-height:42px;transition:opacity .25s} .marketing-page .demo-grade .lens{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* ---------- career ---------- */ .marketing-page .career{padding:100px 0;border-top:1px solid var(--line)} .marketing-page .career-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center} .marketing-page .career h2{font-size:clamp(30px,3.8vw,46px);font-weight:800;margin:18px 0 20px} .marketing-page .career p{color:var(--chalk-dim);font-size:16.5px;line-height:1.6;max-width:44ch} .marketing-page .scorecard{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line); border-radius:22px;padding:32px;position:relative;overflow:hidden} .marketing-page .scorecard::after{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px; border-radius:50%;background:radial-gradient(circle,rgba(31,203,107,.12),transparent 70%)} .marketing-page .sc-top{display:flex;align-items:center;gap:14px;margin-bottom:26px;position:relative;z-index:2} .marketing-page .sc-av{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#1f3a2a,#0d1c14); display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:900;font-size:20px;color:var(--green);border:1px solid #2a4233} .marketing-page .sc-name{font-family:'Archivo';font-weight:800;font-size:19px} .marketing-page .sc-handle{font-family:'JetBrains Mono';font-size:12px;color:var(--muted)} .marketing-page .sc-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;position:relative;z-index:2} .marketing-page .stat{background:var(--pitch-deep);border:1px solid var(--line);border-radius:13px;padding:16px 18px} .marketing-page .stat .n{font-family:'JetBrains Mono';font-weight:800;font-size:28px;color:var(--chalk)} .marketing-page .stat .n.green{color:var(--green)} .marketing-page .stat .l{font-size:11.5px;color:var(--muted);letter-spacing:.04em;margin-top:3px;text-transform:uppercase;font-family:'JetBrains Mono'} .marketing-page .badges{display:flex;gap:8px;margin-top:18px;position:relative;z-index:2;flex-wrap:wrap} .marketing-page .badge{font-family:'JetBrains Mono';font-size:11px;font-weight:700;padding:6px 11px;border-radius:8px; background:rgba(31,203,107,.1);border:1px solid rgba(31,203,107,.3);color:var(--green)} .marketing-page .badge.amber{background:rgba(246,167,35,.1);border-color:rgba(246,167,35,.3);color:var(--amber)} /* ---------- final CTA ---------- */ .marketing-page .final{padding:110px 0;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)} .marketing-page .final::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 100%,rgba(31,203,107,.13),transparent 65%);pointer-events:none} .marketing-page .final .inner{position:relative;z-index:2;max-width:760px;margin:0 auto} .marketing-page .final h2{font-size:clamp(36px,5vw,62px);font-weight:900;letter-spacing:-.03em} .marketing-page .final h2 .num{color:var(--green)} .marketing-page .final p{color:var(--chalk-dim);font-size:18px;margin:22px 0 36px} .marketing-page .final .cta-row{justify-content:center} /* ---------- footer ---------- */ .marketing-page footer{border-top:1px solid var(--line);background:var(--pitch-deep);padding:56px 0 40px} .marketing-page .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px} .marketing-page .foot-brand .brand-logo{margin-bottom:16px} .marketing-page .foot-brand p{color:var(--chalk-dim);font-size:14.5px;max-width:34ch;line-height:1.55} .marketing-page .foot-col h4{font-family:'JetBrains Mono';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:700} .marketing-page .foot-col a{display:block;color:var(--chalk-dim);font-size:14.5px;margin-bottom:11px;transition:color .2s} .marketing-page .foot-col a:hover{color:var(--green)} .marketing-page .foot-col span.foot-placeholder{display:block;color:var(--muted);font-size:14.5px;margin-bottom:11px;cursor:default} .marketing-page .foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:46px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px} .marketing-page .foot-bottom span{font-size:13px;color:var(--muted)} /* ---------- reveal ---------- */ .marketing-page .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .marketing-page .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media(max-width:900px){ .marketing-page .hero-grid{grid-template-columns:1fr;gap:48px} .marketing-page .phone-stage{order:-1} .marketing-page .edge-grid,.marketing-page .career-grid{grid-template-columns:1fr;gap:40px} .marketing-page .fgrid{grid-template-columns:1fr} .marketing-page .navlinks{display:none} .marketing-page .menu-toggle{display:block} .marketing-page .nav-cta .btn-ghost{display:none} .marketing-page .hero{padding:128px 0 70px} .marketing-page .foot-grid{grid-template-columns:1fr 1fr} .marketing-page .career .scorecard{order:-1} } @media(max-width:520px){ .marketing-page .wrap{padding:0 20px} .marketing-page .hero .sub{max-width:none} .marketing-page .cta-row{width:100%} .marketing-page .store{flex:1} .marketing-page .foot-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .marketing-page *{animation:none!important;transition:none!important} .marketing-page .reveal{opacity:1;transform:none} }