/* ========================================================== AIS Autonomous — shared stylesheet Loaded by every page in the site Palette: blue #3B82F6 · deep navy #020617 · slate (Theme adopted from aisautonomous_main — dark blue/cyan) ========================================================== */ :root { /* Brand accent (kept as --green-* names for compatibility) */ --green: #3B82F6; /* primary blue */ --green-dark: #2563EB; /* primary-hover */ --green-soft: rgba(56, 189, 248, 0.10); /* soft blue wash */ --green-tint: rgba(56, 189, 248, 0.30); /* border highlight */ --green-glow: rgba(59, 130, 246, 0.40); /* glow */ /* Semantic aliases (preferred for new code) */ --primary: #3B82F6; --primary-hover: #2563EB; --primary-soft: rgba(56, 189, 248, 0.10); --primary-tint: rgba(56, 189, 248, 0.30); --primary-glow: rgba(59, 130, 246, 0.40); /* Surfaces & ink */ --ink: #020617; /* deepest navy / page bg */ --ink-2: #0F172A; /* secondary dark surface */ --text: #F8FAFC; /* primary body text */ --text-2: #E2E8F0; /* secondary text */ --muted: #94A3B8; /* muted text */ --muted-2: #CBD5E1; /* lighter muted */ --bg: #020617; /* page background */ --bg-soft: rgba(15, 23, 42, 0.55); /* card surface */ --bg-soft-2: rgba(30, 41, 59, 0.80); /* card hover */ --line: #1E293B; /* default border */ --line-2: rgba(255, 255, 255, 0.06); /* subtle divider */ /* Semantic state colors */ --success: #10B981; --success-soft: rgba(16, 185, 129, 0.10); --warning: #F59E0B; --warning-soft: rgba(245, 158, 11, 0.10); --error: #EF4444; --error-soft: rgba(239, 68, 68, 0.10); --radius: 14px; --radius-lg: 22px; --radius-xl: 28px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .25); --shadow-md: 0 6px 18px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .40); --shadow-lg: 0 18px 60px rgba(0, 0, 0, .55); --container: 1200px; --section-y: clamp(64px, 8vw, 112px); --ease: cubic-bezier(.22, .7, .22, 1); } /* ========================================================== LIGHT THEME Toggle via ========================================================== */ [data-theme="light"] { /* Brand accent */ --green: #0F62FE; --green-dark: #0353E9; --green-soft: rgba(15, 98, 254, 0.08); --green-tint: rgba(15, 98, 254, 0.20); --green-glow: rgba(15, 98, 254, 0.25); --primary: #0F62FE; --primary-hover: #0353E9; --primary-soft: rgba(15, 98, 254, 0.08); --primary-tint: rgba(15, 98, 254, 0.20); --primary-glow: rgba(15, 98, 254, 0.25); /* Surfaces & ink */ --ink: #FAFBFC; --ink-2: #F1F3F5; --text: #111827; --text-2: #374151; --muted: #6B7280; --muted-2: #9CA3AF; --bg: #FAFBFC; --bg-soft: rgba(241, 243, 245, 0.80); --bg-soft-2: #FFFFFF; --line: #E5E7EB; --line-2: rgba(0, 0, 0, 0.06); /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04); --shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .10); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } section { padding: var(--section-y) 0; position: relative; } section.alt { background: var(--bg-soft); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green-dark); background: var(--green-soft); border: 1px solid var(--green-tint); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; } h1, h2, h3, h4 { color: var(--text); margin: 0; letter-spacing: -.02em; line-height: 1.2; font-weight: 700; } h1 { font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; line-height: 1.05; } h2 { font-size: clamp(28px, 3.6vw, 44px); } h3 { font-size: clamp(22px, 2.4vw, 30px); } h4 { font-size: 18px; } p { margin: 0; } .lead { font-size: 18px; color: var(--muted); line-height: 1.65; } .grad { background: linear-gradient(120deg, var(--green) 0%, #38BDF8 50%, #93C5FD 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .15s; white-space: nowrap; } .btn-primary { background: linear-gradient(to right, var(--green), #60A5FA); color: #fff; box-shadow: 0 8px 20px rgba(59, 130, 246, .25), inset 0 1px 0 rgba(255, 255, 255, .10); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(59, 130, 246, .40), inset 0 1px 0 rgba(255, 255, 255, .12); background: linear-gradient(to right, var(--green-dark), var(--green)); } .btn-green { background: linear-gradient(180deg, #60A5FA 0%, var(--green) 55%, var(--green-dark) 100%); color: #fff; box-shadow: 0 10px 28px var(--green-glow), inset 0 1px 0 rgba(255, 255, 255, .25); } .btn-green:hover { background: linear-gradient(180deg, #7DB6FB 0%, #4F8EF7 55%, #1D4ED8 100%); transform: translateY(-2px); box-shadow: 0 14px 32px var(--green-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn-ghost { background: transparent; color: var(--text); border: 1.5px solid rgba(255, 255, 255, .18); } .btn-ghost:hover { border-color: var(--green); color: #fff; background: rgba(59, 130, 246, .10); } .btn-link { color: #60A5FA; font-weight: 600; } .btn-link:hover { color: #fff; } /* ===================== NAV ===================== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(2, 6, 23, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 1px 0 rgba(59, 130, 246, .08), 0 6px 20px rgba(0, 0, 0, .35); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } /* ============================================================ Brand wordmark — "AIS AUTONOMOUS" Single-string typographic logo. Light-green → green gradient applied to the full text as one unit, with a slow shimmer animation that sweeps across the wordmark. ============================================================ */ .brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1; position: relative; padding: 4px 8px; margin-left: 0; transition: transform .25s var(--ease); } @media (max-width: 560px) { .brand { margin-left: -4px; } } .brand-mark { display: inline-grid; place-items: center; width: 56px; height: 48px; flex: 0 0 56px; filter: drop-shadow(0 4px 10px rgba(59, 130, 246, .35)); } .brand-mark img, .brand-mark svg { display: block; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 560px) { .brand-mark { width: 44px; height: 38px; flex-basis: 44px; } .brand { gap: 2px; } } .brand-text { display: inline-flex; align-items: center; height: 38px; font-weight: 800; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; white-space: nowrap; padding-top: 2px; /* optical baseline correction next to square mark */ background: linear-gradient(90deg, #FFFFFF 0%, #38BDF8 35%, #2563EB 65%, #FFFFFF 100%); background-size: 300% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: brand-grad-slide 4s linear infinite; text-shadow: 0 0 24px rgba(59, 130, 246, .18); } /* Footer variant — lighter cyan→white wash for dark background */ footer .brand-text { background: linear-gradient(120deg, #dbeafe 0%, #93c5fd 30%, #38BDF8 60%, #ffffff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 24px rgba(56, 189, 248, .22); } @keyframes brand-grad-slide { 0% { background-position: 100% 0; } 100% { background-position: -200% 0; } } @media (max-width: 560px) { .brand-text { font-size: 14px; letter-spacing: .12em; height: 32px; padding-top: 1px; } } @media (prefers-reduced-motion: reduce) { .brand-text { animation: none; background-position: 50% 50%; } } .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 0; } .nav-links>li { position: relative; } .nav-links>li>a, .nav-links>li>button { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 14.5px; font-weight: 500; padding: 10px 14px; border-radius: 8px; transition: background .15s, color .15s; } .nav-links>li>a:hover, .nav-links>li>button:hover { color: #fff; background: rgba(255, 255, 255, .06); } .nav-links>li.is-current>a { color: #fff; } .nav-links>li.is-current>a::after, .nav-links>li.is-current>button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--green); border-radius: 2px; } .has-drop>button .caret { width: 10px; height: 10px; transition: transform .2s; } .has-drop[aria-expanded="true"]>button .caret { transform: rotate(180deg); } /* Dropdown */ .dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 360px; background: #0F172A; border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity .15s, transform .2s; } .dropdown.wide { min-width: 480px; } .has-drop[aria-expanded="true"] .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dropdown a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; transition: background .15s; } .dropdown a:hover { background: rgba(255, 255, 255, .05); } .dropdown a .ico-tile { flex-shrink: 0; width: 36px; height: 36px; background: var(--green-soft); border: 1px solid var(--green-tint); border-radius: 9px; display: grid; place-items: center; color: #60A5FA; } .dropdown a strong { display: block; font-size: 14px; color: #fff; font-weight: 600; } .dropdown a span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; } .dropdown.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 560px; } .nav-cta { display: flex; align-items: center; gap: 12px; } .nav-cta .login { font-size: 14px; color: var(--text); padding: 8px 14px; border-radius: 8px; } .nav-cta .login:hover { background: rgba(255, 255, 255, .06); } .nav-cta .btn { padding: 10px 18px; font-size: 14px; } .menu-btn { display: none; background: transparent; padding: 8px; } .mobile-menu { display: none; position: fixed; inset: 72px 0 0; background: #020617; z-index: 49; overflow-y: auto; padding: 24px; } .mobile-menu.open { display: block; } .mobile-menu details { border-bottom: 1px solid var(--line-2); padding: 12px 0; } .mobile-menu summary { list-style: none; cursor: pointer; padding: 8px 0; font-weight: 600; color: #fff; font-size: 16px; display: flex; justify-content: space-between; align-items: center; } .mobile-menu summary::-webkit-details-marker { display: none; } .mobile-menu summary::after { content: "+"; font-size: 22px; color: var(--muted); } .mobile-menu details[open] summary::after { content: "−"; } .mobile-menu .sub { padding: 4px 0 8px; } .mobile-menu .sub a { display: block; padding: 8px 0; color: var(--text); font-size: 14.5px; } .mobile-menu>a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-weight: 600; color: #fff; } .mobile-menu .actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } .mobile-menu .actions .btn { justify-content: center; } @media (max-width: 980px) { .nav-links, .nav-cta .login { display: none; } .menu-btn { display: inline-flex; } } @media (max-width: 560px) { .nav-cta .btn { display: none; } .container { padding: 0 16px; } } /* ===================== HERO ===================== */ .hero { padding: clamp(16px, 2.5vh, 28px) 0 clamp(16px, 2.5vh, 28px); min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(42% 50% at 88% 12%, rgba(6, 182, 212, .18), transparent 60%), radial-gradient(38% 46% at 8% 88%, rgba(59, 130, 246, .18), transparent 60%), radial-gradient(30% 40% at 50% 50%, rgba(56, 189, 248, .10), transparent 70%), linear-gradient(180deg, #020617 0%, #020617 100%); position: relative; overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .35; animation: hero-blob 18s ease-in-out infinite; } .hero::before { width: 380px; height: 380px; background: radial-gradient(circle, rgba(56, 189, 248, .55), transparent 70%); top: -120px; right: -60px; } .hero::after { width: 440px; height: 440px; background: radial-gradient(circle, rgba(59, 130, 246, .45), transparent 70%); bottom: -160px; left: -80px; animation-delay: -9s; } @keyframes hero-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -16px) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } } .hero>.container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; } .hero-grid.center { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; text-align: center; } .hero-grid.center .lead, .hero-grid.center .hero-ctas, .hero-grid.center .hero-chips { margin-left: auto; margin-right: auto; } .hero-grid.center .hero-ctas, .hero-grid.center .hero-chips { justify-content: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-text-col { margin-top: -20px; } } .hero h1 { margin: 12px 0 14px; } .hero .lead { max-width: 520px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; } .hero-ctas { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--text); font-weight: 500; box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .chip::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px var(--green-glow); } /* Tablet mockup */ .hero-art { position: relative; min-height: auto; } .tablet { width: clamp(600px, 46vw, 720px); max-width: 100%; margin: 0 auto; position: relative; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45)) drop-shadow(0 0 40px rgba(59, 130, 246, .12)); transform: perspective(1200px) rotateY(-8deg) rotateX(2deg); transform-style: preserve-3d; transition: transform .4s var(--ease); } .tablet:hover { transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); } /* Screen glow */ .tablet-screen::after { content: ""; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.08), transparent 70%); pointer-events: none; } .tablet-bezel { background: #0d0d1a; border-radius: 32px; padding: 16px 14px 12px; position: relative; border: 1px solid #1e1e2e; } .tablet-camera { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: #1a1a2e; border-radius: 50%; z-index: 2; border: 1px solid #2a2a3e; } .tablet-screen { background: #fff; border-radius: 20px; height: clamp(360px, 38vh, 440px); position: relative; overflow: hidden; } .tablet-home-btn { width: 24px; height: 24px; background: transparent; border-radius: 50%; margin: 8px auto 0; border: 1.5px solid rgba(255, 255, 255, 0.15); position: relative; } .tablet-home-btn::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 2px; } /* WhatsApp Web layout */ .wa-web { display: grid; grid-template-columns: 170px 1fr; height: 100%; font-size: 12px; } .wa-sidebar { background: #fff; border-right: 1px solid #e9edef; display: flex; flex-direction: column; } .wa-sidebar-header { background: #f0f2f5; padding: 8px 12px; display: flex; align-items: center; } .wa-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #60A5FA); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; } .wa-chat-list { overflow: hidden; } .wa-chat-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #f0f2f5; cursor: pointer; } .wa-chat-item.active { background: #f0f2f5; } .wa-chat-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #60A5FA); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; overflow: hidden; } .wa-chat-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .wa-chat-info { min-width: 0; } .wa-chat-name { font-weight: 600; font-size: 12px; color: #111b21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-chat-preview { font-size: 11px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .wa-chat-meta { font-size: 10px; color: #667781; white-space: nowrap; } .wa-main { display: flex; flex-direction: column; background: #e5ddd5; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d1d7db' fill-opacity='0.3'%3E%3Cpath d='M0 0h100v100H0z'/%3E%3C/g%3E%3C/svg%3E"); } .wa-main-header { background: #f0f2f5; padding: 8px 12px; display: flex; align-items: center; gap: 10px; border-left: 1px solid #e9edef; } .wa-main-header .wa-chat-name { font-size: 13px; } .wa-main-header .wa-chat-preview { font-size: 11px; color: #667781; } .wa-main-chat { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; } .bubble { max-width: 80%; padding: 6px 10px; border-radius: 10px; font-size: 12px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); word-break: break-word; overflow-wrap: break-word; } .bubble.them { background: #fff; align-self: flex-start; border-top-left-radius: 3px; color: #111; } .bubble.me { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 3px; color: #111; } .bubble.bot { background: #fff; align-self: flex-start; border-top-left-radius: 3px; border-left: 2px solid var(--green); color: #111; } .bubble small { display: block; font-size: 9px; color: #888; margin-top: 2px; } .bubble .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .bubble .actions span { padding: 3px 8px; background: var(--green-soft); color: var(--green-dark); border-radius: 999px; font-size: 10px; font-weight: 600; } .float-card { position: absolute; background: rgba(15, 23, 42, 0.85); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-md); font-size: 13px; display: flex; align-items: center; gap: 10px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: default; } .float-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md), 0 8px 24px rgba(59, 130, 246, 0.15); border-color: var(--green-tint); } .float-card .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; } .float-card strong { display: block; color: #fff; font-size: 14px; } .float-card span { color: var(--muted); font-size: 12px; } .float-card.fc-1 { top: 40%; left: 0%; right: auto; width: 720px; max-width: none; } .float-card.fc-2 { top: 64%; left: 35%; right: auto; transform: translateX(-50%); width: 720px; max-width: none; } .float-card.fc-3 { top: 54%; left: 70%; right: auto; width: 720px; max-width: none; } /* Tablet — float cards on left side of device */ @media (min-width: 768px) and (max-width: 1100px) { .tablet { width: 100%; max-width: 620px; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); } .tablet-screen { height: 420px; } .wa-web { grid-template-columns: 140px 1fr; } .float-card.fc-1 { left: -40px; right: auto; top: 50%; width: calc(100% + 80px); } .float-card.fc-2 { left: 50%; right: auto; top: 68%; transform: translateX(-50%); width: calc(100% + 80px); } .float-card.fc-3 { left: -40px; right: auto; top: 84%; width: calc(100% + 80px); } } @media (max-width: 900px) { .hero-art { min-height: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .tablet { width: 100%; max-width: 520px; transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); } .tablet-screen { height: 380px; } .wa-web { grid-template-columns: 120px 1fr; } .float-card.fc-1, .float-card.fc-2, .float-card.fc-3 { position: relative; top: auto; left: auto; right: auto; transform: none; width: 100%; max-width: 360px; margin: 0; } .float-card { padding: 10px 14px; border-radius: 12px; gap: 10px; } .float-card .icon { width: 32px; height: 32px; border-radius: 8px; } .float-card strong { font-size: 13px; } .float-card span { font-size: 11px; } } /* Short screens (768px height) */ @media (max-height: 800px) and (min-width: 901px) { .hero { padding: 12px 0 16px; } .hero h1 { margin: 8px 0 10px; font-size: clamp(32px, 4.5vw, 52px); } .hero .lead { font-size: 15px; line-height: 1.5; } .hero-ctas { margin-top: 14px; } .hero-chips { margin-top: 14px; } .chip { padding: 6px 12px; font-size: 12px; } .phone { height: clamp(380px, 50vh, 480px); width: clamp(220px, 18vw, 260px); padding: 8px; border-radius: 36px; } .phone-header { padding: 38px 14px 10px; } .phone-chat { padding: 10px; gap: 6px; } .bubble { padding: 7px 10px; font-size: 12px; } .float-card { padding: 10px 12px; font-size: 12px; width: 200px !important; } .float-card .icon { width: 30px; height: 30px; } .float-card strong { font-size: 13px; } } /* ===================== PAGE BANNER (smaller hero) ===================== */ .page-banner { padding: 56px 0 40px; background: radial-gradient(60% 60% at 80% 0%, rgba(59, 130, 246, .12), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(6, 182, 212, .10), transparent 60%); } /* Ensure breathing room between banner and the next section */ .page-banner + section, .page-banner + section[style*="padding-top:0"] { padding-top: var(--section-y) !important; } .page-banner .crumb { display: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); letter-spacing: .8px; margin-bottom: 12px; } .page-banner .crumb a { color: #60A5FA; } .page-banner .crumb a:hover { color: #fff; } .page-banner h1 { font-size: clamp(30px, 4.5vw, 52px); margin: 8px 0 14px; } .page-banner .lead { max-width: 640px; } .page-banner .cta-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; } /* ===================== TRUST STRIP ===================== */ .trust { padding: 40px 0; border-top: 1px solid var(--green-tint); border-bottom: 1px solid var(--green-tint); background: linear-gradient(180deg, #020617 0%, rgba(15, 23, 42, 0.6) 100%); position: relative; } .trust-label { text-align: center; color: #60A5FA; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 14px; } .trust-label::before, .trust-label::after { content: ""; height: 1px; flex: 0 1 60px; background: linear-gradient(90deg, transparent, var(--green-tint)); } .trust-label::after { background: linear-gradient(90deg, var(--green-tint), transparent); } .trust-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 18px; align-items: center; } .trust-row span { color: var(--muted-2); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--green-tint); border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .trust-row span:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 6px 14px var(--green-glow); color: #fff; } .trust-row span::before { content: ""; width: 8px; height: 8px; background: linear-gradient(135deg, var(--green), var(--green-dark)); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, .20); } /* ===================== SECTION HEADER ===================== */ .section-head { max-width: 760px; margin-bottom: 48px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head h2 { margin: 14px 0 14px; } .section-head p { color: var(--muted); font-size: 17px; line-height: 1.65; } /* ===================== CHANNEL ART ===================== */ .channel-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px; } @media (max-width: 900px) { .channel-hero { grid-template-columns: 1fr; gap: 40px; } } .channel-hero h2 { margin-top: 14px; } .channel-hero .lead { margin-top: 16px; max-width: 520px; } .channel-hero .cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .channel-art { background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.3) 100%); border: 1px solid var(--green-tint); border-radius: var(--radius-xl); aspect-ratio: 4/3; position: relative; overflow: hidden; display: grid; place-items: center; } .why-band { background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.3) 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; margin-bottom: 56px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .why-band h3 { font-size: 22px; margin-bottom: 12px; } .why-band p { color: var(--muted); font-size: 16px; line-height: 1.7; } .feat-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-bottom: 56px; } .feat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .feat:hover { transform: translateY(-4px); border-color: var(--green-tint); box-shadow: var(--shadow-md); } .feat .micro { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #60A5FA; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; } .feat h4 { font-size: 18px; line-height: 1.3; margin-bottom: 8px; } .feat p { color: var(--muted); font-size: 14.5px; line-height: 1.6; } .story { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; background: linear-gradient(135deg, #0F172A 0%, #020617 100%); color: #fff; border-radius: var(--radius-xl); padding: 48px; margin-bottom: 56px; position: relative; overflow: hidden; border: 1px solid var(--line); } .story::before { content: ""; position: absolute; top: 0; right: 0; width: 360px; height: 360px; background: radial-gradient(circle, rgba(59, 130, 246, .28), transparent 70%); border-radius: 50%; transform: translate(40%, -40%); } @media (max-width: 800px) { .story { grid-template-columns: 1fr; padding: 32px; } } .story .quote-mark { font-size: 80px; line-height: .8; color: var(--green); font-weight: 800; margin-bottom: -10px; } .story p { font-size: 19px; line-height: 1.55; color: #f1f5f9; } .story .who { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .story .who .av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(59, 130, 246, .35); } .story .who .av img { width: 100%; height: 100%; object-fit: cover; display: block; } .story .who strong { display: block; font-size: 15px; color: #fff; } .story .who span { font-size: 13px; color: #94a3b8; } .story-stats { display: grid; gap: 14px; } .story-stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 18px 22px; } .story-stat .num { display: block; color: var(--green); font-weight: 800; font-size: 32px; letter-spacing: -.02em; line-height: 1; } .story-stat .lbl { display: block; font-size: 13px; color: #cbd5e1; margin-top: 4px; } .perf-band { background: linear-gradient(135deg, rgba(56, 189, 248, .08) 0%, rgba(15, 23, 42, 0.4) 100%); border: 1px solid var(--green-tint); border-radius: var(--radius-lg); padding: 36px; } .perf-band h3 { margin-bottom: 24px; font-size: 22px; } .perf-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .perf-item { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--green-tint); border-radius: var(--radius); padding: 22px; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .perf-item .num { display: block; font-size: 36px; font-weight: 800; color: #60A5FA; letter-spacing: -.02em; line-height: 1; } .perf-item .lbl { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; } /* ===================== SOLUTIONS GRID ===================== */ .sol-grid { display: grid; gap: 22px; grid-template-columns: repeat(12, 1fr); } .sol-card { grid-column: span 6; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sol-card:hover { transform: translateY(-4px); border-color: var(--green-tint); box-shadow: var(--shadow-md); } .sol-card.span-3 { grid-column: span 3; } .sol-card.span-4 { grid-column: span 4; } .sol-card.span-6 { grid-column: span 6; } .sol-card.span-12 { grid-column: span 12; } .sol-card.dark { background: #0F172A; color: #fff; border-color: transparent; } .sol-card.dark p, .sol-card.dark li { color: #cbd5e1; } .sol-card.dark h3, .sol-card.dark h4 { color: #fff; } .sol-card .icon-tile { width: 52px; height: 52px; background: var(--green-soft); border: 1px solid var(--green-tint); border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; color: #60A5FA; } .sol-card.dark .icon-tile { background: rgba(59, 130, 246, .18); border-color: rgba(59, 130, 246, .32); color: #60A5FA; } .sol-card h3 { font-size: 22px; margin-bottom: 10px; } .sol-card p { color: var(--muted); font-size: 15px; line-height: 1.65; } .sol-card ul { margin: 16px 0 0; padding-left: 18px; } .sol-card li { margin: 4px 0; font-size: 14.5px; color: var(--muted); } .sol-card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #60A5FA; font-weight: 600; font-size: 14px; } .sol-card .more:hover { color: #fff; } @media (max-width: 800px) { .sol-card, .sol-card.span-3, .sol-card.span-4, .sol-card.span-6 { grid-column: span 12; } } .sub-feat-grid { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: repeat(2, 1fr); } .sub-feat { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 16px 18px; } .sub-feat h4 { font-size: 15px; margin-bottom: 4px; } .sub-feat p { font-size: 13px; line-height: 1.5; } /* ===================== PRICING ===================== */ .price-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; margin-bottom: 32px; align-items: start; } @media (max-width: 1200px) { .price-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; gap: 24px; } } .plan { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; position: relative; display: flex; flex-direction: column; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: visible; min-width: 0; } .plan-header { padding: 16px 12px 10px; position: relative; text-align: center; flex-shrink: 0; } .plan-header .plan-icon { width: 36px; height: 36px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 18px; line-height: 1; } /* Starter - Blue theme */ .plan-starter .plan-header { background: linear-gradient(180deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%); } .plan-starter .plan-header .plan-icon { background: rgba(59, 130, 246, 0.2); color: #3B82F6; } .plan-starter .plan-subtitle { color: #3B82F6; } .plan-starter .plan-included { background: rgba(59, 130, 246, 0.15); color: #3B82F6; border: 1px solid rgba(59, 130, 246, 0.3); } .plan-starter .btn { background: transparent; border: 1px solid #3B82F6; color: #3B82F6; } .plan-starter .btn:hover { background: #3B82F6; color: #fff; } /* Professional - Gold/Yellow theme */ .plan-pro .plan-header { background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, transparent 100%); } .plan-pro .plan-header .plan-icon { background: rgba(245, 158, 11, 0.2); color: #F59E0B; } .plan-pro .plan-subtitle { color: #F59E0B; } .plan-pro .plan-included { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.3); } .plan-pro .btn { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; border: none; } .plan-pro .btn:hover { background: linear-gradient(135deg, #D97706, #B45309); } /* Premium - Purple theme */ .plan-premium .plan-header { background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, transparent 100%); } .plan-premium .plan-header .plan-icon { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; } .plan-premium .plan-subtitle { color: #8B5CF6; } .plan-premium .plan-included { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; border: 1px solid rgba(139, 92, 246, 0.3); } .plan-premium .btn { background: transparent; border: 1px solid #8B5CF6; color: #8B5CF6; } .plan-premium .btn:hover { background: #8B5CF6; color: #fff; } /* Enterprise - Green theme */ .plan-enterprise .plan-header { background: linear-gradient(180deg, rgba(34, 197, 94, 0.15) 0%, transparent 100%); } .plan-enterprise .plan-header .plan-icon { background: rgba(34, 197, 94, 0.2); color: #22C55E; } .plan-enterprise .plan-subtitle { color: #22C55E; } .plan-enterprise .plan-included { background: rgba(34, 197, 94, 0.15); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.3); } .plan-enterprise .btn { background: transparent; border: 1px solid #22C55E; color: #22C55E; } .plan-enterprise .plan-price .amount { font-size: 28px; font-weight: 700; color: #22C55E; } .enterprise-contact { font-size: 28px; font-weight: 700; color: #22C55E; } .plan .badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(245, 158, 11, .4); z-index: 10; white-space: nowrap; } .plan-body { padding: 0 12px 16px; display: flex; flex-direction: column; flex: 1; } .plan-name { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; } .plan-name strong { font-size: 20px; font-weight: 900; color: var(--text); display: block; letter-spacing: 1px; line-height: 1.2; } .plan-name .plan-subtitle { font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; display: block; margin-top: 4px; } .plan-price { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 2px; justify-content: center; } .plan-price .amount { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.02em; } .plan-price .per { color: var(--muted); font-size: 14px; } .plan-billed { text-align: center; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .plan-tasks { color: var(--muted); font-size: 12px; margin-bottom: 10px; text-align: center; line-height: 1.45; } .plan-focus { color: var(--text); font-size: 11px; font-weight: 600; margin-bottom: 10px; text-align: center; line-height: 1.4; } .plan-included { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin: 0 auto 10px; width: fit-content; } .plan-included svg { width: 14px; height: 14px; flex-shrink: 0; } .plan-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; text-align: center; } .plan ul { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; } .plan li { padding: 3px 0; padding-left: 18px; font-size: 11px; color: var(--text); position: relative; line-height: 1.3; } .plan li::before { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; background: var(--green-soft); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%233B82F6' d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 4.5-4.5L12 5.6z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 7px; } .plan li b { color: #fff; } .plan .btn { width: 100%; justify-content: center; margin-top: auto; padding: 10px 16px; font-size: 13px; min-height: 40px; } .billing-toggle { display: inline-flex; gap: 6px; background: rgba(15, 23, 42, .6); border: 1px solid var(--line); border-radius: 999px; padding: 6px; box-shadow: var(--shadow-sm); margin: 0 auto 32px; width: fit-content; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .billing-toggle button { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); } .billing-toggle button.active { background: linear-gradient(135deg, var(--green), #60A5FA); color: #fff; } /* Enterprise band */ .enterprise { background: linear-gradient(135deg, #0F172A 0%, #020617 100%); color: #fff; border-radius: var(--radius-xl); padding: 56px 48px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; border: 1px solid var(--line); } .enterprise::before { content: ""; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(59, 130, 246, .28), transparent 65%); border-radius: 50%; } @media (max-width: 800px) { .enterprise { grid-template-columns: 1fr; padding: 40px 28px; } } .enterprise .eyebrow { background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .32); color: #60A5FA; } .enterprise h2 { color: #fff; margin: 14px 0 14px; } .enterprise p { color: #cbd5e1; font-size: 16px; line-height: 1.7; } .enterprise .feat-list { display: grid; gap: 8px; margin-top: 22px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 600px) { .enterprise .feat-list { grid-template-columns: 1fr; } } .enterprise .feat-list span { font-size: 13.5px; color: #e2e8f0; padding-left: 22px; position: relative; } .enterprise .feat-list span::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; } .enterprise-channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .enterprise-channels span { font-size: 12.5px; padding: 6px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #e2e8f0; } /* ===================== CASE STUDIES ===================== */ .case-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 800px) { .case-grid { grid-template-columns: 1fr; } } .case { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .case .case-tag { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; background: rgba(59, 130, 246, .18); color: #60A5FA; border: 1px solid rgba(59, 130, 246, .28); border-radius: 999px; margin-bottom: 16px; } .case h3 { font-size: 20px; margin-bottom: 10px; } .case p { color: var(--muted); font-size: 14.5px; line-height: 1.65; } .case .case-stats { display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap; } .case .case-stats div b { display: block; font-size: 22px; color: #60A5FA; font-weight: 800; } .case .case-stats div span { font-size: 12px; color: var(--muted); } .outcomes { margin-top: 36px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .outcomes h4 { margin-bottom: 16px; font-size: 16px; } .outcomes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .outcomes li { padding-left: 22px; position: relative; font-size: 14.5px; color: var(--text); line-height: 1.6; } .outcomes li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green-glow); } .outcomes b { color: #fff; } /* ===================== RESOURCES ===================== */ .res-grid { display: grid; gap: 22px; grid-template-columns: 1.4fr 1fr 1fr; } @media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } } .res-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .res-card h3 { font-size: 22px; margin-bottom: 12px; } .res-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; } .res-card ul { list-style: none; padding: 0; margin: 18px 0 0; } .res-card li { padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--text); line-height: 1.55; display: flex; gap: 12px; } .res-card li:first-child { border-top: 0; } .res-card .date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #60A5FA; font-weight: 600; white-space: nowrap; flex-shrink: 0; padding-top: 2px; } .res-card .cat-row { display: flex; align-items: baseline; gap: 8px; } .res-card .count { font-size: 12px; color: var(--muted); font-weight: 600; } /* FAQ */ .faq-wrap { max-width: 820px; margin: 0 auto; } .faq-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .faq-item:hover { border-color: var(--green-tint); } .faq-item summary { list-style: none; padding: 20px 24px; font-weight: 600; color: #fff; font-size: 15.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex-shrink: 0; width: 28px; height: 28px; background: var(--green-soft); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2360A5FA' d='M4 6.5 8 10.5 12 6.5l-1-1L8 8.5 5 5.5z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; transition: transform .2s; } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-item .a { padding: 0 24px 20px; color: var(--muted); font-size: 14.5px; line-height: 1.65; } /* CTA band */ .cta-band { background: radial-gradient(50% 100% at 50% 0%, rgba(59, 130, 246, .20), transparent 70%), linear-gradient(180deg, #0F172A 0%, #020617 100%); color: #fff; text-align: center; padding: 80px 32px; border-radius: var(--radius-xl); position: relative; overflow: hidden; border: 1px solid var(--line); } .cta-band h2 { color: #fff; margin: 14px auto 14px; max-width: 720px; } .cta-band p { color: #cbd5e1; max-width: 600px; margin: 0 auto 28px; font-size: 17px; } .cta-band .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); } .cta-band .btn-ghost:hover { border-color: #fff; } /* Footer */ footer { background: #020617; color: #cbd5e1; padding: 64px 0 24px; margin-top: 0; border-top: 1px solid var(--line); } .foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 36px; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 500px) { .foot-grid { grid-template-columns: 1fr; } } footer .brand { color: #fff; } footer h5 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 16px; } footer ul { list-style: none; padding: 0; margin: 0; } footer li { padding: 5px 0; font-size: 14px; } footer a:hover { color: #fff; } .foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #94a3b8; } .foot-tag { margin-top: 16px; font-size: 14px; color: #94a3b8; line-height: 1.6; max-width: 280px; } .ico { width: 24px; height: 24px; } /* Tool page (chat button / qr) */ .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } @media (max-width: 800px) { .tool-grid { grid-template-columns: 1fr; } } .tool-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .tool-card h3 { margin-bottom: 16px; color: #fff; } .tool-card label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 600; } .tool-card input, .tool-card select, .tool-card textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; color: #fff; background: rgba(2, 6, 23, 0.6); } .tool-card input:focus, .tool-card select:focus, .tool-card textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); } .tool-preview { background: rgba(2, 6, 23, 0.6); border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 32px; min-height: 320px; display: grid; place-items: center; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { .float-card { animation: none; } * { transition: none !important; } } /* ================================================================= UI v2 — polish layer (added after base styles, overrides on purpose) ================================================================= */ /* Soft global wash so sections breathe with deep navy gradient */ body { background: linear-gradient(180deg, #020617 0%, #0a0f1f 100%); color: var(--text); min-height: 100vh; } /* Eyebrow refinement — soft blue pill with glow */ .eyebrow { background: linear-gradient(180deg, rgba(15, 23, 42, .6), rgba(59, 130, 246, .10)); border: 1px solid var(--green-tint); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 4px rgba(59, 130, 246, .06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Hero chips — depth + crisp hover */ .hero-chips .chip { background: rgba(15, 23, 42, .7); backdrop-filter: blur(8px); border-color: var(--green-tint); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .hero-chips .chip:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 8px 18px rgba(59, 130, 246, .22); color: #fff; } .hero-chips .chip::before { box-shadow: 0 0 0 3px rgba(59, 130, 246, .28); animation: chip-pulse 2.4s ease-in-out infinite; } @keyframes chip-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, .28); } 50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, .08); } } /* Phone mockup — soft halo + sharper shadow */ .hero-art .phone { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 18px 36px -12px rgba(59, 130, 246, .28), 0 0 0 12px rgba(59, 130, 246, .06); } .hero-art::before { content: ""; position: absolute; inset: 8% 12% 8% 12%; background: radial-gradient(closest-side, rgba(56, 189, 248, .30), transparent 70%); filter: blur(40px); z-index: 0; pointer-events: none; } .hero-art>* { position: relative; z-index: 1; } /* Float cards — dark glass with crisper hover */ .float-card { background: linear-gradient(180deg, rgba(15, 23, 42, .85) 0%, rgba(15, 23, 42, .7) 100%); border-color: var(--green-tint); box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .55); transition: transform .3s var(--ease), box-shadow .3s var(--ease); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .float-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 44px -14px rgba(59, 130, 246, .40); } /* Section dividers — replace hard borders with soft gradient seams */ .alt { background: linear-gradient(180deg, #020617 0%, rgba(15, 23, 42, .6) 50%, #020617 100%); position: relative; } section { position: relative; } /* Card uplift — applies to feat / case / sol-card / plan / res-card / tool-card */ .feat, .case, .sol-card, .plan, .res-card, .tool-card { position: relative; background: linear-gradient(rgba(15, 23, 42, .55), rgba(15, 23, 42, .55)) padding-box, linear-gradient(180deg, var(--line) 0%, var(--line) 100%) border-box; border: 1px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .feat:hover, .case:hover, .sol-card:hover, .res-card:hover, .tool-card:hover { background: linear-gradient(rgba(15, 23, 42, .7), rgba(15, 23, 42, .7)) padding-box, linear-gradient(135deg, var(--green) 0%, #60A5FA 100%) border-box; box-shadow: 0 18px 36px -16px rgba(59, 130, 246, .40); transform: translateY(-4px); } /* Featured plan — slight glow ring on hover */ .plan.featured:hover { box-shadow: 0 22px 44px -16px rgba(59, 130, 246, .50), 0 0 0 4px rgba(59, 130, 246, .22); } /* Section heading — balance and tighter h2 */ .section-head h2, .hero h1, .page-banner h1, .cta-band h2 { text-wrap: balance; letter-spacing: -.02em; } /* Gradient text utility — richer animated blue/cyan gradient */ .grad { background: linear-gradient(120deg, #2563EB 0%, #38BDF8 35%, #60A5FA 70%, #2563EB 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: grad-slide 9s ease-in-out infinite; } @keyframes grad-slide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @media (prefers-reduced-motion: reduce) { .grad { animation: none; } } /* CTA band — deep navy with blue glow */ .cta-band { background: radial-gradient(60% 100% at 50% 0%, rgba(56, 189, 248, .28), transparent 70%), radial-gradient(40% 80% at 100% 100%, rgba(59, 130, 246, .20), transparent 70%), linear-gradient(180deg, #0F172A 0%, #020617 100%); } /* Story / enterprise dark cards — richer ambient glow */ .story, .enterprise { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); } /* Footer — ink with a blue seam on the top edge */ footer { position: relative; } footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, #38BDF8 30%, var(--green) 70%, transparent 100%); opacity: .65; } /* Focus rings — accessible blue */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(59, 130, 246, .55); outline-offset: 2px; border-radius: 8px; } /* Scroll reveal — used by partials.js IntersectionObserver hook */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Smooth scrolling for in-page anchors */ html { scroll-behavior: smooth; } /* Selection */ ::selection { background: rgba(59, 130, 246, .40); color: #fff; } /* Custom scrollbar (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #020617; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--green), #60A5FA); border-radius: 8px; border: 2px solid #020617; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #60A5FA, var(--green)); } /* ===================== AI AGENTS ===================== */ .agent-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .agent-grid { grid-template-columns: 1fr; } } .agent-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .agent-card:hover { transform: translateY(-4px); border-color: var(--green-tint); box-shadow: var(--shadow-md); } .agent-card .icon-tile { width: 52px; height: 52px; background: var(--green-soft); border: 1px solid var(--green-tint); border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; color: #60A5FA; } .agent-card h3 { font-size: 22px; margin-bottom: 10px; } .agent-card p { color: var(--muted); font-size: 15px; line-height: 1.65; } /* ===================== HOW IT WORKS STEPS ===================== */ .steps-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } } .step-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .step-card:hover { background: linear-gradient(rgba(15, 23, 42, .7), rgba(15, 23, 42, .7)) padding-box, linear-gradient(135deg, var(--green) 0%, #60A5FA 100%) border-box; box-shadow: 0 18px 36px -16px rgba(59, 130, 246, .40); transform: translateY(-4px); } .step-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-tint); border-radius: 999px; padding: 6px 14px; display: inline-block; margin-bottom: 18px; } .step-card h3 { font-size: 22px; margin-bottom: 10px; } .step-card p { color: var(--muted); font-size: 15px; line-height: 1.65; } /* ===================== COMPARISON ===================== */ .compare-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } @media (max-width: 800px) { .compare-wrap { grid-template-columns: 1fr; } } .compare-col { display: flex; flex-direction: column; } .compare-col.compare-us { background: linear-gradient(180deg, rgba(59, 130, 246, .10) 0%, rgba(15, 23, 42, .4) 100%); border-left: 1px solid var(--line); } @media (max-width: 800px) { .compare-col.compare-us { border-left: none; border-top: 1px solid var(--line); } } .compare-header { padding: 18px 24px; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; background: rgba(15, 23, 42, .8); border-bottom: 1px solid var(--line); color: #fff; } .compare-us .compare-header { color: var(--green); background: rgba(59, 130, 246, .12); } .compare-row { padding: 16px 24px; font-size: 14.5px; line-height: 1.6; color: var(--muted); border-bottom: 1px solid var(--line-2); flex: 1; display: flex; align-items: center; } .compare-row:last-child { border-bottom: none; } .compare-us .compare-row { color: var(--text-2); } /* ===================== TESTIMONIALS ===================== */ .testimonial-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } } .testimonial-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .testimonial-card:hover { transform: translateY(-4px); border-color: var(--green-tint); box-shadow: var(--shadow-md); } .testimonial-card .stars { color: #fbbf24; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; } .testimonial-card>p { color: var(--text); font-size: 15px; line-height: 1.65; margin-bottom: 20px; } .testimonial-card .who { display: flex; align-items: center; gap: 12px; } .testimonial-card .who .av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(59, 130, 246, .35); } .testimonial-card .who .av img { width: 100%; height: 100%; object-fit: cover; display: block; } .testimonial-card .who strong { display: block; font-size: 14px; color: #fff; } .testimonial-card .who span { display: block; font-size: 13px; color: var(--muted); } /* ===================== FORM STYLES ===================== */ input, select, textarea { width: 100%; max-width: 100%; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--line); border-radius: var(--radius); color: #fff; padding: 14px 16px; font-family: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; margin-bottom: 20px; box-sizing: border-box; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); } /* Custom dropdown arrow for standard select */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; } select[multiple] { background-image: none; padding-right: 16px; } /* Style option text so native Desktop select dropdowns are legible */ select option { background: #0f172a; color: #fff; padding: 8px; } label { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } /* ===================== CUSTOM SELECT UI ===================== */ .custom-select-wrapper { position: relative; width: 100%; margin-bottom: 20px; user-select: none; } .custom-select-trigger { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--line); border-radius: var(--radius); color: #fff; padding: 14px 16px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .custom-select-trigger:hover { border-color: rgba(56, 189, 248, 0.5); } .custom-select-wrapper.open .custom-select-trigger { border-color: var(--green); box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); } .custom-select-wrapper.open .custom-select-trigger svg { transform: rotate(180deg); } .custom-select-options { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #0F172A; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); max-height: 260px; overflow-y: auto; z-index: 99; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .custom-select-wrapper.open .custom-select-options { opacity: 1; pointer-events: all; transform: translateY(0); } .custom-select-option { padding: 12px 16px; color: var(--muted-2); font-size: 14.5px; cursor: pointer; transition: background 0.15s, color 0.15s; } .custom-select-option:hover { background: rgba(59, 130, 246, .15); color: #fff; } .custom-select-option.selected { background: rgba(59, 130, 246, .25); color: var(--green); font-weight: 600; } /* ================================================================= GLOBAL RESPONSIVE ADJUSTMENTS (Tab, Mobile, Desktop, Bigscreen) ================================================================= */ @media (max-width: 600px) { /* Reduce padding on major blocks for mobile screens */ .feat, .case, .sol-card, .plan, .res-card, .tool-card, .agent-card, .step-card, .testimonial-card { padding: 24px 20px; } .story { padding: 24px; } .enterprise { padding: 32px 20px; } .cta-band { padding: 48px 20px; } .perf-band, .why-band { padding: 24px 20px; } /* Tighter hero sections */ .hero { padding: 48px 0 40px; } .page-banner { padding: 40px 0 32px; } /* Force CTA buttons to remain side-by-side on mobile with responsive spacing */ .cta-row, .hero-ctas { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 8px !important; width: 100% !important; margin-top: 16px !important; } .cta-row .btn, .hero-ctas .btn { flex: 1 1 0% !important; min-width: 0 !important; justify-content: center !important; padding: 10px 6px !important; font-size: 12.5px !important; white-space: nowrap !important; letter-spacing: -0.3px !important; } /* Force grids and sections below the buttons to display side-by-side */ .sol-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .sol-card, .sol-card.span-3, .sol-card.span-4, .sol-card.span-6 { grid-column: span 1 !important; padding: 18px 14px !important; } .sol-card.span-12 { grid-column: span 2 !important; padding: 24px 18px !important; } .sol-card h3 { font-size: 15px !important; } .sol-card p { font-size: 12px !important; line-height: 1.4 !important; } .sub-feat-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 16px !important; } .sub-feat { padding: 12px 14px !important; } .sub-feat h4 { font-size: 14px !important; } .sub-feat p { font-size: 12px !important; } .feat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 32px !important; } .feat { padding: 16px 12px !important; } .feat h4 { font-size: 13px !important; } .feat p { font-size: 11.5px !important; line-height: 1.4 !important; } /* Stories side-by-side layout on mobile */ .story { grid-template-columns: 1.1fr 0.9fr !important; gap: 12px !important; padding: 18px 14px !important; margin-bottom: 32px !important; } .story p { font-size: 12.5px !important; line-height: 1.4 !important; } .story .who { gap: 8px !important; margin-top: 12px !important; } .story .who .av { width: 32px !important; height: 32px !important; } .story .who strong { font-size: 12px !important; } .story .who span { font-size: 10.5px !important; } .story-stats { gap: 8px !important; } .story-stat { padding: 10px 8px !important; } .story-stat .num { font-size: 18px !important; font-weight: 700 !important; } .story-stat .lbl { font-size: 10.5px !important; margin-top: 2px !important; } /* Quick nav chips / pill buttons displayed side-by-side in 2 columns on mobile */ .hero-chips { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; width: 100% !important; margin-top: 16px !important; } .hero-chips .chip { display: inline-flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; padding: 8px 4px !important; font-size: 11px !important; white-space: nowrap !important; width: 100% !important; box-sizing: border-box !important; } /* Slightly smaller typography */ h1 { font-size: 32px; } h2 { font-size: 26px; } /* Provide max width on containers */ .container { padding: 0 16px; } } @media (min-width: 1440px) { /* Beautifully scale up for large monitors/big screens */ .container { max-width: 1320px; } h1 { font-size: 72px; } h2 { font-size: 48px; } .hero { padding: clamp(80px, 8vw, 120px) 0 clamp(60px, 7vw, 100px); } .page-banner { padding: 80px 0 56px; } } /* ========================================================== THEME TOGGLE - Pill Switch ========================================================== */ .theme-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border-radius: 999px; background: transparent; border: none; cursor: pointer; font-family: inherit; } .theme-label-light, .theme-label-dark { font-size: 13px; font-weight: 600; transition: color .2s; user-select: none; } /* Dark mode labels */ [data-theme="dark"] .theme-label-light, :root:not([data-theme="light"]) .theme-label-light { color: rgba(255, 255, 255, 0.35); } [data-theme="dark"] .theme-label-dark, :root:not([data-theme="light"]) .theme-label-dark { color: #fff; } /* Light mode labels */ [data-theme="light"] .theme-label-light { color: #111827; } [data-theme="light"] .theme-label-dark { color: rgba(0, 0, 0, 0.25); } /* Switch track */ .theme-switch-track { position: relative; width: 56px; height: 32px; border-radius: 999px; background: #1e1e2e; border: 2px solid #2a2a3e; transition: background .3s, border-color .3s; display: flex; align-items: center; padding: 0 4px; } /* Light mode track */ [data-theme="light"] .theme-switch-track { background: #60A5FA; border-color: #3B82F6; } /* Switch thumb */ .theme-switch-thumb { position: absolute; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.22, .7, .22, 1); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); } /* Light mode thumb position */ [data-theme="light"] .theme-switch-thumb { transform: translateX(24px); } /* Icons inside thumb */ .theme-switch-thumb svg { width: 14px; height: 14px; position: absolute; transition: opacity .2s, transform .2s; } /* Moon icon (dark mode) */ .theme-icon-moon { color: #1e1e2e; opacity: 1; transform: scale(1); } [data-theme="light"] .theme-icon-moon { opacity: 0; transform: scale(0.5); } /* Sun icon (light mode) */ .theme-icon-sun { color: #F59E0B; opacity: 0; transform: scale(0.5); } [data-theme="light"] .theme-icon-sun { opacity: 1; transform: scale(1); } /* ========================================================== LIGHT THEME — Component Overrides These rules live at the end so they override base styles. ========================================================== */ /* Body & page background */ [data-theme="light"] body { background: linear-gradient(180deg, #FAFBFC 0%, #F1F3F5 100%); color: var(--text); } /* Navigation */ [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0 rgba(15, 98, 254, .06), 0 2px 8px rgba(0, 0, 0, .08); } [data-theme="light"] .nav-links>li>a:hover, [data-theme="light"] .nav-links>li>button:hover { color: var(--text); background: rgba(0, 0, 0, .04); } [data-theme="light"] .nav-links>li.is-current>a { color: var(--text); } [data-theme="light"] .nav-cta .login:hover { background: rgba(0, 0, 0, .04); } [data-theme="light"] .dropdown { background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15); } [data-theme="light"] .dropdown a:hover { background: rgba(0, 0, 0, .03); } [data-theme="light"] .dropdown a strong { color: var(--text); } [data-theme="light"] .mobile-menu { background: #FAFBFC; } [data-theme="light"] .mobile-menu summary { color: var(--text); } [data-theme="light"] .mobile-menu .sub a { color: var(--text-2); } [data-theme="light"] .mobile-menu>a { color: var(--text); } /* Hero */ [data-theme="light"] .hero { background: radial-gradient(42% 50% at 88% 12%, rgba(15, 98, 254, .08), transparent 60%), radial-gradient(38% 46% at 8% 88%, rgba(56, 189, 248, .08), transparent 60%), radial-gradient(30% 40% at 50% 50%, rgba(15, 98, 254, .04), transparent 70%), linear-gradient(180deg, #FAFBFC 0%, #F1F3F5 100%); } [data-theme="light"] .hero::before { background: radial-gradient(circle, rgba(15, 98, 254, .20), transparent 70%); } [data-theme="light"] .hero::after { background: radial-gradient(circle, rgba(56, 189, 248, .18), transparent 70%); } /* Buttons */ [data-theme="light"] .btn-primary { background: linear-gradient(to right, var(--primary), #60A5FA); color: #fff; box-shadow: 0 8px 20px rgba(15, 98, 254, .20), inset 0 1px 0 rgba(255, 255, 255, .10); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 14px 28px rgba(15, 98, 254, .30), inset 0 1px 0 rgba(255, 255, 255, .12); background: linear-gradient(to right, var(--primary-hover), var(--primary)); } [data-theme="light"] .btn-green { background: linear-gradient(180deg, #2563EB 0%, var(--primary) 55%, var(--primary-hover) 100%); color: #fff; box-shadow: 0 10px 28px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .25); } [data-theme="light"] .btn-green:hover { background: linear-gradient(180deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%); box-shadow: 0 14px 32px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .3); } [data-theme="light"] .btn-ghost { border: 1.5px solid rgba(0, 0, 0, .12); color: var(--text); } [data-theme="light"] .btn-ghost:hover { border-color: var(--primary); color: var(--text); background: rgba(15, 98, 254, .06); } [data-theme="light"] .btn-link { color: #0F62FE; } [data-theme="light"] .btn-link:hover { color: var(--text); } /* Chips */ [data-theme="light"] .chip { background: rgba(241, 243, 245, .7); border: 1px solid var(--line); color: var(--text); } [data-theme="light"] .chip:hover { border-color: var(--primary); color: var(--text); } /* Trust strip */ [data-theme="light"] .trust { border-top: 1px solid var(--primary-tint); border-bottom: 1px solid var(--primary-tint); background: linear-gradient(180deg, #FAFBFC 0%, rgba(241, 243, 245, 0.6) 100%); } [data-theme="light"] .trust-label { color: #0F62FE; } [data-theme="light"] .trust-label::before { background: linear-gradient(90deg, transparent, var(--primary-tint)); } [data-theme="light"] .trust-label::after { background: linear-gradient(90deg, var(--primary-tint), transparent); } [data-theme="light"] .trust-row span { color: #374151; background: rgba(241, 243, 245, 0.6); border: 1px solid var(--primary-tint); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } [data-theme="light"] .trust-row span:hover { border-color: var(--primary); box-shadow: 0 6px 14px var(--primary-glow); color: var(--text); } [data-theme="light"] .trust-row span::before { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 0 0 3px rgba(15, 98, 254, .12); } /* Cards — feat, case, sol-card, plan, res-card, tool-card */ [data-theme="light"] .feat, [data-theme="light"] .case, [data-theme="light"] .sol-card, [data-theme="light"] .plan, [data-theme="light"] .res-card, [data-theme="light"] .tool-card, [data-theme="light"] .agent-card, [data-theme="light"] .step-card, [data-theme="light"] .testimonial-card { background: linear-gradient(rgba(255, 255, 255, .90), rgba(255, 255, 255, .90)) padding-box, linear-gradient(180deg, var(--line) 0%, var(--line) 100%) border-box; border: 1px solid transparent; } [data-theme="light"] .feat:hover, [data-theme="light"] .case:hover, [data-theme="light"] .sol-card:hover, [data-theme="light"] .res-card:hover, [data-theme="light"] .tool-card:hover { background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) padding-box, linear-gradient(135deg, var(--primary) 0%, #60A5FA 100%) border-box; box-shadow: 0 18px 36px -16px rgba(15, 98, 254, .15); } [data-theme="light"] .feat .micro { color: #0F62FE; } /* Dark card variant */ [data-theme="light"] .sol-card.dark { background: #F1F3F5; color: #111827; border-color: transparent; } [data-theme="light"] .sol-card.dark p, [data-theme="light"] .sol-card.dark li { color: #374151; } [data-theme="light"] .sol-card.dark h3, [data-theme="light"] .sol-card.dark h4 { color: #111827; } [data-theme="light"] .sol-card.dark .icon-tile { background: rgba(15, 98, 254, .10); border-color: rgba(15, 98, 254, .20); color: #0F62FE; } /* Story / enterprise cards */ [data-theme="light"] .story { background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%); color: #111827; border: 1px solid var(--line); } [data-theme="light"] .story::before { background: radial-gradient(circle, rgba(15, 98, 254, .15), transparent 70%); } [data-theme="light"] .story p { color: #374151; } [data-theme="light"] .story .who strong { color: #111827; } [data-theme="light"] .story .who span { color: #6B7280; } [data-theme="light"] .story-stat { background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .06); } [data-theme="light"] .story-stat .lbl { color: #6B7280; } [data-theme="light"] .enterprise { background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%); color: #111827; border: 1px solid var(--line); } [data-theme="light"] .enterprise::before { background: radial-gradient(circle, rgba(15, 98, 254, .15), transparent 65%); } [data-theme="light"] .enterprise h2 { color: #111827; } [data-theme="light"] .enterprise p { color: #374151; } [data-theme="light"] .enterprise .feat-list span { color: #374151; } [data-theme="light"] .enterprise-channels span { background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .08); color: #374151; } /* Performance band */ [data-theme="light"] .perf-band { background: linear-gradient(135deg, rgba(15, 98, 254, .04) 0%, rgba(241, 243, 245, 0.4) 100%); border: 1px solid var(--primary-tint); } [data-theme="light"] .perf-item { background: rgba(255, 255, 255, 0.80); border: 1px solid var(--primary-tint); } [data-theme="light"] .perf-item .num { color: #0F62FE; } /* Pricing */ [data-theme="light"] .plan.featured { border-color: var(--primary); background: linear-gradient(180deg, rgba(15, 98, 254, .08) 0%, rgba(241, 243, 245, .6) 30%); box-shadow: var(--shadow-md), 0 0 0 4px rgba(15, 98, 254, .10); } [data-theme="light"] .plan.featured:hover { box-shadow: 0 22px 44px -16px rgba(15, 98, 254, .20), 0 0 0 4px rgba(15, 98, 254, .15); } [data-theme="light"] .plan-price .amount { color: #111827; } [data-theme="light"] .plan li b { color: #111827; } [data-theme="light"] .billing-toggle { background: rgba(241, 243, 245, .8); border: 1px solid var(--line); } /* Case studies */ [data-theme="light"] .case .case-tag { background: rgba(15, 98, 254, .08); color: #0F62FE; border: 1px solid rgba(15, 98, 254, .15); } [data-theme="light"] .case .case-stats div b { color: #0F62FE; } [data-theme="light"] .outcomes li::before { box-shadow: 0 0 8px rgba(15, 98, 254, .20); } /* CTA band */ [data-theme="light"] .cta-band { background: radial-gradient(60% 100% at 50% 0%, rgba(15, 98, 254, .10), transparent 70%), radial-gradient(40% 80% at 100% 100%, rgba(56, 189, 248, .08), transparent 70%), linear-gradient(180deg, #F8FAFC 0%, #F1F3F5 100%); border: 1px solid var(--line); } [data-theme="light"] .cta-band h2 { color: #111827; } [data-theme="light"] .cta-band p { color: #374151; } [data-theme="light"] .cta-band .btn-ghost { border-color: rgba(0, 0, 0, .20); color: #111827; } [data-theme="light"] .cta-band .btn-ghost:hover { border-color: #111827; } /* Footer */ [data-theme="light"] footer { background: #FAFBFC; color: #6B7280; border-top: 1px solid var(--line); } [data-theme="light"] footer h5 { color: #111827; } [data-theme="light"] footer a:hover { color: #111827; } [data-theme="light"] .foot-bottom { border-top: 1px solid rgba(0, 0, 0, .08); color: #6B7280; } [data-theme="light"] .foot-tag { color: #6B7280; } [data-theme="light"] footer::before { opacity: .35; } /* Tool cards / forms */ [data-theme="light"] .tool-card h3 { color: #111827; } [data-theme="light"] .tool-card input, [data-theme="light"] .tool-card select, [data-theme="light"] .tool-card textarea { color: #111827; background: #FFFFFF; border: 1px solid var(--line); } [data-theme="light"] .tool-card input:focus, [data-theme="light"] .tool-card select:focus, [data-theme="light"] .tool-card textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 98, 254, .15); } [data-theme="light"] .tool-preview { background: #F8FAFC; border: 1px dashed var(--line); } /* Global form inputs */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #FFFFFF; border: 1px solid var(--line); color: #111827; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 98, 254, .15); } [data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); } [data-theme="light"] select option { background: #FFFFFF; color: #111827; } [data-theme="light"] label { color: var(--muted); } /* Custom select */ [data-theme="light"] .custom-select-trigger { background: #FFFFFF; border: 1px solid var(--line); color: #111827; } [data-theme="light"] .custom-select-trigger:hover { border-color: rgba(15, 98, 254, 0.4); } [data-theme="light"] .custom-select-wrapper.open .custom-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 98, 254, .15); } [data-theme="light"] .custom-select-options { background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); } [data-theme="light"] .custom-select-option { color: #6B7280; } [data-theme="light"] .custom-select-option:hover { background: rgba(15, 98, 254, .06); color: #111827; } [data-theme="light"] .custom-select-option.selected { background: rgba(15, 98, 254, .10); color: var(--primary); } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: #F1F3F5; } [data-theme="light"] ::-webkit-scrollbar-thumb { border: 2px solid #F1F3F5; } /* Selection */ [data-theme="light"] ::selection { background: rgba(15, 98, 254, .20); color: #111827; } /* Focus rings */ [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible, [data-theme="light"] .btn:focus-visible, [data-theme="light"] input:focus-visible, [data-theme="light"] select:focus-visible, [data-theme="light"] textarea:focus-visible, [data-theme="light"] summary:focus-visible { outline: 3px solid rgba(15, 98, 254, .35); } /* Float cards */ [data-theme="light"] .float-card { background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .90) 100%); border-color: var(--line); box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .12); } [data-theme="light"] .float-card:hover { box-shadow: 0 22px 44px -14px rgba(15, 98, 254, .18); } [data-theme="light"] .float-card strong { color: #111827; } [data-theme="light"] .float-card span { color: #6B7280; } /* Demo tabs (from index.html inline styles) */ [data-theme="light"] .demo-content { background: linear-gradient(180deg, rgba(241, 243, 245, .6) 0%, rgba(250, 251, 252, .4) 100%); border: 1px solid var(--line); } [data-theme="light"] .demo-tab { background: rgba(241, 243, 245, .5); color: var(--muted); } [data-theme="light"] .demo-tab:hover { color: var(--text); background: rgba(241, 243, 245, .8); } [data-theme="light"] .demo-tab.active { border-color: var(--primary-tint); background: rgba(15, 98, 254, .06); color: var(--text); box-shadow: 0 0 20px rgba(15, 98, 254, .06); } [data-theme="light"] .demo-media { background: rgba(250, 251, 252, .5); border: 1px solid var(--line); } /* Currency toggle (from index.html inline styles) */ [data-theme="light"] .currency-toggle { background: linear-gradient(135deg, #F1F3F5, #E5E7EB); border: 1px solid var(--line); } [data-theme="light"] .currency-toggle button.active { background: var(--primary); color: #fff; box-shadow: 0 2px 12px var(--primary-glow); } /* Step cards */ [data-theme="light"] .step-card:hover { background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) padding-box, linear-gradient(135deg, var(--primary) 0%, #60A5FA 100%) border-box; box-shadow: 0 18px 36px -16px rgba(15, 98, 254, .15); } /* Comparison table */ [data-theme="light"] .compare-wrap { border: 1px solid var(--line); } [data-theme="light"] .compare-col.compare-us { background: linear-gradient(180deg, rgba(15, 98, 254, .04) 0%, rgba(250, 251, 252, .4) 100%); border-left: 1px solid var(--line); } [data-theme="light"] .compare-header { background: rgba(241, 243, 245, .8); border-bottom: 1px solid var(--line); color: #111827; } [data-theme="light"] .compare-us .compare-header { color: var(--primary); background: rgba(15, 98, 254, .06); } [data-theme="light"] .compare-row { color: var(--muted); border-bottom: 1px solid var(--line-2); } [data-theme="light"] .compare-us .compare-row { color: var(--text-2); } /* Testimonials */ [data-theme="light"] .testimonial-card .who strong { color: #111827; } /* FAQ */ [data-theme="light"] .faq-item summary { color: #111827; } [data-theme="light"] .faq-item .a { color: #6B7280; } /* Page banner */ [data-theme="light"] .page-banner .crumb a { color: #0F62FE; } [data-theme="light"] .page-banner .crumb a:hover { color: #111827; } /* Channel art / why band */ [data-theme="light"] .channel-art { background: linear-gradient(135deg, rgba(241, 243, 245, 0.6) 0%, rgba(241, 243, 245, 0.3) 100%); border: 1px solid var(--primary-tint); } [data-theme="light"] .why-band { background: linear-gradient(135deg, rgba(241, 243, 245, 0.6) 0%, rgba(241, 243, 245, 0.3) 100%); border: 1px solid var(--line); } /* Sub-features */ [data-theme="light"] .sub-feat { background: rgba(0, 0, 0, .03); border: 1px solid rgba(0, 0, 0, .06); } [data-theme="light"] .sub-feat h4 { color: #111827; } [data-theme="light"] .sub-feat p { color: #6B7280; } /* Alt sections */ [data-theme="light"] section.alt { background: linear-gradient(180deg, #FAFBFC 0%, rgba(241, 243, 245, .6) 50%, #FAFBFC 100%); } /* Hero art phone shadow (keep subtle in light) */ [data-theme="light"] .hero-art .phone { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .15), 0 18px 36px -12px rgba(15, 98, 254, .10), 0 0 0 12px rgba(15, 98, 254, .03); } [data-theme="light"] .hero-art::before { background: radial-gradient(closest-side, rgba(15, 98, 254, .12), transparent 70%); } /* Tablet mockup — keep dark (it's a device) */ [data-theme="light"] .tablet-bezel { background: #1a1a2e; border-color: #2a2a3e; } [data-theme="light"] .tablet-home-btn { background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%); border-color: #3a3a4e; } /* Eyebrow refinement */ [data-theme="light"] .eyebrow { background: linear-gradient(180deg, rgba(241, 243, 245, .6), rgba(15, 98, 254, .06)); border: 1px solid var(--primary-tint); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 4px rgba(15, 98, 254, .04); } /* Gradient text — works in both themes */ [data-theme="light"] .grad { background: linear-gradient(135deg, #1e40af 0%, #2563eb 25%, #0ea5e9 50%, #2563eb 75%, #1e40af 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; display: inline; } /* Agent cards */ [data-theme="light"] .agent-card .icon-tile { color: #0F62FE; } /* Res card date */ [data-theme="light"] .res-card .date { color: #0F62FE; } /* Outcomes */ [data-theme="light"] .outcomes b { color: #111827; } /* Sol card more link */ [data-theme="light"] .sol-card .more { color: #0F62FE; } [data-theme="light"] .sol-card .more:hover { color: #111827; } /* Plan checkmark background */ [data-theme="light"] .plan li::before { background: var(--primary-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230F62FE' d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 4.5-4.5L12 5.6z'/%3E%3C/svg%3E"); } /* FAQ chevron */ [data-theme="light"] .faq-item summary::after { background: var(--primary-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230F62FE' d='M4 6.5 8 10.5 12 6.5l-1-1L8 8.5 5 5.5z'/%3E%3C/svg%3E"); } /* Brand text gradient (header) */ [data-theme="light"] .brand .brand-text, html:not([data-theme="dark"]) .brand .brand-text { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #0F62FE !important; text-shadow: 0 0 24px rgba(15, 98, 254, .15) !important; font-weight: 800; letter-spacing: 0.12em; height: auto; min-height: 38px; padding-top: 2px; overflow: visible; line-height: 1.2; animation: brand-grad-slide 4s linear infinite; } /* Footer brand text */ [data-theme="light"] footer .brand-text { background: linear-gradient(120deg, #dbeafe 0%, #93c5fd 30%, #0F62FE 60%, #111827 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 24px rgba(15, 98, 254, .12); } /* Nav current indicator */ [data-theme="light"] .nav-links>li.is-current>a::after, [data-theme="light"] .nav-links>li.is-current>button::after { background: var(--primary); } /* Dropdown icon tiles */ [data-theme="light"] .dropdown a .ico-tile { color: #0F62FE; } /* Float card icons */ [data-theme="light"] .float-card.fc-2 .icon { background: #eef2ff; color: #4f46e5; } [data-theme="light"] .float-card.fc-3 .icon { background: #fef3c7; color: #b45309; } /* Mobile menu buttons */ [data-theme="light"] .mobile-menu .actions .btn-green { background: linear-gradient(180deg, #60A5FA 0%, var(--primary) 55%, var(--primary-hover) 100%); } /* Menu button */ [data-theme="light"] .menu-btn { color: var(--text); } /* Section headings */ [data-theme="light"] .section-head p { color: var(--muted); } /* Channel hero */ [data-theme="light"] .channel-hero .lead { color: var(--muted); } /* Story quote mark */ [data-theme="light"] .story .quote-mark { color: var(--primary); } /* Enterprise eyebrow */ [data-theme="light"] .enterprise .eyebrow { background: rgba(15, 98, 254, .08); border-color: rgba(15, 98, 254, .18); color: #0F62FE; } /* CTA band heading span */ [data-theme="light"] .cta-band h2 span { color: var(--primary); } /* Pricing eyebrow */ [data-theme="light"] .pricing .eyebrow, [data-theme="light"] [class*="pricing"] .eyebrow { color: var(--primary-hover); } /* Comparison column */ @media (max-width: 800px) { [data-theme="light"] .compare-col.compare-us { border-left: none; border-top: 1px solid var(--line); } } /* Testimonial stars (keep amber) */ [data-theme="light"] .testimonial-card .stars { color: #fbbf24; } /* Scrollbar thumb hover */ [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #60A5FA, var(--primary)); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { [data-theme="light"] .brand .brand-text, html:not([data-theme="dark"]) .brand .brand-text { animation: none; background-position: 50% 50%; } }