/* ================================================================
Glideep Landing Page — style.css
================================================================ */
/* ── Inter (self-hosted) ──
Was two third-party origins on the critical path: the browser had to
resolve+connect+TLS to fonts.googleapis.com for a stylesheet, parse it,
and only then discover the woff2 on fonts.gstatic.com and start a second
connection. Three serial round trips before a single glyph could paint,
which on Lighthouse's Slow-4G profile (150 ms RTT) is most of a second.
Served from our own origin the font is discoverable in the initial HTML
(see the in each page head), so it is in
flight alongside style.css instead of after it.
These are Google's own latin / latin-ext subsets of Inter v20 — a
variable font — with the weight axis instanced to 400–900, the range
this site actually uses. That drops the unused 100–300 masters:
48 KB → 38 KB for latin, which is the file nearly every visitor gets.
latin-ext is declared with its own unicode-range so it is only fetched
if a page actually contains one of those codepoints.
To refresh: re-fetch the two woff2 URLs from
fonts.googleapis.com/css2?family=Inter:wght@400..900 with a modern
browser User-Agent, then re-instance with fontTools
(instantiateVariableFont(font, {'wght': (400, 900)})). */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ── Below-the-fold sections: skip their layout until they are needed ──
PageSpeed's network tree showed the homepage finishing every download
at 1,461 ms but not reaching First Contentful Paint until 2,800 ms.
That 1.3 s gap is not network — it is the phone laying out the whole
document before it can paint any of it. index.html is 8,552 px tall on
an 823 px viewport: roughly ten screens of layout computed so the first
one can appear.
content-visibility: auto lets the browser skip style, layout and paint
for a section until it scrolls near the viewport. Nothing is hidden:
the markup stays in the DOM, Google still reads it, in-page search and
fragment links (#pricing, #faq-home) still work — Chrome forces a
skipped section to render when it is scrolled to or searched. Verified
that .faq-home-left still computes to position: sticky inside a skipped
section, and that CLS stays at 0 through a full-page scroll.
nth-of-type(n+3) leaves the first two sections alone, which on the
homepage is .hero and .compat-band — the only two an 823 px viewport
can see. Pages with fewer or shorter sections are unaffected in
practice, since `auto` renders anything at or near the viewport anyway.
contain-intrinsic-size carries `auto`, so a section's real height is
remembered after it renders once and the fallback below is used only on
the first load, where it only ever affects scrollbar length — a section
below the fold cannot contribute to CLS.
Two things about these numbers, both learned the hard way by measuring
the page height before and after a scroll:
1. contain-intrinsic-size describes the CONTENT box. These sections
carry 100-200 px of vertical padding, which the browser adds on top,
so passing the full outer height overshot every section by about
195 px — nearly 1,000 px of phantom scrollbar. The values below are
outer height minus padding and border.
2. The overrides are written as `main > section#id` rather than `#id`
because the generic rule above is specificity (0,1,2) — the
:nth-of-type counts as a class. A bare .nomac-section selector
(0,1,0) lost to it silently and kept the 700 px default. */
/* Known trade-off: only the homepage's sections are measured, so only its
scroll height is exact (within 1 px). Other pages fall back to the
700 px default and their scroll height can be off by up to ~2,000 px
until the reader scrolls past each section, at which point `auto`
replaces the guess with the real size. That shows up as a scrollbar
that grows or shrinks while scrolling; it is not a layout shift —
measured CLS is 0.0000 on every page checked, at 412 px and 1350 px.
To make a page exact, measure its sections' content-box heights
(outer height minus vertical padding and border) and add them here. */
main > section:nth-of-type(n+3),
body > footer {
content-visibility: auto;
contain-intrinsic-size: auto 700px;
}
/* Content-box heights measured at a 1350px viewport. */
main > section#how-it-works { contain-intrinsic-size: auto 1684px; }
main > section#demo { contain-intrinsic-size: auto 336px; }
main > section#features { contain-intrinsic-size: auto 586px; }
main > section.nomac-section { contain-intrinsic-size: auto 990px; }
main > section#testimonials { contain-intrinsic-size: auto 802px; }
main > section#faq-home { contain-intrinsic-size: auto 406px; }
main > section#resources { contain-intrinsic-size: auto 464px; }
main > section#pricing { contain-intrinsic-size: auto 279px; }
body > footer { contain-intrinsic-size: auto 318px; }
/* Pricing page. Measured the same way, at a 1350px viewport with
content-visibility temporarily forced to `visible` — measuring it while the
property is active just reads the estimate back, which is how the first
attempt produced a suspicious row of exact 700s. .px-plans is section 2, so
the generic rule does not reach it and the prices are never skipped. */
main > section.px-benefits { contain-intrinsic-size: auto 750px; }
main > section.px-compare { contain-intrinsic-size: auto 1805px; }
main > section.px-faq { contain-intrinsic-size: auto 700px; }
main > section.px-cta { contain-intrinsic-size: auto 313px; }
/* Measured at a 412px viewport — the Moto G Power PageSpeed emulates.
Sections reflow to very different heights on a phone (.nomac-section is
990px of content wide-screen but 1491px stacked), so the estimate is
per-breakpoint rather than one average that is wrong at both ends. */
@media (max-width: 768px) {
main > section#how-it-works { contain-intrinsic-size: auto 1610px; }
main > section#demo { contain-intrinsic-size: auto 425px; }
main > section#features { contain-intrinsic-size: auto 544px; }
main > section.nomac-section { contain-intrinsic-size: auto 1491px; }
main > section#testimonials { contain-intrinsic-size: auto 706px; }
main > section#faq-home { contain-intrinsic-size: auto 602px; }
main > section#resources { contain-intrinsic-size: auto 451px; }
main > section#pricing { contain-intrinsic-size: auto 340px; }
body > footer { contain-intrinsic-size: auto 443px; }
/* Pricing at 412px. The plan cards stack, so .px-benefits more than doubles
(750px of content wide-screen, 1690px in one column). */
main > section.px-benefits { contain-intrinsic-size: auto 1690px; }
main > section.px-compare { contain-intrinsic-size: auto 1838px; }
main > section.px-faq { contain-intrinsic-size: auto 766px; }
main > section.px-cta { contain-intrinsic-size: auto 413px; }
}
/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
:root {
--accent: #5046e5;
--accent-dark: #4338ca;
--dark: #0d0e14;
--muted: #686d7d; /* WCAG AA: #6b7080 was 4.33:1 on the #eef0f7 section bg */
--muted-lt: #737684; /* WCAG AA: #9ea3b5 was only 2.51:1 on white.
Kept as light as AA allows so it stays visibly
lighter than --muted rather than collapsing into it.
A few uses sit on tinted panels and need a touch
more; see --muted-lt-tinted below. */
--muted-lt-tinted: #6a6d79;
--border: #e4e6ef;
--hero-bg: #eef0f7;
--white: #ffffff;
--green: #22c55e;
--red: #ef4444;
--radius: 14px;
--nav-h: 56px;
--sh-card: 0 4px 32px rgba(13,14,20,.10), 0 1px 3px rgba(0,0,0,.06);
--sh-lg: 0 16px 56px rgba(13,14,20,.14);
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--dark);
background: #fff;
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ── Utility ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 14px; }
/* ================================================================
HEADER
================================================================ */
header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,0.82);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border);
transition: background .35s ease, box-shadow .35s ease,
border-color .35s ease, backdrop-filter .35s ease;
}
/* Subtle elevation once the user scrolls */
header.elevated {
background: rgba(255,255,255,0.86);
box-shadow: 0 1px 0 rgba(13,14,20,.04), 0 12px 30px -14px rgba(13,14,20,.22);
}
/* Homepage only: float transparently over the aurora hero until scrolled */
body.home header:not(.elevated) {
background: transparent;
border-bottom-color: transparent;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: none;
}
.nav-wrap {
display: flex;
align-items: center;
height: var(--nav-h);
}
/* Logo */
.nav-logo {
display: flex; align-items: center; gap: 8px;
text-decoration: none;
color: var(--dark);
font-weight: 800;
font-size: 17px;
letter-spacing: -.4px;
flex-shrink: 0;
}
.nav-logo img { width: 28px; height: 28px; border-radius: 8px; display: block; }
/* Platforms nav dropdown */
.nav-dd { position: relative; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 5px; }
.nav-dd-caret { transition: transform .2s ease; }
.nav-dd::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav-dd-panel {
position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
min-width: 236px; background: #fff; border: 1px solid var(--border); border-radius: 14px;
box-shadow: var(--sh-lg); padding: 8px; opacity: 0; visibility: hidden;
transition: opacity .18s ease, transform .18s ease; z-index: 300;
}
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dd:hover .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
font-size: 14px; font-weight: 600; color: var(--dark); text-decoration: none; }
.nav-dd-panel a:hover { background: var(--hero-bg); }
.nav-dd-panel img { width: 20px; height: 20px; border-radius: 5px; }
.nav-dd-all { margin-top: 4px; border-top: 1px solid var(--border); color: var(--accent) !important; font-weight: 700 !important; }
/* Centered nav links */
.nav-links {
display: flex; align-items: center;
gap: 2px;
list-style: none;
margin: 0 auto; /* pushes to centre */
}
.nav-links a {
text-decoration: none;
color: var(--muted);
font-size: 14.5px; font-weight: 500;
padding: 6px 14px;
border-radius: 8px;
transition: color .18s, background .18s;
white-space: nowrap;
}
.nav-links a:hover { color: var(--dark); background: rgba(13,14,20,.05); }
.nav-links a.active { color: var(--accent); font-weight: 600; }
/* Action buttons (right) */
.nav-actions {
display: flex; align-items: center; gap: 14px;
flex-shrink: 0;
}
.nav-signin {
color: var(--dark); font-size: 14.5px; font-weight: 500;
text-decoration: none;
background: none; border: none; cursor: pointer;
font-family: inherit;
transition: color .18s;
}
.nav-signin:hover { color: var(--accent); }
.nav-getstarted {
display: inline-flex; align-items: center; gap: 5px;
background: var(--dark); color: #fff;
text-decoration: none;
font-size: 14px; font-weight: 600;
padding: 8px 18px;
border-radius: 100px;
letter-spacing: -.15px;
transition: background .18s, transform .18s, box-shadow .18s;
}
.nav-getstarted:hover {
background: #1e2030;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(13,14,20,.22);
}
/* Mobile burger */
.burger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 8px;
margin-left: 4px; position: relative; z-index: 1001;
}
.burger span {
display: block; width: 22px; height: 2px;
background: var(--dark); border-radius: 2px;
transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Mobile full-screen nav overlay ── */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 1002;
background: var(--hero-bg);
display: flex; flex-direction: column;
overflow-y: auto; -webkit-overflow-scrolling: touch;
opacity: 0; visibility: hidden;
transform: translateY(-14px);
pointer-events: none;
transition: opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility .28s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* Header row: logo + X close */
.mob-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 0 18px; height: var(--nav-h);
background: #fff; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.mob-logo {
display: flex; align-items: center; gap: 9px;
font-size: 17px; font-weight: 800; letter-spacing: -.4px;
color: var(--dark); text-decoration: none;
}
.mob-logo img { border-radius: 8px; }
.mob-x {
width: 36px; height: 36px; border: none; cursor: pointer;
background: rgba(13,14,20,.06); color: var(--dark);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: background .15s;
}
.mob-x:hover { background: rgba(13,14,20,.12); }
/* Scrollable main content */
.mob-content { flex: 1; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
/* Section labels — "Product", "Resources" */
.mob-sec-label {
font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
color: var(--muted-lt); padding: 0 10px; margin: 14px 0 4px;
display: flex; align-items: center; gap: 10px;
}
.mob-sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* Nav links with icon */
.mob-link {
display: flex; align-items: center; gap: 14px;
padding: 11px 14px; border-radius: 12px;
font-size: 15.5px; font-weight: 600; color: var(--dark);
text-decoration: none; transition: background .15s, color .15s;
}
.mob-link:hover { background: rgba(80,70,229,.07); color: var(--accent); }
.mob-link:active { transform: scale(.985); }
.mob-ico {
width: 34px; height: 34px; border-radius: 9px;
background: #fff; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--muted);
transition: background .15s, border-color .15s, color .15s;
}
.mob-link:hover .mob-ico { background: rgba(80,70,229,.08); border-color: rgba(80,70,229,.22); color: var(--accent); }
/* Resources row */
.mob-res-row {
display: flex; align-items: stretch;
background: #fff; border: 1px solid var(--border);
border-radius: 12px; overflow: hidden; margin: 2px 0 6px;
}
.mob-res-row a {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 14px 6px;
font-size: 14px; font-weight: 600; color: var(--dark);
text-decoration: none; transition: background .15s, color .15s;
}
.mob-res-row a:hover { background: rgba(80,70,229,.06); color: var(--accent); }
.mob-res-sep { width: 1px; background: var(--border); flex-shrink: 0; }
/* Bottom CTA strip */
.mob-footer-btns {
padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 10px;
background: #fff; border-top: 1px solid var(--border); flex-shrink: 0;
}
.mob-cta {
display: flex; align-items: center; justify-content: center; gap: 6px;
background: var(--accent); color: #fff !important;
font-size: 15px; font-weight: 700; padding: 15px;
border-radius: 100px; text-decoration: none; transition: background .18s;
}
.mob-cta:hover { background: var(--accent-dark); }
.mob-contact-btn {
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 600; color: var(--dark) !important;
padding: 14px; border-radius: 100px;
border: 1.5px solid var(--border); text-decoration: none;
transition: background .18s, border-color .18s;
}
.mob-contact-btn:hover { background: var(--hero-bg); border-color: rgba(80,70,229,.4); }
/* Backdrop no longer needed (full-screen menu covers everything) */
.nav-backdrop { display: none; }
body.nav-open { overflow: hidden; }
body.nav-open header {
background: rgba(255,255,255,.92) !important;
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-bottom-color: var(--border) !important;
}
/* ================================================================
HERO
================================================================ */
.hero {
background: var(--hero-bg);
padding-top: 72px;
overflow: hidden;
}
.hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: flex-start;
padding-bottom: 0;
}
/* Left — content */
.hero-content { padding-top: 20px; padding-bottom: 72px; }
.hero-badge {
display: inline-flex; align-items: center; gap: 10px;
background: #fff;
border: 1.5px solid var(--border);
border-radius: 100px;
padding: 4px 14px 4px 4px;
font-size: 13px; color: #4a4f65; font-weight: 500;
margin-bottom: 28px;
}
.badge-pill {
background: var(--dark); color: #fff;
font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 100px;
letter-spacing: .3px;
}
/* Headline — very heavy & large */
.hero-title {
font-size: clamp(52px, 6.8vw, 92px);
font-weight: 900;
line-height: 1.0;
letter-spacing: -3.5px;
color: var(--dark);
margin-bottom: 24px;
}
.hero-title .accent { color: var(--accent); }
/* Cycling word wrapper — clips the slide so it doesn't bleed into adjacent lines */
.title-cycle-wrap {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: 1.05;
}
.title-word {
display: inline-block;
}
.title-word.word-exit {
animation: wordOut 0.32s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.title-word.word-enter {
animation: wordIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes wordOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-110%); }
}
@keyframes wordIn {
from { opacity: 0; transform: translateY(110%); }
to { opacity: 1; transform: translateY(0); }
}
.hero-desc {
font-size: 17px;
color: #4a4f65;
line-height: 1.78;
max-width: 500px;
margin-bottom: 36px;
}
.hero-desc strong { color: var(--dark); font-weight: 700; }
/* URL input bar */
.hero-url-bar {
display: flex; align-items: center;
background: #fff;
border: 1.5px solid #d8dbe9;
border-radius: 14px;
padding: 7px 7px 7px 20px;
max-width: 520px;
box-shadow: 0 2px 16px rgba(13,14,20,.06);
margin-bottom: 20px;
gap: 8px;
}
.url-prefix {
color: #9ea5be;
font-size: 14px; font-weight: 500;
font-family: 'Courier New', 'Consolas', monospace;
white-space: nowrap;
flex-shrink: 0;
}
.url-input {
flex: 1; min-width: 0;
border: none; outline: none;
font-size: 16px; font-weight: 600;
color: var(--dark);
background: transparent;
font-family: 'Inter', sans-serif;
}
.url-input::placeholder { color: #b0b5c8; font-weight: 500; }
.url-btn {
background: var(--dark); color: #fff;
text-decoration: none;
font-size: 15px; font-weight: 700;
padding: 12px 22px;
border-radius: 10px;
white-space: nowrap;
flex-shrink: 0;
transition: background .18s, transform .18s;
letter-spacing: -.2px;
}
.url-btn:hover { background: #1e2030; transform: translateY(-1px); }
/* Trust bullets */
.hero-trust {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.trust-item {
display: flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--muted); font-weight: 500;
}
.trust-item svg { color: var(--green); flex-shrink: 0; }
/* ── Hero Visual (right) ── */
.hero-visual {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 36px 20px 60px 0;
overflow: visible;
}
/* Wrapper so the iPhone can escape the card */
.dash-card-wrap {
position: relative;
width: 100%;
}
/* ── Dashboard card ── */
.dash-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 48px rgba(13,14,20,.16), 0 2px 8px rgba(13,14,20,.06);
width: 100%;
overflow: hidden;
flex-shrink: 0;
position: relative;
z-index: 1;
/* Entrance animation */
animation: dashEntrance 0.9s cubic-bezier(0.16,1,0.3,1) both;
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
transform-style: preserve-3d;
will-change: transform;
}
.dash-card:hover {
transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg) scale(1.01);
box-shadow: 20px 20px 72px rgba(13,14,20,.18), 0 4px 16px rgba(13,14,20,.08);
}
/* Browser chrome */
.dash-chrome {
display: flex; align-items: center;
padding: 14px 20px;
border-bottom: 1px solid #f0f1f5;
background: #fafafa;
gap: 12px;
}
.chrome-dots { display: flex; gap: 7px; }
.chrome-dots i {
display: block; width: 12px; height: 12px; border-radius: 50%;
font-style: normal;
}
.chrome-brand {
display: flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 700; color: var(--dark);
}
.chrome-brand img { width: 18px; height: 18px; border-radius: 5px; }
/* Dashboard body */
.dash-body { padding: 22px 24px; }
.dash-greeting {
font-size: 17px; font-weight: 700; color: var(--dark);
margin-bottom: 16px;
}
/* Stats row */
.dash-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid #eef0f5;
border-radius: 12px; overflow: hidden;
margin-bottom: 16px;
}
.ds { padding: 14px 16px; border-right: 1px solid #eef0f5; }
.ds:last-child { border-right: none; }
.ds-lbl {
font-size: 10px; font-weight: 700; color: var(--muted-lt);
letter-spacing: .7px; text-transform: uppercase; margin-bottom: 4px;
}
.ds-val {
font-size: 34px; font-weight: 800; color: var(--dark);
letter-spacing: -1px; line-height: 1;
}
.ds-val.green { color: var(--green); }
.ds-val.red { color: var(--red); }
.ds-sub { font-size: 11px; color: var(--muted-lt); margin-top: 4px; }
/* App list */
.dash-apps {
border: 1px solid #eef0f5;
border-radius: 12px; overflow: hidden;
margin-bottom: 14px;
}
.app-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid #eef0f5;
transition: background .18s;
}
.app-row:last-child { border-bottom: none; }
.app-row:hover { background: #fafbff; }
.app-av {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.app-av.dark { background: var(--dark); }
.app-av.orange { background: #f97316; }
.live-pill {
display: flex; align-items: center; gap: 7px;
background: var(--dark); color: #fff;
font-size: 11px; font-weight: 700;
padding: 7px 14px; border-radius: 100px;
flex-shrink: 0; letter-spacing: .3px;
white-space: nowrap;
}
.live-dot {
width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
animation: livePulse 2s ease infinite;
}
.app-info { flex: 1; min-width: 0; }
.app-nm { font-size: 14px; font-weight: 700; color: var(--dark); }
.app-url { font-size: 12px; color: var(--muted-lt); margin-top: 2px; }
.app-open-btn {
font-size: 12px; font-weight: 600; color: var(--accent);
text-decoration: none;
border: 1px solid rgba(91,92,246,.2);
padding: 5px 11px; border-radius: 7px;
background: rgba(91,92,246,.05);
flex-shrink: 0; white-space: nowrap;
transition: background .18s;
}
.app-open-btn:hover { background: rgba(91,92,246,.12); }
/* Build list */
.dash-builds { display: flex; flex-direction: column; gap: 9px; }
.build-item {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--muted); font-weight: 500;
animation: buildFade 0.4s ease both;
}
.build-item:nth-child(1) { animation-delay: 1.2s; }
.build-item:nth-child(2) { animation-delay: 1.5s; }
.build-item:nth-child(3) { animation-delay: 1.8s; }
.bd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bd.blue { background: #818cf8; }
.bd.green { background: var(--green); }
/* ══════════════════════════════════════
REAL iPHONE FRAME
══════════════════════════════════════ */
.iphone-wrap {
position: absolute;
bottom: -32px;
right: -32px; /* ~80% of phone (≈205px) overlaps inside the card area */
z-index: 10;
width: 200px;
animation: phoneEntrance 1s cubic-bezier(0.16,1,0.3,1) 0.35s both,
floatPhone 5s ease-in-out 1.35s infinite;
filter: drop-shadow(0 32px 64px rgba(13,14,20,.50));
}
.iphone-wrap img { display: block; width: 100%; height: auto; }
/* Outer titanium frame — ultra thin */
/* Volume up */
/* Volume down */
/* Silent switch */
/* Power / side button */
/* Dynamic Island */
/* Facecam dot inside island */
/* Screen area */
/* Home indicator bar */
/* Screen content */
/* ══════════════════════════════════════
ANIMATIONS
══════════════════════════════════════ */
/* Dashboard slides in from right */
@keyframes dashEntrance {
0% { opacity: 0; transform: translateX(40px) translateY(16px); }
100% { opacity: 1; transform: translateX(0) translateY(0); }
}
/* Phone rises up and settles with clockwise tilt */
@keyframes phoneEntrance {
0% { opacity: 0; transform: translateY(60px) rotate(12deg); }
100% { opacity: 1; transform: translateY(0) rotate(12deg); }
}
/* Continuous gentle float — keeps 12° clockwise tilt */
@keyframes floatPhone {
0%, 100% { transform: translateY(0px) rotate(12deg); }
50% { transform: translateY(-18px) rotate(12deg); }
}
/* LIVE BUILD dot pulse */
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(91,92,246,0.8); }
60% { box-shadow: 0 0 0 8px rgba(91,92,246,0); }
100% { box-shadow: 0 0 0 0 rgba(91,92,246,0); }
}
/* Build items fade in staggered */
@keyframes buildFade {
0% { opacity: 0; transform: translateX(-10px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Fade-in helper for sections */
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
/* LIVE BUILD pill slides in from the left */
@keyframes liveSlideIn {
0% { opacity: 0; transform: translateX(-24px); }
100% { opacity: 1; transform: translateX(0); }
}
/* ================================================================
TRUST BAR — infinite marquee
================================================================ */
/* Left stat block */
/* Vertical divider */
/* Marquee container */
.marquee-wrap {
flex: 1;
overflow: hidden;
mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: marqueeScroll 32s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
display: flex; align-items: center; gap: 10px;
padding: 0 26px;
white-space: nowrap;
text-decoration: none;
transition: opacity .2s ease;
}
a.marquee-item { color: inherit; }
a.marquee-item:hover { opacity: .72; }
.marquee-av {
width: 34px; height: 34px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: #fff;
flex-shrink: 0; overflow: hidden;
background: #f4f5f9;
}
.marquee-av img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.marquee-name {
font-size: 15px; font-weight: 600; color: var(--dark);
letter-spacing: -.2px;
}
.marquee-name.bold { font-weight: 800; }
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ================================================================
SHARED SECTION STYLES
================================================================ */
section { padding: 96px 0; }
.sec-chip {
display: inline-block;
background: rgba(91,92,246,.09); color: var(--accent);
font-size: 11px; font-weight: 700;
padding: 5px 13px; border-radius: 50px;
letter-spacing: .6px; text-transform: uppercase;
margin-bottom: 14px;
}
.sec-title {
font-size: clamp(26px, 3.5vw, 44px);
font-weight: 900; letter-spacing: -1px;
color: var(--dark); margin-bottom: 14px;
}
.sec-sub {
font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 560px;
}
.sec-hdr { text-align: center; margin-bottom: 64px; }
.sec-hdr .sec-sub { margin: 0 auto; }
/* ================================================================
PRODUCT SHOWCASE
================================================================ */
.product-showcase {
background: var(--hero-bg);
padding: 100px 0 80px;
}
/* Section header — 2-col: text left, store + steps right */
.ps-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 80px;
}
.ps-header-left { /* inherits flex-column from children */ }
/* 3-step product flow illustration */
.ps-3step-img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 16px 36px rgba(13, 14, 20, .12));
transition: transform .45s cubic-bezier(.16, 1, .3, 1);
will-change: transform;
}
.ps-header-right:hover .ps-3step-img { transform: translateY(-5px); }
/* Per-step illustrations (Configure / Build / Ship) */
.ps-step-img {
display: block;
width: 100%;
height: auto;
border-radius: 18px;
filter: drop-shadow(0 16px 40px rgba(13, 14, 20, .13));
transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.ps-step-visual:hover .ps-step-img { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
.ps-3step-img, .ps-step-img { transition: none; }
.ps-header-right:hover .ps-3step-img,
.ps-step-visual:hover .ps-step-img { transform: none; }
}
/* Store badges */
/* Step flow */
@media (max-width: 900px) {
.ps-header { grid-template-columns: 1fr; gap: 36px; }
}
.ps-badge {
display: inline-flex; align-items: center; gap: 10px;
border: 1.5px solid var(--border);
background: #fff;
border-radius: 100px;
padding: 4px 16px 4px 4px;
font-size: 11px; font-weight: 700;
color: var(--muted); letter-spacing: .6px; text-transform: uppercase;
margin-bottom: 28px;
}
.ps-badge-num {
width: 26px; height: 26px; border-radius: 50%;
background: var(--dark); color: #fff;
font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.ps-title {
font-size: clamp(42px, 5.2vw, 72px);
font-weight: 900; letter-spacing: -2.5px; line-height: 1.0;
color: var(--dark); margin-bottom: 22px; max-width: 680px;
}
.ps-sub {
font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 540px;
}
/* Step row */
.ps-step {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 72px;
align-items: center;
}
/* Step left */
.ps-step-badge {
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 18px;
}
.ps-step-num {
width: 28px; height: 28px; border-radius: 50%;
background: var(--accent); color: #fff;
font-size: 13px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ps-step-lbl {
font-size: 11px; font-weight: 700;
color: var(--accent); letter-spacing: .7px; text-transform: uppercase;
}
.ps-step-title {
font-size: clamp(30px, 3.6vw, 50px);
font-weight: 900; letter-spacing: -1.5px; line-height: 1.06;
color: var(--dark); margin-bottom: 18px;
}
.ps-step-desc {
font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 26px;
}
.ps-checks {
list-style: none;
display: flex; flex-direction: column; gap: 12px;
}
.ps-checks li {
display: flex; align-items: center; gap: 10px;
font-size: 14px; font-weight: 500; color: var(--dark);
}
/* Editor mockup */
.ps-step-visual { position: relative; }
.editor-sidebar-item.active {
background: rgba(91,92,246,.09);
color: var(--dark); font-weight: 600;
}
.editor-dot.active { background: var(--accent); }
.editor-tab.active { background: var(--dark); color: #fff; }
/* Spacing between consecutive steps */
.ps-step ~ .ps-step { margin-top: 72px; }
/* Flipped step — visual left, content right */
.ps-step--flip {
grid-template-columns: 1.5fr 1fr;
}
.ps-step--flip .ps-step-visual { order: -1; }
/* Build cards mockup */
/* ── Ship mockup ── */
@media (max-width: 1080px) {
.ps-step { grid-template-columns: 1fr; gap: 40px; }
.ps-step--flip { grid-template-columns: 1fr; }
.ps-step--flip .ps-step-visual { order: 0; }
}
/* ================================================================
PRODUCT SHOWCASE — compact carousel (Figma spec)
================================================================ */
.product-showcase { padding: 96px 0; background: #F4F5F9; }
.psc-panel {
background: #fff;
border: 1px solid #EBEBF0;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(13,14,20,.04);
max-width: 1120px;
margin: 0 auto;
}
.psc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
.psc-left {
padding: 60px 40px;
display: flex; flex-direction: column; justify-content: center;
}
.psc-right {
padding: 60px 24px;
background: #F7F8FB;
position: relative;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
/* Indigo glow behind cards */
.psc-glow {
position: absolute; top: 50%; left: 50%;
width: 288px; height: 288px; border-radius: 50%;
background: rgba(199, 210, 254, .55);
filter: blur(60px);
transform: translate(-50%, -50%);
pointer-events: none; z-index: 0;
}
.psc-inner {
position: relative; z-index: 1;
width: 100%; max-width: 384px;
}
/* Chip */
.psc-chip {
display: inline-flex; align-items: center; gap: 8px;
background: #F0F1F5; border-radius: 100px;
padding: 6px 12px 6px 5px;
align-self: flex-start;
margin-bottom: 32px;
font-size: 11px; font-weight: 600;
letter-spacing: 2px;
color: #6B6B80;
text-transform: uppercase;
}
.psc-chip-num {
width: 20px; height: 20px; border-radius: 50%;
background: #1A1A2E; color: #fff;
font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0;
}
.psc-title {
font-size: clamp(30px, 3.4vw, 42px);
line-height: 1.12;
font-weight: 800;
letter-spacing: -1.4px;
color: #0E0E1A;
margin: 0 0 24px;
}
.psc-sub {
color: #7B7B92;
font-size: 16px;
line-height: 1.65;
max-width: 20rem;
margin: 0 0 40px;
}
/* Dot pagination */
.psc-bars { display: flex; gap: 8px; }
.psc-bar {
width: 8px; height: 8px; border-radius: 100px;
background: #D1D1DC; border: 0; cursor: pointer; padding: 0;
transition: width .5s cubic-bezier(.4,.15,.15,1), background .3s ease;
}
.psc-bar:hover { background: #A0A0B4; }
.psc-bar.is-active {
width: 32px; background: #0E0E1A;
}
/* Card stack */
.psc-stage {
position: relative;
height: 260px;
}
.psc-card {
position: absolute;
top: 0; left: 0; right: 0;
cursor: pointer;
opacity: 0;
transform: scale(.78) translateY(8px);
transition:
transform .55s cubic-bezier(.34,1.1,.64,1),
opacity .45s ease;
}
.psc-card[data-pos="active"] {
transform: none;
opacity: 1;
z-index: 10;
}
.psc-card[data-pos="prev"] {
transform: translateX(-52%) scale(.82) translateY(12px);
opacity: .55;
z-index: 5;
}
.psc-card[data-pos="next"] {
transform: translateX(52%) scale(.82) translateY(12px);
opacity: .55;
z-index: 5;
}
.psc-card-inner {
background: #fff;
border: 1px solid #EBEBF0;
border-radius: 16px;
padding: 32px 28px;
display: flex; flex-direction: column; align-items: center; gap: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,.04);
transition: box-shadow .3s ease, border-color .3s ease;
}
.psc-card[data-pos="active"] .psc-card-inner {
box-shadow: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.06);
border-color: #fff;
}
.psc-card-ico {
width: 80px; height: 80px;
flex-shrink: 0;
display: block;
}
.psc-card-ico svg { display: block; width: 100%; height: 100%; }
.psc-card-text { text-align: center; }
.psc-card-lbl {
font-size: 12px; font-weight: 600;
color: #9B9BB0;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 4px;
}
.psc-card-title {
font-size: 20px;
font-weight: 800;
color: #0E0E1A;
letter-spacing: -.4px;
margin: 0 0 4px;
line-height: 1.15;
}
.psc-card-desc {
font-size: 14px;
color: #9B9BB0;
margin: 0;
}
.psc-card-track {
width: 100%; height: 2px;
background: #EBEBF0; border-radius: 999px;
overflow: hidden;
opacity: 0;
transition: opacity .3s ease;
}
.psc-card[data-pos="active"] .psc-card-track { opacity: 1; }
.psc-card-track span {
display: block; height: 100%; width: 100%;
background: #0E0E1A; border-radius: 999px;
transform: scaleX(0); transform-origin: left;
}
.psc-card[data-pos="active"] .psc-card-track span {
animation: pscFill 2.8s linear forwards;
}
@keyframes pscFill { to { transform: scaleX(1); } }
/* Stepper */
.psc-stepper {
display: flex; justify-content: space-between;
margin-top: 24px; padding: 0 4px;
}
.psc-pill {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 0; padding: 0;
cursor: pointer; font-family: inherit;
font-size: 12px; font-weight: 600; color: #C0C0D0;
transition: color .3s ease;
}
.psc-pill:hover { color: #8080A0; }
.psc-pill.is-active { color: #0E0E1A; }
.psc-pill-num {
width: 20px; height: 20px; border-radius: 50%;
background: #EBEBF0; color: #B0B0C0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700;
transition: background .3s ease, color .3s ease;
}
.psc-pill.is-active .psc-pill-num { background: #0E0E1A; color: #fff; }
@media (prefers-reduced-motion: reduce) {
.psc-card[data-pos="active"] .psc-card-track span { animation: none; transform: scaleX(1); }
}
@media (max-width: 1080px) {
.psc-grid { grid-template-columns: 1fr; }
.psc-left { padding: 48px 32px 24px; }
.psc-right { padding: 40px 24px 48px; }
.psc-sub { max-width: none; margin-bottom: 28px; }
}
@media (max-width: 768px) {
.product-showcase { padding: 40px 0; }
.psc-panel { border-radius: 20px; }
.psc-left { padding: 40px 24px 22px; }
.psc-right { padding: 36px 16px 40px; }
.psc-inner { max-width: 320px; }
.psc-title { font-size: clamp(26px, 6vw, 34px); letter-spacing: -1px; }
.psc-sub { font-size: 15px; margin-bottom: 24px; }
.psc-chip { margin-bottom: 20px; }
.psc-stage { height: 240px; }
.psc-card-inner { padding: 26px 22px; gap: 16px; }
.psc-card-ico { width: 68px; height: 68px; }
.psc-card-title { font-size: 19px; }
.psc-card-desc { font-size: 13px; }
.psc-card[data-pos="prev"] { transform: translateX(-46%) scale(.82) translateY(12px); }
.psc-card[data-pos="next"] { transform: translateX(46%) scale(.82) translateY(12px); }
.psc-glow { width: 220px; height: 220px; }
.psc-pill { font-size: 11.5px; }
}
/* ── Divider dashboard image (between top & bottom panels) ────── */
.ps-divider {
max-width: 1120px;
margin: 24px auto;
padding: 4px 0;
perspective: 1200px;
}
.ps-divider-inner {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 40px 80px -32px rgba(13,14,40,.32),
0 12px 32px -14px rgba(13,14,40,.18),
0 2px 6px rgba(13,14,40,.06);
animation: psFloat 7s ease-in-out infinite;
will-change: transform;
}
.ps-divider-img {
display: block;
width: 100%;
height: auto;
transition: transform .6s cubic-bezier(.34,1.1,.64,1);
}
.ps-divider:hover .ps-divider-img { transform: scale(1.015); }
.ps-divider:hover .ps-divider-inner { animation-play-state: paused; }
@keyframes psFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.ps-divider-inner { animation: none; }
.ps-divider-img { transition: none; }
}
@media (max-width: 768px) {
.ps-divider { margin: 20px auto; padding: 2px 0; }
.ps-divider-inner { border-radius: 16px; animation-duration: 6s; }
}
/* ── Bottom manual slider ─────────────────────────────────────── */
.pss-panel {
background: #fff;
border: 1px solid #EBEBF0;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(13,14,20,.04);
max-width: 1120px;
margin: 24px auto 0;
}
.pss-track-wrap { position: relative; overflow: hidden; }
.pss-track {
display: flex;
transition: transform .55s cubic-bezier(.34,1.1,.64,1);
will-change: transform;
}
.pss-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.pss-slide-text {
background: #F4F5F9;
padding: 60px 40px;
display: flex; flex-direction: column; justify-content: center;
}
.pss-slide-text .pss-chip {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border-radius: 100px;
padding: 6px 12px 6px 5px;
align-self: flex-start;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
margin-bottom: 24px;
font-size: 11px; font-weight: 600;
letter-spacing: 2px;
color: #6B6B80;
text-transform: uppercase;
}
.pss-chip-num {
width: 20px; height: 20px; border-radius: 50%;
background: #1A1A2E; color: #fff;
font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0;
}
.pss-headline {
font-size: 1.9rem; line-height: 1.15;
font-weight: 800; letter-spacing: -1px;
color: #0E0E1A; margin: 0 0 16px;
}
.pss-body {
color: #7B7B92; font-size: 14px; line-height: 1.65;
max-width: 20rem; margin: 0 0 24px;
}
.pss-features {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.pss-features li {
display: flex; align-items: center; gap: 10px;
font-size: 14px; font-weight: 500; color: #4A4A60;
}
.pss-check {
width: 18px; height: 18px; border-radius: 50%;
background: #E8FFF0; color: #11843c;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pss-slide-img {
background: #fff;
position: relative;
overflow: hidden;
min-height: 320px;
}
.pss-slide-img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.pss-bar {
border-top: 1px solid #F0F0F8;
background: #fff;
padding: 18px 40px;
display: flex; align-items: center; justify-content: space-between;
gap: 20px;
}
.pss-dots {
display: flex; gap: 10px; align-items: center;
}
.pss-dot-btn {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; border: 0; padding: 4px 2px;
cursor: pointer; font-family: inherit;
transition: opacity .3s ease;
opacity: .55;
}
.pss-dot-btn:hover:not(.is-active) { opacity: .85; }
.pss-dot-btn.is-active { opacity: 1; }
.pss-dot {
display: block; width: 8px; height: 8px;
background: #C8C8D8; border-radius: 100px;
transition: width .4s cubic-bezier(.4,.15,.15,1), background .3s ease;
}
.pss-dot-btn.is-active .pss-dot {
width: 24px; background: #0E0E1A;
}
.pss-dot-label {
display: none;
font-size: 12px; font-weight: 700; color: #0E0E1A;
letter-spacing: -.1px;
}
.pss-dot-btn.is-active .pss-dot-label { display: inline; }
.pss-arrows { display: flex; gap: 8px; flex-shrink: 0; }
.pss-arrow {
width: 36px; height: 36px; border-radius: 12px;
border: 1px solid #EBEBF0; background: #fff;
color: #6B6B80; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.pss-arrow:hover {
background: #F0F1F5; color: #0E0E1A; border-color: #C0C0D0;
}
.pss-arrow.is-primary {
background: #0E0E1A; color: #fff; border-color: #0E0E1A;
}
.pss-arrow.is-primary:hover {
background: #2A2A3E; color: #fff; border-color: #2A2A3E;
}
.pss-arrow:active { transform: translateY(1px); }
@media (max-width: 1080px) {
.pss-slide { grid-template-columns: 1fr; min-height: auto; }
.pss-slide-text { padding: 44px 32px 32px; }
.pss-slide-img { min-height: 280px; }
.pss-bar { padding: 16px 32px; }
}
@media (max-width: 768px) {
.pss-panel { border-radius: 20px; margin-top: 20px; }
.pss-slide-text { padding: 32px 22px 26px; }
.pss-slide-img { min-height: 240px; }
.pss-headline { font-size: 1.5rem; letter-spacing: -.5px; }
.pss-body { font-size: 14px; max-width: none; margin-bottom: 20px; }
.pss-features li { font-size: 13.5px; }
.pss-bar { padding: 14px 20px; }
.pss-dot-label { display: none !important; }
.pss-arrow { width: 34px; height: 34px; }
}
/* ================================================================
COMPATIBILITY SECTION
================================================================ */
.compat-header .sec-sub { margin: 0 auto; }
/* Compatibility band — ultra-thin: small title left, platform rows right */
.compat-band {
background: #fff;
padding: 16px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.compat-band-inner {
display: grid;
grid-template-columns: 0.58fr 1.42fr;
gap: 32px;
align-items: center;
}
.compat-band-text { text-align: left; }
.compat-band-text .sec-chip { margin-bottom: 8px; }
.compat-band-text .sec-title {
font-size: 18px; line-height: 1.22; letter-spacing: -.4px; margin: 0; max-width: 320px;
}
.compat-band-rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.compat-band-rows .compat-row-wrap { margin-bottom: 0; }
@media (max-width: 860px) {
.compat-band { padding: 18px 0; }
.compat-band-inner { grid-template-columns: 1fr; gap: 16px; }
.compat-band-text { text-align: center; }
.compat-band-text .sec-title { max-width: none; }
}
/* Testimonials app marquee (moved from old trust bar) */
.tst-section .sec-hdr { margin-bottom: 22px; }
.tst-marquee {
margin: 10px 0 36px;
mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.tst-marquee + .tst-rating { margin-top: 0; }
/* Marquee rows */
.compat-row-wrap {
overflow: hidden;
margin-bottom: 14px;
mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.compat-row {
display: flex;
align-items: center;
gap: 12px;
width: max-content;
}
.compat-row--left { animation: compatLeft 38s linear infinite; }
.compat-row--right { animation: compatRight 42s linear infinite; }
.compat-row-wrap:hover .compat-row { animation-play-state: paused; }
@keyframes compatLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes compatRight {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* Individual badge */
.compat-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--hero-bg);
border: 1.5px solid var(--border);
border-radius: 100px;
padding: 9px 18px 9px 9px;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.compat-badge:hover {
background: #fff;
border-color: rgba(91,92,246,.3);
box-shadow: 0 4px 20px rgba(91,92,246,.12);
transform: translateY(-2px);
}
.compat-ico {
width: 28px; height: 28px;
border-radius: 7px;
object-fit: cover;
background: #fff;
flex-shrink: 0;
}
.compat-name {
font-size: 14px; font-weight: 600; color: var(--dark);
letter-spacing: -.2px;
}
/* Bottom catch-all line */
/* ================================================================
FEATURES
================================================================ */
.features {
background:
radial-gradient(ellipse 70% 55% at 50% 40%, rgba(91,92,246,.07) 0%, transparent 68%),
radial-gradient(circle at 1px 1px, rgba(91,92,246,.13) 1px, transparent 0),
#f8f8fc;
background-size: auto, 26px 26px, auto;
overflow: hidden;
}
.feat-hdr {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px; margin-bottom: 44px;
}
.feat-hdr-left { max-width: 640px; }
.feat-hdr .sec-chip { margin-bottom: 16px; }
.feat-hdr .sec-title { text-align: left; margin: 0; line-height: 1.1; }
.feat-nav { display: flex; gap: 12px; flex-shrink: 0; }
.feat-nav-btn {
width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid var(--border); background: #fff;
color: #3b4252; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all .2s;
}
.feat-nav-btn:hover:not(:disabled) {
border-color: var(--accent); color: var(--accent);
background: rgba(91,92,246,.06);
transform: translateY(-1px);
}
.feat-nav-btn:disabled { opacity: .32; cursor: not-allowed; }
.feat-scroller {
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
-ms-overflow-style: none; scrollbar-width: none;
margin: 0 -8px; padding: 6px 8px 8px;
}
.feat-scroller::-webkit-scrollbar { display: none; }
.feat-grid {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - 66px) / 4);
gap: 22px;
}
.feat-card {
position: relative;
background: #fff; border: 1px solid var(--border);
border-radius: 20px;
padding: 26px 24px 20px;
box-shadow: 0 2px 12px rgba(13,14,20,.05);
transition: all .3s;
min-height: 320px;
display: flex; flex-direction: column;
scroll-snap-align: start;
text-decoration: none;
}
.feat-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 44px rgba(80,70,229,.12);
border-color: rgba(91,92,246,.28);
}
.feat-card-top {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; margin-bottom: 40px;
}
.feat-icon {
width: 52px; height: 52px;
background: rgba(91,92,246,.12);
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.feat-cat {
display: inline-block;
background: rgba(91,92,246,.10); color: var(--accent);
font-size: 11px; font-weight: 700;
padding: 5px 12px; border-radius: 50px;
letter-spacing: .3px; white-space: nowrap;
}
.feat-title {
font-size: 20px; font-weight: 800;
color: var(--dark); margin-bottom: 10px; letter-spacing: -.4px;
}
.feat-desc {
font-size: 14.5px; color: var(--muted); line-height: 1.65;
margin: 0 0 22px; flex: 1;
}
.feat-card-bot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 16px; border-top: 1px solid #eef0f5;
}
.feat-num {
font-size: 12px; font-weight: 600;
color: #b5b8c3; letter-spacing: 1.2px;
}
.feat-arrow {
width: 34px; height: 34px; border-radius: 50%;
border: 1.5px solid #e4e7f0; background: #fff;
display: inline-flex; align-items: center; justify-content: center;
color: #b5b8c3; transition: all .2s;
text-decoration: none;
}
.feat-card:hover .feat-arrow,
.feat-arrow:hover {
border-color: var(--accent); color: var(--accent);
background: rgba(91,92,246,.06);
}
/* "See all features" CTA card */
.feat-card--all {
background: linear-gradient(160deg,#5b5cf6 0%,#4337d0 100%);
border-color: transparent;
color: #fff;
overflow: hidden;
}
.feat-card--all::after {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 85% 15%, rgba(255,255,255,.18), transparent 45%),
radial-gradient(circle at 15% 90%, rgba(255,255,255,.10), transparent 40%);
pointer-events: none;
}
.feat-card--all:hover {
box-shadow: 0 20px 48px rgba(80,70,229,.35);
border-color: transparent;
}
.feat-all-inner {
position: relative; z-index: 1;
display: flex; flex-direction: column;
height: 100%; padding: 6px 4px;
}
.feat-all-icon {
width: 56px; height: 56px; border-radius: 14px;
background: rgba(255,255,255,.16);
display: inline-flex; align-items: center; justify-content: center;
color: #fff; margin-bottom: 40px;
}
.feat-all-title {
font-size: 22px; font-weight: 800;
color: #fff; margin-bottom: 10px; letter-spacing: -.4px;
}
.feat-all-desc {
font-size: 14.5px; color: rgba(255,255,255,.82);
line-height: 1.65; margin: 0 0 22px; flex: 1;
}
.feat-all-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 18px; border-radius: 50px;
background: #fff; color: var(--accent);
font-weight: 700; font-size: 14px;
align-self: flex-start;
transition: transform .2s;
}
.feat-card--all:hover .feat-all-cta { transform: translateX(4px); }
/* ================================================================
PLATFORM PAGES — compact swipeable feature cards
(reuses .feat-hdr / .feat-nav / .feat-scroller / .feat-card / .feat-icon
from the section above; these rules only add what's different: a
simpler card body — no category pill / bottom row — and grid column
math sized for 3-card and 6-card sets instead of the homepage's 7.)
================================================================ */
.pf-card { min-height: auto; }
.pf-card .feat-icon { margin-bottom: 18px; }
.pf-card .feat-title { margin-bottom: 8px; }
.pf-card .feat-desc { margin-bottom: 0; }
.feat-hdr .feat-hdr-left .sec-title { margin-bottom: 12px; }
.feat-hdr .feat-hdr-left .sec-sub { margin: 0; }
.feat-grid.pf-grid-3 { grid-auto-columns: calc((100% - 44px) / 3); }
.feat-grid.pf-grid-6 { grid-auto-columns: calc((100% - 66px) / 4); }
@media (max-width: 1080px) {
.feat-grid.pf-grid-3 { grid-auto-columns: calc((100% - 22px) / 2); }
.feat-grid.pf-grid-6 { grid-auto-columns: calc((100% - 44px) / 3); }
}
@media (max-width: 768px) {
.feat-grid.pf-grid-3,
.feat-grid.pf-grid-6 { grid-auto-columns: 86%; }
}
/* ================================================================
HOW IT WORKS
================================================================ */
.steps-grid {
display: grid; grid-template-columns: repeat(3,1fr);
gap: 28px; position: relative;
}
.steps-grid::before {
content: ''; position: absolute;
top: 31px;
left: calc(16.7% + 16px); right: calc(16.7% + 16px);
height: 2px;
background: linear-gradient(90deg,#6b6cf8,#4337d0);
opacity: .18;
}
.step-card { text-align: center; }
.step-num {
width: 62px; height: 62px;
background: linear-gradient(135deg,#6b6cf8,#4337d0);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 900; color: #fff;
margin: 0 auto 22px; position: relative; z-index: 1;
box-shadow: 0 4px 16px rgba(91,92,246,.38);
}
.step-title { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 7px; letter-spacing: -.3px; }
.step-desc { font-size: 14px; color: var(--muted); line-height: 1.65; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
/* ================================================================
WHAT YOU GET
================================================================ */
/* ================================================================
STUDIO — BEYOND THE BUILDER
================================================================ */
.studio-section {
background: var(--hero-bg);
padding: 100px 0;
}
/* Header */
.studio-header { margin-bottom: 48px; }
.studio-badge {
display: inline-flex; align-items: center; gap: 10px;
border: 1.5px solid var(--border); background: #fff;
border-radius: 100px; padding: 4px 16px 4px 4px;
font-size: 11px; font-weight: 700; color: var(--muted);
letter-spacing: .6px; text-transform: uppercase; margin-bottom: 24px;
}
.studio-badge-plus {
width: 26px; height: 26px; border-radius: 50%;
background: #fff7ed; border: 1.5px solid #fed7aa;
color: #ea580c; font-size: 16px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.studio-title {
font-size: clamp(40px, 5vw, 68px);
font-weight: 900; letter-spacing: -2px; line-height: 1.0;
color: var(--dark); margin-bottom: 18px;
}
.studio-sub {
font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 560px;
}
/* Hero feature card */
.studio-hero-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
display: grid; grid-template-columns: 1fr 1fr;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 4px 24px rgba(13,14,20,.06);
}
.studio-hero-left {
padding: 36px 40px;
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.studio-hero-icon {
width: 48px; height: 48px; border-radius: 14px;
background: var(--dark);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.studio-hero-title {
font-size: 22px; font-weight: 800; color: var(--dark);
letter-spacing: -.5px; line-height: 1.2;
}
.studio-hero-desc {
font-size: 14px; color: var(--muted); line-height: 1.75;
}
.studio-cta-link {
font-size: 14px; font-weight: 700; color: var(--dark);
text-decoration: none; transition: color .18s;
margin-top: 4px;
}
.studio-cta-link:hover { color: var(--accent); }
.studio-hero-right {
background: rgba(91,92,246,.05);
display: flex; align-items: center; justify-content: center;
padding: 36px 32px;
border-left: 1px solid var(--border);
}
.studio-url-demo {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
justify-content: center;
}
.studio-url-field {
background: #fff; border: 1.5px solid var(--border);
border-radius: 10px; padding: 11px 18px;
display: flex; align-items: center; gap: 4px;
font-size: 14px;
}
.studio-url-prefix { color: var(--muted-lt); font-family: 'Courier New', monospace; }
.studio-url-val { font-weight: 700; color: var(--dark); }
.studio-url-arrow {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(91,92,246,.14); color: var(--accent);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.studio-url-app {
width: 58px; height: 58px; border-radius: 17px;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 900; color: #fff;
letter-spacing: -1px;
box-shadow: 0 8px 24px rgba(91,92,246,.35);
}
/* Service cards */
.studio-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.studio-card {
background: #fff; border: 1px solid var(--border);
border-radius: 18px; padding: 28px 26px;
display: flex; flex-direction: column; gap: 12px;
transition: box-shadow .22s, transform .22s;
}
.studio-card:hover {
box-shadow: 0 8px 32px rgba(13,14,20,.10);
transform: translateY(-3px);
}
/* 4th and 5th cards span wider to fill 2-col second row */
.studio-card:nth-child(4),
.studio-card:nth-child(5) {
grid-column: span 1;
}
.studio-grid::after {
content: ''; /* keeps 3-col grid balanced with 5 items */
}
.studio-card-icon {
width: 46px; height: 46px; border-radius: 13px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.studio-card-title {
font-size: 16px; font-weight: 800; color: var(--dark);
letter-spacing: -.3px;
}
.studio-card-desc {
font-size: 13px; color: var(--muted); line-height: 1.7; flex: 1;
}
@media (max-width: 1080px) {
.studio-hero-card { grid-template-columns: 1fr; }
.studio-hero-right { border-left: none; border-top: 1px solid var(--border); }
.studio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.studio-grid { grid-template-columns: 1fr; }
}
/* ================================================================
NO MAC — NO PROBLEM
================================================================ */
.nomac-section {
background: linear-gradient(145deg, #0b0c18 0%, #0f1024 60%, #0d0e14 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.nomac-glow {
position: absolute;
top: -160px; left: 50%; transform: translateX(-50%);
width: 900px; height: 600px;
background: radial-gradient(ellipse, rgba(91,92,246,.18) 0%, transparent 68%);
pointer-events: none;
}
/* Header */
.nomac-header { text-align: center; margin-bottom: 60px; }
.nomac-chip {
display: inline-block;
background: rgba(91,92,246,.18); color: #a5b4fc;
font-size: 11px; font-weight: 700; letter-spacing: .7px;
text-transform: uppercase; padding: 5px 14px;
border-radius: 50px; margin-bottom: 20px;
border: 1px solid rgba(91,92,246,.25);
}
.nomac-title {
font-size: clamp(44px, 5.5vw, 76px);
font-weight: 900; letter-spacing: -2.5px; line-height: 1.0;
color: #fff; margin-bottom: 20px;
}
.nomac-accent { color: var(--accent); }
.nomac-sub {
font-size: 16px; color: rgba(255,255,255,.55);
line-height: 1.75; max-width: 540px; margin: 0 auto;
}
/* Cards grid */
.nomac-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 20px; margin-bottom: 40px;
}
.nomac-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 20px; padding: 32px;
display: flex; flex-direction: column; gap: 16px;
transition: background .25s, border-color .25s;
}
.nomac-card:hover {
background: rgba(255,255,255,.07);
border-color: rgba(91,92,246,.35);
}
/* Visuals */
.nomac-visual {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px; padding: 22px 20px;
margin-bottom: 4px;
display: flex; flex-direction: column; gap: 16px;
}
.nomac-vis-row {
display: flex; align-items: center; gap: 14px;
justify-content: center;
}
.nomac-device {
width: 56px; height: 56px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.5);
position: relative; flex-shrink: 0;
}
.nomac-block-x {
position: absolute; top: -6px; right: -6px;
width: 20px; height: 20px; border-radius: 50%;
background: #1a1a2e; border: 1px solid rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: center;
}
.nomac-vis-arrow {
color: rgba(255,255,255,.3);
}
.nomac-published {
display: flex; align-items: center; gap: 7px;
background: rgba(34,197,94,.12);
border: 1px solid rgba(34,197,94,.25);
border-radius: 100px; padding: 8px 16px;
font-size: 13px; font-weight: 700; color: #4ade80;
}
.nomac-vis-tags {
display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.nv-tag {
font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
padding: 4px 10px; border-radius: 100px;
}
/* Cert list */
.nomac-cert-list { display: flex; flex-direction: column; gap: 8px; }
.nomac-cert-item {
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px; padding: 10px 14px;
}
.nomac-cert-icon {
width: 32px; height: 32px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.nomac-cert-info { flex: 1; min-width: 0; }
.nomac-cert-name { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
.nomac-cert-sub { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; }
.nomac-cert-badge {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.nomac-cert-badge.green { background: rgba(34,197,94,.2); color: #4ade80; }
/* Card text */
.nomac-card-title {
font-size: 20px; font-weight: 800; color: #fff;
letter-spacing: -.4px; line-height: 1.2;
}
.nomac-card-desc {
font-size: 14px; color: rgba(255,255,255,.5);
line-height: 1.75; flex: 1;
}
.nomac-cta {
font-size: 14px; font-weight: 700; color: #a5b4fc;
text-decoration: none; transition: color .18s;
}
.nomac-cta:hover { color: #fff; }
/* Bottom bar */
.nomac-bottom {
display: flex; align-items: center; justify-content: center;
gap: 40px; flex-wrap: wrap;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,.08);
}
.nomac-bottom-item {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55);
}
@media (max-width: 768px) {
.nomac-grid { grid-template-columns: 1fr; }
.nomac-bottom { gap: 20px; flex-direction: column; }
}
/* ================================================================
CTA SECTION
================================================================ */
.cta-wrap {
background: var(--dark); padding: 100px 0;
text-align: center; position: relative; overflow: hidden;
}
.cta-wrap::before {
content: ''; position: absolute;
top: -200px; left: 50%; transform: translateX(-50%);
width: 600px; height: 600px;
background: radial-gradient(circle,rgba(107,108,248,.22) 0%,transparent 70%);
pointer-events: none;
}
.cta-wrap .sec-chip { background: rgba(107,108,248,.2); color: #a5b4fc; }
.cta-wrap .sec-title { color: #fff; }
.cta-sub { font-size: 17px; color: rgba(255,255,255,.58); margin-bottom: 40px; line-height: 1.7; }
.cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-white {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; color: var(--dark);
text-decoration: none; font-size: 15px; font-weight: 700;
padding: 14px 28px; border-radius: 100px; transition: all .2s;
}
.btn-white:hover { background: var(--hero-bg); transform: translateY(-2px); }
.btn-outline-w {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: #fff;
text-decoration: none; font-size: 15px; font-weight: 600;
padding: 14px 28px; border-radius: 100px;
border: 1.5px solid rgba(255,255,255,.22); transition: all .2s;
}
.btn-outline-w:hover {
border-color: rgba(255,255,255,.5);
background: rgba(255,255,255,.06);
transform: translateY(-1px);
}
/* ================================================================
FOOTER
================================================================ */
footer { background: #fff; border-top: 1px solid var(--border); padding: 52px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.foot-brand {
display: flex; align-items: center; gap: 9px;
text-decoration: none; color: var(--dark);
font-weight: 800; font-size: 18px; letter-spacing: -.5px;
margin-bottom: 12px;
}
.foot-brand img { width: 30px; height: 30px; border-radius: 8px; }
.foot-tag { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 270px; }
.foot-col-t {
font-size: 11px; font-weight: 700; color: var(--dark);
margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px;
}
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-links a { text-decoration: none; color: var(--muted); font-size: 14px; transition: color .18s; }
.foot-links a:hover { color: var(--accent); }
.foot-btm {
display: flex; align-items: center; justify-content: space-between;
padding-top: 22px; border-top: 1px solid var(--border);
font-size: 13px; color: var(--muted-lt);
}
.foot-btm-links { display: flex; gap: 22px; }
.foot-btm-links a { color: var(--muted-lt); text-decoration: none; font-size: 13px; transition: color .18s; }
.foot-btm-links a:hover { color: var(--accent); }
.foot-social { display: flex; align-items: center; gap: 16px; }
.foot-social a { color: var(--muted-lt); display: flex; align-items: center; transition: color .18s; }
.foot-social a:hover { color: var(--accent); }
/* Mobile-only footer CTA — hidden on desktop */
.foot-mob-cta { display: none; }
/* ================================================================
RESPONSIVE
================================================================ */
/* ── Tablet (≤1080px) ── */
@media (max-width: 1080px) {
.hero-inner { gap: 24px; }
.hero-visual { padding-right: 16px; }
.iphone-wrap { width: 160px; right: -20px; bottom: -24px; }
.feat-grid { grid-auto-columns: calc((100% - 44px) / 3); }
.feat-hdr { flex-direction: column; align-items: flex-start; gap: 20px; }
.feat-nav { align-self: flex-end; }
.feat-hdr .sec-title br { display: none; }
.feat-hdr .sec-title { font-size: clamp(24px, 4vw, 34px); }
.foot-grid { grid-template-columns: 1fr 1fr; }
.studio-hero-card { grid-template-columns: 1fr; }
.studio-hero-right { border-left: none; border-top: 1px solid var(--border); }
.studio-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
.container { padding: 0 16px; }
section { padding: 64px 0; }
/* ── Header ── */
.nav-links { display: none; }
.nav-actions { display: none; }
.burger { display: flex; margin-left: auto; }
/* ── Hero ── */
.hero { padding-top: 68px; padding-bottom: 0; }
.hero-inner { grid-template-columns: 1fr; gap: 0; }
.hero-visual { display: none; }
.iphone-wrap { display: none; }
.hero-content { padding-top: 12px; padding-bottom: 44px; }
.hero-title { font-size: 62px; letter-spacing: -2.5px; }
.hero-desc { font-size: 15px; }
.hero-url-bar { max-width: 100%; flex-wrap: wrap; gap: 8px; padding: 8px; }
.url-btn { width: 100%; text-align: center; border-radius: 8px; }
.hero-trust { gap: 12px; }
.hero-badge { font-size: 12px; margin-top: 24px; }
/* ── Trust bar / Marquee ── */
.marquee-wrap { width: 100vw; margin-left: -16px; }
/* ── Product showcase ── */
.ps-header { grid-template-columns: 1fr; gap: 28px; }
.ps-step { grid-template-columns: 1fr; gap: 28px; }
.ps-step--flip { grid-template-columns: 1fr; }
.ps-step--flip .ps-step-visual { order: 0; }
.ps-step ~ .ps-step { margin-top: 48px; }
.ps-step-title { font-size: 28px; }
.ps-title { font-size: 36px; letter-spacing: -1.5px; }
/* ── Compatibility ── */
.compat-header .sec-title { font-size: 26px; }
/* ── Features ── */
.feat-grid { grid-auto-columns: 86%; gap: 16px; }
.feat-scroller { margin: 0 -16px; padding: 6px 16px 8px; }
.feat-hdr { margin-bottom: 28px; }
.feat-nav { align-self: flex-end; }
.feat-card { min-height: 300px; padding: 24px 22px 18px; border-radius: 18px; }
.feat-card-top { margin-bottom: 32px; }
.feat-title, .feat-all-title { font-size: 18px; }
.feat-desc, .feat-all-desc { font-size: 14px; }
.feat-icon { width: 46px; height: 46px; border-radius: 12px; }
.feat-icon svg { width: 22px; height: 22px; }
.feat-all-icon { width: 50px; height: 50px; border-radius: 12px; margin-bottom: 28px; }
.feat-all-icon svg { width: 26px; height: 26px; }
.feat-cat { font-size: 10.5px; padding: 4px 10px; }
/* ── How it works ── */
.steps-grid { grid-template-columns: 1fr; gap: 20px; }
.steps-grid::before { display: none; }
/* ── What you get ── */
/* ── Studio section ── */
.studio-section { padding: 72px 0; }
.studio-title { font-size: 34px; letter-spacing: -1.5px; }
.studio-hero-card { grid-template-columns: 1fr; }
.studio-hero-right{ border-left: none; border-top: 1px solid var(--border); }
.studio-hero-left { padding: 24px 20px; }
.studio-grid { grid-template-columns: 1fr; }
.studio-url-demo { flex-wrap: wrap; gap: 10px; }
/* ── No Mac section ── */
.nomac-section { padding: 72px 0; }
.nomac-title { font-size: 40px; letter-spacing: -2px; }
.nomac-grid { grid-template-columns: 1fr; gap: 14px; }
.nomac-card { padding: 22px; }
.nomac-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
.nomac-vis-row { flex-wrap: wrap; justify-content: center; gap: 10px; }
/* ── CTA ── */
.cta-wrap { padding: 72px 0; }
.cta-actions { flex-direction: column; align-items: center; }
.btn-white, .btn-outline-w { width: 100%; max-width: 300px; justify-content: center; }
/* ── Footer — clean flat mobile layout ── */
footer { padding: 44px 0 26px; }
.foot-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0;
row-gap: 4px;
margin-bottom: 22px;
}
/* Brand block: full-width centered */
.foot-grid > div:first-child {
flex-basis: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 26px;
border-bottom: 1px solid var(--border);
margin-bottom: 22px;
}
.foot-brand { justify-content: center; }
.foot-tag { max-width: 300px; margin: 8px auto 0; }
.foot-mob-cta { display: none !important; }
/* Circular social icons (premium look) */
.foot-social { justify-content: center; margin-top: 22px; gap: 12px; }
.foot-social a {
width: 40px; height: 40px; border-radius: 50%;
background: #f4f5f9;
display: inline-flex; align-items: center; justify-content: center;
color: #5f6379;
transition: background .2s, color .2s, transform .18s;
}
.foot-social a:hover {
background: var(--accent); color: #fff;
transform: translateY(-2px);
}
.foot-social a svg { width: 17px; height: 17px; }
/* Flatten Product + Account + Support into ONE single wrapping row */
.foot-grid > div:nth-child(n+2) { display: contents; }
.foot-grid > div:nth-child(n+2) .foot-col-t { display: none; }
.foot-grid > div:nth-child(n+2) .foot-links { display: contents; }
/* Every list item flows as a direct child of .foot-grid */
.foot-grid > div:nth-child(n+2) .foot-links li {
display: inline-flex;
align-items: center;
line-height: 1.4;
letter-spacing: .1px;
}
.foot-grid > div:nth-child(n+2) .foot-links li a {
padding: 3px 10px;
font-size: 13.5px;
color: var(--muted);
}
/* Pipe AFTER each item (matches sample layout) */
.foot-grid > div:nth-child(n+2) .foot-links li::after {
content: "|";
color: rgba(13, 14, 32, .16);
font-weight: 400;
font-size: 14px;
line-height: 1;
align-self: center;
margin: 0 -2px 0 -4px;
}
/* Drop the pipe on the very last item overall (last li of Support) */
.foot-grid > div:nth-child(4) .foot-links li:last-child::after { content: none; }
/* Bottom bar — centered, stacked */
.foot-btm {
margin-top: 24px;
padding-top: 20px;
flex-direction: column;
gap: 10px;
text-align: center;
font-size: 12.5px;
}
.foot-btm-links {
justify-content: center;
flex-wrap: wrap;
gap: 0;
}
.foot-btm-links a { padding: 0 10px; font-size: 12.5px; position: relative; }
.foot-btm-links a + a::before {
content: "|";
position: absolute; left: -2px;
color: rgba(13, 14, 32, .16);
font-weight: 400;
}
}
/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
.hero-title { font-size: 50px; letter-spacing: -2px; }
.hero-badge { font-size: 11px; padding: 3px 10px 3px 3px; margin-top: 24px; }
.ps-title { font-size: 30px; }
.ps-step-title{ font-size: 24px; }
.studio-title { font-size: 28px; }
.nomac-title { font-size: 32px; }
.sec-title { font-size: 24px; }
.compat-badge { padding: 7px 12px 7px 7px; }
.compat-name { font-size: 12px; }
}
/* ================================================================
★ MODERN POLISH LAYER (2026 refresh)
================================================================ */
/* ── Hero: aurora gradient mesh + subtle grid ── */
.hero { position: relative; }
.hero::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(48% 55% at 18% 12%, rgba(80,70,229,.20) 0%, transparent 60%),
radial-gradient(42% 48% at 88% 8%, rgba(124,58,237,.16) 0%, transparent 62%),
radial-gradient(50% 50% at 70% 95%, rgba(34,197,94,.10) 0%, transparent 60%);
filter: blur(6px);
animation: auroraDrift 18s ease-in-out infinite alternate;
pointer-events: none; z-index: 0;
}
.hero::after {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(13,14,20,.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(13,14,20,.035) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 1; }
@keyframes auroraDrift {
0% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(-2%,1.5%,0) scale(1.05); }
100% { transform: translate3d(2%,-1%,0) scale(1.03); }
}
/* Badge: live shimmer dot */
.badge-pill { position: relative; overflow: hidden; }
.badge-pill::after {
content: ''; position: absolute; top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
animation: shimmerSweep 3.4s ease-in-out infinite;
}
@keyframes shimmerSweep { 0%{left:-120%} 55%,100%{left:160%} }
/* Primary buttons: sheen on hover */
.url-btn, .nav-getstarted, .mob-cta { position: relative; overflow: hidden; }
.url-btn::after, .nav-getstarted::after {
content: ''; position: absolute; top: 0; left: -150%;
width: 60%; height: 100%; transform: skewX(-20deg);
background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
transition: left .6s ease;
}
.url-btn:hover::after, .nav-getstarted:hover::after { left: 160%; }
/* Card hover lift — unify feel across the page */
.feat-card, .studio-card, .nomac-card, .step-card {
transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.feat-card:hover, .studio-card:hover, .step-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-lg);
}
/* Staggered reveal — when a grid is in view, children cascade */
.feat-grid .fade-in.visible { transition-delay: var(--d, 0s); }
/* ================================================================
TESTIMONIALS
================================================================ */
.tst-section { padding: 100px 0; background: var(--white); }
.tst-rating {
display: flex; align-items: center; justify-content: center;
gap: 12px; flex-wrap: wrap;
margin: -16px auto 44px;
}
.tst-stars { display: inline-flex; gap: 2px; }
.tst-rating-txt { font-size: 14px; color: var(--muted); }
.tst-rating-txt strong { color: var(--dark); font-weight: 800; }
.tst-carousel { position: relative; }
.tst-viewport {
overflow: hidden;
padding: 30px 0 34px;
margin: 0 -8px;
}
.tst-track {
display: flex; gap: 22px;
transition: transform .7s cubic-bezier(.65,.05,.15,1);
will-change: transform;
}
.tst-card {
flex: 0 0 calc((100% - 44px) / 3);
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px 28px 24px;
display: flex; flex-direction: column; gap: 16px;
position: relative;
opacity: .55;
transform: scale(.94);
transform-origin: center center;
transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease, border-color .3s ease;
box-shadow: 0 2px 8px rgba(13,14,20,.04);
}
.tst-card.is-active {
opacity: 1;
transform: scale(1.03);
border-color: transparent;
box-shadow: 0 24px 60px -18px rgba(80,70,229,.28);
z-index: 2;
}
.tst-card.is-active::after {
content: '';
position: absolute;
left: 24px; right: 24px; bottom: -1px;
height: 4px;
background: linear-gradient(90deg,#6b6cf8,#4337d0);
border-radius: 999px;
}
.tst-quote-mark { color: rgba(91,92,246,.32); line-height: 0; }
.tst-stars-row { display: inline-flex; gap: 3px; }
.tst-quote {
font-size: 16px; line-height: 1.7; color: #2c2f3d;
font-weight: 500; margin: 0; flex: 1;
}
.tst-author { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tst-av {
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.tst-meta { display: flex; flex-direction: column; line-height: 1.35; }
.tst-name { font-weight: 700; font-size: 14px; color: var(--dark); }
.tst-role { font-size: 12.5px; color: var(--muted); }
.tst-dots {
display: flex; gap: 8px; justify-content: center;
margin-top: 12px;
}
.tst-dot {
width: 8px; height: 8px; border-radius: 50%;
border: 0; background: #d5d8e2;
cursor: pointer; padding: 0;
transition: background .3s ease, width .3s ease;
}
.tst-dot:hover { background: #a8adbb; }
.tst-dot.is-active {
background: var(--accent);
width: 26px; border-radius: 50px;
}
/* ================================================================
FAQ — modern minimal
================================================================ */
.faq-home { padding: 110px 0; background: #fff; }
.faq-home-inner {
display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px;
align-items: start;
}
.faq-home-left { position: sticky; top: 100px; }
.faq-home-left .sec-chip { margin-bottom: 18px; }
.faq-home-left .sec-title {
text-align: left;
font-size: clamp(30px, 3vw, 42px);
letter-spacing: -1px; line-height: 1.1;
margin-bottom: 14px;
}
.faq-home-left .sec-sub {
text-align: left; margin: 0 0 28px;
font-size: 16px; line-height: 1.65;
}
.faq-home-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--accent); font-weight: 700; font-size: 15px;
text-decoration: none; transition: gap .2s;
padding: 12px 20px;
border: 1.5px solid var(--border); border-radius: 100px;
background: #fff;
}
.faq-home-cta:hover { gap: 10px; border-color: var(--accent); background: rgba(91,92,246,.05); }
.faq-home-right { display: flex; flex-direction: column; }
.faq-acc {
background: transparent;
border: 0;
border-bottom: 1px solid #eaecf2;
border-radius: 0;
padding: 0;
transition: none;
}
.faq-acc:first-child { border-top: 1px solid #eaecf2; }
.faq-acc[open] { box-shadow: none; }
.faq-q {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
font-size: 17px; font-weight: 700; color: var(--dark);
padding: 24px 4px;
letter-spacing: -.15px;
transition: color .2s;
}
.faq-q:hover { color: var(--accent); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q em { font-style: normal; font-weight: 800; color: var(--accent); }
.faq-ic {
position: relative; width: 32px; height: 32px; flex-shrink: 0;
border-radius: 50%;
background: #f4f5f9;
display: inline-flex; align-items: center; justify-content: center;
transition: background .25s ease, transform .3s cubic-bezier(.5,0,.3,1);
}
.faq-ic::before, .faq-ic::after {
content: ''; position: absolute; background: #3b4252;
border-radius: 2px; transition: transform .25s ease, opacity .25s ease, background .2s;
}
.faq-ic::before { width: 12px; height: 2px; }
.faq-ic::after { width: 2px; height: 12px; }
.faq-q:hover .faq-ic { background: rgba(91,92,246,.12); }
.faq-q:hover .faq-ic::before,
.faq-q:hover .faq-ic::after { background: var(--accent); }
.faq-acc[open] .faq-ic {
background: var(--accent);
transform: rotate(180deg);
}
.faq-acc[open] .faq-ic::before,
.faq-acc[open] .faq-ic::after { background: #fff; }
.faq-acc[open] .faq-ic::after { transform: rotate(90deg); opacity: 0; }
.faq-a {
font-size: 15.5px; line-height: 1.75; color: var(--muted);
padding: 0 4px 24px; margin-top: -6px;
max-width: 640px;
animation: faqReveal .35s ease;
}
@keyframes faqReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ── Responsive: testimonials + FAQ ── */
@media (max-width: 1080px) {
.tst-card { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 900px) {
.faq-home-inner { grid-template-columns: 1fr; gap: 32px; }
.faq-home-left { position: static; }
}
@media (max-width: 768px) {
.tst-section, .faq-home { padding: 64px 0; }
.faq-q { font-size: 16px; padding: 20px 2px; }
.faq-a { font-size: 15px; padding: 0 2px 20px; }
.faq-ic { width: 28px; height: 28px; }
.faq-ic::before { width: 10px; }
.faq-ic::after { height: 10px; }
.tst-viewport { padding: 14px 0 18px; margin: 0; }
.tst-track { gap: 16px; }
.tst-card { flex-basis: 100%; padding: 24px 22px 20px; border-radius: 18px; }
.tst-card, .tst-card.is-active { transform: none; }
.tst-card.is-active::after { left: 20px; right: 20px; height: 3px; }
.tst-quote { font-size: 15px; line-height: 1.6; }
.tst-stars-row svg { width: 16px; height: 16px; }
.tst-quote-mark svg { width: 22px; height: 22px; }
.tst-dots { margin-top: 10px; }
}
/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; }
.badge-pill::after { animation: none; }
.url-btn::after, .nav-getstarted::after { display: none; }
}
/* ════════ Video demo — lazy YouTube facade ════════ */
.video-demo {
padding: 96px 0;
background: #eef0f7;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* Desktop: text left, video right */
.video-demo-inner {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 56px;
align-items: center;
}
.video-demo-text { text-align: left; }
.video-demo-text .sec-sub { margin-top: 0; }
.video-frame {
position: relative;
width: 100%;
margin: 0;
aspect-ratio: 16 / 9; /* reserves space → zero CLS */
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--sh-lg);
background: #0d0e14;
}
.video-facade {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
display: block;
cursor: pointer;
background: #0d0e14;
}
.video-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.video-facade::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(13,14,20,.05), rgba(13,14,20,.45));
transition: background .3s ease;
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: var(--accent);
box-shadow: 0 6px 18px rgba(80,70,229,.45);
transition: transform .25s ease, background .25s ease;
}
.video-play svg { width: 16px; height: 16px; margin-left: 2px; }
.video-facade:hover .video-thumb { transform: scale(1.04); }
.video-facade:hover::after { background: linear-gradient(180deg, rgba(13,14,20,.05), rgba(13,14,20,.32)); }
.video-facade:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-dark, #4337d0); }
.video-facade:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Lightbox modal — enlarged player on click */
.video-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(13,14,20,.84);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.video-modal.open { display: flex; animation: videoFade .2s ease; }
@keyframes videoFade { from { opacity: 0; } to { opacity: 1; } }
.video-modal-box {
position: relative;
width: min(1120px, 100%);
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: #000;
box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.video-modal-holder, .video-modal-holder iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-modal-close {
position: absolute;
top: 20px;
right: 20px;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
cursor: pointer;
color: #fff;
background: rgba(255,255,255,.16);
display: grid;
place-items: center;
transition: background .2s ease, transform .2s ease;
}
.video-modal-close:hover { background: rgba(255,255,255,.3); transform: scale(1.08); }
.video-modal-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Mobile: stack text over video (top/bottom) */
@media (max-width: 860px) {
.video-demo-inner { grid-template-columns: 1fr; gap: 30px; }
.video-demo-text { text-align: center; }
.video-demo-text .sec-sub { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
.video-demo { padding: 56px 0; }
.video-play { width: 36px; height: 36px; }
.video-modal { padding: 14px; }
.video-modal-close { top: 10px; right: 10px; width: 40px; height: 40px; }
}
/* ================================================================
PLATFORM GUIDE (pg-*)
================================================================
The layout system for the rewritten /convert--to-app
guides. It lives here rather than inline in each page because six
pages share it — inline would mean six copies to keep in step, and
the first version of these pages already showed what duplication
does to a set of files.
The rule the whole system exists to enforce: fill the 1200px
container. The first attempt was a 720px column inside it, which
left 480px of dead gutter beside every section and read as an
unfinished layout. Where a measure has to stay narrow for
readability, the block is centred so the leftover space is a
symmetric margin rather than a hole on one side.
================================================================ */
.pg-url { font-family: 'Courier New', monospace; font-size: .93em; background: rgba(91,92,246,.07);
color: var(--accent); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; }
/* Hero stat strip */
.pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 34px auto 0;
max-width: 720px; background: var(--border); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden; }
.pg-stat { background: #fff; padding: 20px 14px; text-align: center; }
.pg-stat-n { font-size: 26px; font-weight: 800; color: var(--dark); letter-spacing: -.6px; line-height: 1.1; }
.pg-stat-n span { color: var(--accent); }
.pg-stat-l { font-size: 12.5px; color: var(--muted-lt-tinted); margin-top: 5px; line-height: 1.4; }
/* Problem: prose beside a mock rejection notice */
.pg-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
.pg-prose p { font-size: 16.5px; line-height: 1.78; color: var(--muted); margin-bottom: 18px; }
.pg-prose p:last-child { margin-bottom: 0; }
.pg-prose strong { color: var(--dark); }
.pg-quote { margin: 22px 0; padding: 18px 22px; border-left: 3px solid var(--accent);
background: rgba(91,92,246,.05); border-radius: 0 12px 12px 0;
font-size: 15.5px; line-height: 1.7; color: var(--dark); font-style: italic; }
.pg-notice { background: #fff; border: 1px solid var(--border); border-radius: 18px;
box-shadow: 0 18px 44px -26px rgba(13,14,32,.4); overflow: hidden; }
.pg-notice-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px;
background: var(--hero-bg); border-bottom: 1px solid var(--border); }
.pg-notice-dot { width: 10px; height: 10px; border-radius: 50%; background: #d6d9e6; }
.pg-notice-dot:first-child { background: #ef4444; }
.pg-notice-ttl { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pg-notice-body { padding: 22px 24px 24px; }
.pg-notice-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .4px;
text-transform: uppercase; background: #fef2f2; color: #b91c1c;
padding: 5px 10px; border-radius: 999px; margin-bottom: 14px; }
/* Not every notice is bad news. The Shopify page's says physical goods are
allowed, and rendering that in rejection red contradicts the sentence. */
.pg-notice-tag--ok { background: #ecfdf5; color: #0e7a53; }
.pg-notice-h { font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.pg-notice-p { font-size: 14.5px; line-height: 1.72; color: var(--muted); margin-bottom: 12px; }
.pg-notice-p:last-child { margin-bottom: 0; }
.pg-notice-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
font-size: 12.5px; color: var(--muted-lt-tinted); }
/* Reject vs approve */
.pg-42 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.pg-42-col { background: #fff; border: 1.5px solid var(--border); border-radius: 20px; padding: 28px 26px;
box-shadow: 0 2px 12px rgba(13,14,20,.05); }
.pg-42-bad { border-color: rgba(239,68,68,.3); }
.pg-42-good { border-color: rgba(14,159,110,.32); }
.pg-42-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 18px; }
.pg-42-badge { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
padding: 5px 10px; border-radius: 999px; }
.pg-42-badge--bad { background: #fef2f2; color: #b91c1c; }
.pg-42-badge--good { background: #ecfdf5; color: #0e7a53; }
.pg-42-title { font-size: 16px; font-weight: 700; color: var(--dark); }
.pg-42-list { list-style: none; margin: 0; padding: 0; }
.pg-42-list li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px;
font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.pg-42-list svg { flex-shrink: 0; margin-top: 3px; }
.pg-42-note { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border);
font-size: 13.5px; line-height: 1.6; color: var(--muted-lt-tinted); }
/* Walkthrough timeline */
/* Centred rather than left-aligned in the 1200px container. Paragraphs
have to stop around 800px to stay readable, so a left-aligned timeline
leaves ~400px dead on the right only — which reads as broken. Centring
turns that into a symmetric gutter, which reads as intentional. */
.pg-tl { position: relative; max-width: 900px; margin: 0 auto; }
.pg-tl::before { content: ''; position: absolute; left: 23px; top: 46px; bottom: 46px;
width: 2px; background: linear-gradient(180deg, var(--accent), rgba(91,92,246,.12)); }
.pg-tlrow { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 26px;
margin-bottom: 42px; }
.pg-tlrow:last-child { margin-bottom: 0; }
.pg-tlnum { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 17px; font-weight: 800; box-shadow: 0 0 0 6px #fff; z-index: 1; }
.pg-tlbody { padding-top: 3px; min-width: 0; }
.pg-tlh { font-size: 21px; font-weight: 800; color: var(--dark); letter-spacing: -.35px; margin-bottom: 10px; }
.pg-tlbody > p { font-size: 15.5px; line-height: 1.74; color: var(--muted); margin-bottom: 14px; }
.pg-tlbody > p:last-child { margin-bottom: 0; }
.pg-tlbody strong { color: var(--dark); }
/* Screenshot in a browser frame */
.pg-shot { margin: 18px 0 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
background: #fff; box-shadow: 0 20px 50px -30px rgba(13,14,32,.45); }
.pg-shot-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px;
background: var(--hero-bg); border-bottom: 1px solid var(--border); }
.pg-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d9e6; }
.pg-shot-url { margin-left: 8px; font-family: 'Courier New', monospace; font-size: 11.5px;
color: var(--muted-lt-tinted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-shot img { display: block; width: 100%; height: auto; }
.pg-shot figcaption { padding: 11px 14px; font-size: 12.5px; color: var(--muted-lt-tinted);
border-top: 1px solid var(--border); background: #fff; }
/* Feature cards used inside a timeline step */
.pg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 16px; }
.pg-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 18px 16px;
box-shadow: 0 2px 10px rgba(13,14,20,.04); }
.pg-card-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(91,92,246,.09);
color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 11px; }
.pg-card-t { font-size: 14.5px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.pg-card-d { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.pg-warn { display: flex; gap: 13px; background: #fffbeb; border: 1.5px solid rgba(167,77,8,.2);
border-radius: 14px; padding: 16px 18px; font-size: 14.5px; line-height: 1.65;
color: #7c4a06; }
.pg-warn svg { flex-shrink: 0; margin-top: 2px; }
.pg-warn strong { color: #6b3f05; }
/* Output tiles */
.pg-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.pg-out-tile { background: var(--hero-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.pg-out-k { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 5px; }
.pg-out-v { font-size: 13.5px; line-height: 1.58; color: var(--muted); }
/* Billing / IAP band */
.pg-iap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.pg-iap-list { list-style: none; margin: 18px 0 0; padding: 0; }
.pg-iap-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px;
font-size: 15px; line-height: 1.68; color: var(--muted); }
.pg-iap-list svg { flex-shrink: 0; margin-top: 4px; }
.pg-iap-list strong { color: var(--dark); }
.pg-iap-panel { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px;
box-shadow: 0 2px 14px rgba(13,14,20,.05); }
.pg-iap-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.pg-iap-row:last-child { border-bottom: none; padding-bottom: 0; }
.pg-iap-row:first-child { padding-top: 0; }
.pg-iap-badge { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: rgba(91,92,246,.08);
display: flex; align-items: center; justify-content: center; }
.pg-iap-n { font-size: 14.5px; font-weight: 700; color: var(--dark); }
.pg-iap-s { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.55; }
/* Done-for-you */
.pg-dfy { background: linear-gradient(140deg, #0b0c18, #14162e 60%, #0d0e14);
border-radius: 24px; padding: 44px 42px; color: #fff; }
.pg-dfy-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.pg-dfy-chip { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
text-transform: uppercase; background: rgba(255,255,255,.1); color: #c9c9ff;
padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.pg-dfy h2 { font-size: 30px; font-weight: 800; letter-spacing: -.7px; line-height: 1.18; margin-bottom: 14px; color: #fff; }
.pg-dfy p { font-size: 15.5px; line-height: 1.72; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.pg-dfy p:last-of-type { margin-bottom: 0; }
.pg-dfy-steps { list-style: none; margin: 0; padding: 0; }
.pg-dfy-steps li { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); }
.pg-dfy-steps li:last-child { border-bottom: none; padding-bottom: 0; }
.pg-dfy-steps b { color: #fff; font-weight: 700; }
.pg-dfy-steps svg { flex-shrink: 0; margin-top: 3px; }
/* After you ship */
.pg-after { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.pg-after-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px 24px;
box-shadow: 0 2px 12px rgba(13,14,20,.05); }
.pg-after-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(91,92,246,.09);
color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pg-after-t { font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.pg-after-d { font-size: 14.5px; line-height: 1.68; color: var(--muted); }
/* FAQ — two columns so it fills the container */
.pg-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }
.pg-faq-item { border-bottom: 1px solid var(--border); }
.pg-faq-item summary { list-style: none; cursor: pointer; padding: 19px 0;
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
font-size: 15.5px; font-weight: 600; color: var(--dark); line-height: 1.45; }
.pg-faq-item summary::-webkit-details-marker { display: none; }
.pg-faq-item summary::after { content: '+'; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
border: 1.5px solid var(--border); display: flex; align-items: center;
justify-content: center; font-size: 17px; font-weight: 500;
color: var(--accent); line-height: 1; }
.pg-faq-item[open] summary::after { content: '\2212'; background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-faq-item p { font-size: 14.5px; line-height: 1.74; color: var(--muted); padding-bottom: 20px; margin: 0; }
.pg-faq-item a { color: var(--accent); font-weight: 600; }
@media (max-width: 980px) {
.pg-split, .pg-iap, .pg-dfy-grid, .pg-faq { grid-template-columns: 1fr; gap: 30px; }
.pg-dfy { padding: 34px 26px; }
.pg-dfy h2 { font-size: 25px; }
}
@media (max-width: 640px) {
.pg-stats { grid-template-columns: 1fr; max-width: none; }
.pg-tl::before { left: 17px; }
.pg-tlrow { grid-template-columns: 36px 1fr; gap: 16px; }
.pg-tlnum { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 4px #fff; }
.pg-tlh { font-size: 19px; }
}
/* ── Platform-guide figures (pg-fig-*) ────────────────────────────────
Each guide gets one diagram of its own argument, so the six pages stop
looking like one template with the names swapped.
Built from HTML and CSS rather than SVG on purpose. An SVG wide enough
to hold this much labelling renders its text at four or five pixels
once it is scaled down to a 350px phone. Real elements reflow, stay
selectable, are read by a screen reader, and need no image request. */
.pg-fig { margin: 26px 0 0; }
/* A — cross-section of what is inside a build */
.pg-fig-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pg-lay { background: #fff; border: 1.5px solid var(--border); border-radius: 18px; padding: 20px; }
.pg-lay--bad { border-color: rgba(239,68,68,.3); }
.pg-lay--good { border-color: rgba(14,159,110,.32); }
.pg-lay-cap { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
color: var(--muted-lt-tinted); margin-bottom: 13px; }
.pg-lay-stack { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.pg-lay-row { border-radius: 9px; padding: 11px 13px; font-size: 13px; font-weight: 600; text-align: center; }
.pg-lay-shell { background: #eef0f7; color: var(--muted); border: 1px dashed var(--border); }
.pg-lay-web { background: rgba(91,92,246,.09); color: var(--accent); padding-top: 22px; padding-bottom: 22px; }
.pg-lay-gap { background: repeating-linear-gradient(45deg,#fef2f2,#fef2f2 6px,#fff 6px,#fff 12px);
color: #b91c1c; border: 1px dashed rgba(239,68,68,.4); font-weight: 700; }
.pg-lay-native{ background: rgba(14,159,110,.09); color: #0e7a53; border: 1px solid rgba(14,159,110,.25); font-weight: 700; }
.pg-lay-list { list-style: none; margin: 0; padding: 13px 0 0; border-top: 1px solid var(--border); }
.pg-lay-list li { display: flex; gap: 9px; align-items: center; font-size: 13px; line-height: 1.5;
color: var(--muted); margin-bottom: 8px; }
.pg-lay-list li:last-child { margin-bottom: 0; }
.pg-lay-list svg { flex-shrink: 0; }
/* B — two phones side by side */
.pg-fig-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pg-phone { margin: 0; }
.pg-phone-cap { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700;
color: var(--dark); margin-bottom: 11px; }
.pg-phone-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px; }
.pg-phone-tag--bad { background: #fef2f2; color: #b91c1c; }
.pg-phone-tag--good { background: #ecfdf5; color: #0e7a53; }
.pg-screen { position: relative; border: 2px solid var(--dark); border-radius: 20px; background: #fff;
padding: 9px; overflow: hidden; box-shadow: 0 14px 34px -22px rgba(13,14,32,.5); }
.pg-screen::before { content: ''; display: block; width: 46px; height: 4px; border-radius: 3px;
background: var(--dark); margin: 1px auto 8px; opacity: .25; }
.pg-screen-in { border-radius: 12px; background: var(--hero-bg); padding: 10px; min-height: 168px;
display: flex; flex-direction: column; gap: 7px; }
.pg-bar { border-radius: 5px; background: #d9dcea; height: 9px; }
.pg-bar.w60 { width: 60%; } .pg-bar.w80 { width: 80%; } .pg-bar.w100 { width: 100%; }
.pg-bar.tall { height: 34px; background: #e6e8f2; }
.pg-bar.accent { background: rgba(91,92,246,.3); }
/* the overflow case: a row that refuses to reflow */
.pg-screen--ovf .pg-screen-in { overflow: hidden; }
.pg-screen--ovf .pg-wide { width: 168%; }
.pg-ovf-note { position: absolute; right: 6px; bottom: 6px; font-size: 9.5px; font-weight: 700;
background: #fef2f2; color: #b91c1c; padding: 3px 7px; border-radius: 6px; }
/* tab bars, for the double-nav illustration */
.pg-tabs { margin-top: auto; display: flex; gap: 5px; padding-top: 7px; }
.pg-tabs span { flex: 1; height: 15px; border-radius: 5px; background: #cfd3e4; }
.pg-tabs--dupe span { background: rgba(91,92,246,.35); }
.pg-fig-cap { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--muted-lt-tinted); }
/* C — a branching flow */
.pg-fig-flow { background: #fff; border: 1.5px solid var(--border); border-radius: 20px; padding: 24px; }
.pg-flow-top { text-align: center; font-size: 14.5px; font-weight: 700; color: var(--dark);
background: var(--hero-bg); border-radius: 12px; padding: 13px; margin-bottom: 6px; }
.pg-flow-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 16px; }
.pg-flow-b { border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; }
.pg-flow-b--good { border-color: rgba(14,159,110,.32); }
.pg-flow-q { padding: 12px 15px; font-size: 13px; font-weight: 700; color: var(--dark);
background: var(--hero-bg); border-bottom: 1px solid var(--border); }
.pg-flow-b--good .pg-flow-q { background: #ecfdf5; color: #0e7a53; }
.pg-flow-body { padding: 15px; }
.pg-flow-step { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.55;
color: var(--muted); margin-bottom: 10px; }
.pg-flow-step:last-child { margin-bottom: 0; }
.pg-flow-step b { color: var(--dark); }
.pg-flow-cut { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.pg-flow-cut--zero { color: #0e7a53; }
.pg-flow-cut--fee { color: #a74d08; }
/* D — the handover line */
.pg-fig-hand { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch;
background: #fff; border: 1.5px solid var(--border); border-radius: 20px; overflow: hidden; }
.pg-hand-col { padding: 22px 24px; }
.pg-hand-col--us { background: linear-gradient(160deg, #0f1024, #14162e); }
.pg-hand-h { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
color: var(--muted-lt-tinted); margin-bottom: 14px; }
.pg-hand-col--us .pg-hand-h { color: #9c9dff; }
.pg-hand-li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55;
color: var(--muted); margin-bottom: 11px; }
.pg-hand-li:last-child { margin-bottom: 0; }
.pg-hand-col--us .pg-hand-li { color: rgba(255,255,255,.78); }
.pg-hand-li svg { flex-shrink: 0; margin-top: 2px; }
/* Wide enough for the rotated badge to sit in, with the rule drawn down the
middle by ::before. At 1px the badge overlapped both columns. */
.pg-hand-div { position: relative; width: 40px; background: #fff; }
.pg-hand-div::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
width: 1px; background: var(--border); }
.pg-hand-div span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg);
white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
text-transform: uppercase; color: #b91c1c; background: #fef2f2;
padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(239,68,68,.25); }
@media (max-width: 720px) {
.pg-fig-hand { grid-template-columns: 1fr; }
.pg-hand-div { width: auto; height: 40px; }
.pg-hand-div::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
.pg-hand-div span { transform: translate(-50%,-50%); }
}