/* ============================================================ global.css — Vishal Chopde · AI Automation 3-breakpoint responsive: 1440 / 1024 / 768 ============================================================ */*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box;}:root { --bg: #0c0c0b; --bg2: #111110; --bg3: #161614; --surface: rgba(255, 255, 255, 0.04); --surface2: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.12); --text: #f0f0ec; --muted: rgba(240, 240, 236, 0.45); --muted2: rgba(240, 240, 236, 0.22); --accent: #c8fb4e; --accent2: #5b5bd6; --syne: 'Bricolage Grotesque', sans-serif; --inter: 'Inter', sans-serif; --mono: 'DM Mono', monospace;}/* Light mode overrides */[data-theme="light"] { --bg: #fafaf8; --bg2: #f4f4f0; --bg3: #efefeb; --surface: rgba(0, 0, 0, 0.04); --surface2: rgba(0, 0, 0, 0.07); --border: rgba(0, 0, 0, 0.08); --border2: rgba(0, 0, 0, 0.15); --text: #1a1a18; --muted: rgba(26, 26, 24, 0.5); --muted2: rgba(26, 26, 24, 0.3); --accent: #0c0c0b; --accent2: #0c0c0b;}[data-theme="light"],[data-theme="light"] body { background-color: #fafaf8; color: #1a1a18;}[data-theme="light"] .sec,[data-theme="light"] section { background-color: #fafaf8;}[data-theme="light"] nav { background: rgba(250, 250, 248, 0.92); border-bottom: 1px solid var(--border);}[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);}[data-theme="light"] .orb1 { background: rgba(91, 91, 214, 0.08);}[data-theme="light"] .orb2 { background: rgba(74, 74, 212, 0.05);}[data-theme="light"] .marquee-wrap { background: #1a1a18;}[data-theme="light"] .ticker-txt { color: rgba(250, 250, 248, 0.7);}[data-theme="light"] .proof-strip { background: var(--bg2);}[data-theme="light"] .h-stat { background: var(--bg);}[data-theme="light"] .hero-stats-col { background: var(--border);}[data-theme="light"] .bento { background: var(--border);}[data-theme="light"] .bento-cell { background: var(--bg2);}[data-theme="light"] .bento-cell:hover { background: var(--bg3);}[data-theme="light"] .mini-node { background: rgba(0, 0, 0, 0.04); border-color: var(--border); color: var(--muted);}[data-theme="light"] .mini-node.active { background: rgba(74, 74, 212, 0.08); border-color: rgba(74, 74, 212, 0.3); color: var(--accent);}[data-theme="light"] .mini-dot { background: var(--border2);}[data-theme="light"] .mini-node.active .mini-dot { background: var(--accent);}[data-theme="light"] .sys-list { border-color: var(--border);}[data-theme="light"] .sys-row { border-bottom-color: var(--border);}[data-theme="light"] .sys-row:hover { background: var(--bg3);}[data-theme="light"] .sys-row::after { background: var(--accent);}[data-theme="light"] .ba-grid { border-color: var(--border);}[data-theme="light"] .ba-panel.ba-before { background: var(--bg2);}[data-theme="light"] .ba-panel.ba-after { background: rgba(74, 74, 212, 0.06); border-left-color: rgba(74, 74, 212, 0.2);}[data-theme="light"] .ba-mid-arrow { background: var(--bg3); border-color: var(--border); color: var(--muted2);}[data-theme="light"] .ba-n { color: var(--text);}[data-theme="light"] .ba-after .ba-n { color: var(--accent);}[data-theme="light"] .ba-d { color: var(--muted);}[data-theme="light"] .ba-q { color: var(--muted);}[data-theme="light"] .price-grid { background: var(--border);}[data-theme="light"] .p-card { background: var(--bg);}[data-theme="light"] .p-card:hover { background: var(--bg2);}[data-theme="light"] .p-card.lime { background: #1a1a18;}[data-theme="light"] .p-card.lime * { color: rgba(250, 250, 248, 0.88) !important;}[data-theme="light"] .faq-list { border-color: var(--border);}[data-theme="light"] .faq-item { border-bottom-color: var(--border);}[data-theme="light"] .faq-btn { color: var(--text);}[data-theme="light"] .faq-btn:hover { background: var(--bg2);}[data-theme="light"] .faq-item.open .faq-ico { color: var(--accent);}[data-theme="light"] .chat-shell { background: var(--bg); border-color: var(--border2); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);}[data-theme="light"] .chat-hd { background: var(--bg2); border-bottom-color: var(--border);}[data-theme="light"] .msg.b { background: var(--bg2); border-color: var(--border); color: var(--text);}[data-theme="light"] .msg.u { background: #1a1a18; color: #fafaf8;}[data-theme="light"] .chat-ft { background: var(--bg2); border-top-color: var(--border);}[data-theme="light"] .chat-i { background: var(--bg); border-color: var(--border); color: var(--text);}[data-theme="light"] .chat-s { background: #1a1a18; color: #fafaf8;}[data-theme="light"] .cta-block { background: #1a1a18;}[data-theme="light"] footer { background: var(--bg2); border-top-color: var(--border);}[data-theme="light"] .founding-banner { background: #1a1a18;}[data-theme="light"] .founding-badge { background: var(--accent); color: #fff;}[data-theme="light"] .founding-text { color: rgba(250, 250, 248, 0.8);}[data-theme="light"] .founding-cta { color: #c8fb4e; border-bottom-color: #c8fb4e;}[data-theme="light"] .founding-close { color: rgba(250, 250, 248, 0.6);}[data-theme="light"] .founding-card { background: rgba(74, 74, 212, 0.04); border-color: var(--accent);}[data-theme="light"] .founding-spot { background: var(--bg2); border-color: var(--border);}[data-theme="light"] .founding-spot.open { background: rgba(74, 74, 212, 0.06); border-color: var(--accent);}[data-theme="light"] .nav-chat-btn { background: var(--surface); border-color: var(--border2); color: var(--text);}[data-theme="light"] .nav-chat-dropdown { background: var(--bg); border-color: var(--border2); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);}[data-theme="light"] .chat-option:hover { background: var(--bg2);}[data-theme="light"] .chat-option-icon { background: var(--bg2); border-color: var(--border); color: var(--muted);}[data-theme="light"] .chat-channel-card { background: var(--bg2);}[data-theme="light"] .chat-channel-card:hover { background: var(--bg3);}[data-theme="light"] .cc-icon { background: var(--bg); border-color: var(--border2);}[data-theme="light"] .nav-cta { background: #0c0c0b; color: #fafaf8;}[data-theme="light"] .btn-lime { background: var(--accent); color: #fafaf8;}[data-theme="light"] .btn-ghost { background: var(--surface); border-color: var(--border2); color: var(--muted);}[data-theme="light"] .sec-dark { background: #1a1a18;}[data-theme="light"] .sec-dark h2 { color: #fafaf8;}[data-theme="light"] .sec-dark h2 .dim { color: rgba(250, 250, 248, 0.45);}[data-theme="light"] .sec-dark .sec-idx,[data-theme="light"] .sec-dark .sec-note,[data-theme="light"] .sec-dark p,[data-theme="light"] .sec-dark .d-txt,[data-theme="light"] .sec-dark .ba-q,[data-theme="light"] .sec-dark .ba-attr { color: rgba(250, 250, 248, 0.65);}/* Smooth theme transition */*,*::before,*::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease !important;}.marquee-inner,.proof-scroll,.orb,.cur,.cur-ring { transition: none !important;}/* ── Light mode fixes ── */[data-theme="light"] .hero { background: var(--bg);}[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3 { color: var(--text);}[data-theme="light"] .hero h1 { color: var(--text);}[data-theme="light"] .dim { color: var(--muted2);}[data-theme="light"] .hi { color: var(--accent);}[data-theme="light"] .hero-tag { color: var(--accent);}[data-theme="light"] .hero-tag::before { background: var(--accent);}[data-theme="light"] .hero-desc { color: var(--muted);}[data-theme="light"] .cur { background: var(--cur-bg); mix-blend-mode: normal;}[data-theme="light"] .cur-ring { border-color: var(--cur-ring);}[data-theme="light"] .h-stat-n { color: var(--text);}[data-theme="light"] .h-stat-n span { color: var(--accent);}[data-theme="light"] .h-stat-l { color: var(--muted2);}[data-theme="light"] .cell-num { color: var(--text);}[data-theme="light"] .cell-num .accent { color: var(--accent);}[data-theme="light"] .cell-title { color: var(--text);}[data-theme="light"] .cell-desc { color: var(--muted);}[data-theme="light"] .cell-tag { color: var(--muted2);}[data-theme="light"] .nav-logo { color: var(--text);}[data-theme="light"] .nav-logo span { color: var(--accent);}[data-theme="light"] .nav-lnk { color: var(--muted);}[data-theme="light"] .nav-lnk:hover { color: var(--text); background: var(--surface2);}[data-theme="light"] .nav-lnk.active { color: #0c0c0b; background: rgba(12, 12, 11, 0.06);}[data-theme="light"] .nav-icon { border-color: var(--border); color: var(--muted2);}[data-theme="light"] .nav-icon:hover { color: var(--text); border-color: var(--border2);}[data-theme="light"] .nav-icon svg { fill: currentColor;}[data-theme="light"] .proof-lbl { color: var(--muted2);}[data-theme="light"] .proof-name { color: var(--muted); border-right-color: var(--border);}[data-theme="light"] .proof-div { background: var(--border2);}[data-theme="light"] .sys-n { color: var(--muted2); border-right-color: var(--border);}[data-theme="light"] .sys-name { color: var(--text);}[data-theme="light"] .sys-desc { color: var(--muted);}[data-theme="light"] .sys-time { color: var(--accent); border-left-color: var(--border);}[data-theme="light"] .sys-tags { border-left-color: var(--border);}[data-theme="light"] .stag { color: var(--muted); border-color: var(--border2);}[data-theme="light"] .sec-idx { color: var(--muted2);}[data-theme="light"] .sec-row { border-bottom-color: var(--border);}[data-theme="light"] .sec-note { color: var(--muted);}[data-theme="light"] .res-card { background: var(--bg);}[data-theme="light"] .res-card:hover { background: var(--bg2);}[data-theme="light"] .res-num { color: var(--text);}[data-theme="light"] .res-title { color: var(--text);}[data-theme="light"] .res-desc { color: var(--muted);}[data-theme="light"] .results-grid { background: var(--border); border-color: var(--border);}[data-theme="light"] .p-tier { color: var(--muted2);}[data-theme="light"] .p-amt { color: var(--text);}[data-theme="light"] .p-recur { color: var(--muted);}[data-theme="light"] .p-wf { color: var(--muted2); border-color: var(--border2);}[data-theme="light"] .p-feat { color: var(--muted); border-bottom-color: var(--border);}[data-theme="light"] .p-feat::before { background: var(--accent);}[data-theme="light"] .p-cta { color: var(--text); border-color: var(--border2);}[data-theme="light"] .p-cta:hover { background: var(--text); color: var(--bg) !important;}[data-theme="light"] .faq-body p { color: var(--muted);}[data-theme="light"] .foot-brand { color: var(--text);}[data-theme="light"] .foot-brand span { color: var(--accent);}[data-theme="light"] .foot-sub { color: var(--muted2);}[data-theme="light"] .foot-r { color: var(--muted2);}[data-theme="light"] .fsb { color: var(--muted); border-color: var(--border);}[data-theme="light"] .fsb:hover { color: var(--text); border-color: var(--text);}/* Mobile nav */[data-theme="light"] .nav-mobile-menu { background: rgba(250, 250, 248, 0.98); border-top: 1px solid var(--border);}[data-theme="light"] .nav-mobile-cta { background: #0c0c0b; color: #fafaf8;}/* Marquee text (marquee bg stays dark intentionally) */[data-theme="light"] .mq-txt { color: rgba(250, 250, 248, 0.75);}[data-theme="light"] .mq-sep { color: rgba(250, 250, 248, 0.3);}/* CTA block (stays dark intentionally — fix text on dark bg) */[data-theme="light"] .cta-block h2 { color: #fafaf8;}[data-theme="light"] .cta-block p { color: rgba(250, 250, 248, 0.6);}[data-theme="light"] .cta-avail { color: rgba(250, 250, 248, 0.45);}[data-theme="light"] .cta-dot { background: rgba(250, 250, 248, 0.4);}[data-theme="light"] .cta-dark { background: var(--accent); color: #fafaf8;}[data-theme="light"] .nav-cta:hover,[data-theme="light"] .btn-lime:hover,[data-theme="light"] .nav-mobile-cta:hover,[data-theme="light"] .cta-dark:hover { background: #1a1a18; color: #fafaf8; opacity: 1;}[data-theme="light"] .cta-out { color: #fafaf8; border-color: rgba(250, 250, 248, 0.25);}[data-theme="light"] .cta-out:hover { border-color: rgba(250, 250, 248, 0.55);}/* Founding banner (bg turns dark in light mode — fix text) */[data-theme="light"] .founding-banner { color: rgba(250, 250, 248, 0.9);}/* Pricing lime card (stays dark — fix invisible elements) */[data-theme="light"] .p-card.lime .p-feat::before { background: rgba(250, 250, 248, 0.3) !important;}[data-theme="light"] .p-card.lime .p-cta { background: rgba(250, 250, 248, 0.08); border-color: rgba(250, 250, 248, 0.2); color: rgba(250, 250, 248, 0.88);}[data-theme="light"] .p-card.lime .p-cta:hover { background: rgba(250, 250, 248, 0.15);}/* Scrollbar */[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2);}/* Theme toggle button */.theme-toggle { width: 34px; height: 34px; border: 1px solid var(--border2); border-radius: 8px; background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: none; flex-shrink: 0;}.theme-toggle:hover { border-color: var(--border2); color: var(--text); background: var(--surface2);}.icon-sun { display: none;}.icon-moon { display: block;}[data-theme="light"] .icon-sun { display: block;}[data-theme="light"] .icon-moon { display: none;}html { scroll-behavior: smooth;}body { background: var(--bg); color: var(--text); font-family: var(--inter); overflow-x: hidden; cursor: none; font-size: 18px; font-weight: 400; line-height: 1.75; letter-spacing: -0.01em; scroll-behavior: smooth;}/* -- Cursor (desktop only) -- */.cur { width: 10px; height: 10px; background: var(--cur-bg); border-radius: 50%; position: fixed; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: width 0.22s ease, height 0.22s ease, background-color 0.24s ease; }.cur.hovering { width: 16px; height: 16px; }.cur-ring { width: 36px; height: 36px; border: 1.5px solid var(--cur-ring); border-radius: 50%; position: fixed; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; transition: width 0.22s ease, height 0.22s ease, border-color 0.24s ease; }.cur-ring.hovering { width: 48px; height: 48px; border-color: rgba(200,251,78,0.6);}/* Morphing Labels */.cur-ring.morph-rex,.cur-ring.morph-aria { border-color: transparent !important; background: transparent !important; width: auto; height: auto;}.cur-ring.morph-rex::after,.cur-ring.morph-aria::after { content: attr(data-label); font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--cur-bg); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; padding: 4px 8px;}/* Cursor Trail Glow */#curGlow { width: 400px; height: 400px; background: radial-gradient(circle, rgba(200, 251, 78, 0.04) 0%, transparent 70%); position: fixed; pointer-events: none; z-index: 99997; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s ease;}[data-theme="light"] #curGlow { display: none !important;}.glow-visible #curGlow { opacity: 1;}/* Magnetic Button Transition */.btn-lime, .btn-ghost, .aria-float-btn, .nav-cta { transition: transform 0.4s ease, background 0.2s, color 0.15s, box-shadow 0.2s, opacity 0.2s !important;}@media (hover:none) { .cur, .cur-ring { display: none; } body { cursor: auto; }}/* ════════════════════════════════ FOUNDING BANNER════════════════════════════════ */.founding-banner { background: var(--accent); color: #0c0c0b; padding: 8px 48px 8px 16px; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 400; min-height: 36px; max-height: 36px; overflow: hidden;}.founding-banner.hidden { display: none;}.founding-banner-inner { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; justify-content: center; overflow: hidden;}.founding-badge { font-family: var(--inter); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: #0c0c0b; color: var(--accent); padding: 4px 10px; border-radius: 4px; white-space: nowrap;}.founding-text { font-family: var(--inter); font-size: 14px; font-weight: 400; color: #0c0c0b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.founding-cta { font-family: var(--inter); font-size: 15px; font-weight: 600; color: #0c0c0b; text-decoration: none; border-bottom: 2px solid #0c0c0b; padding-bottom: 1px; white-space: nowrap; transition: opacity 0.2s; flex-shrink: 0;}.founding-cta:hover { opacity: 0.7;}.founding-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #0c0c0b; font-size: 16px; cursor: pointer; opacity: 0.6; line-height: 1; padding: 4px 8px; transition: opacity 0.2s;}.founding-close:hover { opacity: 1;}/* ════════════════════════════════ FOUNDING CARD (pricing.html)════════════════════════════════ */.founding-card { border: 1px solid var(--accent); background: rgba(200, 251, 78, 0.04); padding: 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; margin-bottom: 48px;}.founding-card-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px;}.fc-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s ease infinite;}@keyframes pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 }}.founding-perks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px;}.founding-perk { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted);}.fp-dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; flex-shrink: 0;}.founding-spots { display: flex; flex-direction: column; gap: 8px;}.founding-spot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border: 1px solid var(--border); background: var(--bg2); font-family: var(--mono); font-size: 14px; color: var(--muted2);}.founding-spot.open { border-color: var(--accent); background: rgba(200, 251, 78, 0.05); color: var(--text);}.spot-tag { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted2); text-decoration: line-through;}.spot-tag.open-tag { color: var(--accent); text-decoration: none; font-weight: 700;}@media(max-width:1024px) { .founding-card { grid-template-columns: 1fr; gap: 40px; }}@media(max-width:768px) { .founding-banner { padding: 8px 40px 8px 16px; min-height: auto; max-height: none; } .founding-cta { font-size: 10px; } .founding-close { right: 8px; font-size: 15px; } .founding-text { font-size: 10px; } .founding-badge { font-size: 8px; } .founding-card { padding: 32px 24px; }}/* ════════════════════════════════ NAV════════════════════════════════ */nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 0 clamp(20px, 4vw, 48px); height: clamp(52px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: rgba(12, 12, 11, 0.85); backdrop-filter: blur(20px); transition: top 0.25s ease;}.nav-logo { font-family: var(--syne); font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); text-decoration: none;}.nav-logo span { color: var(--accent);}.nav-center { display: flex; gap: 2px;}.nav-lnk { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; padding: 6px 14px; border-radius: 6px; transition: background 0.15s, color 0.15s; letter-spacing: 0;}.nav-lnk:hover,.nav-lnk.active { background: var(--surface2); color: var(--text);}.nav-right { display: flex; align-items: center; gap: 10px;}.nav-icon { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted2); text-decoration: none; transition: border-color 0.2s, color 0.2s;}.nav-icon:hover { border-color: var(--border2); color: var(--text);}.nav-icon svg { width: 13px; height: 13px; fill: currentColor;}.nav-cta { background: var(--accent); color: #0c0c0b; padding: clamp(7px, 0.8vw, 9px) clamp(14px, 1.5vw, 20px); border-radius: 8px; font-size: 14px; font-weight: 600; font-family: var(--inter); text-decoration: none; letter-spacing: 0; transition: opacity 0.2s, transform 0.15s;}.nav-cta:hover { opacity: 0.9; transform: translateY(-1px);}/* Hamburger — hidden on desktop */.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-left: 8px;}.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; transition: transform 0.25s, opacity 0.25s;}.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg);}.nav-hamburger.open span:nth-child(2) { opacity: 0;}.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg);}/* Mobile slide-down menu — hidden by default */.nav-mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: rgba(12, 12, 11, 0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); z-index: 199; flex-direction: column;}.nav-mobile-menu.open { display: flex;}.nav-mobile-menu .nav-lnk { font-size: 16px; padding: 14px 24px; border-bottom: 1px solid var(--border); border-radius: 0; letter-spacing: 0.01em;}.nav-mobile-cta { margin: 16px 24px 20px; background: var(--accent); color: #0c0c0b; padding: 13px 24px; border-radius: 8px; font-family: var(--syne); font-size: 15px; font-weight: 700; text-decoration: none; text-align: center; letter-spacing: 0.02em;}/* ════════════════════════════════ HERO════════════════════════════════ */.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(20px, 4vw, 48px) 48px; gap: 0; position: relative; overflow: hidden;}.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black, transparent); pointer-events: none;}.orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none;}.orb1 { width: 600px; height: 600px; background: rgba(91, 91, 214, 0.12); top: -200px; right: -100px;}.orb2 { width: 400px; height: 400px; background: rgba(200, 251, 78, 0.06); bottom: 100px; left: -50px;}.hero-tag { font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px); color: var(--accent); letter-spacing: clamp(0.1em, 0.15vw, 0.2em); text-transform: uppercase; margin-bottom: 32px; opacity: 0; animation: fu 1s ease 0.1s forwards; display: flex; align-items: center; gap: 10px;}.hero-tag::before { content: ''; width: 24px; height: 1px; background: var(--accent);}.hero h1 { font-family: var(--syne); font-size: clamp(40px, 7vw, 108px); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; opacity: 0; animation: fu 1s ease 0.2s forwards; max-width: 900px; margin-bottom: 0;}.hero h1 .dim { color: var(--muted2);}.hero h1 .hi { color: var(--accent);}.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; width: 100%; padding: 24px 0 0; border-top: 1px solid var(--border); margin-top: 24px; opacity: 0; animation: fu 1s ease 0.5s forwards;}.hero-desc { font-size: clamp(15px, 1.5vw, 18px); color: var(--muted); line-height: 1.7; max-width: 440px; margin-bottom: 24px;}.hero-btns { display: flex; gap: 10px; align-items: center;}.btn-lime { background: var(--accent); color: #0c0c0b; padding: 18px 40px; border-radius: 12px; font-size: 18px; font-weight: 700; font-family: var(--inter); text-decoration: none; transition: opacity 0.2s, transform 0.15s; cursor: none; letter-spacing: 0.01em;}.btn-lime:hover { opacity: 0.9; transform: translateY(-1px);}.btn-ghost { background: var(--surface); color: var(--text); padding: 18px 36px; border-radius: 12px; font-size: 18px; font-weight: 600; font-family: var(--inter); letter-spacing: 0; text-decoration: none; border: 1px solid var(--border); transition: border-color 0.2s, color 0.2s; cursor: none;}.btn-ghost:hover { border-color: var(--border2); color: var(--text);}.hero-stats-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); height: fit-content;}.h-stat { background: var(--bg); padding: 24px 28px;}.h-stat-n { font-family: var(--syne); font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; color: var(--text); line-height: 1; margin-bottom: 6px;}.h-stat-n span { color: var(--accent);}.h-stat-l { font-family: var(--mono); font-size: clamp(8px, 0.8vw, 10px); color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase;}/* ════════════════════════════════ MARQUEE════════════════════════════════ */.marquee-wrap { background: var(--accent); padding: 14px 0; overflow: hidden;}.marquee-inner { display: flex; animation: mq 20s linear infinite; width: max-content;}.mq-item { display: flex; align-items: center; gap: 24px; padding: 0 24px; white-space: nowrap;}.mq-txt { font-family: var(--syne); font-size: 13px; font-weight: 600; color: #0c0c0b; letter-spacing: 0.04em; text-transform: uppercase;}.mq-sep { color: rgba(12, 12, 11, 0.3); font-size: 16px;}@keyframes mq { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) }}/* ════════════════════════════════ PROOF STRIP════════════════════════════════ */.proof-strip { padding: 24px 48px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 40px; background: var(--bg2);}.proof-lbl { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;}.proof-div { width: 1px; height: 16px; background: var(--border2); flex-shrink: 0;}.proof-names { display: flex; overflow: hidden; flex: 1;}.proof-scroll { display: flex; animation: mq 16s linear infinite; width: max-content;}.proof-name { font-family: var(--mono); font-size: clamp(10px, 0.9vw, 12px); color: var(--muted2); padding: 0 32px; border-right: 1px solid var(--border); white-space: nowrap; letter-spacing: 0.06em;}/* ════════════════════════════════ SECTIONS════════════════════════════════ */.sec { padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 64px);}.sec-dark { background: var(--bg2);}.sec-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(36px, 5vw, 64px); padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--border);}.sec-idx { font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px); color: var(--muted2); letter-spacing: clamp(0.08em, 0.15vw, 0.2em); text-transform: uppercase; margin-bottom: 16px;}h2 { font-family: var(--syne); font-size: clamp(32px, 5vw, 52px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02;}h2 .dim { color: var(--muted2);}h2 .hi { color: var(--accent);}.sec-note { font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px); color: var(--muted2); max-width: 220px; text-align: right; line-height: 1.7;}/* ════════════════════════════════ BENTO════════════════════════════════ */.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 1px; background: var(--border);}.bento-cell { background: var(--bg); padding: clamp(24px, 3vw, 40px); position: relative; overflow: hidden; cursor: none; transition: background 0.2s;}.bento-cell:hover { background: var(--bg3);}.bento-wide { grid-column: span 2;}.bento-tall { grid-row: span 2;}.cell-tag { font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px;}.cell-num { font-family: var(--syne); font-size: clamp(36px, 6vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text); margin-bottom: 8px;}.cell-num .accent { color: var(--accent);}.cell-num-lg { font-size: clamp(32px, 5vw, 52px);}.cell-title { font-family: var(--syne); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px;}.cell-desc { font-size: clamp(14px, 1.2vw, 16px); color: var(--muted); line-height: 1.6;}.cell-ico { font-size: 36px; margin-bottom: 20px; display: block;}.mini-flow { display: flex; flex-direction: column; gap: 8px; margin-top: 24px;}.mini-node { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; border-radius: 6px; font-size: 11px; font-family: var(--mono); color: var(--muted); letter-spacing: 0.04em;}.mini-node.active { border-color: rgba(200, 251, 78, 0.3); color: var(--accent); background: rgba(200, 251, 78, 0.05);}.mini-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border2); flex-shrink: 0;}.mini-node.active .mini-dot { background: var(--accent);}/* ════════════════════════════════ SYSTEMS LIST════════════════════════════════ */.sys-list { display: flex; flex-direction: column; border: 1px solid var(--border);}.sys-row { display: grid; grid-template-columns: 56px 1fr auto 160px; align-items: center; border-bottom: 1px solid var(--border); transition: background 0.2s; cursor: none; position: relative; overflow: hidden;}.sys-row::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 0.3s ease;}.sys-row:hover::after { width: 2px;}.sys-row:last-child { border-bottom: none;}.sys-row:hover { background: var(--surface);}.sys-n { padding: 32px 0; font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing: 0.1em; text-align: center; border-right: 1px solid var(--border);}.sys-body { padding: clamp(16px, 2vw, 32px) clamp(20px, 2.5vw, 36px);}.sys-name { font-family: var(--inter); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px;}.sys-desc { font-family: var(--inter); font-size: 16px; font-weight: 400; color: var(--muted); line-height: 1.6;}.sys-time { padding: 0 32px; font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; border-left: 1px solid var(--border); white-space: nowrap;}.sys-tags { padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 5px; border-left: 1px solid var(--border);}.stag { font-family: var(--mono); font-size: 12px; color: var(--muted2); border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em;}/* Mobile tags shown inside sys-body */.sys-tags-inline { display: none; flex-wrap: wrap; gap: 5px; margin-top: 10px;}/* ════════════════════════════════ BEFORE / AFTER════════════════════════════════ */.ba-grid { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: stretch; border: 1px solid var(--border);}.ba-panel { padding: clamp(32px, 4vw, 52px) clamp(24px, 3.5vw, 48px);}.ba-before { background: var(--bg3);}.ba-after { background: rgba(200, 251, 78, 0.04); border-left: 1px solid rgba(200, 251, 78, 0.12);}.ba-mid-arrow { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--muted2); background: var(--bg2); border-left: 1px solid var(--border); border-right: 1px solid var(--border);}.ba-t { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; color: var(--muted2);}.ba-after .ba-t { color: rgba(200, 251, 78, 0.5);}.ba-n { font-family: var(--syne); font-size: clamp(40px, 7vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--text); margin-bottom: 12px;}.ba-after .ba-n { color: var(--accent);}.ba-d { font-size: 16px; color: var(--muted); line-height: 1.6;}.ba-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border);}.ba-q { font-size: 16px; font-style: italic; color: var(--muted); line-height: 1.6; margin-bottom: 12px;}.ba-attr { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.1em;}/* ════════════════════════════════ PRICING════════════════════════════════ */.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border);}.p-card { background: var(--bg); padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 40px); cursor: none; transition: background 0.2s;}.p-card:hover { background: var(--bg3);}.p-card.lime { background: var(--accent);}.p-card.lime * { color: #0c0c0b !important;}.p-card.lime .p-feat { border-color: rgba(12, 12, 11, 0.15) !important;}.p-card.lime .p-feat::before { background: #0c0c0b !important;}.p-card.lime .p-cta { background: rgba(12, 12, 11, 0.1); border-color: rgba(12, 12, 11, 0.2);}.p-tier { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted2); margin-bottom: 32px;}.p-amt { font-family: var(--syne); font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-bottom: 4px;}.p-recur { font-family: var(--mono); font-size: 13px; color: var(--muted2); margin-bottom: 32px;}.p-wf { display: inline-block; font-family: var(--mono); font-size: 9px; border: 1px solid var(--border); padding: 4px 12px; border-radius: 4px; color: var(--muted2); letter-spacing: 0.06em; margin-bottom: 40px;}.p-feats { display: flex; flex-direction: column;}.p-feat { font-size: 13px; color: var(--muted); padding: 11px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; line-height: 1.4;}.p-feat::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0;}.p-cta { display: block; margin-top: 36px; text-align: center; padding: 13px; border: 1px solid var(--border); border-radius: 6px; font-family: var(--inter); font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; transition: background 0.2s, border-color 0.2s; letter-spacing: 0; cursor: none;}.p-cta:hover { background: var(--surface2); border-color: var(--border2);}/* ════════════════════════════════ DEMO / CHAT════════════════════════════════ */.demo-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start;}.demo-l p { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 44px;}.demo-steps { display: flex; flex-direction: column;}.d-step { display: flex; align-items: flex-start; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border);}.d-step:first-child { border-top: 1px solid var(--border);}.d-num { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.1em; padding-top: 2px; width: 20px; flex-shrink: 0;}.d-txt { font-size: 16px; color: var(--muted); line-height: 1.55;}.chat-shell { border: 1px solid var(--border); background: var(--bg2); overflow: hidden;}.chat-hd { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--bg3);}.chat-live { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);}.chat-lbl { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.15em; text-transform: uppercase;}.chat-msgs { padding: 20px; min-height: 200px; max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;}.msg { max-width: 84%; padding: 10px 14px; font-size: 14px; line-height: 1.55; animation: mi 0.25s ease;}@keyframes mi { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: translateY(0) }}.msg.b { background: var(--surface); border: 1px solid var(--border); border-radius: 2px 10px 10px 10px; align-self: flex-start; color: var(--text);}.msg.u { background: var(--accent); color: #0c0c0b; border-radius: 10px 2px 10px 10px; align-self: flex-end; font-weight: 500;}.chat-ft { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--bg3);}.chat-i { flex: 1; background: var(--surface); border: 1px solid var(--border); padding: 9px 14px; font-size: 14px; font-family: var(--inter); color: var(--text); outline: none; transition: border-color 0.2s; border-radius: 4px;}.chat-i:focus { border-color: var(--border2);}.chat-i::placeholder { color: var(--muted2);}.chat-s { background: var(--accent); border: none; color: #0c0c0b; width: 34px; height: 34px; font-size: 16px; cursor: none; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; border-radius: 4px; font-weight: 700;}.chat-s:hover { opacity: 0.85;}.typing { display: flex; gap: 4px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 2px 10px 10px 10px; align-self: flex-start;}.typing span { width: 4px; height: 4px; background: var(--muted2); border-radius: 50%; animation: td 1.2s ease infinite;}.typing span:nth-child(2) { animation-delay: 0.2s;}.typing span:nth-child(3) { animation-delay: 0.4s;}@keyframes td { 0%, 60%, 100% { opacity: 0.3; transform: scale(1) } 30% { opacity: 1; transform: scale(1.3) }}/* ════════════════════════════════ FAQ════════════════════════════════ */.faq-list { display: flex; flex-direction: column; border: 1px solid var(--border);}.faq-item { border-bottom: 1px solid var(--border);}.faq-item:last-child { border-bottom: none;}.faq-btn { width: 100%; background: none; border: none; text-align: left; padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: none; font-family: var(--inter); font-size: 16px; font-weight: 500; color: var(--text); transition: background 0.15s; letter-spacing: -0.01em;}.faq-btn:hover { background: var(--surface);}.faq-ico { font-size: 18px; color: var(--muted2); flex-shrink: 0; font-weight: 300; transition: transform 0.3s;}.faq-item.open .faq-ico { transform: rotate(45deg); color: var(--accent);}.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s;}.faq-item.open .faq-body { max-height: 200px; padding-bottom: 24px;}.faq-body p { padding: 0 32px; font-size: 15px; color: var(--muted); line-height: 1.75;}/* ════════════════════════════════ CTA BLOCK════════════════════════════════ */.cta-block { background: var(--accent); padding: 96px 64px; text-align: center; position: relative; overflow: hidden;}.cta-block::before { content: 'AUTOMATE'; position: absolute; font-family: var(--syne); font-size: 200px; font-weight: 800; color: rgba(12, 12, 11, 0.05); white-space: nowrap; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; letter-spacing: -0.05em;}.cta-avail { font-family: var(--mono); font-size: 10px; color: rgba(12, 12, 11, 0.45); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 8px;}.cta-dot { width: 5px; height: 5px; background: rgba(12, 12, 11, 0.4); border-radius: 50%;}.cta-block h2 { font-family: var(--syne); font-size: clamp(36px, 6vw, 88px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; color: #0c0c0b; margin-bottom: 24px; position: relative;}.cta-block p { font-size: 16px; color: rgba(12, 12, 11, 0.55); margin-bottom: 48px; position: relative;}.cta-acts { display: flex; gap: 12px; justify-content: center; position: relative; flex-wrap: wrap;}.cta-dark { background: #0c0c0b; color: var(--accent); padding: 20px 48px; border-radius: 12px; font-family: var(--syne); font-size: 18px; font-weight: 800; text-decoration: none; transition: opacity 0.2s, transform 0.15s; cursor: none; letter-spacing: 0.01em;}.cta-dark:hover { opacity: 0.88; transform: translateY(-1px);}.cta-out { background: transparent; color: #0c0c0b; padding: 15px 28px; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid rgba(12, 12, 11, 0.25); transition: border-color 0.2s; cursor: none;}.cta-out:hover { border-color: rgba(12, 12, 11, 0.5);}/* ════════════════════════════════ FOOTER════════════════════════════════ */footer { padding: 40px 48px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; background: var(--bg2);}.foot-brand { font-family: var(--syne); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px;}.foot-brand span { color: var(--accent);}.foot-sub { font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing: 0.08em;}.foot-soc { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;}.fsb { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.08em; transition: border-color 0.2s, color 0.2s;}.fsb:hover { border-color: var(--border2); color: var(--text);}.fsb svg { width: 11px; height: 11px; fill: currentColor; flex-shrink: 0;}.foot-r { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.06em; text-align: right; line-height: 1.8;}/* ════════════════════════════════ ANIMATIONS & SCROLL REVEAL════════════════════════════════ */@keyframes fu { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) }}.r { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease;}.r.v { opacity: 1; transform: translateY(0);}.r2 { transition-delay: 0.12s;}.r3 { transition-delay: 0.22s;}/* ════════════════════════════════ PAGE-SPECIFIC: WORK════════════════════════════════ */.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border);}.work-card { background: var(--bg); padding: 48px 44px; cursor: none; transition: background 0.2s; position: relative; overflow: hidden;}.work-card:hover { background: var(--bg3);}.work-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 0.3s;}.work-card:hover::after { width: 3px;}.wc-tag { font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px;}.wc-name { font-family: var(--syne); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px;}.wc-desc { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 28px;}.wc-stack { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 28px;}.wc-result { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.08em;}.wc-result-num { font-family: var(--syne); font-size: clamp(32px, 5vw, 48px); font-weight: 800; letter-spacing: -0.04em; color: var(--accent); margin: 16px 0; line-height: 1;}/* ════════════════════════════════ PAGE-SPECIFIC: ABOUT════════════════════════════════ */.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start;}.about-img { aspect-ratio: 3/4; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden;}.about-img-placeholder { font-family: var(--mono); font-size: 10px; color: var(--muted2); letter-spacing: 0.1em;}.skill-row { display: flex; flex-direction: column; gap: 16px; margin-top: 40px;}.skill-item { display: flex; flex-direction: column; gap: 6px;}.skill-label { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase; display: flex; justify-content: space-between;}.skill-bar { height: 2px; background: var(--border2); border-radius: 2px; overflow: hidden;}.skill-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0; transition: width 1.2s ease;}.about-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); margin-top: 40px;}.av-item { background: var(--bg); padding: 24px;}.av-n { font-family: var(--syne); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 4px;}.av-l { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase;}.timeline { display: flex; flex-direction: column; margin-top: 48px;}.tl-item { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border);}.tl-item:first-child { border-top: 1px solid var(--border);}.tl-year { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; width: 48px; flex-shrink: 0; padding-top: 2px;}.tl-body {}.tl-role { font-family: var(--syne); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px;}.tl-co { font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing: 0.08em; margin-bottom: 6px;}.tl-desc { font-size: 14px; color: var(--muted); line-height: 1.6;}/* ════════════════════════════════ PAGE-SPECIFIC: BLOG════════════════════════════════ */.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border);}.blog-card { background: var(--bg); padding: 40px; cursor: none; transition: background 0.2s; display: flex; flex-direction: column;}.blog-card:hover { background: var(--bg3);}.bc-date { font-family: var(--mono); font-size: 12px; color: var(--muted2); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px;}.bc-tag { display: inline-block; font-family: var(--mono); font-size: 9px; border: 1px solid rgba(200, 251, 78, 0.3); color: var(--accent); padding: 3px 10px; border-radius: 4px; letter-spacing: 0.08em; margin-bottom: 16px;}.bc-title { font-family: var(--syne); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px;}.bc-excerpt { font-size: 14px; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 24px;}.bc-read { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; text-decoration: none; margin-top: auto;}.bc-read:hover { text-decoration: underline;}/* ════════════════════════════════ PAGE-SPECIFIC: BOOK════════════════════════════════ */.book-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start;}.book-reasons { display: flex; flex-direction: column;}.b-reason { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border);}.b-reason:first-child { border-top: 1px solid var(--border);}.b-reason-ico { font-size: 20px; flex-shrink: 0; width: 32px;}.b-reason-title { font-family: var(--syne); font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em;}.b-reason-desc { font-size: 14px; color: var(--muted); line-height: 1.6;}.book-embed { border: 1px solid var(--border); background: var(--bg2); min-height: 520px;}.book-embed-placeholder { padding: 40px; font-family: var(--mono); font-size: 10px; color: var(--muted2); letter-spacing: 0.1em; text-align: center;}/* ════════════════════════════════ SCROLLBAR════════════════════════════════ */::-webkit-scrollbar { width: 4px; height: 4px}::-webkit-scrollbar-track { background: var(--bg)}::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px}/* ============================================================ TABLET — max-width: 1024px ============================================================ */@media (max-width:1024px) { /* Sections */ .sec { padding: 96px 40px; } nav { padding: 0 40px; } footer { padding: 36px 40px; } .proof-strip { padding: 20px 40px; } /* Typography */ .hero h1 { font-size: clamp(48px, 7vw, 80px); } h2 { font-size: clamp(34px, 5vw, 60px); } /* Hero */ .hero { padding: 90px 40px 0; } .hero-bottom { grid-template-columns: 1fr; gap: 48px; } /* Nav */ .nav-center { gap: 4px; } /* Bento */ .bento { grid-template-columns: repeat(2, 1fr); } .bento-tall { grid-row: span 1; } /* Systems */ .sys-row { grid-template-columns: 56px 1fr 160px; } .sys-time { display: none; } /* Before/After */ .ba-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .ba-mid-arrow { width: 100%; height: 48px; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Pricing */ .price-grid { grid-template-columns: 1fr; max-width: 480px; } /* Demo */ .demo-wrap { grid-template-columns: 1fr; gap: 48px; } /* About / Book / Work */ .about-grid { grid-template-columns: 1fr; gap: 48px; } .book-wrap { grid-template-columns: 1fr; gap: 48px; } .work-grid { grid-template-columns: 1fr; } /* Blog */ .blog-grid { grid-template-columns: repeat(2, 1fr); }}/* ============================================================ MOBILE — max-width: 768px ============================================================ */@media (max-width:768px) { /* Base */ body { font-size: 16px; line-height: 1.65; } /* Stack & Video */ .stack-sec { padding: 20px; } .stack-inner { flex-direction: column; align-items: flex-start; gap: 16px; } .stack-logo-item { padding: 8px 14px; } .stack-logo-item span { font-size: 13px; } .video-wrap { grid-template-columns: 1fr; gap: 32px; } /* Sections */ .sec { padding: 64px 20px; } nav { padding: 0 20px; } footer { padding: 32px 20px; } .proof-strip { padding: 14px 20px; gap: 14px; } /* ── Nav: hamburger replaces center + right links ── */ .nav-center { display: none; } .nav-right .nav-icon { display: none; } .nav-right .nav-cta { display: none; } .nav-hamburger { display: flex; } /* ── Hero ── */ .hero { padding: 80px 20px 0; } .hero h1 { font-size: clamp(36px, 10vw, 56px); margin-bottom: 16px !important; } .hero-tag { font-size: 9px; letter-spacing: 0.1em; margin-bottom: 20px; } .hero-bottom { gap: 16px; margin-top: 16px !important; padding-top: 16px !important; } .hero-desc { font-size: 13px; margin-top: 0; margin-bottom: 16px; max-width: 100%; } .hero-btns { flex-direction: column; gap: 8px; align-items: stretch; } .btn-lime, .btn-ghost { text-align: center; padding: 18px 24px; font-size: 16px; } .hero-stats-col { grid-template-columns: 1fr 1fr; } .h-stat { padding: 20px 16px; } .h-stat-n { font-size: clamp(22px, 7vw, 32px); } .h-stat-l { font-size: 8px; letter-spacing: 0.1em; } /* ── Marquee ── */ .mq-txt { font-size: 12px; } /* ── Proof Strip ── */ .proof-lbl { display: none; } .proof-div { display: none; } /* ── Section headings ── */ h2 { font-size: clamp(30px, 8vw, 48px); } .sec-idx { font-size: 8px; letter-spacing: 0.1em; } .sec-row { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 36px; } .sec-note { text-align: left; max-width: 100%; font-size: 9px; } .ba-t { font-size: 8px; letter-spacing: 0.1em; } .chat-lbl { font-size: 8px; } /* ── Bento ── */ .bento { grid-template-columns: 1fr; } .bento-wide, .bento-tall { grid-column: span 1; grid-row: span 1; } .bento-cell { padding: 28px; } /* ── Systems ── */ .sys-row { grid-template-columns: 40px 1fr; } .sys-time { display: none; } .sys-tags { display: none; } .sys-tags-inline { display: flex; } .sys-n { padding: 20px 0; } .sys-body { padding: 20px 20px; } /* ── Before/After ── */ .ba-grid { grid-template-columns: 1fr; } .ba-mid-arrow { height: 40px; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ba-mid-arrow::after { content: '↓'; } .ba-mid-arrow { font-size: 0; } .ba-mid-arrow::after { font-size: 18px; color: var(--muted2); } .ba-panel { padding: 28px 20px; } .ba-after { border-left: none; border-top: 1px solid rgba(200, 251, 78, 0.12); } .ba-n { font-size: clamp(36px, 12vw, 60px); } .ba-qs { grid-template-columns: 1fr; } /* ── Pricing ── */ .price-grid { grid-template-columns: 1fr; max-width: 100%; } .p-card { padding: 28px 20px; } .p-amt { font-size: clamp(32px, 10vw, 48px); } .cta-block h2 { font-size: clamp(32px, 10vw, 56px); } .bento-cell { padding: 24px; } /* ── Demo ── */ .demo-wrap { grid-template-columns: 1fr; gap: 32px; } .chat-msgs { max-height: 200px; } /* ── FAQ ── */ .faq-btn { padding: 18px 20px; font-size: 15px; } .faq-body p { padding: 0 20px; } /* ── CTA Block ── */ .cta-block { padding: 64px 24px; } .cta-block::before { font-size: 100px; } .cta-acts { flex-direction: column; align-items: stretch; gap: 10px; } .cta-dark, .cta-out { text-align: center; padding: 18px 24px; font-size: 16px; } /* ── Footer ── */ footer { grid-template-columns: 1fr 1fr; text-align: left; gap: 24px; } footer>div:first-child { grid-column: span 2; } .foot-r { text-align: right; } .foot-soc { justify-content: flex-start; } /* ── Work ── */ .work-grid { grid-template-columns: 1fr; } .work-card { padding: 32px 28px; } /* ── About ── */ .about-grid { grid-template-columns: 1fr; gap: 40px; } /* ── Blog ── */ .blog-grid { grid-template-columns: 1fr; } .blog-card { padding: 28px; } /* ── Book ── */ .book-wrap { grid-template-columns: 1fr; gap: 40px; } /* ── Mono labels globally ── */ .cell-tag, .stag, .proof-lbl, .bc-date, .wc-tag, .tl-co, .foot-sub { font-size: 12px; } /* ── Additional component mobile overrides ── */ .story-grid { grid-template-columns: 1fr; gap: 32px; } .sys-card { padding: 40px 0; } .sys-card-body { grid-template-columns: 1fr; gap: 32px; } .guarantee-grid { grid-template-columns: 1fr; } .phil-grid { grid-template-columns: 1fr; } .social-cards { grid-template-columns: 1fr; } .testi-grid { grid-template-columns: 1fr; } .roi-inputs { grid-template-columns: 1fr; } .roi-output { grid-template-columns: 1fr; } .email-form { flex-direction: column; } .email-capture { padding: 48px 20px; } .featured-post { padding: 28px 24px; } .cmp-table th, .cmp-table td { padding: 12px 14px; } .book-wrap { grid-template-columns: 1fr; gap: 40px; }}/* ════════════════════════════════ COMPARISON TABLE (pricing.html)════════════════════════════════ */.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;}.cmp-table { width: 100%; border-collapse: collapse; min-width: 600px; border: 1px solid var(--border);}.cmp-table th,.cmp-table td { padding: 14px 24px; text-align: left; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: 14px;}.cmp-table th:last-child,.cmp-table td:last-child { border-right: none;}.cmp-table thead tr th { font-family: var(--syne); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; background: var(--bg3); color: var(--text);}.cmp-table thead th:first-child { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted2);}.cmp-table td:first-child { font-size: 14px; color: var(--muted);}.cmp-table tbody tr:hover td { background: var(--surface);}.cmp-table tbody tr:last-child td { border-bottom: none;}.cmp-yes { color: var(--accent); font-weight: 700; font-size: 16px;}.cmp-no { color: var(--muted2);}.cmp-th-lime { color: var(--accent) !important;}/* ════════════════════════════════ ROI CALCULATOR (pricing.html)════════════════════════════════ */.roi-wrap { background: var(--bg2); border: 1px solid var(--border); padding: 48px;}.roi-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 40px;}.roi-group { display: flex; flex-direction: column; gap: 8px;}.roi-label { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.15em; text-transform: uppercase;}.roi-input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; font-size: 16px; font-family: var(--syne); font-weight: 700; outline: none; border-radius: 4px; transition: border-color 0.2s; width: 100%;}.roi-input:focus { border-color: var(--border2);}.roi-output { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border);}.roi-stat { background: var(--bg); padding: 28px 24px;}.roi-stat-n { font-family: var(--syne); font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 6px;}.roi-stat-l { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.5;}/* ════════════════════════════════ GUARANTEE / 3-CARD GRID (pricing.html)════════════════════════════════ */.guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border);}.g-card { background: var(--bg); padding: 40px;}.g-ico { font-size: 28px; margin-bottom: 16px;}.g-title { font-family: var(--syne); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px;}.g-desc { font-size: 14px; color: var(--muted); line-height: 1.65;}/* ════════════════════════════════ SOCIAL LINK CARDS (about.html)════════════════════════════════ */.social-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);}.social-card { background: var(--bg); padding: 36px 40px; text-decoration: none; display: flex; align-items: center; gap: 20px; transition: background 0.2s; border: 2px solid transparent; cursor: none;}.social-card:hover { background: var(--bg3); border-color: rgba(200, 251, 78, 0.3);}.social-card-ico { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s;}.social-card:hover .social-card-ico { border-color: rgba(200, 251, 78, 0.4);}.social-card-ico svg { width: 18px; height: 18px; fill: var(--text);}.social-card-handle { font-family: var(--syne); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -0.02em;}.social-card-sub { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.1em;}.social-card-arrow { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted2); transition: color 0.2s; flex-shrink: 0;}.social-card:hover .social-card-arrow { color: var(--accent);}/* ════════════════════════════════ STACK PILLS════════════════════════════════ */.stack-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;}/* ════════════════════════════════ STORY SECTION (about.html)════════════════════════════════ */.story-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start;}.story-quote { font-family: var(--syne); font-size: clamp(20px, 2.5vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; color: var(--text); margin-bottom: 24px;}.story-quote .hi { color: var(--accent);}.story-attr { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase;}.story-body p { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 20px;}.story-body p:last-child { margin-bottom: 0;}/* ════════════════════════════════ PHILOSOPHY CARDS (about.html)════════════════════════════════ */.phil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border);}.phil-card { background: var(--bg); padding: 40px;}.phil-title { font-family: var(--syne); font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 12px;}.phil-desc { font-size: 15px; color: var(--muted); line-height: 1.65;}/* ════════════════════════════════ EMAIL CAPTURE (blog.html)════════════════════════════════ */.email-capture { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 64px 48px; text-align: center;}.email-form { display: flex; gap: 8px; max-width: 440px; margin: 32px auto 0;}.email-form-input { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; font-size: 15px; font-family: var(--inter); outline: none; border-radius: 6px; transition: border-color 0.2s; min-width: 0;}.email-form-input:focus { border-color: var(--border2);}.email-form-input::placeholder { color: var(--muted2);}.email-form-btn { background: var(--accent); color: #0c0c0b; padding: 12px 24px; border: none; border-radius: 6px; font-family: var(--syne); font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; letter-spacing: 0.02em;}.email-form-btn:hover { opacity: 0.9;}/* ════════════════════════════════ FEATURED POST (blog.html)════════════════════════════════ */.featured-post { background: var(--bg2); border: 1px solid var(--border); padding: 52px 56px; transition: background 0.2s;}.featured-post:hover { background: var(--bg3);}.fp-tag { display: inline-block; font-family: var(--mono); font-size: 9px; background: var(--accent); color: #0c0c0b; padding: 4px 12px; border-radius: 4px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; font-weight: 700;}.fp-title { font-family: var(--syne); font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 12px;}.fp-sub { font-size: 16px; color: var(--muted); line-height: 1.65; max-width: 640px; margin-bottom: 20px;}.fp-meta { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.1em; display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px;}.fp-cta { font-family: var(--syne); font-size: 15px; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: 0.02em;}.fp-cta:hover { text-decoration: underline;}/* ════════════════════════════════ SYSTEM EXPANDED CARD (systems.html)════════════════════════════════ */.sys-card { padding: 64px 0; border-bottom: 1px solid var(--border);}.sys-card:last-child { border-bottom: none;}.sys-card-num { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px;}.sys-card-name { font-family: var(--syne); font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 10px;}.sys-card-tagline { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 40px;}.sys-card-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start;}.sys-card-p { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 28px;}.sys-card-meta { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px;}.sys-meta-row { display: flex; gap: 12px; align-items: baseline;}.sys-meta-label { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.12em; text-transform: uppercase; width: 80px; flex-shrink: 0;}.sys-meta-val { font-size: 13px; color: var(--muted);}.sys-meta-val.lime { color: var(--accent); font-family: var(--mono); font-size: 13px;}.sys-flow { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; border: 1px solid var(--border);}.sys-flow-node { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border);}.sys-flow-node:last-child { border-bottom: none;}.sys-flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); flex-shrink: 0;}.sys-flow-node.on .sys-flow-dot { background: var(--accent);}.sys-flow-txt { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em;}.sys-flow-node.on .sys-flow-txt { color: var(--text);}.sys-card-price { font-family: var(--syne); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 12px;}.sys-card-price span { color: var(--accent);}.sys-card-cta { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; text-decoration: none; border-bottom: 1px solid rgba(200, 251, 78, 0.3); padding-bottom: 2px; transition: border-color 0.2s;}.sys-card-cta:hover { border-color: var(--accent);}/* ════════════════════════════════ TESTIMONIALS GRID════════════════════════════════ */.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);}.testi-card { background: var(--bg); padding: 40px;}.testi-q { font-size: 15px; font-style: italic; color: var(--muted); line-height: 1.7; margin-bottom: 16px;}.testi-attr { font-family: var(--mono); font-size: 11px; color: var(--muted2); letter-spacing: 0.1em;}/* ════════════════════════════════ BOOK PAGE════════════════════════════════ */.book-avail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: rgba(220, 180, 50, 0.9); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(220, 180, 50, 0.06); border: 1px solid rgba(220, 180, 50, 0.2); padding: 6px 14px; border-radius: 20px; margin-bottom: 32px;}.book-avail-dot { width: 5px; height: 5px; background: rgba(220, 180, 50, 0.9); border-radius: 50%;}.book-steps { display: flex; flex-direction: column; margin: 32px 0;}.book-step { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--border);}.book-step:first-child { border-top: 1px solid var(--border);}.book-step-num { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.1em; padding-top: 2px; width: 20px; flex-shrink: 0;}.book-step-txt { font-size: 14px; color: var(--muted); line-height: 1.6;}.book-quote { margin-top: 40px; padding: 24px; background: var(--surface); border-left: 2px solid var(--accent);}.book-q-text { font-size: 16px; font-style: italic; color: var(--muted); line-height: 1.65; margin-bottom: 8px;}.book-q-attr { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.1em;}.book-async { margin-top: 40px;}.book-async-title { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 14px;}.book-async-links { display: flex; flex-direction: column; gap: 10px;}.book-async-lnk { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); text-decoration: none; transition: color 0.2s;}.book-async-lnk:hover { color: var(--accent);}.book-async-lnk svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0;}/* ════════════════════════════════ SCARCITY PILL════════════════════════════════ */.scarcity-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: rgba(220, 180, 50, 0.9); letter-spacing: 0.1em; text-transform: uppercase; background: rgba(220, 180, 50, 0.06); border: 1px solid rgba(220, 180, 50, 0.2); padding: 6px 16px; border-radius: 20px; margin-bottom: 32px;}.scarcity-dot { width: 5px; height: 5px; background: rgba(220, 180, 50, 0.9); border-radius: 50%; flex-shrink: 0;}/* ════════════════════════════════ BLOG POST PAGE════════════════════════════════ */.post-wrap { max-width: 740px; margin: 0 auto; padding: 120px clamp(20px, 4vw, 48px) 80px;}.post-back { font-family: var(--mono); font-size: 10px; color: var(--muted2); letter-spacing: 0.1em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 48px; transition: color 0.2s; text-transform: uppercase;}.post-back:hover { color: var(--accent);}.post-back::before { content: '←';}.post-tag { display: inline-block; font-family: var(--mono); font-size: 9px; border: 1px solid rgba(200, 251, 78, 0.3); color: var(--accent); padding: 3px 10px; border-radius: 4px; letter-spacing: 0.08em; margin-bottom: 20px;}.post-title { font-family: var(--syne); font-size: clamp(26px, 4.5vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px;}.post-meta { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.1em; display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--border);}.post-body { font-size: clamp(13px, 1.2vw, 15px); line-height: 1.85; color: var(--muted);}.post-body p { margin-bottom: 20px;}.post-body h3 { font-family: var(--syne); font-size: clamp(16px, 2vw, 20px); font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin: 36px 0 14px;}.post-body ul { padding-left: 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px;}.post-body li { color: var(--muted);}.post-body strong { color: var(--text); font-weight: 600;}.post-result-box { background: var(--bg2); border: 1px solid var(--border); border-left: 2px solid var(--accent); padding: 24px 28px; margin: 32px 0; border-radius: 0 4px 4px 0;}.post-result-box p { margin-bottom: 0; color: var(--text);}.post-cta-inline { display: inline-flex; align-items: center; font-family: var(--syne); font-size: 15px; font-weight: 700; background: var(--accent); color: #0c0c0b; padding: 13px 28px; border-radius: 8px; text-decoration: none; margin-top: 8px; transition: opacity 0.2s, transform 0.15s; letter-spacing: 0.01em;}.post-cta-inline:hover { opacity: 0.9; transform: translateY(-1px);}.post-faq { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 32px;}.post-faq-title { font-family: var(--syne); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 20px;}.post-faq-item { padding: 16px 0; border-bottom: 1px solid var(--border);}.post-faq-q { font-family: var(--syne); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px;}.post-faq-a { font-size: 15px; color: var(--muted); line-height: 1.65;}/* ════════════════════════════════ NAV CHAT DROPDOWN════════════════════════════════ */.nav-chat-wrap { position: relative;}.nav-chat-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border2); border-radius: 4px; background: transparent; color: var(--text); font-family: var(--inter); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; white-space: nowrap;}.nav-chat-btn:hover { border-color: var(--accent); color: var(--accent);}.nav-chat-btn svg { width: 14px; height: 14px; fill: currentColor; transition: transform .2s;}.nav-chat-wrap.open .nav-chat-btn svg.chevron { transform: rotate(180deg);}.nav-chat-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; background: var(--card); border: 1px solid var(--border2); border-radius: 6px; padding: 8px; display: none; z-index: 500; box-shadow: 0 8px 32px rgba(0, 0, 0, .4);}.nav-chat-wrap.open .nav-chat-dropdown { display: block;}.chat-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; text-decoration: none; transition: background .15s;}.chat-option:hover { background: rgba(255, 255, 255, .06);}.chat-option-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.chat-option-icon svg { width: 16px; height: 16px; fill: var(--text);}.chat-option-label { font-family: var(--syne); font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2;}.chat-option-sub { font-size: 11px; color: var(--muted2); margin-top: 1px;}/* ════════════════════════════════ BOOK PAGE CHAT CHANNELS════════════════════════════════ */.book-or { display: flex; align-items: center; gap: 16px; margin: 32px 0;}.book-or::before,.book-or::after { content: ''; flex: 1; height: 1px; background: var(--border2);}.book-or span { font-family: var(--mono); font-size: 11px; color: var(--muted2); letter-spacing: .08em; white-space: nowrap;}.chat-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}.chat-channel-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border2); border-radius: 6px; text-decoration: none; transition: border-color .2s, background .2s;}.chat-channel-card:hover { border-color: var(--accent); background: rgba(200, 251, 78, .04);}.cc-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .06); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.cc-icon svg { width: 18px; height: 18px; fill: var(--text);}.cc-name { font-family: var(--syne); font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.2;}.cc-desc { font-size: 11px; color: var(--muted2); margin-top: 2px;}.cc-arrow { margin-left: auto; color: var(--muted2); font-size: 16px;}/* ════════════════════════════════ FOUNDING CARD CHAT ROW════════════════════════════════ */.fc-chat-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border2);}.fc-chat-label { font-family: var(--mono); font-size: 10px; color: var(--muted2); letter-spacing: .08em; margin-bottom: 10px;}.fc-chat-links { display: flex; flex-direction: column; gap: 8px;}.fc-chat-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border2); border-radius: 4px; text-decoration: none; transition: border-color .2s;}.fc-chat-link:hover { border-color: var(--accent);}.fc-chat-link svg { width: 14px; height: 14px; fill: var(--muted); flex-shrink: 0;}.fc-chat-link span { font-size: 14px; color: var(--muted); font-family: var(--syne);}/* ════════════════════════════════ STACK LOGOS════════════════════════════════ */.stack-sec { padding: 28px 48px; border-bottom: 1px solid var(--border); background: var(--bg2);}.stack-inner { display: flex; align-items: center; gap: 40px;}.stack-label { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0;}.stack-logos { display: flex; align-items: center; flex-wrap: wrap; flex: 1;}.stack-logo-item { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-right: 1px solid var(--border); transition: background 0.2s; cursor: none;}.stack-logo-item:last-child { border-right: none;}.stack-logo-item:hover { background: var(--surface2);}.stack-logo-item span { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap;}.stack-logo-item svg { flex-shrink: 0; border-radius: 6px;}[data-theme="light"] .stack-sec { background: var(--bg2); border-bottom-color: var(--border);}[data-theme="light"] .stack-logo-item:hover { background: var(--bg3);}[data-theme="light"] .stack-logo-item span { color: var(--muted);}/* ════════════════════════════════ VIDEO SECTION════════════════════════════════ */.video-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start;}.video-container { width: 100%; position: relative; border: 1px solid var(--border2); border-radius: 12px; overflow: hidden; background: var(--bg2);}.video-container iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none;}.video-placeholder { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: var(--bg3);}.vp-inner { text-align: center; padding: 32px;}.vp-play { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #0c0c0b; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;}.vp-title { font-family: var(--syne); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -0.02em;}.vp-sub { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 280px; margin: 0 auto;}.video-points { display: flex; flex-direction: column;}.vp-point { display: flex; gap: 20px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border);}.vp-point:first-child { border-top: 1px solid var(--border);}.vpp-num { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.08em; padding-top: 2px; flex-shrink: 0; width: 44px;}.vpp-txt { font-size: 15px; color: var(--muted); line-height: 1.55;}[data-theme="light"] .video-placeholder { background: var(--bg2);}[data-theme="light"] .video-container { border-color: var(--border2);}[data-theme="light"] .vp-point { border-color: var(--border);}/* ════════════════════════════════ ADDITIONAL TABLET OVERRIDES════════════════════════════════ */@media (max-width:1024px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } .sys-card-body { grid-template-columns: 1fr; gap: 40px; } .guarantee-grid { grid-template-columns: 1fr 1fr; } .social-cards { grid-template-columns: 1fr; } .roi-inputs { grid-template-columns: 1fr; } .roi-output { grid-template-columns: 1fr 1fr; } .phil-grid { grid-template-columns: 1fr 1fr; } .testi-grid { grid-template-columns: 1fr; } .featured-post { padding: 40px; } .email-capture { padding: 56px 40px; } .book-wrap { grid-template-columns: 1fr; gap: 56px; }}/* ════════════════════════════════ SMART CHATBOT WIDGET════════════════════════════════ */.scw-container { position: fixed;} /* -- EMERGENCY FIXES -- */ /* Founding banner - relative position */ .founding-banner { position: fixed !important; top: 0 !important; z-index: 400 !important; } /* Cursor - visible on dark bg */ .cur { mix-blend-mode: normal !important; background: var(--cur-bg) !important; } [data-theme="light"] .cur { background: var(--cur-bg) !important; } /* Noscript fallback */ .r { opacity: 0; transform: translateY(32px); transition: opacity 0.8s, transform 0.8s; } .r.v { opacity: 1; transform: none; } /* Fix 2 - Dropdown styling */ .nav-chat-dropdown { background: var(--bg) !important; border-color: var(--border2) !important; width: 280px !important; } /* Fix 5 - Stack logo layout */ .stack-logos { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .stack-logos::-webkit-scrollbar { display: none; } /* -- VOICE WIDGET -- */ .voice-widget { position: fixed; bottom: 24px; left: 24px; z-index: 9990; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; } .voice-btn { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 100px; padding: 10px 18px 10px 14px; cursor: pointer; position: relative; transition: border-color 0.2s, transform 0.2s; } .voice-btn:hover { border-color: var(--accent); transform: translateY(-2px); } .voice-btn-icon { font-size: 16px; } .voice-btn-label { font-family: var(--syne); font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; } .voice-btn-pulse { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; animation: vpulse 2s ease infinite; } @keyframes vpulse { 0% { box-shadow: 0 0 0 0 rgba(200, 251, 78, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(200, 251, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 251, 78, 0); } } .voice-panel { width: 300px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); display: none; flex-direction: column; position: absolute; bottom: 60px; left: 0; } .voice-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg3); } .voice-panel-info { display: flex; align-items: center; gap: 10px; } .voice-avatar { width: 32px; height: 32px; background: var(--accent); color: #0c0c0b; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--syne); font-size: 16px; font-weight: 800; flex-shrink: 0; } .voice-name { font-family: var(--syne); font-size: 15px; font-weight: 700; color: var(--text); } .voice-role { font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.08em; margin-top: 1px; } .voice-panel-close { background: none; border: none; color: var(--muted2); font-size: 20px; cursor: pointer; padding: 2px 6px; transition: color 0.15s; line-height: 1; } .voice-panel-close:hover { color: var(--text); } .voice-panel-body { padding: 24px 16px; text-align: center; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .voice-waves { display: flex; align-items: center; gap: 4px; height: 40px; } .voice-wave-bar { width: 3px; height: 8px; background: var(--accent); border-radius: 2px; opacity: 0.3; } .voice-widget.speaking .voice-wave-bar { opacity: 1; animation: vwave 0.5s ease infinite; } .voice-widget.speaking .voice-wave-bar:nth-child(1) { animation-delay: 0s; } .voice-widget.speaking .voice-wave-bar:nth-child(2) { animation-delay: 0.1s; } .voice-widget.speaking .voice-wave-bar:nth-child(3) { animation-delay: 0.15s; } .voice-widget.speaking .voice-wave-bar:nth-child(4) { animation-delay: 0.1s; } .voice-widget.speaking .voice-wave-bar:nth-child(5) { animation-delay: 0s; } .voice-widget.listening .voice-wave-bar { opacity: 0.7; background: #60a5fa; animation: vwave 0.8s ease infinite; } @keyframes vwave { 0%, 100% { height: 8px; } 50% { height: 32px; } } .voice-status { font-family: var(--mono); font-size: 10px; color: var(--muted2); letter-spacing: 0.1em; text-transform: uppercase; } .voice-transcript { font-size: 14px; color: var(--muted); line-height: 1.6; font-style: italic; padding: 0 8px; } .voice-panel-footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); } .voice-mic-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 10px; cursor: pointer; color: var(--text); font-family: var(--syne); font-size: 11px; font-weight: 700; transition: all 0.2s; } .voice-mic-btn:hover { background: var(--accent); color: #0c0c0b; border-color: var(--accent); } .voice-mic-btn.active { background: #ef4444; border-color: #ef4444; color: #fff; animation: micpulse 1s ease infinite; } @keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } } .voice-book-btn { background: var(--accent); color: #0c0c0b; padding: 10px 14px; border-radius: 8px; font-family: var(--syne); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: opacity 0.2s; } .voice-book-btn:hover { opacity: 0.85; } .voice-powered { padding: 8px 16px; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--muted2); letter-spacing: 0.08em; border-top: 1px solid var(--border); } .voice-powered span { color: var(--accent); font-weight: 700; } @media (max-width: 768px) { .voice-widget { bottom: 16px; right: 16px; left: auto; } .voice-panel { width: calc(100vw - 32px); position: fixed; bottom: 68px; right: 16px; left: auto; } .voice-btn-label { display: none; } .voice-btn { padding: 12px; border-radius: 50%; width: 48px; height: 48px; justify-content: center; } } @media(max-width:480px) { .founding-text { display: inline-block; font-size: 9px; opacity: 0.8; margin: 0 8px; } .founding-banner { flex-wrap: wrap; height: auto; padding: 10px 40px 10px 16px; } .founding-banner-inner { flex-wrap: wrap; justify-content: center; gap: 4px; } } .aria-call-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 24px; background: transparent; border: 1.5px solid var(--accent); color: var(--accent); font-family: var(--inter); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-radius: 4px; transition: background 0.2s, color 0.2s; } .aria-call-btn:hover { background: var(--accent); color: #0c0c0b; } .talk-aria-btn { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 12px; padding: 10px 24px; background: transparent !important; border: 1.5px solid var(--accent) !important; color: var(--accent) !important; font-family: var(--inter); font-size: 15px; font-weight: 600; text-decoration: none !important; border-radius: 4px; white-space: nowrap; transition: background 0.2s, color 0.2s; line-height: 1.3; cursor: none; } .talk-aria-btn:hover { background: var(--accent) !important; color: #0c0c0b !important; } .talk-aria-btn span:last-child { font-size: 10px; font-weight: 400; opacity: 0.7; }/* -- GLOBAL MOBILE POLISH -- */@media (max-width: 480px) { body { overflow-x: hidden; width: 100%; } .sec { padding: 48px 16px; } .hero { padding-top: 70px; } .hero h1 { font-size: 32px; } .founding-card { padding: 24px 16px; gap: 32px; } .founding-perks { gap: 10px; } .founding-spot { padding: 12px 14px; }}/* -- SYSTEMS MOBILE POLISH -- */@media (max-width: 1024px) { .sys-card-body { grid-template-columns: 1fr; gap: 40px; }}@media (max-width: 480px) { .sys-meta-row { flex-direction: column; gap: 4px; align-items: flex-start; } .sys-meta-val { display: flex; flex-wrap: wrap; gap: 6px; } .sys-card { padding: 24px 16px; } .sys-card-name { font-size: 20px; } .sys-card-tagline { font-size: 11px; }}/* ============================================================ RESPONSIVE POLISH � comprehensive mobile & tablet fixes ============================================================ *//* 0 -- Root overflow lock (must be on html AND body for iOS Safari) */html { overflow-x: hidden; max-width: 100%;}/* 1 -- Global responsive media */img,video,iframe,embed,object { max-width: 100%; height: auto;}/* 2 -- Prevent long text/URLs from breaking layouts */h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word;}/* 3 -- Restore proper cursors on touch/mobile devices */@media (hover: none) { .btn-lime, .btn-ghost, .nav-cta, .nav-chat-btn, .bento-cell, .sys-row, .talk-aria-btn, .aria-float-btn, .theme-toggle, .faq-btn, .nav-mobile-cta, a, button { cursor: pointer !important; }}/* 4 -- Tablet (=1024px) */@media (max-width: 1024px) { /* Reduce ROI wrap padding */ .roi-wrap { padding: 40px 32px; } /* Prevent bento cells from overflowing */ .bento-cell { min-width: 0; }}/* 5 -- Mobile (=768px) */@media (max-width: 768px) { .stack-inner { width: 100%; max-width: 100%; } .stack-logos { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap !important; align-items: stretch; gap: 0; overflow: visible; } .stack-logo-item { width: 50%; min-width: 0; padding: 12px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stack-logo-item:nth-child(2n) { border-right: none; } .stack-logo-item:last-child, .stack-logo-item:nth-last-child(2):nth-child(odd) { border-bottom: none; } .stack-logo-item span { font-size: 13px; } /* Hide chat dropdown in nav � too cramped on mobile */ .nav-chat-wrap { display: none; } /* Theme toggle: keep it but tighten spacing */ .nav-right { gap: 6px; } /* Larger touch targets for nav icons */ .nav-icon, .theme-toggle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } /* Hamburger button min touch target */ .nav-hamburger { min-width: 40px; min-height: 40px; justify-content: center; align-items: center; } /* Prevent grid/flex children from causing overflow */ .bento-cell, .p-card, .res-card, .work-card, .blog-card, .ba-panel, .h-stat { min-width: 0; } /* Proof strip: let it shrink gracefully */ .proof-strip { overflow: hidden; } /* ROI wrap tighter on mobile */ .roi-wrap { padding: 28px 20px; } /* ROI output: force single column on narrow phones */ .roi-output { grid-template-columns: 1fr; } /* Comparison table always scrollable */ .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Make sure the nav chat dropdown won't escape screen if somehow shown */ .nav-chat-dropdown { right: 0; left: auto; max-width: calc(100vw - 32px); }}/* 6 -- Small phones (=480px) */@media (max-width: 480px) { /* Footer: stack fully to single column */ footer { grid-template-columns: 1fr; text-align: left; gap: 20px; } footer > div:first-child { grid-column: span 1; } .foot-r { text-align: left; } .foot-soc { justify-content: flex-start; } /* Proof names: hide scrolling names on tiny screens */ .proof-names { display: none; } /* ROI wrap */ .roi-wrap { padding: 20px 16px; } /* ROI output single column */ .roi-output { grid-template-columns: 1fr; } /* Hero: ensure buttons are full-width and tap-friendly */ .btn-lime, .btn-ghost { display: block; width: 100%; text-align: center; padding: 16px 20px; font-size: 16px; } /* Prevent any section from causing horizontal scroll */ .sec, .hero, footer { overflow-x: hidden; } /* Sys card: comfortable padding */ .sys-row { min-width: 0; } /* Bento tight on very small screens */ .bento-cell { padding: 20px 16px; } /* Heading scale at smallest viewport */ .hero h1 { font-size: clamp(28px, 9vw, 36px); } h2 { font-size: clamp(26px, 9vw, 36px); }}/* -- FLOATING ARIA CTA -- */ .aria-float { position: fixed; bottom: 32px; right: 32px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .aria-float-label { background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 12px; font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; animation: aria-bounce 2s ease infinite; } @keyframes aria-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .aria-float-btn { display: flex; align-items: center; gap: 10px; background: #1a1a1a; color: #ffffff; padding: 10px 20px; border-radius: 50px; font-family: var(--syne); font-size: 13px; font-weight: 700; text-decoration: none !important; letter-spacing: 0.01em; border: 1px solid #444444; box-shadow: 0 8px 32px rgba(200,251,78,0.35); transition: transform 0.2s, box-shadow 0.2s; cursor: none; white-space: nowrap; width: fit-content; } .aria-float-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 48px rgba(200,251,78,0.5); } .aria-float-btn--rex { background: #CCFF00; color: #000000; border: none; padding: 14px 28px; font-size: 15px; border-radius: 50px; width: fit-content; box-shadow: 0 8px 32px rgba(204,255,0,0.35); } .aria-float-btn--rex:hover { background: #d9ff33; box-shadow: 0 16px 48px rgba(204,255,0,0.5); } .aria-float-pulse--rex { background: #000000 !important; animation: rex-pulse 1.5s ease infinite !important; } .aria-float-pulse { width: 10px; height: 10px; background: #CCFF00; border-radius: 50%; flex-shrink: 0; animation: aria-pulse 1.5s ease infinite; } @keyframes aria-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(204,255,0,0.5); } 50% { box-shadow: 0 0 0 6px rgba(204,255,0,0); } } @keyframes rex-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.5); } 50% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } } .aria-float-icon { font-size: 16px; flex-shrink: 0; } .aria-float-btn:not(.aria-float-btn--rex) .aria-float-icon { display: none; } @media (max-width: 768px) { .aria-float { bottom: 20px; right: 16px; } .aria-float-label { display: none; } .aria-float-btn { padding: 13px 18px; font-size: 15px; } } @media (max-width: 480px) { .aria-float { bottom: 16px; right: 16px; } .aria-float-btn { padding: 10px 16px; font-size: 14px; } }