/* ResultsAIx homepage — shared design system.
Lifted from /website/css/site.css with consumer-focused additions
(product tiles, story timeline, contact form). */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,-apple-system,sans-serif;background:#fafaf9;color:#0a0a0a;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.011em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:'Outfit',system-ui,sans-serif;letter-spacing:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 20px}}
/* =========== NAV =========== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,250,249,.82);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid rgba(10,10,10,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1240px;margin:0 auto;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em}
/* Brand mark — premium SVG R · AI · x sigil with animated AI chip */
.brand-mark {
width: 32px;
height: 32px;
display: inline-block;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
position: relative;
transition: transform .25s cubic-bezier(.21,1,.27,1), filter .2s;
will-change: transform;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark .bm-bg { fill: var(--ink); }
.brand-mark .bm-r { fill: #fafaf9; font-family: 'Outfit', system-ui, sans-serif; font-weight: 900; font-size: 44px; }
.brand-mark .bm-chip { fill: var(--amber); }
.brand-mark .bm-ai { fill: var(--ink); font-family: 'Outfit', system-ui, sans-serif; font-weight: 900; font-size: 10px; letter-spacing: .05em; }
.brand-mark .bm-x { fill: var(--amber); font-family: 'Outfit', system-ui, sans-serif; font-weight: 900; font-size: 14px; opacity: .85; }
/* AI chip pulses gently — the brand's signature heartbeat */
.brand-mark .bm-chip-grp {
transform-origin: 48px 16px;
animation: brandAIPulse 2.6s ease-in-out infinite;
}
@keyframes brandAIPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(245,158,11,0)); }
50% { transform: scale(1.06); filter: drop-shadow(0 0 4px rgba(245,158,11,.6)); }
}
/* Hover — entire mark lifts + brightens */
.brand:hover .brand-mark {
transform: rotate(-3deg) scale(1.08);
filter: brightness(1.12);
}
/* Footer variant — same mark, no override needed */
.footer-brand .brand-mark { background: transparent; }
@media (prefers-reduced-motion: reduce) {
.brand-mark .bm-chip-grp { animation: none; }
}
.brand b{font-weight:700}
.brand b i{color:#f59e0b;font-style:normal;font-weight:900}
.nav-links{display:flex;gap:28px;font-size:14px;color:#525252;font-weight:500;align-items:center}
.nav-links a{transition:color .15s}
.nav-links a:hover{color:#0a0a0a}
.nav-cta{padding:9px 18px;background:#0a0a0a;color:#fff !important;border-radius:7px;font-weight:600;font-size:13px;transition:background .15s}
.nav-cta:hover{background:#262626}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:#0a0a0a;margin:4px 0}
@media(max-width:900px){
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px;gap:16px;border-bottom:1px solid rgba(10,10,10,.08);align-items:flex-start}
.nav-links.open{display:flex}
.nav-toggle{display:block}
}
/* =========== TYPOGRAPHY =========== */
h1.display{font-size:clamp(44px,7vw,96px);line-height:.96;font-weight:800;letter-spacing:-.035em;margin:0}
h1.display i{font-style:italic;font-weight:700;color:#525252}
h1.display u{text-decoration:none;background:linear-gradient(180deg,transparent 62%,rgba(245,158,11,.32) 62%,rgba(245,158,11,.32) 92%,transparent 92%);padding:0 4px}
h1.page{font-size:clamp(34px,4.4vw,58px);line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:0 0 24px;overflow-wrap:break-word;word-wrap:break-word;hyphens:manual}
h1.page i{font-style:italic;font-weight:700;color:#525252}
h1.page u{text-decoration:none;background:linear-gradient(180deg,transparent 62%,rgba(245,158,11,.32) 62%,rgba(245,158,11,.32) 92%,transparent 92%);padding:0 4px;word-break:keep-all;white-space:nowrap}
h2{font-size:clamp(30px,4vw,52px);line-height:1.05;font-weight:800;letter-spacing:-.03em;margin:0 0 20px;max-width:900px}
h2 i{font-style:italic;font-weight:700;color:#737373}
h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;line-height:1.2}
.lede{font-size:clamp(18px,2vw,22px);color:#404040;max-width:680px;line-height:1.45;font-weight:400;margin:0}
.h2-sub{font-size:18px;color:#525252;max-width:680px;line-height:1.5;margin:0}
.section-eyebrow{font-family:'Outfit',system-ui,sans-serif;font-size:12px;color:#f59e0b;font-weight:600;letter-spacing:.02em;margin-bottom:20px;display:inline-flex;align-items:center;gap:10px}
.section-eyebrow::before{content:"";width:20px;height:1px;background:#f59e0b}
/* =========== BUTTONS =========== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:8px;font-weight:600;font-size:14px;transition:all .15s;cursor:pointer;border:none;letter-spacing:-.005em;text-align:center;white-space:nowrap}
.btn-primary{background:#0a0a0a;color:#fff !important}
.btn-primary:hover{background:#262626;transform:translateY(-1px)}
.btn-accent{background:#f59e0b;color:#0a0a0a !important}
.btn-accent:hover{background:#fbbf24;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#0a0a0a;font-weight:500;padding:14px 4px}
.btn-ghost:hover{color:#f59e0b}
.btn-ghost::after{content:"→";transition:transform .15s;display:inline-block;margin-left:4px}
.btn-ghost:hover::after{transform:translateX(3px)}
.btn-outline{background:#fff;color:#0a0a0a;border:1px solid rgba(10,10,10,.15)}
.btn-outline:hover{border-color:#0a0a0a}
.btn-lg{padding:18px 30px;font-size:15px}
/* =========== SECTION =========== */
section{padding:100px 0}
section.tight{padding:64px 0}
section.alt{background:#fff}
.section-head{max-width:900px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .section-eyebrow{justify-content:center}
/* =========== HERO =========== */
.hero{padding:160px 0 100px;position:relative}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:999px;font-size:12px;font-weight:600;color:#525252;margin-bottom:32px;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.hero-lede{font-size:clamp(17px,1.8vw,21px);color:#404040;max-width:640px;margin:32px 0 40px;line-height:1.45;font-weight:400}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-gradient{background:radial-gradient(ellipse 1200px 600px at 50% 0%,rgba(245,158,11,.08),transparent 60%)}
/* =========== CARDS =========== */
.card{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:16px;padding:32px;transition:all .2s;position:relative}
.card-hover:hover{transform:translateY(-3px);border-color:rgba(10,10,10,.16);box-shadow:0 20px 40px -16px rgba(10,10,10,.12)}
.card-dark{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fafaf9;border-color:#0a0a0a}
.card-dark h3{color:#fafaf9}
.card-dark p{color:#a3a3a3}
.card-dark a{color:#f59e0b}
/* Badges */
.badge{font-family:'Outfit',system-ui,sans-serif;font-size:10px;padding:4px 8px;border-radius:4px;background:#dcfce7;color:#166534;font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:inline-block}
.badge.new{background:#fef3c7;color:#92400e}
.badge.free{background:#dcfce7;color:#166534}
.badge.paid{background:#dbeafe;color:#1e40af}
.badge.bundle{background:#f3e8ff;color:#6b21a8}
/* =========== GRID LAYOUTS =========== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
/* =========== PRODUCT TILES (the spotlight grid on homepage) =========== */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:980px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.products-grid{grid-template-columns:1fr}}
.product-tile{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:14px;transition:all .2s;position:relative;overflow:hidden}
.product-tile:hover{transform:translateY(-3px);border-color:rgba(10,10,10,.16);box-shadow:0 20px 40px -16px rgba(10,10,10,.12)}
.product-tile-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.product-tile-icon{width:44px;height:44px;border-radius:11px;background:#fafaf9;border:1px solid rgba(10,10,10,.06);display:grid;place-items:center;font-size:22px}
.product-tile-flag{font-family:'Outfit',system-ui,sans-serif;font-size:10px;padding:3px 8px;border-radius:4px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.product-tile-flag.free{background:#dcfce7;color:#166534}
.product-tile-flag.paid{background:#fff7ed;color:#9a3412}
.product-tile-flag.bundle{background:#f3e8ff;color:#6b21a8}
.product-tile-flag.platform{background:#0a0a0a;color:#f59e0b}
.product-tile h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.product-tile p{margin:0;color:#525252;line-height:1.55;font-size:14.5px;flex:1}
.product-tile-bullets{margin:0;padding-left:18px;color:#525252;font-size:13.5px;line-height:1.6}
.product-tile-cta{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#0a0a0a;font-size:14px;margin-top:auto}
.product-tile-cta::after{content:"→";transition:transform .15s;display:inline-block}
.product-tile:hover .product-tile-cta::after{transform:translateX(3px)}
.product-tile-cta.accent{color:#f59e0b}
.product-tile.featured{background:linear-gradient(135deg,#fffbeb 0%,#fff 100%);border-color:rgba(245,158,11,.35)}
.product-tile.dark{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fafaf9;border-color:#0a0a0a}
.product-tile.dark h3{color:#fafaf9}
.product-tile.dark p,.product-tile.dark .product-tile-bullets{color:#a3a3a3}
.product-tile.dark .product-tile-icon{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.3);color:#f59e0b}
.product-tile.dark .product-tile-cta{color:#f59e0b}
/* =========== STORY TIMELINE (used on themed homepages) =========== */
.story-timeline{display:grid;grid-template-columns:1fr;gap:28px;max-width:780px;margin:0 auto;position:relative}
.story-step{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:16px;padding:36px;position:relative}
.story-step-num{font-family:'Outfit',system-ui,sans-serif;font-size:11px;color:#f59e0b;font-weight:600;letter-spacing:.08em;margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.story-step-num::before{content:"";width:24px;height:1px;background:#f59e0b}
.story-step h3{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.story-step p{font-size:18px;color:#404040;line-height:1.6;margin:0 0 18px}
.story-step p:last-child{margin-bottom:0}
.story-step .story-pull{font-size:17px;color:#525252;border-left:3px solid #f59e0b;padding:10px 0 10px 18px;margin:14px 0;font-style:italic}
/* =========== CTA SECTIONS =========== */
.cta-band{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fafaf9;border-radius:24px;padding:64px;text-align:center;margin:0 auto;max-width:1100px}
.cta-band h2{color:#fafaf9;margin-left:auto;margin-right:auto;max-width:680px}
.cta-band p{font-size:18px;color:#a3a3a3;max-width:560px;margin:18px auto 32px;line-height:1.5}
.cta-band .btn-primary{background:#f59e0b;color:#0a0a0a !important}
.cta-band .btn-primary:hover{background:#fbbf24}
.cta-band .btn-ghost{color:#fafaf9}
.cta-band .btn-ghost:hover{color:#f59e0b}
/* =========== CONTACT FORM =========== */
.form-wrap{max-width:620px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:#262626;letter-spacing:-.005em}
.field input,.field select,.field textarea{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:12px 14px;font-size:15px;font-family:inherit;color:#0a0a0a;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.field textarea{resize:vertical;min-height:140px;line-height:1.55}
.field-full{grid-column:1 / -1}
.form-note{font-size:13px;color:#737373;margin-top:14px;text-align:center}
.alert{padding:14px 18px;border-radius:10px;font-size:14.5px;margin-bottom:24px;line-height:1.5}
.alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
/* =========== FOOTER =========== */
.footer{background:#0a0a0a;color:#a3a3a3;padding:64px 0 32px;margin-top:80px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fafaf9;font-weight:700;font-size:17px;margin-bottom:14px}
.footer-brand .brand-mark{width:28px;height:28px;border-radius:7px;background:#fafaf9;color:#f59e0b;display:grid;place-items:center;font-weight:900;font-size:15px}
.footer-tag{font-size:14px;line-height:1.55;color:#737373;max-width:280px}
.footer h4{color:#fafaf9;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin:0 0 16px}
.footer-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-list a{color:#a3a3a3;font-size:14px;transition:color .15s}
.footer-list a:hover{color:#f59e0b}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#737373}
.footer-bottom a{color:#a3a3a3}
.footer-bottom a:hover{color:#f59e0b}
/* =========== STATS STRIP (hero-adjacent visual punch) =========== */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(10,10,10,.1);border-bottom:1px solid rgba(10,10,10,.1);background:#fff}
.stats-strip .stat{padding:32px 28px;border-right:1px solid rgba(10,10,10,.08);position:relative;transition:background .2s}
.stats-strip .stat:last-child{border-right:none}
.stats-strip .stat:hover{background:#fafaf9}
.stats-strip .stat-num{font-size:clamp(28px,3.5vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.stats-strip .stat-num i{font-style:normal;color:#f59e0b;font-weight:800}
.stats-strip .stat-lbl{font-size:13px;color:#525252;font-weight:500;line-height:1.4}
.stats-strip .stat-sub{font-family:'Outfit',system-ui,sans-serif;font-size:11px;color:#a3a3a3;margin-top:6px}
@media(max-width:820px){.stats-strip{grid-template-columns:repeat(2,1fr)}.stats-strip .stat{border-bottom:1px solid rgba(10,10,10,.08)}.stats-strip .stat:nth-child(2){border-right:none}.stats-strip .stat:nth-last-child(-n+2){border-bottom:none}}
/* =========== HOW-IT-WORKS (3-step strip) =========== */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:how-step}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}}
.how-step{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:16px;padding:32px;position:relative;transition:all .2s;counter-increment:how-step}
.how-step::before{content:counter(how-step,decimal-leading-zero);position:absolute;top:24px;right:28px;font-family:'Outfit',system-ui,sans-serif;font-size:36px;font-weight:800;color:rgba(245,158,11,.18);line-height:1;letter-spacing:-.02em}
.how-step:hover{border-color:rgba(245,158,11,.4);transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(10,10,10,.12)}
.how-step h3{font-size:20px;margin:0 0 12px;font-weight:800;letter-spacing:-.02em;padding-right:60px}
.how-step p{margin:0;color:#525252;font-size:18px;line-height:1.6}
/* =========== FAQ ACCORDION =========== */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-list details{background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:12px;overflow:hidden;transition:border-color .15s}
.faq-list details[open]{border-color:rgba(245,158,11,.35);background:linear-gradient(135deg,#fffbeb 0%,#fff 100%)}
.faq-list summary{cursor:pointer;padding:22px 26px;font-weight:700;font-size:16.5px;letter-spacing:-.01em;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:'Outfit',system-ui,sans-serif;font-size:22px;color:#f59e0b;font-weight:300;transition:transform .2s;flex:0 0 auto;line-height:1}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .faq-body{padding:0 26px 22px;color:#404040;font-size:18px;line-height:1.65;margin:0;border-top:1px dashed rgba(10,10,10,.08);padding-top:18px}
.faq-list .faq-body a{color:#0a0a0a;text-decoration:underline;text-decoration-color:rgba(245,158,11,.6);text-underline-offset:3px}
/* =========== SOCIAL-PROOF BAR (kicker quotes) =========== */
.proof-bar{background:#fff;border-top:1px solid rgba(10,10,10,.08);border-bottom:1px solid rgba(10,10,10,.08);padding:36px 0}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
@media(max-width:780px){.proof-grid{grid-template-columns:1fr;gap:24px}}
.proof-item{font-size:18px;color:#404040;line-height:1.6;padding-left:18px;border-left:2px solid rgba(245,158,11,.5)}
.proof-item-author{display:block;margin-top:8px;font-size:12px;color:#737373;font-weight:600;letter-spacing:.02em}
/* =========== HERO IMPROVEMENTS (the kinetic bits) =========== */
.hero-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',system-ui,sans-serif;font-size:11px;color:#737373;font-weight:600;letter-spacing:.06em;margin-bottom:14px;text-transform:uppercase}
.hero-tag::before{content:"";width:18px;height:1px;background:#f59e0b}
.hero h1.display em{font-style:italic;font-weight:700;color:#525252;display:inline}
/* Prevent the "AI-powered" hyphen from breaking the underline mid-word */
.hero h1.display u{white-space:nowrap;display:inline-block}
.hero-aside{margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(10,10,10,.04);border-radius:999px;font-size:13px;color:#525252}
.hero-aside .dot{width:6px;height:6px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 0 rgba(245,158,11,.6);animation:raixPulse 2.2s ease-in-out infinite}
@keyframes raixPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}50%{box-shadow:0 0 0 8px rgba(245,158,11,0)}}
/* =========== HERO TWO-COLUMN GRID (visual on the right) =========== */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.hero-text{min-width:0}
/* Subtle dotted-grid background pattern overlay */
.hero-gradient{position:relative;overflow:hidden}
.hero-gradient::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(10,10,10,.06) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000 30%,transparent 80%);pointer-events:none;opacity:.7;z-index:0}
.hero .wrap{position:relative;z-index:1}
/* Hero CTA polish — depth shadow on the primary */
.hero .btn-primary{box-shadow:0 8px 24px -8px rgba(10,10,10,.35),inset 0 1px 0 rgba(255,255,255,.05)}
.hero .btn-primary:hover{box-shadow:0 12px 28px -8px rgba(10,10,10,.42),inset 0 1px 0 rgba(255,255,255,.08)}
/* =========== HERO VISUAL (stylized Hub dashboard mockup) =========== */
.hero-visual{position:relative;perspective:1600px}
.hero-visual-inner{position:relative;transform-style:preserve-3d;transform:rotateY(-4deg) rotateX(2deg);transition:transform .4s ease}
.hero-visual:hover .hero-visual-inner{transform:rotateY(-2deg) rotateX(1deg)}
@media(max-width:1080px){.hero-visual-inner{transform:none}.hero-visual:hover .hero-visual-inner{transform:none}}
.mockup-window{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:14px;box-shadow:0 32px 80px -24px rgba(10,10,10,.25),0 12px 32px -12px rgba(10,10,10,.15);overflow:hidden;position:relative;z-index:2}
.mockup-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fafaf9;border-bottom:1px solid rgba(10,10,10,.06)}
.mockup-dot{width:11px;height:11px;border-radius:50%;background:#ddd}
.mockup-dot.r{background:#ff5f56}
.mockup-dot.y{background:#ffbd2e}
.mockup-dot.g{background:#27c93f}
.mockup-url{flex:1;background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:6px;padding:5px 12px;font-family:'Outfit',system-ui,sans-serif;font-size:11px;color:#525252;margin-left:8px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-url::before{content:"🔒";font-size:9px}
.mockup-live{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#dcfce7;color:#166534;font-family:'Outfit',system-ui,sans-serif;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.mockup-live::before{content:"";width:5px;height:5px;border-radius:50%;background:#16a34a;animation:raixPulse 2.2s ease-in-out infinite}
.mockup-body{padding:20px;background:#fafafa}
.mockup-h{font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;color:#0a0a0a;margin:0 0 4px;letter-spacing:-.01em;display:flex;align-items:center;gap:6px}
.mockup-h::before{content:"🧠";font-size:15px}
.mockup-sub{font-size:11px;color:#737373;margin:0 0 14px}
.mockup-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.mockup-stat{background:#fff;border:1px solid rgba(10,10,10,.06);border-radius:8px;padding:10px 12px}
.mockup-stat .n{font-size:18px;font-weight:800;color:#0a0a0a;letter-spacing:-.02em;line-height:1}
.mockup-stat .l{font-size:9.5px;color:#737373;margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.mockup-bots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mockup-bot{background:#fff;border:1px solid rgba(10,10,10,.06);border-radius:8px;padding:11px 12px;display:flex;flex-direction:column;gap:5px;position:relative;transition:all .15s}
.mockup-bot:hover{border-color:rgba(245,158,11,.4);transform:translateY(-1px)}
.mockup-bot.featured{background:linear-gradient(135deg,#fffbeb,#fff);border-color:rgba(245,158,11,.35)}
.mockup-bot .top{display:flex;align-items:center;justify-content:space-between}
.mockup-bot .ico{font-size:13px}
.mockup-bot .pro{font-family:'Outfit',system-ui,sans-serif;font-size:7.5px;font-weight:800;letter-spacing:.06em;padding:1.5px 5px;border-radius:3px;background:#0a0a0a;color:#f59e0b}
.mockup-bot .name{font-size:10.5px;font-weight:700;color:#0a0a0a;letter-spacing:-.01em;line-height:1.2}
.mockup-bot .desc{font-size:9px;color:#737373;line-height:1.3;margin:0}
.mockup-bot .models{display:flex;gap:3px;margin-top:4px}
.mockup-bot .pill{padding:1.5px 5px;border-radius:3px;font-size:7px;font-weight:700;letter-spacing:.03em}
.mockup-bot .pill.g{background:#e8f0fe;color:#1967d2}
.mockup-bot .pill.c{background:#fef3e7;color:#b45309}
.mockup-bot .pill.t{background:#dcfce7;color:#047857}
/* Floating cards beside the mockup */
.hero-float{position:absolute;background:#fff;border:1px solid rgba(10,10,10,.08);border-radius:12px;padding:10px 14px;box-shadow:0 14px 36px -12px rgba(10,10,10,.18);font-size:12px;font-weight:600;color:#0a0a0a;display:flex;align-items:center;gap:10px;z-index:3}
.hero-float .emoji{font-size:18px;line-height:1}
.hero-float .lbl{display:flex;flex-direction:column;line-height:1.3}
.hero-float .lbl small{font-size:10px;color:#737373;font-weight:500}
.hero-float.tl{top:-18px;left:-20px;animation:raixFloat 5s ease-in-out infinite}
.hero-float.br{bottom:-18px;right:-16px;animation:raixFloat 5s ease-in-out infinite reverse}
@keyframes raixFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:1080px){.hero-float{display:none}}
/* =========== PRODUCT-TILE NEW VARIANTS =========== */
.product-tile-flag.premium{background:#f3e8ff;color:#6b21a8}
.product-tile-flag.ai{background:#dbeafe;color:#1e3a8a}
/* =========== RWK AI SPOTLIGHT (the big "what's inside the membership" section) =========== */
.rwk-spotlight{background:var(--grad-dark);color:#fafaf9;padding:120px 0;position:relative;overflow:hidden}
.rwk-spotlight::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(245,158,11,.06) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);pointer-events:none}
.rwk-spotlight .wrap{position:relative;z-index:1}
.rwk-spotlight .section-eyebrow{color:#fbbf24}
.rwk-spotlight .section-eyebrow::before{background:#fbbf24}
.rwk-spotlight h2{color:#fafaf9}
.rwk-spotlight h2 i{color:#a3a3a3}
.rwk-spotlight .h2-sub{color:#a3a3a3}
/* Big amber pricing chip up top */
.rwk-pricing{display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:999px;font-size:13px;color:#fde68a;font-weight:600;margin-bottom:24px}
.rwk-pricing .price{font-family:'Outfit',system-ui,sans-serif;background:#f59e0b;color:#0a0a0a;padding:4px 12px;border-radius:999px;font-weight:800;letter-spacing:-.01em}
/* RWK AI feature grid (6 cards) */
.rwk-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:64px 0 40px}
@media(max-width:980px){.rwk-feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rwk-feat-grid{grid-template-columns:1fr}}
.rwk-feat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;transition:all .2s;position:relative;overflow:hidden}
.rwk-feat:hover{transform:translateY(-3px);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.06)}
.rwk-feat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);transform:scaleX(0);transform-origin:center;transition:transform .3s ease}
.rwk-feat:hover::before{transform:scaleX(1)}
.rwk-feat-icon{width:44px;height:44px;border-radius:11px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);display:grid;place-items:center;font-size:22px;margin-bottom:18px;color:#fbbf24}
.rwk-feat h3{color:#fafaf9;font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.rwk-feat p{color:#a3a3a3;font-size:18px;line-height:1.55;margin:0 0 14px}
.rwk-feat ul{margin:0;padding-left:22px;color:#a3a3a3;font-size:18px;line-height:1.65}
.rwk-feat ul li{margin-bottom:6px}
.rwk-feat ul li{margin-bottom:4px}
.rwk-feat-tag{display:inline-flex;align-items:center;font-family:'Outfit',system-ui,sans-serif;font-size:10px;color:#fbbf24;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:14px}
.rwk-feat-tag::before{content:"→";margin-right:6px;color:#f59e0b}
/* Model pills (for the "5 models" feature card especially) */
.rwk-models{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.rwk-model{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-family:'Outfit',system-ui,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.rwk-model.gemini{background:#1a2342;color:#93c5fd}
.rwk-model.chatgpt{background:#0f2e1a;color:#86efac}
.rwk-model.claude{background:#3d2613;color:#fcd34d}
.rwk-model.llama{background:#2d1d4a;color:#c4b5fd}
.rwk-model.deepseek{background:#0e2e35;color:#67e8f9}
/* CTA pair under the feature grid */
.rwk-cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:32px}
.rwk-cta-row .btn-primary{background:#f59e0b;color:#0a0a0a !important;box-shadow:0 12px 32px -8px rgba(245,158,11,.45),inset 0 1px 0 rgba(255,255,255,.15)}
.rwk-cta-row .btn-primary:hover{background:#fbbf24;transform:translateY(-1px);box-shadow:0 16px 36px -8px rgba(245,158,11,.55)}
.rwk-cta-row .btn-ghost{color:#fafaf9}
.rwk-cta-row .btn-ghost:hover{color:#f59e0b}
.rwk-trial-note{font-size:13px;color:#737373;text-align:center;margin-top:18px}
/* Hero bot strip — visual showing the AI bot icons in a row */
.hero-bots{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;align-items:center}
.hero-bot{width:38px;height:38px;border-radius:9px;background:#fff;border:1px solid rgba(10,10,10,.08);display:grid;place-items:center;font-size:18px;box-shadow:0 4px 12px -4px rgba(10,10,10,.08);transition:all .2s}
.hero-bot:hover{transform:translateY(-2px);box-shadow:0 8px 16px -4px rgba(10,10,10,.15);border-color:rgba(245,158,11,.4)}
.hero-bot-more{display:inline-flex;align-items:center;font-family:'Outfit',system-ui,sans-serif;font-size:12px;font-weight:600;color:#525252;padding:0 8px}
/* Section divider — when going from light to dark to light, CENTERED */
.section-link{padding:48px 0;background:#fafaf9;border-bottom:1px solid rgba(10,10,10,.06);text-align:center}
.section-link .label{font-family:'Outfit',system-ui,sans-serif;font-size:11px;color:#a3a3a3;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.section-link h3{font-size:clamp(22px,2.6vw,32px);margin:8px auto 0;font-weight:700;letter-spacing:-.02em;color:#0a0a0a;max-width:780px}
.section-link h3 i{font-style:italic;color:#525252;font-weight:600}
/* =========== SECTION DIVIDERS (subtle visual rhythm) =========== */
.section-divider{display:flex;align-items:center;gap:14px;font-family:'Outfit',system-ui,sans-serif;font-size:11px;color:#a3a3a3;font-weight:500;letter-spacing:.08em;text-transform:uppercase;max-width:1240px;margin:0 auto;padding:0 32px}
.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:rgba(10,10,10,.08)}
/* =========== UTILITY =========== */
.center{text-align:center}
.muted{color:#737373}
.mb-0{margin-bottom:0}
.mt-0{margin-top:0}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid rgba(10,10,10,.08);font-size:12px;font-weight:600;color:#404040}
/* =========== GENTLE ENTRANCE — only when JS confirms instant paint =========== */
/* Default: NO entry animation. Hero content visible the moment CSS loads. */
/* When js-anim is set in (before paint), we ENABLE a tiny slide-only nudge. */
/* No opacity fade — content is always visible. Just a 4px translate for polish. */
@keyframes raixRise{from{transform:translateY(4px)}to{transform:translateY(0)}}
.js-anim .hero h1,
.js-anim .hero-lede,
.js-anim .hero-ctas,
.js-anim .section-head { animation: raixRise .35s cubic-bezier(.21,1,.27,1) backwards; }
.js-anim .hero-lede { animation-delay: .04s; }
.js-anim .hero-ctas { animation-delay: .08s; }
/* ====================================================================
PREMIUM UPGRADE LAYER — 2026-06-06
Aurora hero · animated counters · premium product cards · gradient CTAs
==================================================================== */
:root {
/* Refined palette — softer amber, deeper darks, complementary accent */
--amber: #f59e0b;
--amber-soft: #fbbf24;
--amber-deep: #b45309;
--amber-pale: #fef3c7;
--gold: #d4a017;
--ink: #0a0a0a;
--ink-soft: #1c1c1f; /* warmer than pure black */
--ink-warm: #2a2a30; /* depth layer for dark sections */
--slate: #475569; /* sophisticated neutral */
--slate-soft: #64748b;
--bg: #fafaf9;
--bg-cream: #fdfcf9;
--bg-warm: #faf7f2; /* warmer cream for subtle variation */
/* Complementary accents — subtle, not overpowering */
--accent-blue: #3b82f6;
--accent-teal: #14b8a6;
/* Refined aurora — multi-layered, warmer */
--grad-aurora: radial-gradient(ellipse 1200px 600px at 15% -20%, rgba(245,158,11,.16), transparent 50%),
radial-gradient(ellipse 900px 500px at 90% 10%, rgba(212,160,23,.10), transparent 55%),
radial-gradient(ellipse 800px 400px at 50% 80%, rgba(20,184,166,.06), transparent 50%);
/* Dark section gradient — warmer slate, not pure black */
--grad-dark: linear-gradient(180deg, var(--ink-soft) 0%, var(--ink-warm) 50%, var(--ink-soft) 100%);
}
/* ── Hero — aurora-gradient background base ────────────────────── */
.hero.hero-gradient {
position: relative;
background: var(--bg);
overflow: hidden;
padding-top: 110px;
padding-bottom: 60px;
}
/* Homepage hero only — massive treatment scoped to a modifier class */
.hero.hero-gradient.hero-home {
padding-top: 96px;
padding-bottom: 70px;
min-height: 0; /* killed the 86vh dead-space — sized by content */
display: flex;
align-items: center;
}
/* Inner-page heroes — compact, CENTERED (no more right-side void) */
.hero.hero-gradient.hero-inner {
padding-top: 96px;
padding-bottom: 56px;
}
.hero-inner .wrap {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-inner .hero-tag {
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.hero-inner h1.page {
margin: 0 auto 22px;
max-width: 900px;
text-align: center;
}
.hero-inner .lede {
max-width: 720px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
text-align: center;
}
.hero.hero-gradient::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 1400px 700px at 12% -15%, rgba(245,158,11,.28), transparent 50%),
radial-gradient(ellipse 1000px 600px at 92% 8%, rgba(212,160,23,.18), transparent 55%),
radial-gradient(ellipse 900px 500px at 50% 95%, rgba(20,184,166,.10), transparent 50%),
radial-gradient(ellipse 700px 400px at 75% 50%, rgba(245,158,11,.10), transparent 60%);
pointer-events: none;
animation: auroraDrift 22s ease-in-out infinite alternate;
z-index: 0;
}
.hero.hero-gradient::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(10,10,10,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,10,10,.022) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 10%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 10%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.hero.hero-gradient > * { position: relative; z-index: 1; width: 100%; }
@keyframes auroraDrift {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(-50px, 40px) scale(1.12); opacity: .82; }
}
/* Base hero-lede — ALWAYS constrained AND auto-centered */
.hero-lede {
display: block;
max-width: 680px !important;
width: auto;
font-size: clamp(18px, 1.7vw, 21px);
line-height: 1.55;
color: #404040;
margin: 0 0 28px;
}
/* ── Homepage hero — CENTERED, no more right-side void ──────── */
.hero-home .wrap {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-home .hero-tag {
margin-left: auto;
margin-right: auto;
align-self: center;
}
.hero-home h1.display {
/* Scaled to fit on one line per breakpoint — no more awkward 3-line wrap. */
font-size: clamp(34px, 4.8vw, 72px);
line-height: 1.02;
letter-spacing: -.028em;
margin: 0 auto 24px;
max-width: 980px;
}
.hero-home .hero-lede {
max-width: 720px !important;
font-size: clamp(19px, 1.8vw, 22px);
line-height: 1.55;
margin: 0 auto 36px !important;
color: #404040;
text-align: center;
}
.hero-home .hero-ctas {
gap: 14px;
margin: 0 auto 24px;
justify-content: center;
}
.hero-home .hero-aside {
margin: 0 auto;
align-self: center;
}
/* Floating "scroll down" hint at bottom of homepage hero */
.hero-home .hero-scroll-hint {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10.5px;
font-weight: 600;
color: #525252;
text-transform: uppercase;
letter-spacing: .12em;
text-decoration: none;
opacity: .7;
transition: opacity .2s;
}
.hero-home .hero-scroll-hint:hover { opacity: 1; color: var(--amber-deep); }
.hero-home .hero-scroll-hint-arrow {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: grid;
place-items: center;
animation: heroBob 2.4s ease-in-out infinite;
}
@keyframes heroBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* Hero tag pill — refined, INLINE-only width to avoid stretch.
Triple-guarded against full-width stretching: inline-flex display,
max-content max-width, and an explicit width:fit-content fallback. */
.hero-tag {
display: inline-flex !important;
width: fit-content;
max-width: max-content;
align-self: flex-start;
align-items: center;
gap: 8px;
padding: 7px 16px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(10,10,10,.08);
border-radius: 999px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11.5px;
font-weight: 600;
color: var(--ink);
margin-bottom: 26px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 8px -2px rgba(10,10,10,.06);
}
/* Wrapper safeguard — if hero-tag sits inside a flex column wrap, prevent stretch */
.hero .wrap, .hero-inner .wrap { display: block; }
.hero-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 0 4px rgba(245,158,11,.22);
animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(245,158,11,.22); }
50% { transform: scale(1.2); box-shadow: 0 0 0 7px rgba(245,158,11,.10); }
}
/* ── Premium CTA system — dramatic, high-contrast, animated ─── */
.btn {
font-size: 15.5px;
letter-spacing: -.005em;
border-radius: 10px;
transition: transform .2s cubic-bezier(.21,1,.27,1), box-shadow .2s, background .15s, color .15s;
}
.btn-lg {
padding: 17px 30px;
font-size: 16.5px;
font-weight: 700;
border-radius: 12px;
}
/* Primary — gradient amber, dramatic glow */
.btn-primary {
background: linear-gradient(135deg, var(--amber) 0%, var(--gold) 100%) !important;
color: var(--ink) !important;
font-weight: 700;
border: none;
box-shadow:
0 6px 18px -6px rgba(245,158,11,.55),
0 2px 4px rgba(245,158,11,.25),
inset 0 1px 0 rgba(255,255,255,.4);
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-120%);
transition: transform .65s cubic-bezier(.21,1,.27,1);
pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--amber) 100%) !important;
box-shadow:
0 16px 32px -8px rgba(245,158,11,.65),
0 4px 8px rgba(245,158,11,.35),
inset 0 1px 0 rgba(255,255,255,.5);
}
/* Accent — same vibe as primary, alternate for layout variety */
.btn-accent {
background: linear-gradient(135deg, var(--amber) 0%, var(--gold) 100%) !important;
color: var(--ink) !important;
font-weight: 700;
border: none;
box-shadow:
0 6px 18px -6px rgba(245,158,11,.55),
0 2px 4px rgba(245,158,11,.25),
inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-accent:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--amber) 100%) !important;
box-shadow:
0 16px 32px -8px rgba(245,158,11,.65),
0 4px 8px rgba(245,158,11,.35),
inset 0 1px 0 rgba(255,255,255,.5);
}
/* Ghost — clean, refined, arrow animation */
.btn-ghost {
font-weight: 600;
color: var(--ink);
padding: 14px 4px;
background: transparent;
}
.btn-ghost:hover {
color: var(--amber-deep);
}
.btn-ghost::after {
content: "→";
transition: transform .2s cubic-bezier(.21,1,.27,1);
display: inline-block;
margin-left: 6px;
font-weight: 700;
}
.btn-ghost:hover::after { transform: translateX(5px); }
/* On-dark variant — for use over dark backgrounds (rwk-spotlight, cta-band) */
.btn-ghost-light {
color: rgba(255,255,255,.85) !important;
background: transparent;
border: 1px solid rgba(255,255,255,.2);
padding: 14px 22px;
border-radius: 10px;
font-weight: 600;
}
.btn-ghost-light:hover {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.4);
color: #fff !important;
}
/* CTA pulse — for hero / key conversion moments */
.btn-lg.btn-pulse {
position: relative;
animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse {
0%, 100% {
box-shadow:
0 6px 18px -6px rgba(245,158,11,.55),
0 2px 4px rgba(245,158,11,.25),
inset 0 1px 0 rgba(255,255,255,.4),
0 0 0 0 rgba(245,158,11,.5);
}
50% {
box-shadow:
0 6px 18px -6px rgba(245,158,11,.55),
0 2px 4px rgba(245,158,11,.25),
inset 0 1px 0 rgba(255,255,255,.4),
0 0 0 16px rgba(245,158,11,0);
}
}
/* ── Stats counter strip — premium ─────────────────────────────── */
.stats-strip { gap: 36px; }
.stat-num {
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, var(--ink) 0%, var(--amber-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── PREMIUM PRODUCT CARDS — the headliner ─────────────────────── */
#products {
padding: 100px 0;
position: relative;
background: linear-gradient(180deg, var(--bg) 0%, #fff 50%, var(--bg) 100%);
}
#products::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10,10,10,.08), transparent);
}
#products .section-head { margin-bottom: 56px; }
.products-grid { gap: 20px; }
.product-tile {
border-radius: 18px;
padding: 28px 28px 24px;
background: linear-gradient(180deg, #fff 0%, #fdfdfc 100%);
border: 1px solid rgba(10,10,10,.07);
transition: transform .3s cubic-bezier(.21,1,.27,1), box-shadow .3s, border-color .25s;
position: relative;
overflow: hidden;
isolation: isolate;
}
.product-tile::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 18px;
padding: 1.5px;
background: linear-gradient(135deg, var(--amber) 0%, transparent 30%, transparent 70%, var(--amber-soft) 100%);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
z-index: 1;
}
.product-tile:hover::before { opacity: 1; }
.product-tile::after {
content: "";
position: absolute;
top: -50%; right: -50%;
width: 100%; height: 100%;
background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
opacity: 0;
transition: opacity .4s;
pointer-events: none;
}
.product-tile:hover::after { opacity: 1; }
.product-tile:hover {
transform: translateY(-6px);
border-color: rgba(245,158,11,.25);
box-shadow: 0 28px 50px -22px rgba(10,10,10,.18),
0 0 0 1px rgba(245,158,11,.06);
}
.product-tile.featured {
background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
border-color: rgba(245,158,11,.35);
box-shadow: 0 14px 30px -16px rgba(245,158,11,.22);
}
.product-tile.featured::before {
opacity: 1;
background: linear-gradient(135deg, var(--amber) 0%, var(--amber-soft) 30%, transparent 50%, var(--amber) 100%);
}
.product-tile.featured:hover {
transform: translateY(-8px);
box-shadow: 0 32px 56px -20px rgba(245,158,11,.32);
}
.product-tile-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
border: 1px solid rgba(10,10,10,.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 8px -2px rgba(10,10,10,.06);
transition: transform .3s cubic-bezier(.21,1,.27,1);
}
.product-tile:hover .product-tile-icon { transform: scale(1.08) rotate(-3deg); }
.product-tile-flag {
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
color: #9a3412;
border: 1px solid rgba(154,52,18,.12);
backdrop-filter: blur(4px);
}
.product-tile-flag.free { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #166534; border-color: rgba(22,101,52,.15); }
.product-tile-flag.paid { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); color: #9a3412; border-color: rgba(154,52,18,.15); }
.product-tile-flag.bundle { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); color: #6d28d9; border-color: rgba(109,40,217,.15); }
.product-tile-flag.premium{ background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); color: #b45309; border-color: rgba(180,83,9,.15); }
.product-tile h3 {
font-size: 19px;
letter-spacing: -.018em;
margin: 4px 0 6px;
position: relative;
z-index: 2;
}
.product-tile p {
color: #525252;
font-size: 14.5px;
line-height: 1.55;
margin: 0;
position: relative;
z-index: 2;
}
/* Microdata row — "12K+ active sites · ★ 4.9" */
.product-tile-meta {
display: flex;
align-items: center;
gap: 10px;
margin: 2px 0 -2px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
color: #737373;
font-weight: 500;
letter-spacing: .02em;
position: relative;
z-index: 2;
}
.product-tile-meta-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,.18);
animation: pulseDot 2.6s ease-in-out infinite;
}
.product-tile-bullets {
margin: 4px 0 0;
padding-left: 0;
list-style: none;
color: #404040;
font-size: 13.5px;
line-height: 1.6;
}
.product-tile-bullets li {
padding-left: 22px;
position: relative;
margin-bottom: 6px;
}
.product-tile-bullets li::before {
content: "→";
position: absolute;
left: 0;
color: var(--amber);
font-weight: 700;
}
.product-tile-cta {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
padding: 12px 20px;
background: linear-gradient(135deg, var(--amber) 0%, var(--gold) 100%);
color: var(--ink) !important;
border-radius: 9px;
font-size: 14px;
font-weight: 700;
letter-spacing: -.005em;
align-self: flex-start;
transition: all .2s cubic-bezier(.21,1,.27,1);
box-shadow:
0 6px 18px -6px rgba(245,158,11,.5),
0 2px 4px rgba(245,158,11,.22),
inset 0 1px 0 rgba(255,255,255,.4);
position: relative;
z-index: 2;
overflow: hidden;
}
.product-tile-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-120%);
transition: transform .55s cubic-bezier(.21,1,.27,1);
pointer-events: none;
}
.product-tile-cta::after {
content: "→";
transition: transform .2s;
display: inline-block;
font-weight: 700;
}
.product-tile-cta:hover {
transform: translateY(-3px);
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--amber) 100%);
box-shadow:
0 14px 28px -8px rgba(245,158,11,.6),
0 4px 8px rgba(245,158,11,.32),
inset 0 1px 0 rgba(255,255,255,.5);
}
.product-tile-cta:hover::before { transform: translateX(120%); }
.product-tile-cta:hover::after { transform: translateX(4px); }
/* WP Sync feature row — wide premium tile */
.product-tile[style*="span 3"] {
padding: 32px;
}
.product-tile[style*="span 3"] h3 { font-size: 24px; }
/* ── Scroll-triggered animations — CONTENT IS ALWAYS VISIBLE ────
Content never starts at opacity:0 anymore. The animation is now ONLY
a subtle transform — the slide-up when content scrolls into view.
This means content is fully visible from the first paint, even if
JavaScript is slow, blocked, or never loads. The scroll animation is
a polish layer, not a visibility gate. */
.js-anim .r-reveal {
transform: translateY(10px);
transition: transform .55s cubic-bezier(.21,1,.27,1);
will-change: transform;
}
.js-anim .r-reveal.r-in {
transform: translateY(0);
}
.js-anim .r-reveal-stagger > * {
transform: translateY(10px);
transition: transform .5s cubic-bezier(.21,1,.27,1);
will-change: transform;
}
.js-anim .r-reveal-stagger.r-in > * { transition-delay: 0s; transform: translateY(0); }
.js-anim .r-reveal-stagger.r-in > *:nth-child(2) { transition-delay: .05s; }
.js-anim .r-reveal-stagger.r-in > *:nth-child(3) { transition-delay: .10s; }
.js-anim .r-reveal-stagger.r-in > *:nth-child(4) { transition-delay: .15s; }
.js-anim .r-reveal-stagger.r-in > *:nth-child(5) { transition-delay: .20s; }
.js-anim .r-reveal-stagger.r-in > *:nth-child(6) { transition-delay: .25s; }
.js-anim .r-reveal-stagger.r-in > *:nth-child(7) { transition-delay: .30s; }
.js-anim .r-reveal-stagger.r-in > *:nth-child(n+2){ transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.r-reveal, .r-reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero.hero-gradient::before { animation: none !important; }
.hero-tag::before, .product-tile-meta-dot { animation: none !important; }
.btn-lg.btn-pulse { animation: none !important; }
}
/* ── CTA band — premium dark with amber halo ─────────────────── */
.cta-band {
background: var(--grad-dark);
color: #fff;
padding: 80px 48px;
border-radius: 24px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow:
0 30px 60px -25px rgba(10,10,10,.45),
inset 0 1px 0 rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.06);
}
.cta-band::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 700px 350px at 50% 0%, rgba(245,158,11,.22), transparent 60%),
radial-gradient(ellipse 500px 250px at 50% 100%, rgba(212,160,23,.10), transparent 60%);
pointer-events: none;
}
.cta-band::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 760px; margin: 0 auto 16px; }
.cta-band h2 i { color: var(--amber) !important; }
.cta-band p { color: #d4d4d4; max-width: 620px; margin: 0 auto 32px; font-size: 18px; line-height: 1.55; }
/* ── Hero CTAs — pulse on primary, refined ghost ───────────────── */
.hero-ctas .btn-primary {
background: linear-gradient(135deg, var(--amber) 0%, var(--amber-soft) 100%) !important;
color: var(--ink) !important;
border: none;
box-shadow: 0 8px 24px -8px rgba(245,158,11,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-ctas .btn-primary::after {
background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
}
.hero-ctas .btn-primary:hover {
box-shadow: 0 14px 32px -8px rgba(245,158,11,.65), inset 0 1px 0 rgba(255,255,255,.5);
}
/* ── Section eyebrow — refined with pulsing dot ───────────────── */
.section-eyebrow::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--amber);
margin-left: 6px;
box-shadow: 0 0 0 3px rgba(245,158,11,.22);
animation: pulseDot 2.4s ease-in-out infinite;
}
/* ── Section divider — subtle gradient lines ──────────────────── */
section + section {
position: relative;
}
section + section::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80%; max-width: 1200px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10,10,10,.08), transparent);
pointer-events: none;
}
/* ── Footer polish ───────────────────────────────────────────── */
.footer { background: var(--ink); color: #d4d4d4; padding: 60px 0 32px; }
.footer-brand { color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand .brand-mark { background: var(--amber); color: var(--ink); }
.footer-brand b { font-weight: 700; letter-spacing: -.02em; }
.footer-brand b i { color: var(--amber); font-style: normal; font-weight: 900; }
.footer-tag { color: #a3a3a3; font-size: 13px; line-height: 1.55; max-width: 280px; }
.footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin: 0 0 14px; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 8px; font-size: 13.5px; }
.footer-list a { color: #a3a3a3; transition: color .15s; }
.footer-list a:hover { color: var(--amber); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: #737373; font-size: 12.5px; }
.footer-bottom a { color: #a3a3a3; }
.footer-bottom a:hover { color: var(--amber); }
/* ── Nav refinement on scroll-stick ────────────────────────────── */
.nav { transition: box-shadow .2s, background .2s; }
.nav.nav-scrolled {
background: rgba(250,250,249,.95);
box-shadow: 0 1px 0 rgba(10,10,10,.06), 0 4px 20px -6px rgba(10,10,10,.08);
}
/* ── Unified site nav — premium polish, refined items ─────────── */
.nav-inner { gap: 18px; }
.nav-links {
flex: 1;
justify-content: center;
gap: 22px;
font-size: 14px;
}
.nav-links a {
position: relative;
padding: 6px 2px;
font-weight: 500;
color: #404040;
transition: color .15s;
white-space: nowrap;
/* Reserve layout space for the bolder hover/active weight — prevents
items shifting horizontally when one becomes bold on hover or
when the active-nav class kicks in. */
font-variant-numeric: tabular-nums;
}
.nav-links a::before {
content: attr(data-text);
display: block;
font-weight: 700;
height: 0;
visibility: hidden;
overflow: hidden;
pointer-events: none;
user-select: none;
}
.nav-links a::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 80%;
height: 2px;
background: linear-gradient(90deg, var(--amber) 0%, var(--gold) 100%);
border-radius: 2px;
transition: transform .25s cubic-bezier(.21,1,.27,1);
transform-origin: center;
}
.nav-links a:hover { color: #0a0a0a; }
.nav-links a:hover::after { transform: translateX(-50%) scaleX(1); }
.nav-links a.active-nav {
color: #0a0a0a;
/* No font-weight change — keeps layout stable across pages.
Active state is signalled purely by color + the persistent underline. */
}
.nav-links a.active-nav::after {
transform: translateX(-50%) scaleX(1);
}
/* "Download The Free Hub" — subtle amber accent so it pulls the eye */
.nav-links a.nav-link-accent {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: linear-gradient(135deg, rgba(245,158,11,.10) 0%, rgba(212,160,23,.06) 100%);
border: 1px solid rgba(245,158,11,.25);
border-radius: 999px;
color: #9a3412;
font-weight: 600;
transition: all .18s cubic-bezier(.21,1,.27,1);
}
.nav-links a.nav-link-accent::after { display: none; }
.nav-links a.nav-link-accent::before {
content: "↓";
font-weight: 700;
color: var(--amber);
transition: transform .2s;
}
.nav-links a.nav-link-accent:hover {
background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(212,160,23,.12) 100%);
border-color: var(--amber);
color: #7c2d12;
transform: translateY(-1px);
}
.nav-links a.nav-link-accent:hover::before { transform: translateY(2px); }
/* Right-side CTA group wrapper — keeps Docs + Support together */
.nav-cta-group {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Right-side CTA: "Docs" — gold-highlighted, visually distinct */
.nav-cta-docs {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: var(--ink) !important;
border: 1px solid #f59e0b;
border-radius: 10px;
font-weight: 700;
font-size: 13px;
letter-spacing: -.005em;
box-shadow: 0 2px 8px -2px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.5);
transition: all .18s cubic-bezier(.21,1,.27,1);
white-space: nowrap;
position: relative;
}
.nav-cta-docs::before {
content: "";
display: inline-block;
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex-shrink: 0;
}
.nav-cta-docs:hover {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #fff !important;
border-color: #d97706;
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(245,158,11,.55);
}
/* Right-side CTA: "Support / License Keys" */
.nav-cta-support {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
background: #fff;
color: var(--ink) !important;
border: 1px solid rgba(10,10,10,.12);
border-radius: 10px;
font-weight: 600;
font-size: 13px;
letter-spacing: -.005em;
box-shadow: 0 2px 6px -2px rgba(10,10,10,.08);
transition: all .18s cubic-bezier(.21,1,.27,1);
white-space: nowrap;
}
.nav-cta-support::before {
content: "";
display: inline-block;
width: 13px; height: 13px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex-shrink: 0;
}
.nav-cta-support:hover {
background: var(--ink);
color: #fff !important;
border-color: var(--ink);
transform: translateY(-1px);
box-shadow: 0 8px 20px -8px rgba(10,10,10,.35);
}
@media (max-width: 1180px) {
.nav-links { gap: 16px; font-size: 13.5px; }
.nav-cta-support, .nav-cta-docs { padding: 8px 14px; font-size: 12.5px; }
.nav-cta-group { gap: 6px; }
}
@media (max-width: 1024px) {
.nav-links a.nav-link-accent { padding: 6px 10px; }
}
/* Mobile nav — same structure, stacked layout */
@media (max-width: 900px) {
.nav-links {
order: 3;
flex-basis: 100%;
flex-direction: column;
align-items: stretch;
gap: 4px;
padding: 16px 20px 20px;
background: #fff;
border-top: 1px solid rgba(10,10,10,.06);
position: absolute;
top: 100%; left: 0; right: 0;
display: none;
}
.nav-links.open { display: flex; }
.nav-links a {
padding: 12px 14px;
border-radius: 8px;
font-size: 15px;
}
.nav-links a:hover { background: #fafaf9; }
.nav-links a::after { display: none; }
.nav-links a.nav-link-accent {
padding: 12px 14px;
margin: 4px 0;
justify-content: center;
}
.nav-cta-support { display: inline-flex; }
}
@media (max-width: 540px) {
.nav-cta-support span { display: none; }
}
/* ====================================================================
READABILITY UPGRADE — 18px base body, refined typographic scale
==================================================================== */
body { font-size: 18px; line-height: 1.55; }
/* Every paragraph-ish text on landing pages — minimum 18px, max-width locked */
.hero-lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; }
.h2-sub {
font-size: 19px !important;
line-height: 1.55 !important;
max-width: 680px !important; /* RESTORED — was being stretched on the products section + others */
width: auto !important;
}
.lede { max-width: 680px !important; } /* defensive */
.product-tile p { font-size: 18px; line-height: 1.55; color: #404040; }
.product-tile-bullets { font-size: 18px; line-height: 1.65; }
.product-tile-bullets li { margin-bottom: 8px; }
.product-tile-meta { font-size: 13px; }
.product-tile h3 { font-size: 22px; letter-spacing: -.02em; }
.product-tile[style*="span 3"] h3 { font-size: 28px; }
.product-tile[style*="span 3"] > p { font-size: 19px; line-height: 1.55; }
.product-tile-cta { font-size: 15px; padding: 13px 22px; }
.story-step p, .journey-body p { font-size: 18px; line-height: 1.65; }
.compare-col li, .rwk-feat p, .rwk-feat li { font-size: 18px; line-height: 1.6; }
.how-step p { font-size: 18px; line-height: 1.6; }
.proof-item, .trust-item p { font-size: 18px; line-height: 1.6; }
.faq-body { font-size: 18px; line-height: 1.65; }
/* ── Trust strip — qualitative card row (replaces stats strip) ──── */
.trust-strip {
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
border-top: 1px solid rgba(10,10,10,.05);
border-bottom: 1px solid rgba(10,10,10,.05);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 920px;
margin: 0 auto;
}
@media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; gap: 14px; } }
.trust-item {
background: #fff;
border: 1px solid rgba(10,10,10,.07);
border-radius: 14px;
padding: 26px 28px;
transition: transform .25s cubic-bezier(.21,1,.27,1), border-color .2s, box-shadow .25s;
position: relative;
overflow: hidden;
}
.trust-item::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 56px; height: 2px;
background: linear-gradient(90deg, var(--amber) 0%, transparent 100%);
}
.trust-item:hover {
transform: translateY(-3px);
border-color: rgba(245,158,11,.25);
box-shadow: 0 16px 32px -16px rgba(10,10,10,.15);
}
.trust-ic {
font-size: 26px;
width: 44px; height: 44px;
border-radius: 11px;
background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
border: 1px solid rgba(10,10,10,.06);
display: grid; place-items: center;
margin-bottom: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.trust-item h3 {
font-size: 19px;
font-weight: 700;
letter-spacing: -.018em;
margin: 0 0 8px;
color: var(--ink);
}
.trust-item p {
color: #525252;
margin: 0;
}
/* ====================================================================
RWK AI SECTION HEAD — premium, dramatic, no weak typography
==================================================================== */
.rwk-head {
text-align: center;
margin-bottom: 48px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.rwk-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px 8px 14px;
background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border: 1px solid rgba(245,158,11,.28);
border-radius: 999px;
margin-bottom: 28px;
box-shadow: 0 4px 18px -6px rgba(245,158,11,.25), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.rwk-eyebrow-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 0 4px rgba(245,158,11,.22);
animation: pulseDot 2.4s ease-in-out infinite;
}
.rwk-eyebrow-brand {
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 700;
color: #fafaf9;
letter-spacing: -.01em;
}
.rwk-eyebrow-brand i { font-style: normal; color: rgba(255,255,255,.5); font-weight: 500; }
.rwk-eyebrow-brand strong { color: var(--amber); font-weight: 900; }
.rwk-eyebrow-sep { color: rgba(255,255,255,.3); font-weight: 700; }
.rwk-eyebrow-tag {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10.5px;
font-weight: 700;
color: var(--amber-soft);
text-transform: uppercase;
letter-spacing: .08em;
padding: 3px 10px;
background: rgba(245,158,11,.14);
border-radius: 999px;
border: 1px solid rgba(245,158,11,.25);
}
.rwk-headline {
font-family: 'Outfit', sans-serif;
font-size: clamp(36px, 5.5vw, 68px);
font-weight: 800;
letter-spacing: -.032em;
line-height: 1.02;
color: #fafaf9;
margin: 0 0 22px;
display: flex;
flex-direction: column;
gap: 4px;
}
.rwk-headline-line-1 { color: #fafaf9; }
.rwk-headline-accent {
font-style: italic;
font-weight: 800;
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--gold) 50%, var(--amber) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 18px rgba(245,158,11,.35));
position: relative;
}
.rwk-headline-line-3 {
color: rgba(255,255,255,.55);
font-weight: 700;
font-size: .9em;
}
.rwk-lede {
font-size: 17px !important;
max-width: 760px !important;
margin: 0 auto 32px !important;
color: rgba(255,255,255,.7) !important;
line-height: 1.55 !important;
text-align: center;
}
/* Stat ticker — compact horizontal row with dividers */
.rwk-stat-ticker {
display: inline-flex;
align-items: center;
gap: 28px;
padding: 18px 28px;
background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
margin-top: 8px;
box-shadow: 0 8px 24px -12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.rwk-stat-mini {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: inherit;
transition: transform .2s;
}
.rwk-stat-mini:hover { transform: translateY(-2px); }
.rwk-stat-mini-num {
font-family: 'Outfit', sans-serif;
font-size: 30px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1;
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
}
.rwk-stat-mini-num em {
font-size: 18px;
vertical-align: 6px;
margin-left: 1px;
font-style: normal;
}
.rwk-stat-mini-lbl {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10px;
font-weight: 600;
color: rgba(255,255,255,.55);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
}
.rwk-stat-divider {
width: 1px;
height: 36px;
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
}
@media (max-width: 720px) {
.rwk-stat-ticker {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 24px;
padding: 18px 24px;
}
.rwk-stat-divider { display: none; }
.rwk-stat-mini-num { font-size: 26px; }
}
/* ====================================================================
RWK AI FEATURE CARDS — premium glass treatment, stat-first hierarchy
==================================================================== */
.rwk-spotlight .rwk-feat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 64px 0 40px;
}
@media (max-width: 1100px) { .rwk-spotlight .rwk-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .rwk-spotlight .rwk-feat-grid { grid-template-columns: 1fr; } }
.rwk-spotlight .rwk-feat {
position: relative;
background:
linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 60%, transparent 100%),
rgba(255,255,255,.02);
border: 1px solid rgba(255,255,255,.07);
border-radius: 20px;
padding: 30px 28px 24px;
display: flex;
flex-direction: column;
gap: 18px;
transition: transform .3s cubic-bezier(.21,1,.27,1),
border-color .25s,
background .3s;
overflow: hidden;
isolation: isolate;
}
/* Subtle inner glow + animated gradient border on hover */
.rwk-spotlight .rwk-feat::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg,
rgba(245,158,11,.4) 0%,
transparent 30%,
transparent 70%,
rgba(212,160,23,.3) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
z-index: 2;
}
.rwk-spotlight .rwk-feat::after {
content: "";
position: absolute;
top: -40%; right: -40%;
width: 100%; height: 100%;
background: radial-gradient(circle, rgba(245,158,11,.10) 0%, transparent 70%);
opacity: 0;
transition: opacity .4s;
pointer-events: none;
z-index: 0;
}
.rwk-spotlight .rwk-feat:hover {
transform: translateY(-5px);
border-color: rgba(245,158,11,.25);
background:
linear-gradient(165deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.025) 60%, transparent 100%),
rgba(245,158,11,.025);
}
.rwk-spotlight .rwk-feat:hover::before { opacity: 1; }
.rwk-spotlight .rwk-feat:hover::after { opacity: 1; }
.rwk-spotlight .rwk-feat > * { position: relative; z-index: 1; }
/* Featured first card — slightly elevated treatment */
.rwk-spotlight .rwk-feat-featured {
border-color: rgba(245,158,11,.2);
background:
linear-gradient(165deg, rgba(245,158,11,.08) 0%, rgba(255,255,255,.02) 60%, transparent 100%),
rgba(255,255,255,.02);
}
.rwk-spotlight .rwk-feat-featured::before { opacity: .5; }
/* Stat-row header — big number + meta */
.rwk-feat-stat-row {
display: flex;
align-items: flex-start;
gap: 18px;
padding-bottom: 4px;
}
.rwk-feat-stat {
font-family: 'Outfit', sans-serif;
font-size: 64px;
font-weight: 800;
letter-spacing: -.04em;
line-height: 1;
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--gold) 50%, var(--amber) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
flex-shrink: 0;
min-width: 0;
font-variant-numeric: tabular-nums;
filter: drop-shadow(0 4px 14px rgba(245,158,11,.25));
}
.rwk-feat-stat-unit {
font-size: 30px;
font-weight: 700;
margin-left: 2px;
vertical-align: 18px;
}
.rwk-feat-stat-infty { font-size: 76px; line-height: .8; }
.rwk-feat-stat-meta {
flex: 1;
min-width: 0;
padding-top: 6px;
}
.rwk-feat-label {
display: block;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
color: rgba(251,191,36,.85);
text-transform: uppercase;
margin-bottom: 8px;
}
.rwk-spotlight .rwk-feat h3 {
color: #fafaf9;
font-family: 'Outfit', sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.018em;
margin: 0;
}
.rwk-spotlight .rwk-feat h3 br + * { color: rgba(255,255,255,.65); font-weight: 600; }
/* Description text */
.rwk-feat-desc {
color: rgba(255,255,255,.65);
font-size: 14.5px;
line-height: 1.55;
margin: 0;
}
/* Custom checkmark bullet list */
.rwk-feat-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.rwk-feat-list li {
position: relative;
padding-left: 22px;
color: rgba(255,255,255,.78);
font-size: 13.5px;
line-height: 1.5;
}
.rwk-feat-list li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(245,158,11,.18);
border: 1px solid rgba(245,158,11,.35);
}
.rwk-feat-list li::after {
content: "";
position: absolute;
left: 4px;
top: 10px;
width: 5px;
height: 3px;
border-left: 1.5px solid var(--amber-soft);
border-bottom: 1.5px solid var(--amber-soft);
transform: rotate(-45deg);
}
.rwk-feat-list li strong { color: #fafaf9; font-weight: 700; }
/* Footer tag row */
.rwk-feat-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.06);
}
.rwk-feat-tag {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--amber-soft);
letter-spacing: .04em;
text-transform: uppercase;
}
.rwk-feat-arrow {
color: var(--amber);
font-size: 18px;
font-weight: 700;
transition: transform .25s;
}
.rwk-spotlight .rwk-feat:hover .rwk-feat-arrow {
transform: translateX(5px);
}
/* Model variant pills — refined */
.rwk-models {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.rwk-spotlight .rwk-model {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
padding: 5px 9px;
border-radius: 6px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.85);
letter-spacing: .01em;
}
.rwk-model.gemini { color: #93c5fd; border-color: rgba(147,197,253,.3); background: rgba(59,130,246,.08); }
.rwk-model.chatgpt { color: #6ee7b7; border-color: rgba(110,231,183,.3); background: rgba(16,185,129,.08); }
.rwk-model.claude { color: #fcd34d; border-color: rgba(252,211,77,.3); background: rgba(245,158,11,.08); }
.rwk-model.llama { color: #c4b5fd; border-color: rgba(196,181,253,.3); background: rgba(139,92,246,.08); }
.rwk-model.deepseek { color: #67e8f9; border-color: rgba(103,232,249,.3); background: rgba(6,182,212,.08); }
/* CTA card — last card is the "join" prompt */
.rwk-spotlight .rwk-feat-cta {
background:
linear-gradient(135deg, rgba(245,158,11,.22) 0%, rgba(212,160,23,.10) 60%, rgba(245,158,11,.04) 100%);
border-color: rgba(245,158,11,.35);
}
.rwk-spotlight .rwk-feat-cta::before { opacity: .8; }
.rwk-feat-cta-inner {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
justify-content: center;
position: relative;
z-index: 1;
}
.rwk-feat-cta-bg {
position: absolute;
inset: -40px;
background:
radial-gradient(ellipse 300px 200px at 70% 30%, rgba(245,158,11,.3), transparent 60%);
pointer-events: none;
z-index: 0;
}
.rwk-spotlight .rwk-feat-cta h3 {
font-size: 22px;
line-height: 1.18;
}
.rwk-spotlight .rwk-feat-cta h3 i {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--amber-soft) 0%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rwk-spotlight .rwk-feat-cta p {
color: rgba(255,255,255,.75);
font-size: 14.5px;
line-height: 1.55;
margin: 0;
}
.rwk-spotlight .rwk-feat-cta .btn-primary {
align-self: flex-start;
margin-top: 4px;
}
.rwk-feat-cta-link {
color: rgba(255,255,255,.7);
font-size: 13px;
font-weight: 500;
transition: color .15s;
}
.rwk-feat-cta-link:hover { color: var(--amber-soft); }
/* Existing CTA row spacing */
.rwk-cta-row { margin-top: 8px; }
/* ── Refined "membership pill" replacing the price pill ─────────── */
.rwk-pricing {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 18px 8px 14px;
background: #fff;
border: 1px solid rgba(10,10,10,.08);
border-radius: 999px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin: 0 auto 18px;
box-shadow: 0 4px 14px -6px rgba(10,10,10,.1);
}
.rwk-pricing .price,
.rwk-pricing .price-pill {
background: linear-gradient(135deg, var(--amber) 0%, var(--amber-soft) 100%);
color: var(--ink);
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ── Premium product flag pills — more contrast ─────────────────── */
.product-tile-flag {
font-size: 10.5px;
padding: 5px 11px;
border-radius: 6px;
font-weight: 700;
letter-spacing: .06em;
}
/* ── Hero aside polish ──────────────────────────────────────────── */
.hero-aside {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 6px 14px;
background: rgba(255,255,255,.5);
border: 1px solid rgba(10,10,10,.06);
border-radius: 999px;
font-size: 13.5px;
color: #525252;
backdrop-filter: blur(6px);
}
.hero-aside .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 3px rgba(16,185,129,.2);
animation: pulseDot 2.6s ease-in-out infinite;
}
/* ── Section spacing — more generous, refined rhythm ──────────── */
section { padding: 100px 0; }
section.tight { padding: 56px 0; }
@media (max-width: 720px) { section { padding: 72px 0; } }
/* ── ALWAYS center section heads — kills the left-anchored void issue ── */
.section-head {
text-align: center !important;
max-width: 980px;
margin: 0 auto 40px;
}
.section-head .section-eyebrow {
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.section-head h2,
.section-head h3 {
margin-left: auto !important;
margin-right: auto !important;
max-width: 980px;
}
.section-head .h2-sub,
.section-head .lede,
.section-head p {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
/* ── Section background variation — subtle warmth + depth ─────── */
body { background: var(--bg-cream); }
section.alt { background: var(--bg-warm); position: relative; }
section.alt::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(10,10,10,.02) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
opacity: .5;
}
section.alt > * { position: relative; z-index: 1; }
#products {
background: linear-gradient(180deg, var(--bg-cream) 0%, #fff 50%, var(--bg-warm) 100%);
}
/* ── Logo marquee — WP Sync feature spotlight ──────────────────── */
.logos-marquee {
padding: 84px 0 64px;
background: linear-gradient(180deg, var(--bg-warm) 0%, #fff 40%, var(--bg-warm) 100%);
position: relative;
overflow: hidden;
}
.logos-marquee::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(10,10,10,.08), transparent);
}
.logos-marquee-head {
text-align: center;
max-width: 760px;
margin: 0 auto 44px;
}
.logos-marquee-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 16px;
margin-bottom: 18px;
background: linear-gradient(135deg, rgba(245,158,11,.12) 0%, rgba(212,160,23,.06) 100%);
border: 1px solid rgba(245,158,11,.28);
border-radius: 999px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--amber-deep);
letter-spacing: .04em;
box-shadow: 0 2px 8px -4px rgba(245,158,11,.25);
}
.logos-marquee-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.1;
color: var(--ink);
margin: 0;
}
.logos-marquee-title i {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--amber-deep) 0%, var(--amber) 60%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.logos-marquee-title-sub {
display: block;
font-size: clamp(15px, 1.6vw, 19px);
font-weight: 500;
color: #525252;
margin-top: 10px;
letter-spacing: -.005em;
}
.mq-mask {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq {
display: flex;
gap: 16px;
width: max-content;
animation: marqueeScroll 42s linear infinite;
will-change: transform;
}
.mq-rev {
animation-duration: 50s;
animation-direction: reverse;
margin-top: 16px;
}
/* Marquee NEVER pauses — logos keep flowing even on hover.
Individual tiles still respond to hover with their own lift/color effect. */
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.mq-tile {
flex: 0 0 auto;
width: 116px;
height: 76px;
background: #fff;
border: 1px solid rgba(10,10,10,.06);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
box-shadow: 0 2px 8px -4px rgba(10,10,10,.06);
transition: transform .2s cubic-bezier(.21,1,.27,1),
box-shadow .2s,
border-color .2s;
}
.mq-tile:hover {
transform: translateY(-3px);
border-color: rgba(245,158,11,.35);
box-shadow: 0 10px 22px -8px rgba(245,158,11,.25);
}
.mq-tile img {
max-width: 100%;
max-height: 42px;
width: auto;
object-fit: contain;
filter: grayscale(.15);
transition: filter .2s;
}
.mq-tile:hover img { filter: grayscale(0); }
.logos-marquee-foot {
text-align: center;
font-size: 15.5px;
color: #525252;
margin: 36px auto 24px;
max-width: 760px;
}
.logos-marquee-foot strong { color: var(--ink); }
.logos-marquee-ctas {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
/* ── AI bridge section — transitions WP Sync → rest of stack ──── */
.ai-bridge {
padding: 64px 0 24px;
background: var(--bg-cream);
text-align: center;
}
.ai-bridge-eyebrow {
display: inline-block;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--slate);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 14px;
}
.ai-bridge-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 700;
letter-spacing: -.022em;
line-height: 1.2;
max-width: 880px;
margin: 0 auto 14px;
color: var(--ink);
}
.ai-bridge-title i {
font-style: italic;
font-weight: 700;
background: linear-gradient(135deg, var(--amber-deep) 0%, var(--amber) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ai-bridge-sub {
font-size: 16px;
color: #525252;
max-width: 620px;
margin: 0 auto;
line-height: 1.55;
}
@media (max-width: 720px) {
.mq-tile { width: 96px; height: 64px; padding: 12px; }
.mq-tile img { max-height: 32px; }
.logos-marquee-label::before,
.logos-marquee-label::after { width: 14px; margin: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
.mq { animation: none; }
}
/* ── Top-of-page scroll progress bar (subtle, premium) ─────────── */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--amber) 0%, var(--amber-soft) 100%);
z-index: 1000;
transition: width .08s linear;
pointer-events: none;
box-shadow: 0 0 8px rgba(245,158,11,.5);
}
/* ====================================================================
ABOUT PAGE — premium journey timeline
==================================================================== */
/* Opening anchor quote */
.about-anchor {
max-width: 760px;
margin: 0 auto 56px;
padding: 0 24px;
text-align: center;
position: relative;
}
.about-anchor::before {
content: "“";
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
font-family: 'Outfit', sans-serif;
font-size: 110px;
font-weight: 800;
line-height: 1;
color: var(--amber);
opacity: .18;
}
.about-anchor blockquote {
font-size: clamp(20px, 2.3vw, 28px);
line-height: 1.4;
font-weight: 500;
letter-spacing: -.015em;
color: var(--ink);
margin: 0;
font-style: italic;
}
.about-anchor cite {
display: block;
margin-top: 18px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 12px;
font-weight: 500;
color: #737373;
font-style: normal;
letter-spacing: .04em;
text-transform: uppercase;
}
.about-anchor cite::before {
content: "— ";
color: var(--amber);
}
/* Journey timeline — vertical thread, year markers, story chapters */
.journey-timeline {
max-width: 940px;
margin: 0 auto;
position: relative;
padding-left: 12px;
}
.journey-timeline {
--journey-progress: 0%;
}
.journey-timeline::before {
content: "";
position: absolute;
left: 152px;
top: 24px;
bottom: 24px;
width: 2px;
background: rgba(245,158,11,.18);
border-radius: 2px;
}
.journey-timeline::after {
content: "";
position: absolute;
left: 152px;
top: 24px;
width: 2px;
height: var(--journey-progress, 0%);
background: linear-gradient(180deg, var(--amber) 0%, var(--amber-soft) 100%);
border-radius: 2px;
box-shadow: 0 0 14px rgba(245,158,11,.4);
transition: height .12s linear;
will-change: height;
}
.journey-comet {
position: absolute;
left: 153px;
top: calc(24px + var(--journey-progress, 0%));
width: 14px;
height: 14px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, var(--amber) 35%, var(--amber-deep) 80%);
transform: translate(-50%, -50%);
box-shadow:
0 0 0 4px rgba(245,158,11,.16),
0 0 0 10px rgba(245,158,11,.08),
0 0 24px rgba(245,158,11,.55);
transition: top .12s linear;
pointer-events: none;
z-index: 3;
will-change: top;
}
.journey-comet::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid var(--amber);
opacity: .3;
animation: cometRing 1.6s ease-out infinite;
}
@keyframes cometRing {
0% { transform: scale(.8); opacity: .55; }
100% { transform: scale(2.4); opacity: 0; }
}
@media (max-width: 720px) {
.journey-timeline::before,
.journey-timeline::after { left: 22px; }
.journey-comet { left: 23px; }
}
/* Active chapter highlight — pulses when in view */
.journey-chapter.journey-active::after {
background: var(--amber);
box-shadow:
0 0 0 4px rgba(245,158,11,.22),
0 0 0 12px rgba(245,158,11,.10),
0 6px 22px -4px rgba(245,158,11,.55);
}
.journey-chapter.journey-active .journey-body {
border-color: rgba(245,158,11,.4);
box-shadow: 0 18px 38px -16px rgba(245,158,11,.25), 0 0 0 1px rgba(245,158,11,.08);
}
.journey-chapter.journey-active .journey-year-num {
background: linear-gradient(135deg, var(--amber-deep) 0%, var(--amber) 100%);
-webkit-background-clip: text;
background-clip: text;
}
.journey-chapter {
display: grid;
grid-template-columns: 130px 1fr;
gap: 56px;
margin-bottom: 48px;
position: relative;
align-items: start;
}
@media (max-width: 720px) {
.journey-chapter {
grid-template-columns: 1fr;
gap: 12px;
padding-left: 52px;
}
}
.journey-year {
text-align: right;
position: relative;
padding-top: 4px;
}
@media (max-width: 720px) {
.journey-year { text-align: left; padding-top: 0; }
}
.journey-year-num {
display: block;
font-family: 'Outfit', sans-serif;
font-size: clamp(36px, 4.4vw, 56px);
font-weight: 800;
letter-spacing: -.035em;
line-height: 1;
background: linear-gradient(135deg, var(--ink) 0%, var(--amber-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
transition: transform .5s cubic-bezier(.21,1,.27,1),
background-image .35s ease,
filter .4s ease;
transform-origin: right center;
will-change: transform;
}
@media (max-width: 720px) {
.journey-year-num { transform-origin: left center; }
}
/* Active year — zooms in, glows, shimmers */
.journey-active .journey-year-num {
transform: scale(1.12);
background: linear-gradient(135deg, var(--amber-deep) 0%, var(--amber) 45%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 14px rgba(245,158,11,.35));
animation: yearShimmer 2.4s ease-in-out infinite;
}
@keyframes yearShimmer {
0%, 100% { filter: drop-shadow(0 4px 14px rgba(245,158,11,.35)); }
50% { filter: drop-shadow(0 6px 22px rgba(245,158,11,.55)); }
}
/* Glow halo behind active year — pseudo-element layer */
.journey-year::before {
content: "";
position: absolute;
top: 50%; right: -10px;
width: 80px; height: 80px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 70%);
transform: translate(0, -50%) scale(0);
transition: transform .6s cubic-bezier(.21,1,.27,1), opacity .4s;
opacity: 0;
pointer-events: none;
z-index: 0;
}
@media (max-width: 720px) {
.journey-year::before { right: auto; left: -10px; }
}
.journey-active .journey-year::before {
transform: translate(0, -50%) scale(1.6);
opacity: 1;
}
.journey-year-num { position: relative; z-index: 1; }
.journey-year-age { position: relative; z-index: 1; }
/* Connector line — dashed amber line from year column to body when active */
.journey-chapter::before {
content: "";
position: absolute;
top: 24px;
left: 150px;
width: 30px;
height: 2px;
background-image: linear-gradient(90deg, var(--amber) 50%, transparent 50%);
background-size: 6px 2px;
background-repeat: repeat-x;
transform: scaleX(0);
transform-origin: left center;
transition: transform .55s cubic-bezier(.21,1,.27,1);
z-index: 1;
pointer-events: none;
}
.journey-chapter.journey-active::before {
transform: scaleX(1);
animation: dashFlow 1.2s linear infinite;
}
@keyframes dashFlow {
from { background-position: 0 0; }
to { background-position: 12px 0; }
}
@media (max-width: 720px) {
.journey-chapter::before { display: none; }
}
.journey-year-age {
display: inline-block;
margin-top: 8px;
padding: 3px 9px;
border-radius: 6px;
background: rgba(245,158,11,.1);
border: 1px solid rgba(245,158,11,.22);
color: var(--amber-deep);
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: .03em;
}
/* Dot marker on the thread */
.journey-chapter::after {
content: "";
position: absolute;
left: 142px;
top: 18px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
border: 2.5px solid var(--amber);
box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 4px 12px -4px rgba(245,158,11,.4);
z-index: 2;
}
@media (max-width: 720px) {
.journey-chapter::after { left: 12px; top: 8px; width: 20px; height: 20px; }
}
.journey-chapter.journey-keystone::after {
background: var(--amber);
box-shadow: 0 0 0 4px rgba(245,158,11,.18), 0 0 0 10px rgba(245,158,11,.08), 0 6px 18px -4px rgba(245,158,11,.5);
}
.journey-body {
background: #fff;
border: 1px solid rgba(10,10,10,.07);
border-radius: 14px;
padding: 28px 32px;
box-shadow: 0 6px 18px -10px rgba(10,10,10,.1);
transition: transform .35s cubic-bezier(.21,1,.27,1),
box-shadow .35s,
border-color .25s,
background .3s;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Subtle gradient sheen behind active card */
.journey-body::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 200px at 0% 0%, rgba(245,158,11,.07), transparent 50%),
radial-gradient(ellipse 400px 200px at 100% 100%, rgba(212,160,23,.04), transparent 60%);
opacity: 0;
transition: opacity .4s;
pointer-events: none;
z-index: -1;
}
/* Animated "scan" shimmer across active card — light sweeps left → right once */
.journey-body::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 100%; height: 100%;
background: linear-gradient(105deg, transparent 30%, rgba(245,158,11,.10) 50%, transparent 70%);
transition: none;
pointer-events: none;
z-index: -1;
}
.journey-body:hover {
transform: translateY(-3px);
border-color: rgba(245,158,11,.25);
box-shadow: 0 14px 32px -14px rgba(10,10,10,.18), 0 0 0 1px rgba(245,158,11,.06);
}
.journey-active .journey-body {
transform: translateY(-2px);
border-color: rgba(245,158,11,.4);
box-shadow: 0 22px 44px -18px rgba(245,158,11,.32), 0 0 0 1px rgba(245,158,11,.12);
}
.journey-active .journey-body::before { opacity: 1; }
.journey-active .journey-body::after {
animation: journeyScan 1.2s cubic-bezier(.21,1,.27,1) forwards;
}
@keyframes journeyScan {
from { left: -120%; }
to { left: 120%; }
}
.journey-eyebrow {
display: block;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
color: var(--amber);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.journey-body h3 {
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.2;
margin: 0 0 10px;
color: var(--ink);
}
.journey-body p {
font-size: 15.5px;
color: #404040;
line-height: 1.65;
margin: 0;
}
.journey-body p + p { margin-top: 12px; }
.journey-pull {
margin: 16px 0 0;
padding: 12px 0 12px 16px;
border-left: 3px solid var(--amber);
font-size: 14.5px;
color: var(--ink);
font-weight: 500;
line-height: 1.5;
font-style: italic;
}
/* By-the-numbers — accumulated journey stats */
.journey-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1100px;
margin: 80px auto 0;
}
@media (max-width: 800px) { .journey-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.journey-stat {
background: #fff;
border: 1px solid rgba(10,10,10,.08);
border-radius: 14px;
padding: 24px 22px;
text-align: center;
transition: transform .25s, border-color .2s, box-shadow .25s;
position: relative;
overflow: hidden;
}
.journey-stat::before {
content: "";
position: absolute;
top: 0; left: 50%;
width: 30px;
height: 2px;
transform: translateX(-50%);
background: var(--amber);
border-radius: 0 0 2px 2px;
}
.journey-stat:hover {
transform: translateY(-3px);
border-color: rgba(245,158,11,.25);
box-shadow: 0 14px 28px -14px rgba(10,10,10,.15);
}
.journey-stat-num {
font-family: 'Outfit', sans-serif;
font-size: 36px;
font-weight: 800;
letter-spacing: -.025em;
line-height: 1;
background: linear-gradient(135deg, var(--ink) 0%, var(--amber-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.journey-stat-lbl {
font-size: 13.5px;
color: var(--ink);
font-weight: 600;
margin-bottom: 4px;
}
.journey-stat-sub {
font-size: 12px;
color: #737373;
font-family: 'Outfit', system-ui, sans-serif;
letter-spacing: .02em;
}
/* Closing creed section */
.about-creed {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.about-creed h2 { margin-left: auto; margin-right: auto; }
.about-creed ul {
list-style: none;
padding: 0;
margin: 32px 0;
display: grid;
gap: 12px;
}
.about-creed li {
background: #fff;
border: 1px solid rgba(10,10,10,.08);
border-radius: 10px;
padding: 14px 18px 14px 46px;
text-align: left;
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
position: relative;
transition: border-color .15s, transform .2s;
}
.about-creed li:hover {
border-color: rgba(245,158,11,.3);
transform: translateX(3px);
}
.about-creed li::before {
content: "✓";
position: absolute;
left: 16px;
top: 13px;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(245,158,11,.12);
color: var(--amber-deep);
font-weight: 700;
font-size: 13px;
display: grid;
place-items: center;
}
.stats-strip{animation-delay:.2s}
/* ====================================================================
LIVE TIME-AWARE CTA — premium card that ticks every second.
Detects the visitor's local time + day + timezone and weaves them
into a "right-now" install pitch. JS in index.html drives the
content; CSS owns the visuals.
==================================================================== */
.smart-time {
position: relative;
margin: 80px auto 0;
max-width: 1080px;
padding: 52px 56px 44px;
background: linear-gradient(180deg, #0a0a0a 0%, #171717 100%);
border: 1px solid rgba(245,158,11,.18);
border-radius: 28px;
box-shadow:
0 30px 80px -30px rgba(245,158,11,.18),
0 12px 40px -16px rgba(10,10,10,.4),
inset 0 1px 0 rgba(255,255,255,.05);
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s cubic-bezier(.21,1,.27,1), transform .8s cubic-bezier(.21,1,.27,1);
text-align: center;
color: #fafaf9;
}
.smart-time.smart-time-seen {
opacity: 1;
transform: translateY(0);
}
.smart-time-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 300px at 20% 10%, rgba(245,158,11,.22), transparent 60%),
radial-gradient(ellipse 500px 280px at 85% 90%, rgba(212,160,23,.16), transparent 65%),
radial-gradient(ellipse 400px 200px at 50% 50%, rgba(245,158,11,.06), transparent 70%);
animation: smartTimeAurora 24s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
.smart-time-grain {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.smart-time > * { position: relative; z-index: 1; }
@keyframes smartTimeAurora {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(-30px, 20px) scale(1.1); opacity: .75; }
}
/* "It's Sunday afternoon" header pill */
.smart-time-meta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 16px 7px 12px;
background: rgba(245,158,11,.12);
border: 1px solid rgba(245,158,11,.3);
border-radius: 999px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #fde68a;
margin-bottom: 28px;
}
.smart-time-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,.6);
animation: smartTimePulse 1.6s infinite;
}
@keyframes smartTimePulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* Headline — bold, large, with the live "done by" inline pop */
.smart-time-hed {
font-size: clamp(26px, 3vw, 38px);
line-height: 1.15;
font-weight: 800;
letter-spacing: -.02em;
margin: 0 auto 36px;
max-width: 760px;
color: #fafaf9;
}
.smart-time-hed-pop {
display: block;
margin-top: 8px;
color: #fbbf24;
font-weight: 700;
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: -.015em;
}
/* The three-column clock display: NOW → bridge → DONE */
.smart-time-clock {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 32px;
margin: 0 auto 36px;
max-width: 880px;
padding: 28px 28px;
background: rgba(255,255,255,.025);
border: 1px solid rgba(255,255,255,.06);
border-radius: 20px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.smart-time-slot { text-align: center; }
.smart-time-slot-label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #a3a3a3;
margin-bottom: 8px;
}
.smart-time-slot-val {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(40px, 5vw, 64px);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
color: #fafaf9;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.smart-time-slot-val .smart-time-mer {
font-size: .42em;
font-weight: 700;
color: #f59e0b;
letter-spacing: .04em;
}
.smart-time-slot-sub {
margin-top: 10px;
font-size: 13px;
color: #737373;
font-weight: 500;
}
.smart-time-slot-done .smart-time-slot-val { color: #fbbf24; }
.smart-time-slot-done .smart-time-slot-val .smart-time-mer { color: #fbbf24; }
/* The bridge between NOW and DONE — progress track + step labels */
.smart-time-bridge {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
min-width: 220px;
padding: 0 4px;
}
.smart-time-bridge-track {
width: 100%;
height: 4px;
background: rgba(255,255,255,.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.smart-time-bridge-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #f59e0b, #fbbf24);
border-radius: 999px;
transition: width .9s linear;
box-shadow: 0 0 12px rgba(245,158,11,.6);
}
.smart-time-bridge-step {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .04em;
color: #d4d4d4;
text-transform: uppercase;
}
.smart-time-bridge-step:nth-of-type(2) { margin-top: -8px; }
/* Reassurance tagline above CTA */
.smart-time-tag {
font-size: 16px;
color: #d4d4d4;
font-weight: 500;
margin: 0 auto 24px;
max-width: 600px;
}
/* The big amber CTA */
.smart-time-cta {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
color: #0a0a0a !important;
padding: 18px 36px !important;
font-size: 17px !important;
font-weight: 800 !important;
border-radius: 12px !important;
border: 0 !important;
box-shadow:
0 14px 40px -10px rgba(245,158,11,.55),
inset 0 1px 0 rgba(255,255,255,.3) !important;
transition: all .2s cubic-bezier(.21,1,.27,1) !important;
}
.smart-time-cta:hover {
transform: translateY(-2px) !important;
box-shadow:
0 20px 50px -10px rgba(245,158,11,.7),
inset 0 1px 0 rgba(255,255,255,.4) !important;
}
/* Timezone trust signal — tiny, subtle, bottom-left */
.smart-time-tz {
position: absolute;
bottom: 14px;
left: 18px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10.5px;
color: #525252;
letter-spacing: .04em;
z-index: 1;
}
/* Responsive — stack the clock vertically on narrow screens */
@media (max-width: 760px) {
.smart-time { padding: 36px 24px 32px; margin: 56px 16px 0; border-radius: 22px; }
.smart-time-clock {
grid-template-columns: 1fr;
gap: 22px;
padding: 22px 18px;
}
.smart-time-bridge { min-width: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
.smart-time-bridge-track { order: 99; flex-basis: 100%; }
.smart-time-bridge-step { font-size: 10.5px; }
.smart-time-bridge-step:nth-of-type(2) { margin-top: 0; }
.smart-time-hed { font-size: 22px; margin-bottom: 24px; }
.smart-time-hed-pop { font-size: 18px; }
.smart-time-slot-val { font-size: 42px; }
.smart-time-tz { position: static; margin-top: 18px; }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.smart-time-bg { animation: none; }
.smart-time-pulse { animation: none; }
.smart-time { transition: none; }
.smart-time-bridge-fill { transition: none; }
.smart-time-secs { animation: none !important; }
.smart-time-live-dot { animation: none !important; }
}
/* ── Live ticking-seconds + LIVE badge ────────────────────────────
Smaller :SS suffix that ticks every second so the visitor SEES
the page is alive. Plus a pulsing red LIVE badge next to the
day-label for unmistakable "real-time" cue. */
.smart-time-secs {
font-size: .52em;
font-weight: 700;
color: #a3a3a3;
margin-left: 1px;
letter-spacing: -.01em;
font-variant-numeric: tabular-nums;
animation: smartTimeSecsBlip 1s steps(1, end) infinite;
}
.smart-time-slot-done .smart-time-secs { color: #d97706; }
@keyframes smartTimeSecsBlip {
0%, 100% { opacity: 1; }
50% { opacity: .55; }
}
.smart-time-live-badge {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 6px;
padding: 3px 9px 3px 8px;
background: rgba(220, 38, 38, .18);
border: 1px solid rgba(220, 38, 38, .45);
color: #fca5a5;
border-radius: 999px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1;
}
.smart-time-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 0 0 rgba(239, 68, 68, .7);
animation: smartTimeLivePulse 1.3s infinite;
}
@keyframes smartTimeLivePulse {
0% { box-shadow: 0 0 0 0 rgba(239,68,68,.7); }
70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}