/* ============================================================ Rework × Revolut-style — dark, immersive, gradient-accented. Brand signature kept: flat YELLOW (#FED60A) lead accent. Three style worlds switch via [data-style] on . ============================================================ */ :root{ /* base dark canvas — refined neutral near-black with a faint cool depth */ --bg:#0A0A0D; --bg-2:#0E0E13; --surface:#141419; --surface-2:#1A1A21; --surface-3:#22222B; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --ink:#FFFFFF; --soft:#C9C9D4; --muted:#8C8C99; --faint:#5A5A66; /* signature accent — always yellow */ --accent:#FED60A; --accent-deep:#E0B400; --accent-soft:#FFE773; --on-accent:#0A0A0A; /* mesh glow hues (overridden per [data-style]) — harmonized, restrained */ --glow-1:254,214,10; /* yellow */ --glow-2:255,150,84; /* warm amber */ --glow-3:108,122,255; /* cool indigo */ --glow-1a:.26; --glow-2a:.16; --glow-3a:.12; --gradient: linear-gradient(100deg, #FFE773 0%, #FED60A 32%, #FFA64D 72%, #FF7A6B 100%); --r-xl:34px; --r-lg:26px; --r-md:18px; --r-sm:12px; --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1); --font-display:'Schibsted Grotesk', system-ui, sans-serif; --font-body:'Schibsted Grotesk', system-ui, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; --hl-scale:1; --glow-mult:1; } /* ---- STYLE WORLD: Aurora (default) — sunrise warmth + cool indigo balance ---- */ [data-style="aurora"]{ --glow-1:254,214,10; --glow-2:255,150,84; --glow-3:108,122,255; --glow-1a:.26; --glow-2a:.16; --glow-3a:.13; --gradient: linear-gradient(100deg,#FFE773 0%,#FED60A 32%,#FFA64D 72%,#FF7A6B 100%); } /* ---- STYLE WORLD: Solar — pure warm gold→ember ---- */ [data-style="solar"]{ --glow-1:254,214,10; --glow-2:255,146,46; --glow-3:255,108,70; --glow-1a:.30; --glow-2a:.20; --glow-3a:.12; --gradient: linear-gradient(100deg,#FFE773 0%,#FED60A 34%,#FF9A2E 74%,#FF6B3D 100%); } /* ---- STYLE WORLD: Midnight — clean single accent, minimal glow ---- */ [data-style="midnight"]{ --bg:#070709; --bg-2:#0B0B0F; --glow-1:254,214,10; --glow-2:255,220,120; --glow-3:130,134,150; --glow-1a:.22; --glow-2a:.10; --glow-3a:.07; --gradient: linear-gradient(100deg,#FFE773 0%,#FED60A 52%,#E0B400 100%); } *{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-body);font-size:17px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,canvas{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} ::selection{background:var(--accent);color:var(--on-accent);} h1,h2,h3,h4,.display{font-family:var(--font-display);margin:0;line-height:1;font-weight:800;letter-spacing:-.035em;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500;} .muted{color:var(--muted);} .grad-text{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;} .accent{color:var(--accent);} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px; border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em; cursor:pointer;border:1px solid transparent;white-space:nowrap; transition:transform .18s var(--ease), background .2s, box-shadow .25s, border-color .2s, color .2s;} .btn:active{transform:translateY(1px) scale(.99);} .btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 0 rgba(var(--glow-1),.0);} .btn-primary:hover{background:var(--accent-soft);box-shadow:0 14px 40px -10px rgba(var(--glow-1),.55);} .btn-ghost{background:rgba(255,255,255,.05);color:#fff;border-color:var(--line-2);backdrop-filter:blur(8px);} .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);} .btn-light{background:#fff;color:#0A0A0A;} .btn-light:hover{background:#EDEDED;} .btn-sm{height:44px;padding:0 18px;font-size:14.5px;} .btn .arr{transition:transform .2s var(--ease);} .btn:hover .arr{transform:translateX(3px);} /* ---------- header ---------- */ header.site{position:fixed;top:0;left:0;right:0;z-index:90; transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent;} header.site.solid{background:rgba(8,8,11,.72);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line);} .nav{display:flex;align-items:center;gap:22px;height:74px;} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:23px;letter-spacing:-.04em;} .brand svg{width:26px;height:26px;} .nav-links{display:flex;align-items:center;gap:4px;margin-left:18px;} .nav-links a{font-size:15px;color:var(--soft);font-weight:500;padding:9px 14px;border-radius:999px;transition:.18s;white-space:nowrap;} .nav-links a:hover{color:#fff;background:rgba(255,255,255,.06);} .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;} .lang{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;padding:3px;gap:2px;} .lang button{border:none;background:transparent;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.05em; padding:6px 11px;cursor:pointer;color:var(--muted);border-radius:999px;transition:.15s;} .lang button.on{background:#fff;color:#0A0A0A;} @media(max-width:940px){.nav-links{display:none;}} /* ---------- mesh backdrop ---------- */ .mesh{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;opacity:var(--glow-mult);transition:opacity .4s;} .mesh::before,.mesh::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);} .mesh::before{width:62vw;height:62vw;left:48%;top:-22%; background:radial-gradient(circle at 50% 50%, rgba(var(--glow-1),var(--glow-1a)), transparent 62%);} .mesh::after{width:55vw;height:55vw;left:-16%;top:34%; background:radial-gradient(circle at 50% 50%, rgba(var(--glow-3),var(--glow-3a)), transparent 62%);} .mesh .b3{position:absolute;width:48vw;height:48vw;right:-10%;bottom:-26%;border-radius:50%;filter:blur(80px); background:radial-gradient(circle at 50% 50%, rgba(var(--glow-2),var(--glow-2a)), transparent 62%);} .grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.36;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");} /* ====================================================== HERO — two-act scroll switch (seeker → employer) ====================================================== */ .hero{position:relative;height:230vh;} .hero-stage{position:sticky;top:0;height:100vh;min-height:680px;overflow:hidden;display:flex;flex-direction:column;} .hero-stage>.wrap{flex:1;display:flex;align-items:center;width:100%;position:relative;z-index:2;} .hero-grid{display:grid;width:100%;} /* audience scroll indicator (sticky pill) */ .aud-track{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:6; display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px; background:rgba(20,20,26,.66);border:1px solid var(--line-2);backdrop-filter:blur(16px); box-shadow:0 20px 50px -24px rgba(0,0,0,.8);} .aud-track .seg-bg{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px; background:var(--accent);transition:transform .5s var(--ease);} .aud-track button{position:relative;z-index:2;border:none;background:transparent;cursor:pointer; font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--soft); padding:11px 26px;border-radius:999px;transition:color .35s;white-space:nowrap;} .aud-track button.on{color:var(--on-accent);} .aud-progress{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:6; display:flex;align-items:center;gap:11px;color:var(--muted);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;} .aud-progress .bar{width:180px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;} .aud-progress .bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;} .scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;color:var(--muted); font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;} .scrollcue .m{width:22px;height:34px;border:1.5px solid var(--line-2);border-radius:12px;position:relative;} .scrollcue .m::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--accent);transform:translateX(-50%);animation:cue 1.6s var(--ease) infinite;} @keyframes cue{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0;transform:translate(-50%,11px);}} /* the two acts cross-fade */ .act{grid-area:1/1;display:grid;grid-template-columns:1.06fr .94fr;gap:40px;align-items:center; transition:opacity .5s var(--ease), transform .6s var(--ease);} .act[data-state="hidden"]{opacity:0;transform:translateY(28px) scale(.985);pointer-events:none;} .act[data-state="active"]{opacity:1;transform:none;} .act-copy .kick{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px; background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:13px;color:var(--soft);font-weight:500;margin-bottom:24px;} .act-copy .kick .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--glow-1),.25);} .act-copy h1{font-size:calc(clamp(46px,7.4vw,108px) * var(--hl-scale));font-weight:800;letter-spacing:-.045em;line-height:.92;} .act-copy h1 em{font-style:normal;} .act-copy .sub{font-size:clamp(17px,1.5vw,21px);color:var(--soft);max-width:42ch;margin:26px 0 32px;line-height:1.5;} .act-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} .act-trust{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap;} .act-trust .t b{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.03em;display:block;white-space:nowrap;} .act-trust .t span{font-size:12.5px;color:var(--muted);} /* phone visual area */ .hero-visual{grid-column:2;grid-row:1;position:relative;display:flex;justify-content:center;align-items:center;} .phone-rot{position:absolute;inset:0;display:flex;justify-content:center;align-items:center; transition:opacity .5s var(--ease), transform .7s var(--ease);} .phone-rot[data-state="hidden"]{opacity:0;transform:translateY(30px) rotate(-3deg) scale(.94);pointer-events:none;} /* ---------- phone frame (holds an image-slot screen) ---------- */ .phone{position:relative;width:300px;aspect-ratio:295/600;border-radius:46px;padding:11px; background:linear-gradient(160deg,#26262E,#0C0C10); box-shadow:0 2px 2px rgba(255,255,255,.08) inset, 0 50px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);} .phone::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:120px;height:26px;background:#000;border-radius:999px;z-index:4;} .phone .screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden; background:linear-gradient(165deg,#17171F,#0B0B11);} .phone image-slot{width:100%;height:100%;} .phone-halo{position:absolute;inset:-12%;z-index:-1;border-radius:50%;filter:blur(50px); background:radial-gradient(circle at 50% 40%, rgba(var(--glow-1),.5), transparent 64%);} .phone-float{animation:floaty 7s ease-in-out infinite;} @keyframes floaty{0%,100%{transform:translateY(-8px);}50%{transform:translateY(8px);}} /* floating glass chips around phone */ .chip{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:16px; background:rgba(22,22,28,.72);border:1px solid var(--line-2);backdrop-filter:blur(14px); box-shadow:0 20px 50px -20px rgba(0,0,0,.7);font-size:13px;font-weight:600;color:#fff;white-space:nowrap;} .chip .ico{width:30px;height:30px;border-radius:9px;background:rgba(var(--glow-1),.16);display:flex;align-items:center;justify-content:center;flex:none;} .chip small{display:block;font-size:11px;color:var(--muted);font-weight:500;} .chip.c1{top:13%;left:-3%;} .chip.c2{bottom:20%;right:-2%;} .chip.c3{bottom:6%;left:4%;} @media(max-width:900px){ .hero{height:auto;} .hero-stage{position:relative;height:auto;min-height:0;padding:120px 0 60px;} .hero-stage>.wrap{display:block;} .hero-grid,.act{grid-template-columns:1fr;} .act{position:relative;} .act[data-state="hidden"]{display:none;} .hero-visual{margin-top:48px;min-height:560px;} .aud-track{position:static;transform:none;margin:0 auto 30px;display:flex;} .aud-progress,.scrollcue{display:none;} } /* ====================================================== SECTION SHELL ====================================================== */ section.block{position:relative;padding:120px 0;} .sec-head{max-width:62ch;margin-bottom:56px;} .sec-head .eyebrow{display:block;margin-bottom:16px;} .sec-head h2{font-size:calc(clamp(32px,4.6vw,60px) * var(--hl-scale));font-weight:800;letter-spacing:-.04em;line-height:1.02;} .sec-head p{color:var(--soft);font-size:18px;margin:18px 0 0;max-width:52ch;} .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease);} .reveal.in{opacity:1;transform:none;} .reveal[data-d="1"]{transition-delay:.08s;} .reveal[data-d="2"]{transition-delay:.16s;} .reveal[data-d="3"]{transition-delay:.24s;} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.phone-float{animation:none;}} /* ---------- trust band (stat counters) ---------- */ .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0;background:var(--bg-2);} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .trust .stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:-.04em;display:block;line-height:1;} .trust .stat span{color:var(--muted);font-size:14px;margin-top:8px;display:block;} @media(max-width:760px){.trust-grid{grid-template-columns:1fr 1fr;gap:30px 18px;}} /* ---------- how it works — big rounded cards ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:34px;overflow:hidden;transition:border-color .25s, transform .25s var(--ease);min-height:280px; display:flex;flex-direction:column;} .step:hover{border-color:var(--line-2);transform:translateY(-4px);} .step .glow{position:absolute;width:200px;height:200px;right:-60px;top:-60px;border-radius:50%;filter:blur(50px); background:radial-gradient(circle,rgba(var(--glow-1),.18),transparent 65%);opacity:0;transition:opacity .3s;} .step:hover .glow{opacity:1;} .step .num{width:46px;height:46px;border-radius:14px;background:var(--accent);color:var(--on-accent); font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:auto;} .step h3{font-size:23px;font-weight:700;margin:24px 0 10px;letter-spacing:-.025em;} .step p{color:var(--muted);font-size:15.5px;margin:0;line-height:1.5;} @media(max-width:820px){.steps{grid-template-columns:1fr;}.step{min-height:0;}} /* ---------- feature carousel (Revolut horizontal scroller) ---------- */ .carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;} .car-nav{display:flex;gap:10px;} .car-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.04); color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;} .car-nav button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);} .car-nav button:disabled{opacity:.3;cursor:default;} .track-wrap{overflow:hidden;} .track{display:flex;gap:20px;padding:4px 0 24px;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth; scrollbar-width:none;} .track::-webkit-scrollbar{display:none;} .fcard{scroll-snap-align:start;flex:0 0 380px;max-width:84vw;position:relative;border-radius:var(--r-xl);overflow:hidden; background:var(--surface);border:1px solid var(--line);min-height:440px;display:flex;flex-direction:column; transition:border-color .25s, transform .3s var(--ease);} .fcard:hover{transform:translateY(-5px);border-color:var(--line-2);} .fcard .ftop{flex:1;position:relative;overflow:hidden;min-height:240px;display:flex;align-items:center;justify-content:center;} .fcard .ftop .mesh-mini{position:absolute;inset:0;} .fcard .ftop .mesh-mini::before{content:"";position:absolute;width:120%;height:120%;left:-10%;top:-20%; background:radial-gradient(50% 50% at 60% 30%, rgba(var(--glow-1),.5), transparent 62%), radial-gradient(50% 55% at 20% 90%, rgba(var(--glow-2),.4), transparent 60%); filter:blur(8px);} .fcard .pin-screen{position:relative;z-index:2;width:150px;aspect-ratio:295/600;border-radius:26px;padding:7px; background:linear-gradient(160deg,#26262E,#0C0C10);box-shadow:0 30px 50px -24px rgba(0,0,0,.7);} .fcard .pin-screen .screen{width:100%;height:100%;border-radius:20px;overflow:hidden;background:linear-gradient(165deg,#17171F,#0B0B11);} .fcard .pin-screen image-slot{width:100%;height:100%;} .fcard .fbody{padding:26px 28px 30px;border-top:1px solid var(--line);background:var(--surface);} .fcard .fbody .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);} .fcard .fbody h3{font-size:23px;font-weight:700;margin:12px 0 8px;letter-spacing:-.025em;} .fcard .fbody p{color:var(--muted);font-size:15px;margin:0;line-height:1.5;} /* category chips row */ .cats{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;} .cat{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line); border-radius:999px;padding:13px 20px;font-weight:600;font-size:15px;transition:.18s;color:var(--soft);} .cat:hover{border-color:var(--accent);color:#fff;} .cat .d{width:8px;height:8px;border-radius:50%;background:var(--accent);} /* ---------- cities ---------- */ .cities-sec .mesh::before{opacity:.5;} .cities{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .city{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:17px 20px;font-weight:600;font-size:15px;color:var(--soft);transition:.18s;} .city:hover{border-color:var(--line-2);color:#fff;background:var(--surface-2);} .city .pin{color:var(--accent);flex:none;} @media(max-width:900px){.cities{grid-template-columns:repeat(2,1fr);}} /* ---------- employer / business spotlight ---------- */ .spot{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2); background:linear-gradient(180deg,var(--surface-2),var(--bg-2));padding:64px;} .spot .mesh{z-index:0;} .spot-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;} .spot h2{font-size:clamp(30px,3.8vw,50px);font-weight:800;letter-spacing:-.04em;} .spot .sub{color:var(--soft);font-size:18px;margin:18px 0 30px;max-width:42ch;} .benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .benefit{background:rgba(12,12,16,.6);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;backdrop-filter:blur(8px);} .benefit .bi{width:38px;height:38px;border-radius:11px;background:rgba(var(--glow-1),.16);display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .benefit h4{font-family:var(--font-display);font-weight:700;font-size:16.5px;margin:0 0 6px;letter-spacing:-.02em;} .benefit p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.45;} .spot-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;} @media(max-width:900px){.spot{padding:38px 26px;}.spot-grid{grid-template-columns:1fr;}.benefits{grid-template-columns:1fr;}} /* ---------- download ---------- */ .dl{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line); background:var(--bg-2);padding:0;} .dl .mesh{z-index:0;} .dl-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px;} .dl h2{font-size:calc(clamp(34px,4.6vw,62px) * var(--hl-scale));font-weight:800;letter-spacing:-.045em;line-height:.96;} .dl .sub{color:var(--soft);font-size:19px;margin:20px 0 30px;} .store-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .store{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#0A0A0A;border-radius:14px;padding:12px 20px;transition:.18s;} .store:hover{transform:translateY(-2px);} .store small{display:block;font-size:10px;color:#555;line-height:1;} .store b{font-family:var(--font-display);font-size:18px;line-height:1.2;} .qr-row{display:flex;gap:16px;align-items:center;margin-top:26px;} .qr{width:112px;height:112px;border-radius:18px;background:#fff;padding:11px;flex:none;} .qr-note{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:9px;max-width:18ch;} .dl-visual{display:flex;justify-content:center;align-items:center;position:relative;} @media(max-width:900px){.dl-grid{grid-template-columns:1fr;padding:38px 26px;}.dl-visual{order:-1;}} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--line);padding:80px 0 48px;background:var(--bg-2);} .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px;} .foot-brand .brand{margin-bottom:18px;} .foot-brand p{color:var(--muted);font-size:15px;max-width:34ch;margin:0 0 22px;} .foot-social{display:flex;gap:10px;} .foot-social a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--soft);transition:.18s;} .foot-social a:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3);} .foot-col h5{font-family:var(--font-display);font-weight:700;font-size:14px;margin:0 0 16px;letter-spacing:-.01em;} .foot-col a{display:block;color:var(--muted);font-size:14.5px;padding:6px 0;transition:.15s;} .foot-col a:hover{color:#fff;} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap;} .foot-bottom .legal{font-size:13px;color:var(--faint);} .foot-bottom .contact{font-size:14px;color:var(--muted);display:flex;gap:20px;flex-wrap:wrap;} @media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:40px 24px;}} /* image-slot theming (dark) */ image-slot{--is-bg:#0E0E13;--is-fg:#6A6A78;--is-border:rgba(255,255,255,.14);} /* how-it-works audience toggle */ .seg-mini{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:4px;gap:2px;background:rgba(255,255,255,.03);} .seg-mini button{border:none;background:transparent;cursor:pointer;font-family:var(--font-display);font-weight:700; font-size:14px;color:var(--muted);padding:9px 18px;border-radius:999px;transition:.18s;white-space:nowrap;} .seg-mini button.on{background:var(--accent);color:var(--on-accent);}