*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#000;--text:#fff;--muted:rgba(255,255,255,0.5);--dim:rgba(255,255,255,0.28); --border:rgba(255,255,255,0.09);--card:rgba(255,255,255,0.04); --blue:#5088FD;--green:#48CA7C;--dark-blue:#184383;--red:#FF6B6B; --grad:linear-gradient(90deg,#5088FD 0%,#48CA7C 55%,#8ef5c4 100%); --grad-diag:linear-gradient(135deg,#5088FD 0%,#48CA7C 100%); --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --max:1170px;--ease:cubic-bezier(0.22,1,0.36,1); } html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:#0a0a0a} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;position:relative} /* The gradient pans left to right, forever, without a seam. Two things make the loop invisible. The gradient is a palindrome that ENDS on the colour it starts with, and the pan is exactly one full image width (background-size:200% travelled to background-position:200%). Since the background repeats, that lands on a pixel-identical state, so there is no jump at the wrap. Change one of those numbers and the seam appears. */ .grad-text{ background:linear-gradient(90deg,#5088FD 0%,#48CA7C 27%,#8ef5c4 50%,#48CA7C 73%,#5088FD 100%); background-size:200% auto; -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:gradShift 9s linear infinite; } @keyframes gradShift{to{background-position:200% center}} @media(prefers-reduced-motion:reduce){.grad-text{animation:none;background:var(--grad);background-size:auto}} .r{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .r.in{opacity:1;transform:none} .r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.24s} .r.d4{transition-delay:.32s}.r.d5{transition-delay:.40s}.r.d6{transition-delay:.48s} /* Progress */ #prog{position:fixed;top:0;left:0;height:2px;background:var(--grad);z-index:300;width:0;transition:width .08s linear;pointer-events:none} /* NAV */ nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:18px 0;transition:background .35s,border-color .35s,backdrop-filter .35s} nav.scrolled{background:rgba(0,0,0,0.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)} .nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:0 28px} .nav-logo svg{height:28px;width:auto} .nav-links{display:flex;align-items:center;gap:28px;list-style:none} .nav-links a{font-size:16px;color:#fff;transition:opacity .2s} .nav-links a:hover{opacity:.72} .nav-cta{display:inline-flex;align-items:center;gap:8px;background:white;color:#000;padding:9px 18px;border-radius:999px;font-size:16px;font-weight:600;transition:opacity .2s,transform .2s;white-space:nowrap} .nav-cta:hover{opacity:.88;transform:scale(.97)} .nav-cta svg{width:16px;height:16px} /* HERO */ .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:116px 28px 64px;text-align:center;position:relative;overflow:hidden} .hero-badge,.hero h1,.hero-sub,.hero-actions,.hero-rating{position:relative;z-index:1} /* Structure without lighting: a dot grid, masked to an ellipse so it never ends on a hard edge. Texture rather than glow — the blobs read as a light source, this reads as ground. */ /* Dot field, fixed in place. ::before is the static grid; ::after is a vignette painted over it and over the sparks, so everything fades out at the edges without needing a mask that would have to move with them. */ .hero::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-image:radial-gradient(rgba(255,255,255,.17) 1.3px,transparent 1.3px); background-size:28px 28px; /* Anchored to the centre, not the top-left. A dot therefore always sits exactly at 50%/50%, so the sparks below can land on real grid positions with calc(50% + 28n) at ANY viewport width. */ background-position:50% 50%; } .hero::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(ellipse 68% 60% at 50% 46%,transparent 18%,#000 82%); } /* Existing grid dots catching colour. These are NOT extra dots: each is positioned at calc(50% + 28n), which is exactly where a grid dot already sits, and is sized to sit on top of it. Nothing new appears between the grid — the grid itself lights up. Durations are all coprime-ish so the set never re-synchronises into a visible loop, and short enough that several are always lit at once. */ /* preserveAspectRatio="none" on the svg is load-bearing: the artwork keeps height="690", so with the default "meet" it scaled to fit the HEIGHT and sat letterboxed in a wider box — widening the element changed nothing at all. "none" lets it stretch horizontally, which is invisible on a shape this blurred and is what actually widens the wash. */ .hero-glow{ /* Pulled up so the bright core of the wash sits behind the nav rather than through the headline. In px, not %, because a percentage resolves against the HERO's height and would drift whenever the hero resizes. */ position:absolute;top:-330px;left:50%; transform:translateX(-50%) scaleY(-1); width:200%;max-width:2600px;pointer-events:none;opacity:1;z-index:1; } .hero-spark{ position:absolute;width:3px;height:3px;border-radius:50%; transform:translate(-50%,-50%) scale(.4); pointer-events:none;z-index:0;opacity:0; animation:spark var(--t) ease-in-out infinite;animation-delay:var(--d); will-change:opacity,transform; } @keyframes spark{ 0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.6)} 25% {opacity:.7;transform:translate(-50%,-50%) scale(1)} 55% {opacity:.7;transform:translate(-50%,-50%) scale(1)} 80% {opacity:0;transform:translate(-50%,-50%) scale(.6)} } @media(prefers-reduced-motion:reduce){.hero-spark{animation:none;opacity:.6;transform:translate(-50%,-50%)}} .hero-rating{ display:inline-flex;align-items:center;gap:9px;margin-top:26px; font-size:13.5px;color:var(--muted);transition:color .2s; } .hero-rating:hover{color:rgba(255,255,255,.8)} .hero-rating strong{color:#f1f5f9;font-weight:600} .hero-stars{color:#FBBC04;font-size:14px;letter-spacing:1px} @keyframes rayPulse{0%,100%{opacity:.45}50%{opacity:.75}} @keyframes rayShift{0%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(1.04)}100%{transform:translateX(-50%) scaleX(1)}} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 14px;font-size:16px;color:var(--muted);margin-bottom:28px;animation:fadeDown .8s var(--ease) both} .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--grad-diag);flex-shrink:0} @keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}} .hero h1{font-size:clamp(55px,8.75vw,105px);font-weight:300;line-height:1.0;letter-spacing:-0.035em;max-width:940px;animation:fadeUp .9s var(--ease) .08s both} .hero h1 strong{font-weight:600} .hero-sub{font-size:18px;color:var(--muted);max-width:660px;line-height:1.6;margin-top:22px;animation:fadeUp .9s var(--ease) .18s both} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} .hero-actions{margin-top:36px;animation:fadeUp .9s var(--ease) .28s both;display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .btn-chrome{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-size:16px;font-weight:600;background:white;color:#000;position:relative;transition:transform .2s,opacity .2s;cursor:pointer;border:none;z-index:0} .btn-chrome::before{content:'';position:absolute;inset:-2px;border-radius:999px;background:var(--grad);z-index:-1;padding:2px} .btn-chrome::after{content:'';position:absolute;inset:0;border-radius:999px;background:white;z-index:-1} .btn-chrome:hover{transform:scale(.97)} .btn-chrome{background:white;color:#000} .btn-chrome svg{width:18px;height:18px;flex-shrink:0} .btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-size:16px;color:var(--muted);border:1px solid var(--border);transition:color .2s,border-color .2s,transform .2s} .btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.22);transform:scale(.98)} /* Hero plugin image */ /* Tool tabs on hero */ /* ── Hero story diagram ─────────────────────────────────────────────── Wires draw themselves, then each box fades in as its wire arrives. pathLength="1" lets one dash rule cover paths of very different real lengths. Timing is one calc() driven by --i on each element. */ .fx{position:relative;width:100%;max-width:1120px;margin:44px auto 0;z-index:1} .fx-svg{display:block;width:100%;height:auto;overflow:visible} .fx-stack{display:none} .fx-label{fill:rgba(255,255,255,.62);font-size:11.5px;font-weight:500} .fx-hub{fill:#f1f5f9;font-size:19px;font-weight:600;letter-spacing:-.01em} .fx-chip{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.10)} .fx-chiptext{fill:rgba(255,255,255,.6);font-size:9.5px;font-weight:700;letter-spacing:.09em} .fx-wire{stroke-dasharray:1;stroke-dashoffset:1} .fx.is-live .fx-wire{animation:fxDraw .5s ease-out forwards;animation-delay:calc(var(--i) * .16s + .12s)} @keyframes fxDraw{to{stroke-dashoffset:0}} /* Arrowheads belong to the wire, so they must not appear before it lands. */ .fx-wire[marker-end]{opacity:0} .fx.is-live .fx-wire[marker-end]{animation:fxDraw .5s ease-out forwards,fxShow .01s linear forwards;animation-delay:calc(var(--i) * .16s + .12s)} @keyframes fxShow{to{opacity:1}} /* ── The loop ───────────────────────────────────────────────────────── One short dash per wire, running the whole length on repeat. The delay is derived from --i so the pulse arrives at each segment roughly when the previous one finishes, reading as a single wave crossing the diagram rather than six unrelated blips. The 1.5s head start lets the entrance draw finish first, so the loop begins on a diagram that is already fully assembled. */ .fx-pulse{stroke-dasharray:.1 .9;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 5px rgba(142,245,196,.55))} .fx.is-live .fx-pulse{animation:fxPulse 3.4s linear infinite;animation-delay:calc(1.5s + var(--i) * .13s)} @keyframes fxPulse{ 0%{stroke-dashoffset:1;opacity:0} 6%{opacity:.95} 55%{opacity:.95} 70%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:0;opacity:0} } .fx-tile{opacity:0;transform:translateY(6px)} .fx.is-live .fx-tile{animation:fxIn .45s var(--ease) forwards;animation-delay:calc(var(--i) * .16s)} @keyframes fxIn{to{opacity:1;transform:none}} /* A 760-unit-wide diagram is illegible on a phone: swap it for the list. */ @media(max-width:760px){ .fx{margin-top:42px;max-width:420px} .fx-svg{display:none} .fx-stack{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0} .fx-stack li{ position:relative;padding:13px 16px 13px 44px;border-radius:13px; background:#0d1117;border:1px solid rgba(255,255,255,.09); font-size:13.5px;line-height:1.5;color:var(--muted); } .fx-stack li b{color:#f1f5f9;font-weight:600} .fx-stack li::before{ content:'';position:absolute;left:18px;top:19px; width:9px;height:9px;border-radius:50%;background:var(--grad-diag); } } @media(prefers-reduced-motion:reduce){ .fx-wire,.fx-wire[marker-end]{stroke-dashoffset:0;opacity:1} .fx-pulse,.fx.is-live .fx-pulse{animation:none;opacity:0} .fx-tile{opacity:1;transform:none} .fx.is-live .fx-wire,.fx.is-live .fx-wire[marker-end],.fx.is-live .fx-tile{animation:none} } /* BROWSER MARKS IN THE HERO One line under the note: icons then sentence, so it reads as a caption rather than as a second logo strip competing with the customer row below it. Full colour and full opacity on purpose — these are trademarks, and most vendors' brand guidelines forbid recolouring or fading them, which is exactly what the customer logos above DO get. */ /* A pill, in the same language as the hero badge above it (same translucent white, same hairline border, same 999px radius), so the hero opens and closes on matching chips instead of ending on loose text. Centred by the hero's own text-align, which is why it is inline-flex. */ .hero-browsers{ display:inline-flex;align-items:center;gap:13px;margin-top:26px; padding:7px 15px 7px 18px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11); border-radius:999px; } .hb-text{font-size:13.5px;color:var(--muted);line-height:1.4;white-space:nowrap} /* Still a stack, but a gentler one. At -8px on 36px icons the logos ran into each other and read as one blob; -5px on 28px keeps the stacked look while leaving every mark recognisable, which is the whole point of showing them. The z-index that puts the first on top is set per item by the renderer, hence position:relative. */ .hb-stack{display:inline-flex;align-items:center} .hb-stack img{ width:28px;height:28px;display:block;flex:none;position:relative; /* Traces each logo's own silhouette, so it separates a circle (Chrome) and a squircle (Safari) equally well. A box-shadow could not: these are transparent PNG-shaped SVGs, so it would draw a square. */ filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); transition:transform .18s var(--ease); } .hb-stack img + img{margin-left:-5px} /* The hovered logo lifts and comes to the front, so the stack can be read one browser at a time rather than only as a group. */ .hb-stack img:hover{transform:translateY(-3px) scale(1.06);z-index:10} @media (max-width:560px){ .hero-browsers{gap:10px;margin-top:18px;padding:7px 13px 7px 15px} .hb-text{font-size:12.5px} .hb-stack img{width:25px;height:25px} .hb-stack img + img{margin-left:-4px} } @media (max-width:400px){ .hero-browsers{flex-direction:column;gap:9px;border-radius:18px;padding:10px 16px} .hb-text{white-space:normal;text-align:center} } @media (prefers-reduced-motion:reduce){.hb-stack img{transition:none}} /* TRUSTED-BY LOGOS A right-to-left marquee rather than a fixed row: six names sitting still read as "these six", the same six drifting past read as a roster that keeps going. Same loop mechanism as the feature marquee below — the list is rendered twice and the track travels exactly -50%, which lands on a pixel-identical state, so there is no seam to see. The artwork is white-on-transparent and needs no filter on this dark page; opacity alone keeps six logos from out-shouting the headline. */ .logos{padding:46px 0 10px;--logo-h:26px} /* The bottom padding is the ONLY thing separating this strip from the hero video: site.css sets .hero-media{margin-top:0} because the media's position is driven by .hero-copy's min-height instead. So spacing below the logos has to be set here, and a change to it moves the video. */ .logos-hero{padding:34px 0 104px;position:relative;z-index:1;--logo-h:24px} .logos-head{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:500;text-align:center;margin-bottom:24px} .logos-marquee{position:relative;overflow:hidden} /* Fades at both edges so logos arrive and leave instead of being chopped off at a hard border. Sized in vw so they stay proportional on a phone, where a fixed 160px would swallow most of the strip. */ .logos-marquee::before,.logos-marquee::after{content:'';position:absolute;top:0;bottom:0;width:12vw;max-width:180px;z-index:2;pointer-events:none} .logos-marquee::before{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)} .logos-marquee::after{right:0;background:linear-gradient(-90deg,var(--bg) 0%,transparent 100%)} .logos-track{display:flex;width:max-content;animation:logosScroll var(--logos-dur,60s) linear infinite} .logos-track:hover{animation-play-state:paused} @keyframes logosScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* The trailing padding has to match the gap exactly, or the join between the two copies is a gap of the wrong width once per loop. */ .logos-row{display:flex;align-items:center;gap:84px;padding-right:84px;list-style:none;margin:0} .logos-row li{display:flex;align-items:center;flex:none} /* Height only. These are all exported on a uniform 32px artboard, so their natural widths are already matched; capping width would shrink the widest wordmark against marks it was drawn to sit beside. Per-logo `scale` in content.mjs does the optical balancing instead. */ .logos-row img{height:var(--logo-h);width:auto;display:block;opacity:.55;transition:opacity .2s var(--ease)} .logos-row img:hover{opacity:.95} @media (max-width:760px){ .logos{padding:34px 0 6px} .logos-hero{padding:26px 0 68px;--logo-h:20px} .logos-row{gap:54px;padding-right:54px} .logos-head{margin-bottom:18px} } /* Someone who asked for less motion gets a still row, not a frozen frame mid-scroll: the track resets to the start so the first copy is the one on screen, and the duplicate simply sits off to the right unseen. */ @media (prefers-reduced-motion:reduce){ .logos-track{animation:none;transform:none} .logos-row img{transition:none} } /* MARQUEE */ .marquee-wrap{overflow:hidden;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;background:rgba(255,255,255,.015)} .marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none} .marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)} .marquee-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg) 0%,transparent 100%)} .marquee-track{display:flex;gap:0;width:max-content;animation:marquee 54s linear infinite} .marquee-track:hover{animation-play-state:paused} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mi{display:inline-flex;align-items:center;gap:0;font-size:15px;font-weight:400;color:rgba(255,255,255,.72);white-space:nowrap;flex-shrink:0;letter-spacing:.01em;padding:0 36px;} .mi-sep{width:1px;height:14px;background:rgba(255,255,255,.15);flex-shrink:0;margin:0;} .mi-dot{display:none;} /* SECTIONS */ section{padding:96px 0;position:relative} /* Every section label is plain green text, no pill, and the Features label (.ex-pill in site.css) matches it. Change the two together. */ .sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:20px} .sec-eyebrow::before{display:none} /* Green is the resolve colour everywhere else on the page, so it reads as the wrong signal above "The problem". Red is the same #FF6B6B already used for high-severity visuals — a modifier, never the base rule, since every other eyebrow on the page stays green. */ .sec-eyebrow.neg{color:var(--red)} h2.sec-title{font-size:clamp(30px,4vw,50px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;margin-bottom:14px;text-align:center} h2.sec-title strong{font-weight:600} .sec-sub{font-size:16px;color:var(--muted);max-width:500px;line-height:1.65;text-align:center;margin:0 auto} /* FEATURES */ .features-intro{margin-bottom:52px;text-align:center} .features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;} /* Icon beside the text, not stacked above it. Each card is one line now, and the stacked layout left most of the card empty. A 2-row grid with the icon spanning both keeps the icon optically aligned to the heading while the text sets its own rhythm — no wrapper element needed in the markup. */ .feat-card{ background:#0d1117;border:1px solid var(--border);border-radius:16px; padding:22px 24px; display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:5px; align-content:start; transition:border-color .25s,transform .25s; } .feat-card-icon{grid-column:1;grid-row:1 / span 2;align-self:start;} .feat-card h3{grid-column:2;grid-row:1;align-self:center;} .feat-card p{grid-column:2;grid-row:2;} .feat-card:hover{border-color:rgba(80,136,253,.4);transform:translateY(-2px);} .feat-card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .feat-card h3{font-size:16px;font-weight:600;color:#f1f5f9;margin:0;} .feat-card p{font-size:14px;color:var(--muted);line-height:1.6;margin:0;} .feat-card .feat-tag{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;vertical-align:middle;margin-left:8px;} .feat-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;} .feat-card ul li{font-size:13px;color:var(--muted);line-height:1.5;padding-left:14px;position:relative;} .feat-card ul li::before{content:'–';position:absolute;left:0;color:var(--muted);} @media(max-width:640px){.features-grid{grid-template-columns:1fr;}} .feat:hover{background:rgba(255,255,255,.03)} .feat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .feat-icon svg{width:22px;height:22px} .feat-icon.blue{background:rgba(80,136,253,.14)} .feat-icon.green{background:rgba(72,202,124,.14)} .feat-icon.cyan{background:rgba(173,239,253,.12)} .feat-icon.yellow{background:rgba(254,188,46,.12)} .feat-icon.purple{background:rgba(180,100,255,.12)} .feat-icon.red{background:rgba(255,107,107,.12)} .feat h3{font-size:16px;font-weight:600;letter-spacing:-.01em} .feat-tag{display:inline-flex;align-items:center;gap:5px;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:rgba(80,136,253,.12);border-radius:4px;padding:2px 7px;width:fit-content} .feat ul{list-style:none;display:flex;flex-direction:column;gap:7px} .feat li{font-size:16px;color:var(--muted);line-height:1.55;padding-left:14px;position:relative} .feat li::before{content:'–';position:absolute;left:0;color:var(--dim)} .feat-sub{font-size:16px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.05em} /* ── Who it's for ────────────────────────────────────────────────────── Four columns, each led by its accent. The accent does three jobs rather than one: a thick glowing bar on top, a wash fading down behind the column, and the hover lift — so the block reads as lit from its own colour instead of being a caption under a hairline. --acc is set per item in the markup and every rule below derives from it. */ #segments{background:rgba(255,255,255,.012)} .seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px} .seg{ position:relative;padding:24px 18px 22px;border-radius:0 0 14px 14px; transition:transform .25s var(--ease); } /* the wash, fading out before it reaches the copy */ .seg::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,var(--acc) 0%,transparent 58%); opacity:.13; } /* the bar, with its own glow */ .seg::after{ content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px; background:var(--acc);box-shadow:0 0 16px var(--acc),0 0 3px var(--acc); } .seg:hover{transform:translateY(-3px)} .seg-role{position:relative;font-size:17px;font-weight:600;color:#fff;letter-spacing:-.015em;margin-bottom:9px} .seg p{position:relative;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.6} @media(max-width:860px){.seg-grid{grid-template-columns:repeat(2,1fr);gap:18px}} @media(max-width:520px){.seg-grid{grid-template-columns:1fr;gap:14px}} /* HOW IT WORKS */ #how{background:rgba(255,255,255,.012)} .how-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .how-card{background:#0d1117;border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;} .how-card-img{width:100%;display:block;border-bottom:1px solid var(--border);} .how-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;} .how-card-num{font-size:13px;font-weight:700;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.06em;} .how-card-body h3{font-size:17px;font-weight:600;letter-spacing:-.02em;color:#f1f5f9;margin:0;} .how-card-body p{font-size:14px;color:var(--muted);line-height:1.65;margin:0;} @media(max-width:820px){.how-grid{grid-template-columns:1fr;}} /* Step visuals */ .sv-install{width:100%;display:flex;flex-direction:column;gap:10px} .sv-install-bar{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px} .sv-install-bar svg{width:22px;height:22px} .sv-install-text{flex:1} .sv-install-name{font-size:16px;font-weight:600} .sv-install-sub{font-size:16px;color:var(--dim)} .sv-install-btn{background:var(--blue);color:#fff;font-size:16px;font-weight:600;padding:5px 12px;border-radius:6px;white-space:nowrap} .sv-install-ok{font-size:16px;color:var(--green);text-align:center} .sv-report{width:100%} .sv-field{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:16px} .sv-field:last-child{border-bottom:none} .sv-label{color:var(--dim);width:64px;flex-shrink:0} .sv-val{color:var(--muted)} .sv-badge{padding:2px 7px;border-radius:4px;font-size:16px;font-weight:600} .sv-badge.crit{background:rgba(255,107,107,.15);color:#FF6B6B} .sv-notifs{width:100%;display:flex;flex-direction:column;gap:7px} .sv-notif{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:9px 12px;font-size:16px} .sv-notif-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px} .sv-notif-body{flex:1} .sv-notif-title{font-weight:600;font-size:16px;margin-bottom:1px} .sv-notif-sub{color:var(--dim);font-size:16px} .sv-notif-time{color:var(--dim);font-size:16px} /* STATS */ /* TESTIMONIALS */ #testimonials{background:rgba(255,255,255,.012)} /* Edge fades, same treatment as the feature ticker, so cards dissolve rather than being cut off at the container edge. */ .test-scroller{position:relative;margin-top:52px;overflow:hidden} .test-scroller::before,.test-scroller::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none} .test-scroller::before{left:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 100%)} .test-scroller::after{right:0;background:linear-gradient(-90deg,var(--bg) 0%,transparent 100%)} .test-track{display:flex;width:max-content;animation:testScroll 46s linear infinite} .test-track:hover{animation-play-state:paused} @keyframes testScroll{to{transform:translateX(-50%)}} /* Spacing as margin-right on every card, NOT flex gap. With gap there is no gap after the last card, so half the track width lands 8px short of where the fifth card starts and the wrap visibly jumps. */ .test-track .test-card{flex:0 0 400px;width:400px;margin-right:16px} @media(prefers-reduced-motion:reduce){.test-track{animation:none}} @media(max-width:640px){.test-track .test-card{flex-basis:300px;width:300px}} .test-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s} .test-card:hover{border-color:rgba(255,255,255,.18)} .test-stars{display:flex;gap:3px} .test-star{color:#FBBC04;font-size:16px} .test-star.empty{color:var(--dim)} .test-text{font-size:16px;color:var(--muted);line-height:1.7;flex:1} .test-author{display:flex;align-items:center;gap:10px;margin-top:4px} .test-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad-diag);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#fff;flex-shrink:0;overflow:hidden}.test-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .test-name{font-size:16px;font-weight:600} .test-date{font-size:16px;color:var(--dim)} .test-role{font-size:16px;color:var(--dim)} /* PRICING */ #pricing{background:rgba(255,255,255,.012)} .pricing-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;margin-top:56px;max-width:780px;margin-left:auto;margin-right:auto;align-items:stretch} .plan{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:20px;transition:transform .3s,border-color .3s} .plan:hover{transform:translateY(-5px)} .plan.pro{background:linear-gradient(145deg,rgba(80,136,253,.12) 0%,rgba(10,10,18,.95) 50%,rgba(72,202,124,.08) 100%);border-color:transparent;position:relative;} .plan.pro::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(145deg,rgba(80,136,253,.6),rgba(72,202,124,.4));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .plan.pro::after{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(ellipse at 30% 0%,rgba(80,136,253,.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(72,202,124,.1) 0%,transparent 55%);pointer-events:none} .plan.pro *{color:#fff!important} .plan.pro .plan-feat{border-color:rgba(255,255,255,.07)!important} .plan.pro .plan-check{color:var(--green)!important} .plan.pro .plan-btn{background:linear-gradient(90deg,var(--blue),var(--green));color:#fff!important;border-color:transparent} .plan.pro .plan-btn:hover{opacity:.88} .plan.pro .plan-tag{background:rgba(80,136,253,.15);color:var(--blue)!important} .plan.pro .plan-name{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important;font-weight:700;letter-spacing:.1em} .plan-name{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:8px} /* Billing period switch. A segmented pill rather than a checkbox toggle so both prices are legible at once — the yearly saving is the argument, and a switch that hides one number hides half of it. */ .plan-billing{display:inline-flex;gap:2px;padding:3px;margin-bottom:14px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:999px} .pb-opt{background:none;border:none;cursor:pointer;font-family:var(--font);font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55)!important;padding:6px 14px;border-radius:999px;transition:background .2s,color .2s;white-space:nowrap} .pb-opt:hover{color:#fff!important} .pb-opt.active{background:rgba(255,255,255,.14);color:#fff!important} .plan-price{display:flex;align-items:flex-end;gap:4px} .plan-curr{font-size:20px;font-weight:400;padding-bottom:5px} .plan-amt{font-size:48px;font-weight:300;letter-spacing:-0.04em;line-height:1} .plan-per{font-size:16px;color:var(--muted);padding-bottom:6px} .plan-tag{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:16px;font-weight:600;background:rgba(80,136,253,.12);color:var(--blue);border-radius:5px;padding:3px 9px;width:fit-content} .plan-desc{font-size:16px;color:var(--muted);line-height:1.6} .plan-feats{display:flex;flex-direction:column;gap:0;flex:1} .plan-feat{padding:8px 0;border-bottom:1px solid var(--border);font-size:16px;color:var(--muted);display:flex;align-items:flex-start;gap:8px} .plan-feat:last-child{border-bottom:none} .plan-check{color:var(--green);font-size:16px;flex-shrink:0;margin-top:1px} .plan-btn{display:block;text-align:center;padding:12px;border-radius:10px;font-size:16px;font-weight:600;border:1px solid var(--border);color:var(--text);transition:background .2s,transform .2s;cursor:pointer;background:none;width:100%;font-family:var(--font)} .plan-btn:hover{background:rgba(255,255,255,.08);transform:scale(.98)} /* ── Pricing cards ───────────────────────────────────────────────────── Price is the hero; the CTA is pinned to the bottom of the card with margin-top:auto so both buttons align on the same line however the two feature lists differ in length. Pro's accent is GOLD, not the brand blue/green: it is the same signal the app puts on a paid profile, so the badge someone sees after buying is the colour they were sold on. */ .pr-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:56px auto 0;align-items:stretch} .pr-card{position:relative;display:flex;flex-direction:column;padding:30px 28px 30px;border-radius:20px;background:#0b0d13;border:1px solid var(--border);transition:transform .3s var(--ease),border-color .3s} .pr-card:hover{transform:translateY(-4px)} .pr-card--pro{background:radial-gradient(ellipse at 25% -10%,rgba(245,196,81,.13) 0%,transparent 62%),radial-gradient(ellipse at 90% 112%,rgba(224,164,25,.09) 0%,transparent 55%),#0f0d09;border-color:transparent} /* Gradient ring drawn with a mask so the card keeps its dark fill. */ .pr-card--pro::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(150deg,rgba(245,196,81,.9),rgba(224,164,25,.55) 55%,rgba(245,196,81,.22));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .pr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px} .pr-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--dim)} .pr-name--pro{background:linear-gradient(135deg,#f5c451,#e0a419);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} /* Green, not gold: the saving is a separate message from the plan itself, and in gold it read as more Pro branding rather than a discount. */ .pr-badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#48CA7C;background:rgba(72,202,124,.12);border:1px solid rgba(72,202,124,.32);border-radius:999px;padding:3px 10px;white-space:nowrap} /* The hero. */ .pr-price{display:flex;align-items:baseline;gap:2px;font-size:54px;font-weight:300;letter-spacing:-.045em;line-height:1;color:var(--text)} .pr-cur{font-size:24px;font-weight:400;align-self:flex-start;margin-top:6px;color:var(--muted);letter-spacing:normal} /* letter-spacing:normal — the price's tight -.045em is inherited by these small spans and crushes them into 'peryear'. */ .pr-per{font-size:14px;color:var(--muted);font-weight:400;margin-left:9px;align-self:flex-end;padding-bottom:5px;letter-spacing:normal} .pr-sub{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.5} .pr-rule{height:1px;background:var(--border);margin:22px 0 20px} .pr-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px;padding:0} .pr-list li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5;color:var(--muted)} .pr-list li strong{color:var(--text);font-weight:600} .pr-list li::before{content:'✓';position:absolute;left:0;top:-1px;color:var(--green);font-size:13px} .pr-card--pro .pr-list li::before{color:#f5c451} /* margin-top:auto is what pins this to the bottom of the card. */ .pr-cta{display:block;margin-top:auto;text-align:center;padding:13px 16px;border-radius:11px;font-size:14px;font-weight:600;border:1px solid var(--border);color:var(--text);transition:background .2s,opacity .2s,transform .2s} .pr-cta:hover{background:rgba(255,255,255,.08);transform:scale(.98)} .pr-cta--pro{background:linear-gradient(135deg,#f5c451,#e0a419);border-color:transparent;color:#2a1e00;font-weight:800} .pr-cta--pro:hover{opacity:.9;background:linear-gradient(135deg,#f5c451,#e0a419)} /* align-self, because a flex column stretches its children by default — the toggle would otherwise span the whole card instead of hugging it. */ .pr-cards .plan-billing{align-self:flex-start;margin-bottom:16px} @media(max-width:760px){ .pr-cards{grid-template-columns:1fr;max-width:440px;gap:16px} .pr-card{padding:26px 22px} .pr-price{font-size:44px} } /* FAQ */ #faq{background:rgba(255,255,255,.012)} .faq-list{margin-top:52px;display:flex;flex-direction:column;gap:0;max-width:700px;margin-left:auto;margin-right:auto} .faq-item{border-bottom:1px solid var(--border)} .faq-q{width:100%;text-align:left;background:none;border:none;color:var(--text);font-family:var(--font);font-size:16px;font-weight:500;padding:22px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .2s} .faq-q:hover{color:rgba(255,255,255,.85)} .faq-arrow{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;transition:transform .3s var(--ease),background .2s} .faq-item.open .faq-arrow{transform:rotate(45deg);background:rgba(80,136,253,.15);border-color:rgba(80,136,253,.3)} .faq-a{font-size:16px;color:var(--muted);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s} /* Headroom for the longest answer at mobile width, where a ~250-character reply wraps to about 7 lines and clipped against the old 200px ceiling. */ .faq-item.open .faq-a{max-height:400px;padding-bottom:20px} /* CTA */ .cta-section{padding:120px 28px;text-align:center;position:relative;overflow:hidden} .cta-blob{display:none} .cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto} .cta-inner h2{font-size:clamp(43px,6.25vw,73px);font-weight:300;letter-spacing:-0.03em;margin-bottom:12px} .cta-inner h2 strong{font-weight:600} .cta-tagline{font-size:16px;color:rgba(255,255,255,.8);margin-bottom:36px;line-height:1.65;max-width:440px;margin-left:auto;margin-right:auto} .cta-checks{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:24px;flex-wrap:wrap} .cta-check{font-size:16px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px} .cta-check-icon{color:#fff} /* FOOTER */ .footer-wrap{position:relative;overflow:hidden} .footer-glow-img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:130%;max-width:1600px;pointer-events:none;opacity:.85;z-index:0} footer{border-top:1px solid var(--border);padding:44px 0 32px;position:relative;z-index:1} .footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;max-width:var(--max);margin:0 auto;padding:0 28px} .footer-brand{display:flex;flex-direction:column;gap:10px;max-width:220px} .footer-logo svg{height:26px;width:auto} .footer-brand p{font-size:16px;color:rgba(255,255,255,.75);line-height:1.6} .footer-links{display:flex;gap:36px;flex-wrap:wrap} .footer-link{font-size:16px;color:rgba(255,255,255,.85);transition:color .2s} .footer-link:hover{color:#fff} .footer-bottom{max-width:var(--max);margin:28px auto 0;padding:20px 28px 0;border-top:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} .footer-bottom p{font-size:16px;color:rgba(255,255,255,.7)} .footer-bottom a{color:rgba(255,255,255,.8);transition:color .2s} .footer-bottom a:hover{color:#fff} /* NOTIFY MODAL */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(12px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s} .modal-overlay.open{opacity:1;pointer-events:all} .modal{background:#111;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:36px;max-width:440px;width:100%;position:relative;transform:translateY(20px);transition:transform .3s var(--ease)} .modal-overlay.open .modal{transform:translateY(0)} .modal-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.06);border:none;color:var(--muted);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s} .modal-close:hover{background:rgba(255,255,255,.12)} .modal h3{font-size:22px;font-weight:600;margin-bottom:8px} .modal p{font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:24px} .modal-form{display:flex;flex-direction:column;gap:12px} .modal-input{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;padding:12px 16px;font-size:16px;color:var(--text);font-family:var(--font);width:100%;outline:none;transition:border-color .2s} .modal-input:focus{border-color:rgba(80,136,253,.5)} .modal-input::placeholder{color:var(--dim)} .modal-submit{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:13px;font-size:16px;font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity .2s,transform .2s} .modal-submit:hover{opacity:.88;transform:scale(.98)} .modal-submit:disabled{opacity:.5;cursor:not-allowed;transform:none} .modal-success{display:none;text-align:center;padding:20px 0} .modal-success .check{font-size:48px;margin-bottom:12px} .modal-success h4{font-size:18px;font-weight:600;margin-bottom:8px} .modal-success p{font-size:16px;color:var(--muted)} .modal.success-state .modal-form{display:none} .modal.success-state .modal-success{display:block} /* RESPONSIVE */ @media(max-width:820px){ .features-grid{grid-template-columns:1fr} .feat:last-child{grid-column:auto!important} .step{grid-template-columns:48px 1fr} .step-vis{display:none} .pricing-grid{grid-template-columns:1fr;max-width:420px} .nav-links{display:none} .footer-inner{flex-direction:column;gap:28px} } @media(max-width:600px){ .hero h1{font-size:47px} .cta-inner h2{font-size:40px} .step-num{font-size:28px} } /* ══ Typeface ══════════════════════════════════════════════════════════════ BDO Grotesk, self-hosted. One variable file covers 300-900, which is the whole range the site uses, so it replaces what were five separate Inter weights fetched from Google — fewer bytes and no third-party request on first paint. Subset to Latin plus the punctuation actually rendered here; 260KB of TTF becomes 58KB of WOFF2. Licensed under the SIL OFL, which permits embedding provided the notice ships alongside: see assets/fonts/OFL.txt. font-display:swap deliberately. The face is preloaded, so the swap window is short, and text that is readable immediately beats text that is absent. */ @font-face{ font-family:"BDO Grotesk"; src:url("fonts/bdo-grotesk-var.woff2") format("woff2-variations"), url("fonts/bdo-grotesk-var.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap} :root{--font:"BDO Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif} body{font-family:var(--font)} /* BDO Grotesk has no star glyph, so the rating stars are given an explicit stack rather than left to whatever the browser reaches for next. */ .test-star,.hero-stars{font-family:-apple-system,"Segoe UI Symbol","Apple Color Emoji",sans-serif} /* ══ Multi-page additions ═══════════════════════════════════════════════════ base.css is the homepage's original stylesheet, kept intact so the hero, marquee, testimonials and pricing keep the treatment already signed off. Everything below is new: the navigation that now has to reach fourteen pages, the section components those pages are built from, and the hero story sequence. New class names are deliberately unprefixed (.card, .chk, .stp) because base.css namespaces all of its own (.feat-card, .pr-card), so the two sets cannot collide. */ /* ── Navigation ─────────────────────────────────────────────────────────── Two dropdown groups, a text log-in and one primary action. The menus open on hover for pointers and on click for keyboards and touch, which is why the open state is driven by a class rather than :hover alone. */ .nav-inner{display:flex;align-items:center;gap:22px;position:relative} .nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0 auto 0 14px} .nav-links > li > a,.nav-grp-btn{ display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px; font-size:14px;font-weight:500;color:rgba(255,255,255,.72);background:none;border:0; font-family:inherit;cursor:pointer;transition:color .18s,background .18s} .nav-links > li > a:hover,.nav-grp-btn:hover,.nav-group.open .nav-grp-btn{color:#fff;background:rgba(255,255,255,.06)} .nav-grp-btn svg{transition:transform .22s var(--ease);opacity:.6} .nav-group.open .nav-grp-btn svg{transform:rotate(180deg)} .nav-group{position:static} /* ── Mega menu ───────────────────────────────────────────────────────────── A wide panel anchored to the header rather than to the button that opened it, so both menus share one edge and the eye does not have to re-find the panel when switching between them. Width follows the column count, so the four-item Solutions menu does not sit in a half-empty product-sized box. */ .nav-menu{ position:absolute;top:calc(100% - 8px);left:50%;transform:translateX(-50%) translateY(-6px); padding:12px;border-radius:12px; /* Frosted glass: a translucent fill plus a blur of whatever is behind it. The fill has to stay semi-transparent — at full opacity the backdrop filter has nothing to show and it reads as a flat panel again. saturate keeps colour passing through from tipping grey. */ /* Opaque enough to read against on its own. backdrop-filter is a progressive enhancement — Firefox users with it disabled, and any browser without GPU compositing, get no blur at all, and at .72 the hero headline was legible straight through the panel. */ background:rgba(12,12,17,.985); -webkit-backdrop-filter:blur(48px) saturate(185%); backdrop-filter:blur(48px) saturate(185%); border:1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); opacity:0;visibility:hidden;z-index:60; /* visibility is stepped, not eased: delayed by the fade so the panel stays present while it fades out, and appears instantly on the way in. */ transition:opacity .18s,transform .18s,visibility 0s linear .18s} /* Keyed on the panel, not on .nav-group: site.js re-parents the panel onto