/* ========================================================= Homepage Rebuild (single source of truth) Scope: only ========================================================= */ /* ============== Design Tokens ============== */ body.homepage { --home-primary: #3b82f6; --home-secondary: #22d3ee; --home-accent: #2563eb; --home-bg: #050b1a; --home-bg-soft: #0a1328; --home-surface: #0d1a34; --home-surface-2: #0f2245; --home-card: rgba(16, 31, 61, 0.78); --home-card-strong: rgba(17, 36, 74, 0.94); --home-border: rgba(101, 146, 255, 0.28); --home-border-strong: rgba(122, 167, 255, 0.48); --home-text: #f3f7ff; --home-text-soft: #a9bfde; --home-text-muted: #8da4c6; --home-cta: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #0891b2 100%); --home-cta-hover: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #06b6d4 100%); --home-glow: 0 14px 36px rgba(32, 110, 245, 0.36); --home-shadow: 0 20px 44px rgba(2, 8, 24, 0.46); --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --fs-body: 16px; --fs-body-sm: 14px; --fs-btn: 15px; background: radial-gradient(920px 460px at -8% -8%, rgba(39, 102, 235, 0.2), transparent 70%), radial-gradient(920px 520px at 108% -16%, rgba(13, 148, 216, 0.16), transparent 74%), linear-gradient(180deg, #050b1a 0%, #071129 45%, #050a18 100%); color: var(--home-text); } body.homepage section { padding: 96px 0; } body.homepage .header { background: rgba(7, 16, 36, 0.8); border-bottom: 1px solid var(--home-border); backdrop-filter: blur(14px) saturate(130%); } body.homepage .header.scrolled { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } body.homepage .brand, body.homepage .nav a, body.homepage .check-item, body.homepage .section-head h2, body.homepage h1 { color: var(--home-text); } body.homepage .hero-left h1 { max-width: 15ch; text-wrap: balance; } body.homepage .section-head h2 { max-width: 16ch; text-wrap: balance; } body.homepage .nav a:hover, body.homepage .nav a[aria-current="page"] { color: #fff; background: rgba(59, 130, 246, 0.16); } body.homepage .hero { padding: 132px 0 104px; min-height: calc(100vh - 66px); background: radial-gradient(760px 300px at 84% -2%, rgba(30, 83, 208, 0.32), transparent 72%), radial-gradient(800px 320px at 6% 12%, rgba(13, 148, 216, 0.18), transparent 78%), linear-gradient(180deg, #07112a 0%, #091833 44%, #070f24 100%); } body.homepage .hero-badge, body.homepage .hero-account { border: 1px solid var(--home-border); background: rgba(12, 26, 54, 0.72); color: var(--home-text-soft); } body.homepage .hero-desc, body.homepage .section-desc, body.homepage .stat-label, body.homepage .faq-answer p { color: var(--home-text-soft); } body.homepage .head-line { background: linear-gradient(90deg, #22d3ee, #3b82f6, #2563eb); } body.homepage .btn-primary { color: #fff; border-color: rgba(114, 169, 255, 0.2); background: var(--home-cta); box-shadow: var(--home-glow); } body.homepage .btn { min-height: 48px; min-width: 152px; border-radius: 12px; padding: 0 var(--space-3); font-size: var(--fs-btn); } body.homepage .btn-lg { min-height: 56px; min-width: 184px; padding: 0 var(--space-4); font-size: var(--fs-body); } body.homepage .hero-actions .btn { min-width: 176px; } body.homepage .cta-v2-actions .btn { min-width: 208px; } body.homepage .btn-full { min-width: 0; } body.homepage .btn-primary:hover { background: var(--home-cta-hover); } body.homepage .btn-outline { color: var(--home-text); border-color: var(--home-border); background: rgba(11, 25, 51, 0.62); } body.homepage .btn-outline:hover { color: #fff; border-color: var(--home-border-strong); background: rgba(37, 99, 235, 0.16); } body.homepage .faq, body.homepage .pricing-private { background: transparent; } body.homepage .hero .platform-card, body.homepage .hero .console-card, body.homepage .cap-v2-video, body.homepage .cap-v2-feature, body.homepage .cap-v2-shot, body.homepage .arch-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .industries-v2-card, body.homepage .faq-item, body.homepage .solution-panel { border: 1px solid var(--home-border); background: var(--home-card); box-shadow: var(--home-shadow); backdrop-filter: blur(8px); } body.homepage .hero .platform-card { background: rgba(15, 29, 58, 0.84); } body.homepage .hero .console-card { border-color: var(--home-border-strong); background: linear-gradient(180deg, rgba(13, 27, 55, 0.94), rgba(11, 24, 50, 0.86)); } body.homepage .hero .hero-metric { border-color: rgba(100, 141, 222, 0.38); background: rgba(75, 99, 146, 0.46); } body.homepage .hero .stream-dot { background: #22d3ee; } body.homepage .hero .console-title, body.homepage .hero .hero-metric-value { color: #f8fbff; } body.homepage .hero .console-desc, body.homepage .hero .hero-stream li, body.homepage .hero .hero-metric-label { color: #a8bfdf; } body.homepage .hero .dot.red { background: #ef4444; } body.homepage .hero .dot.yellow { background: #f59e0b; } body.homepage .hero .dot.green { background: #22c55e; } /* ============== Pain + Pricing ============== */ body.homepage .pain-v2, body.homepage .pricing-v2 { background: transparent; } body.homepage .pain-v2-grid, body.homepage .pricing-v2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } body.homepage .pain-v2-card, body.homepage .pricing-v2-card { border: 1px solid var(--home-border); background: linear-gradient(180deg, rgba(13, 26, 53, 0.92), rgba(10, 20, 42, 0.88)); border-radius: 16px; padding: 26px 22px; box-shadow: 0 16px 34px rgba(2, 8, 24, 0.34); display: flex; flex-direction: column; } body.homepage .pain-v2-tag, body.homepage .pricing-v2-label { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(122, 167, 255, 0.35); background: rgba(37, 99, 235, 0.14); color: #dce9ff; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; } body.homepage .pain-v2-card h3, body.homepage .pricing-v2-card h3 { margin: 14px 0 10px; color: #f5f9ff; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.28; } body.homepage .pain-v2-card p, body.homepage .pricing-v2-card p { margin: 0; color: #a9bfde; line-height: 1.72; } body.homepage .pricing-v2-card ul { margin: 16px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; } body.homepage .pricing-v2-card li { color: #dbe7ff; font-size: 14px; display: flex; align-items: center; gap: 8px; } body.homepage .pricing-v2-card li .icon-check { color: #7cc8ff; } body.homepage .pricing-v2-card--featured { border-color: var(--home-border-strong); box-shadow: 0 22px 42px rgba(18, 74, 212, 0.28); transform: translateY(-4px); } body.homepage .pricing-v2-card .btn { margin-top: auto; } /* ============== Layout Rhythm ============== */ body.homepage .hero, body.homepage .pain-v2, body.homepage .core-v2, body.homepage .cap-v2, body.homepage .solutions-v2, body.homepage .arch-v2, body.homepage .comparison-v2, body.homepage .security-v2, body.homepage .industries-v2, body.homepage .cta-v2, body.homepage .faq-v2 { position: relative; } body.homepage .core-v2, body.homepage .cap-v2, body.homepage .solutions-v2, body.homepage .arch-v2, body.homepage .comparison-v2, body.homepage .security-v2, body.homepage .industries-v2, body.homepage .faq-v2 { background: transparent; } body.homepage .core-v2 .section-head, body.homepage .cap-v2 .section-head, body.homepage .solutions-v2 .section-head, body.homepage .arch-v2 .section-head, body.homepage .comparison-v2 .section-head, body.homepage .security-v2 .section-head, body.homepage .industries-v2 .section-head, body.homepage .faq-v2 .section-head { margin-bottom: var(--space-4); } /* ============== Core Highlights ============== */ body.homepage .core-v2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } body.homepage .core-v2-card { border: 1px solid var(--home-border); border-radius: 16px; background: rgba(13, 26, 52, 0.74); box-shadow: var(--home-shadow); padding: var(--space-3) var(--space-2); } body.homepage .core-v2-card h3 { margin: 0 0 8px; color: #fff; font-size: 17px; line-height: 1.36; } body.homepage .core-v2-card p { margin: 0; color: var(--home-text-soft); font-size: var(--fs-body-sm); line-height: 1.7; } /* ============== Product Capabilities ============== */ body.homepage .cap-v2-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; } body.homepage .cap-v2-video { border-radius: 20px; overflow: hidden; border-color: var(--home-border-strong); background: linear-gradient(180deg, rgba(13, 29, 61, 0.92), rgba(9, 22, 45, 0.82)); } body.homepage .cap-v2-video .video-placeholder { min-height: 390px; } body.homepage .cap-v2-feature-list { display: grid; gap: var(--space-2); } body.homepage .cap-v2-feature { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-2); align-items: start; padding: var(--space-2); border-radius: 14px; } body.homepage .cap-v2-feature h3 { margin: 0 0 5px; color: #fff; font-size: 16px; } body.homepage .cap-v2-feature p { margin: 0; color: var(--home-text-soft); font-size: var(--fs-body-sm); line-height: 1.68; } body.homepage .cap-v2-shots { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.homepage .cap-v2-shot { border-radius: 16px; padding: 12px; } body.homepage .cap-v2-shot h3 { margin: 10px 0 4px; color: #fff; font-size: 15px; } body.homepage .cap-v2-shot p { margin: 0; color: var(--home-text-soft); font-size: var(--fs-body-sm); } /* ============== Solutions ============== */ body.homepage .solutions-v2-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; } body.homepage .solutions-v2-side { display: grid; gap: var(--space-2); } body.homepage .solution-panel { border-radius: 18px; padding: var(--space-3); } body.homepage .solution-panel.demo-card, body.homepage .solution-panel.demo-card:hover, body.homepage .solution-panel.demo-card--highlight, body.homepage .solution-panel.demo-card--highlight:hover { transform: none; } body.homepage .solution-panel--core { background: radial-gradient(400px 190px at 94% 0%, rgba(35, 111, 245, 0.26), transparent 64%), radial-gradient(300px 160px at -6% 110%, rgba(34, 211, 238, 0.16), transparent 68%), var(--home-card-strong); border-color: var(--home-border-strong); box-shadow: 0 0 0 1px rgba(89, 145, 255, 0.18), var(--home-shadow); } body.homepage .solution-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } body.homepage .solution-tag { display: inline-flex; align-items: center; justify-content: center; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(112, 156, 245, 0.44); background: rgba(38, 88, 204, 0.26); color: #d7e6ff; font-size: 12px; font-weight: 700; } body.homepage .solution-panel h3 { margin: 0 0 8px; color: #fff; font-size: 20px; line-height: 1.35; } body.homepage .solution-panel p { margin: 0 0 14px; color: var(--home-text-soft); font-size: var(--fs-body-sm); line-height: 1.72; } body.homepage .solution-list { list-style: none; margin: 0 0 16px; display: grid; gap: var(--space-1); } body.homepage .solution-list li { display: flex; align-items: center; gap: 8px; color: #d3e1fb; font-size: var(--fs-body-sm); } body.homepage .solution-list .icon-check { width: 18px; height: 18px; background: linear-gradient(180deg, #22d3ee, #2563eb); } body.homepage .solution-list .icon-check::after { left: 5px; top: 3px; width: 5px; height: 9px; } body.homepage .demo-credentials { margin-bottom: var(--space-2); border-radius: 12px; border: 1px solid rgba(103, 143, 224, 0.44); background: rgba(11, 23, 49, 0.74); color: #bdd2f8; } body.homepage .demo-credentials strong { color: #fff; } body.homepage .solutions-footnote { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); } body.homepage .solutions-footnote span { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(100, 142, 223, 0.36); background: rgba(10, 21, 44, 0.7); color: #bcd0f0; font-size: 12px; } /* ============== Architecture ============== */ body.homepage .arch-v2-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; } body.homepage .arch-v2-metric { border: 1px solid var(--home-border); border-radius: 14px; background: rgba(11, 24, 48, 0.76); padding: var(--space-2); } body.homepage .arch-v2-metric strong { display: block; margin-bottom: 6px; color: #67e8f9; font-size: 24px; line-height: 1; } body.homepage .arch-v2-metric span { display: block; color: #bdd2f3; font-size: var(--fs-body-sm); } body.homepage .arch-v2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.homepage .arch-v2-card { border-radius: 18px; padding: var(--space-3); } body.homepage .arch-v2-card h3 { margin: 0 0 12px; color: #fff; font-size: 20px; } body.homepage .arch-v2-card ul { list-style: none; margin: 0; display: grid; gap: var(--space-1); } body.homepage .arch-v2-card li { display: flex; align-items: center; gap: 8px; color: #c8daf8; font-size: var(--fs-body-sm); } body.homepage .arch-v2-card .icon-check { width: 18px; height: 18px; background: linear-gradient(180deg, #22d3ee, #2563eb); } body.homepage .arch-v2-card .icon-check::after { left: 5px; top: 3px; width: 5px; height: 9px; } body.homepage .arch-v2-flow { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } body.homepage .arch-v2-flow span { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(100, 143, 224, 0.32); background: rgba(11, 24, 47, 0.74); color: #c7d8f8; font-size: 12px; font-weight: 600; } body.homepage .arch-v2-flow i { width: 18px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #22d3ee); } /* ============== Comparison ============== */ body.homepage .compare-v2-headline { display: flex; justify-content: flex-start; margin: -8px 0 18px; } body.homepage .compare-v2-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(101, 144, 225, 0.3); background: rgba(11, 23, 47, 0.74); color: #c4d7f5; font-size: 12px; } body.homepage .compare-v2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } body.homepage .compare-v2-card { border-radius: 18px; padding: 24px 22px; } body.homepage .compare-v2-card--primary { background: radial-gradient(350px 150px at 92% 0%, rgba(37, 99, 235, 0.25), transparent 65%), radial-gradient(240px 120px at -6% 108%, rgba(34, 211, 238, 0.16), transparent 68%), var(--home-card-strong); border-color: var(--home-border-strong); } body.homepage .compare-v2-card h3 { margin: 0 0 12px; color: #fff; font-size: 19px; line-height: 1.35; } body.homepage .compare-v2-card ul { list-style: none; margin: 0; display: grid; gap: 10px; } body.homepage .compare-v2-card li { display: flex; align-items: center; gap: 8px; color: #c8d9f8; font-size: 14px; } body.homepage .compare-v2-card .icon-check { width: 18px; height: 18px; background: linear-gradient(180deg, #22d3ee, #2563eb); } body.homepage .compare-v2-card .icon-check::after { left: 5px; top: 3px; width: 5px; height: 9px; } body.homepage .compare-v2-matrix-wrap { margin-top: 16px; } body.homepage .compare-v2-matrix { border: 1px solid rgba(100, 143, 224, 0.32); border-radius: 16px; overflow: hidden; background: rgba(10, 22, 44, 0.8); } body.homepage .compare-v2-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(100, 143, 224, 0.22); } body.homepage .compare-v2-row:first-child { border-top: 0; } body.homepage .compare-v2-row span { color: #b9cdf0; font-size: 13px; } body.homepage .compare-v2-row--head { background: rgba(13, 27, 56, 0.92); } body.homepage .compare-v2-row--head span { color: #edf4ff; font-weight: 700; } body.homepage .compare-v2-strong { color: #67e8f9 !important; font-weight: 700; } body.homepage .compare-v2-resources { margin-top: 26px; } body.homepage .compare-v2-resource-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } body.homepage .compare-v2-resource-card { border: 1px solid var(--home-border); border-radius: 16px; background: var(--home-card); padding: 16px 14px; display: flex; flex-direction: column; } body.homepage .compare-v2-resource-card h4 { margin: 0 0 6px; color: #fff; font-size: 16px; line-height: 1.35; } body.homepage .compare-v2-resource-card p { margin: 0 0 12px; color: var(--home-text-soft); font-size: 13px; line-height: 1.65; } body.homepage .compare-v2-resource-card .btn { margin-top: auto; } /* ============== Security ============== */ body.homepage .security-v2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.homepage .security-v2-card { border-radius: 18px; padding: 22px 20px; } body.homepage .security-v2-card h3 { margin: 0 0 10px; color: #fff; font-size: 19px; line-height: 1.35; } body.homepage .security-v2-card p { margin: 0; color: #b3c8ea; font-size: 14px; line-height: 1.74; } body.homepage .security-v2-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } body.homepage .security-v2-tags span { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(100, 143, 224, 0.32); background: rgba(37, 99, 235, 0.14); color: #cbddfa; font-size: 12px; } body.homepage .security-v2-progress { margin-top: 12px; display: grid; gap: 10px; } body.homepage .security-v2-progress-item { display: grid; gap: 6px; } body.homepage .security-v2-progress-item span { color: #bdd0f1; font-size: 12px; } body.homepage .security-v2-track { height: 8px; border-radius: 999px; background: rgba(101, 144, 225, 0.22); overflow: hidden; } body.homepage .security-v2-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82f6, #22d3ee); box-shadow: 0 0 14px rgba(34, 211, 238, 0.35); } /* ============== Industries ============== */ body.homepage .industries-v2-highlight { border: 1px solid var(--home-border-strong); border-radius: 20px; background: radial-gradient(600px 220px at 88% 0%, rgba(35, 111, 245, 0.28), transparent 64%), linear-gradient(180deg, rgba(15, 30, 60, 0.94), rgba(11, 24, 48, 0.86)); padding: 22px 20px 18px; box-shadow: var(--home-shadow); } body.homepage .industries-v2-highlight-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } body.homepage .industries-v2-highlight h3 { margin: 0; color: #f3f8ff; font-size: 22px; line-height: 1.35; } body.homepage .industries-v2-highlight p { margin: 0; color: #bbcff1; font-size: 15px; line-height: 1.72; } body.homepage .industries-v2-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.homepage .industries-v2-card { border-radius: 16px; padding: 20px 18px; } body.homepage .industries-v2-card h3 { margin: 0 0 5px; color: #fff; font-size: 16px; } body.homepage .industries-v2-card p { margin: 0; color: var(--home-text-soft); font-size: 13px; line-height: 1.65; } body.homepage .industries-v2-actions { margin-top: 14px; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px; } /* ============== CTA ============== */ body.homepage .cta-v2 { background: radial-gradient(800px 280px at 10% 120%, rgba(34, 211, 238, 0.22), transparent 68%), linear-gradient(128deg, #08142f 0%, #10264f 52%, #0d2144 100%); } body.homepage .cta-v2-inner { text-align: center; } body.homepage .cta-v2 h2 { margin: 0 auto var(--space-2); max-width: 18ch; color: #fff; font-size: clamp(27px, 4vw, 40px); letter-spacing: -0.024em; text-wrap: balance; } body.homepage .cta-v2-sub { max-width: 760px; margin: 0 auto 14px; color: #c8d9f8; font-size: 15px; } body.homepage .cta-v2-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } body.homepage .cta-v2-trust span { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(124, 163, 242, 0.32); background: rgba(10, 23, 46, 0.64); color: #d7e6ff; font-size: 12px; } body.homepage .cta-v2-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; } body.homepage .cta-v2-path { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.homepage .cta-v2-step { border-radius: 12px; border: 1px solid rgba(124, 164, 242, 0.28); background: rgba(7, 18, 38, 0.66); padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; } body.homepage .cta-v2-step b { color: #67e8f9; font-size: 12px; } body.homepage .cta-v2-step span { color: #cadcf9; font-size: 13px; } /* ============== FAQ ============== */ body.homepage .faq-v2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body.homepage .faq-v2-col { display: grid; gap: 10px; } body.homepage .faq-v2 .faq-item { border: 1px solid var(--home-border); border-radius: 14px; background: var(--home-card); box-shadow: 0 16px 38px rgba(3, 8, 24, 0.34); } body.homepage .faq-v2 .faq-item.open { border-color: var(--home-border-strong); box-shadow: 0 0 0 1px rgba(120, 161, 244, 0.18), 0 16px 38px rgba(3, 8, 24, 0.36); } body.homepage .faq-v2 .faq-question { color: #dce9ff; font-size: 14px; } body.homepage .faq-v2 .faq-question:hover { color: #fff; } body.homepage .faq-v2 .faq-answer p { color: #a9bfde; } /* ============== Responsive ============== */ @media (max-width: 959px) { body.homepage section { padding: 68px 0; } body.homepage .hero { min-height: auto; padding: 102px 0 72px; } body.homepage .core-v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.homepage .cap-v2-layout, body.homepage .cap-v2-shots, body.homepage .arch-v2-metrics, body.homepage .arch-v2-grid, body.homepage .solutions-v2-shell, body.homepage .compare-v2-cards, body.homepage .security-v2-grid, body.homepage .faq-v2-grid { grid-template-columns: 1fr; } body.homepage .pain-v2-grid, body.homepage .pricing-v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.homepage .pricing-v2-card--featured { transform: none; } body.homepage .cap-v2-video .video-placeholder { min-height: 240px; } body.homepage .compare-v2-resource-grid, body.homepage .industries-v2-grid, body.homepage .cta-v2-path { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.homepage .arch-v2-flow i { display: none; } body.homepage .compare-v2-matrix-wrap { overflow-x: auto; } body.homepage .compare-v2-matrix { min-width: 700px; } } @media (max-width: 599px) { body.homepage section { padding: 56px 0; } body.homepage .btn { min-height: 44px; min-width: 0; padding: 0 var(--space-2); font-size: var(--fs-body-sm); } body.homepage .btn-lg { min-height: 52px; min-width: 0; padding: 0 var(--space-3); } body.homepage .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; } body.homepage .hero-actions .btn { width: 100%; } body.homepage .core-v2-grid, body.homepage .pain-v2-grid, body.homepage .pricing-v2-grid, body.homepage .compare-v2-resource-grid, body.homepage .industries-v2-grid, body.homepage .cta-v2-path { grid-template-columns: 1fr; } body.homepage .solution-panel, body.homepage .pain-v2-card, body.homepage .pricing-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .arch-v2-card { padding: 18px 16px; } } /* ========================================================= Homepage Hero Precision Polish (non-structural) Scope: section-head alignment + first screen details only ========================================================= */ body.homepage { --hero-btn-w: 184px; --hero-card-shadow: 0 14px 30px rgba(2, 8, 24, 0.34); --hero-card-shadow-hover: 0 18px 36px rgba(2, 8, 24, 0.42); } body.homepage .section-head { max-width: 920px; margin-inline: 0; text-align: left; } body.homepage .section-desc { max-width: 66ch; margin-inline: 0; } body.homepage .flow-step { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(122, 167, 255, 0.34); background: rgba(37, 99, 235, 0.14); color: #d2e3ff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; } body.homepage .solutions-v2, body.homepage .arch-v2, body.homepage .comparison-v2, body.homepage .industries-v2 { border-top: 1px solid rgba(110, 148, 235, 0.14); } body.homepage .cta-v2 .section-head, body.homepage .cta-v2-inner { text-align: center; } body.homepage .hero-left { max-width: 660px; } body.homepage .hero-left h1 { max-width: 13.5ch; line-height: 1.2; margin-bottom: 14px; } body.homepage .hero-desc { max-width: 52ch; } body.homepage .hero-actions { gap: 10px; } body.homepage .hero-actions .btn { min-width: var(--hero-btn-w); } body.homepage .hero-actions .btn-primary { box-shadow: 0 12px 28px rgba(32, 110, 245, 0.34); } body.homepage .hero-actions .btn-outline { border-color: rgba(122, 167, 255, 0.42); background: rgba(12, 25, 50, 0.74); } body.homepage .hero .platform-cards { gap: 12px; } body.homepage .hero .platform-card { min-height: 118px; padding: 20px 14px; justify-content: center; border-radius: 14px; box-shadow: var(--hero-card-shadow); } body.homepage .hero .platform-card:hover { box-shadow: var(--hero-card-shadow-hover); } body.homepage .hero .platform-card span { letter-spacing: 0.01em; } body.homepage .hero .console-card { border-radius: 16px; box-shadow: var(--hero-card-shadow); } @media (min-width: 1080px) { body.homepage .hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: 42px; } } @media (max-width: 959px) { body.homepage .hero-left { max-width: 100%; } body.homepage .hero-left h1, body.homepage .hero-desc { max-width: none; } body.homepage .hero-actions .btn { min-width: 0; } } /* ── proof-v2 ── */ body.homepage .proof-v2 { padding: 56px 0; background: #f0f4fa; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; } body.homepage .proof-v2-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; } body.homepage .proof-v2-metric { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; } body.homepage .proof-v2-metric strong { display: block; font-size: 28px; font-weight: 800; color: #0a122a; line-height: 1; margin-bottom: 8px; } body.homepage .proof-v2-metric span { font-size: 13px; color: #64748b; } body.homepage .proof-v2-industries { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 20px; } body.homepage .proof-v2-industries span { padding: 5px 14px; border-radius: 20px; background: #e8eef8; color: #334155; font-size: 13px; font-weight: 500; } body.homepage .proof-v2-link { text-align: center; font-size: 14px; } body.homepage .proof-v2-link a { color: #1677ff; text-decoration: none; font-weight: 500; } body.homepage .proof-v2-link a:hover { text-decoration: underline; } @media (max-width: 640px) { body.homepage .proof-v2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── pricing-preview ── */ .pricing-preview { padding: 64px 20px; background: #f8fafc; } .pv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; } @media (min-width: 768px) { .pv-grid { grid-template-columns: repeat(4, 1fr); } } .pv-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; } .pv-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-3px); } .pv-card--flagship { border-color: #a855f7; background: linear-gradient(145deg, #faf5ff, #f3e8ff); } .pv-name { font-size: 13px; font-weight: 600; color: #64748b; } .pv-price { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.2; } .pv-card--flagship .pv-price { color: #7c3aed; } .pv-meta { font-size: 12px; color: #94a3b8; } .pv-type { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 2px 8px; align-self: flex-start; } .pv-type--flagship { color: #7c3aed; background: #ede9fe; } .pv-more { text-align: center; font-size: 14px; } .pv-more a { color: #1677ff; text-decoration: none; font-weight: 600; } .pv-more a:hover { text-decoration: underline; } /* ── flagship note ── */ .flagship-note { text-align: center; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; margin-bottom: 0; } /* ── footer-nav ── */ .footer .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 32px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); } .footer .footer-nav-group strong { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: 12px; } .footer .footer-nav-group a { display: block; font-size: 14px; color: #cbd5e1; text-decoration: none; margin-bottom: 8px; transition: color .2s; } .footer .footer-nav-group a:hover { color: #fff; } .footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } @media (max-width: 640px) { .footer .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================= Homepage Layout Refinement (V4, non-structural) ========================================================= */ body.homepage { --section-gap-desktop: 96px; --section-gap-mobile: 64px; --card-radius-lg: 18px; } body.homepage section { padding: var(--section-gap-desktop) 0; } body.homepage .section-head { margin-inline: auto; text-align: center; } body.homepage .section-head h2 { margin-inline: auto; max-width: 18ch; line-height: 1.22; } body.homepage .section-desc { margin-inline: auto; max-width: 62ch; } body.homepage .hero .section-head, body.homepage .solutions-v2 .section-head { margin-inline: 0; text-align: left; } body.homepage .hero .section-desc, body.homepage .solutions-v2 .section-desc { margin-inline: 0; } body.homepage .core-v2-grid, body.homepage .pain-v2-grid, body.homepage .pricing-v2-grid, body.homepage .compare-v2-cards, body.homepage .security-v2-grid, body.homepage .industries-v2-grid, body.homepage .faq-v2-grid { gap: 18px; } body.homepage .core-v2-card, body.homepage .pain-v2-card, body.homepage .pricing-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .industries-v2-card, body.homepage .solution-panel, body.homepage .arch-v2-card { border-radius: var(--card-radius-lg); } body.homepage .hero-actions { gap: 12px; } body.homepage .hero-actions .btn { min-width: 186px; } @media (max-width: 959px) { body.homepage section { padding: 76px 0; } body.homepage .section-head { text-align: left; margin-inline: 0; } body.homepage .section-head h2, body.homepage .section-desc { margin-inline: 0; max-width: none; } body.homepage .hero { padding: 94px 0 68px; } body.homepage .hero-actions .btn { min-width: 0; } } @media (max-width: 599px) { body.homepage { --section-gap-mobile: 56px; } body.homepage section { padding: var(--section-gap-mobile) 0; } body.homepage .hero { padding: 82px 0 56px; } body.homepage .hero-left h1 { font-size: clamp(30px, 8vw, 36px); line-height: 1.16; margin-bottom: 12px; } body.homepage .hero-desc { font-size: 14px; line-height: 1.75; } body.homepage .hero-checks { gap: 10px; } body.homepage .check-item { font-size: 13px; } body.homepage .hero-actions { gap: 8px; } body.homepage .hero-actions .btn, body.homepage .cta-v2-actions .btn { width: 100%; min-height: 48px; } body.homepage .core-v2-card, body.homepage .pain-v2-card, body.homepage .pricing-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .industries-v2-card, body.homepage .solution-panel, body.homepage .arch-v2-card { padding: 20px 16px; border-radius: 16px; } body.homepage .compare-v2-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; } body.homepage .compare-v2-row span { font-size: 12px; } body.homepage .cta-v2-step { padding: 12px 10px; } body.homepage .faq-v2 .faq-question { min-height: 48px; line-height: 1.5; } } /* ========================================================= V5: Visual Rhythm + Button System Unification ========================================================= */ body.homepage { --v5-head-gap: clamp(20px, 2.2vw, 28px); --v5-title-max: 15.5ch; --v5-subtitle-max: 60ch; --v5-card-pad-y: clamp(18px, 2vw, 24px); --v5-card-pad-x: clamp(16px, 1.9vw, 22px); --v5-btn-h: 48px; --v5-btn-h-lg: 54px; --v5-btn-radius: 12px; --v5-btn-font: 15px; --v5-btn-weight: 700; } body.homepage .section-head { margin-bottom: var(--v5-head-gap); } body.homepage .section-head h2 { max-width: var(--v5-title-max); line-height: 1.2; letter-spacing: -0.022em; } body.homepage .section-desc { max-width: var(--v5-subtitle-max); line-height: 1.72; } body.homepage .hero-left h1 { letter-spacing: -0.026em; line-height: 1.16; } body.homepage .core-v2-card, body.homepage .pain-v2-card, body.homepage .pricing-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .industries-v2-card, body.homepage .solution-panel, body.homepage .arch-v2-card, body.homepage .cap-v2-feature, body.homepage .cap-v2-shot { padding: var(--v5-card-pad-y) var(--v5-card-pad-x); } body.homepage .btn, body.homepage .btn-primary, body.homepage .btn-outline { min-height: var(--v5-btn-h); border-radius: var(--v5-btn-radius); font-size: var(--v5-btn-font); font-weight: var(--v5-btn-weight); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } body.homepage .btn-lg { min-height: var(--v5-btn-h-lg); } body.homepage .hero-actions, body.homepage .cta-v2-actions, body.homepage .industries-v2-actions { gap: 12px; } body.homepage .btn:active { transform: translateY(1px); } @media (max-width: 959px) { body.homepage { --v5-title-max: none; --v5-subtitle-max: none; } body.homepage .section-head h2 { line-height: 1.22; } } @media (max-width: 599px) { body.homepage { --v5-head-gap: 18px; --v5-card-pad-y: 18px; --v5-card-pad-x: 15px; --v5-btn-h: 46px; --v5-btn-h-lg: 50px; --v5-btn-font: 14px; } body.homepage .hero-left h1 { letter-spacing: -0.018em; line-height: 1.14; } body.homepage .section-desc, body.homepage .hero-desc { line-height: 1.68; } body.homepage .hero-actions, body.homepage .cta-v2-actions { gap: 8px; } } /* ========================================================= V6: Card Hierarchy + Motion Polish ========================================================= */ body.homepage { --v6-card-bg: linear-gradient(180deg, rgba(15, 31, 61, 0.9), rgba(11, 23, 47, 0.84)); --v6-card-border: rgba(120, 162, 244, 0.28); --v6-card-border-strong: rgba(132, 176, 255, 0.5); --v6-card-shadow: 0 14px 34px rgba(2, 8, 24, 0.28); --v6-card-shadow-hover: 0 20px 44px rgba(2, 8, 24, 0.36); --v6-card-lift: -4px; } body.homepage .core-v2-card, body.homepage .pain-v2-card, body.homepage .pricing-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .industries-v2-card, body.homepage .solution-panel, body.homepage .arch-v2-card, body.homepage .cap-v2-feature, body.homepage .cap-v2-shot, body.homepage .faq-v2 .faq-item { border-color: var(--v6-card-border); background: var(--v6-card-bg); box-shadow: var(--v6-card-shadow); transition: transform .22s ease, box-shadow .24s ease, border-color .22s ease; } body.homepage .pricing-v2-card--featured, body.homepage .solution-panel--core, body.homepage .compare-v2-card--primary { border-color: var(--v6-card-border-strong); box-shadow: 0 22px 46px rgba(22, 86, 224, 0.28), var(--v6-card-shadow); } body.homepage .core-v2-card:hover, body.homepage .pain-v2-card:hover, body.homepage .pricing-v2-card:hover, body.homepage .compare-v2-card:hover, body.homepage .security-v2-card:hover, body.homepage .industries-v2-card:hover, body.homepage .solution-panel:hover, body.homepage .arch-v2-card:hover, body.homepage .cap-v2-feature:hover, body.homepage .cap-v2-shot:hover { transform: translateY(var(--v6-card-lift)); border-color: var(--v6-card-border-strong); box-shadow: var(--v6-card-shadow-hover); } body.homepage .section-head h2, body.homepage .hero-left h1 { text-shadow: 0 2px 12px rgba(22, 75, 204, 0.22); } body.homepage .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; pointer-events: none; background: linear-gradient(180deg, rgba(7, 16, 36, 0) 0%, rgba(5, 11, 26, 0.58) 100%); } body.homepage .hero .platform-card, body.homepage .hero .console-card { border-color: rgba(129, 173, 255, 0.42); box-shadow: 0 18px 38px rgba(3, 10, 28, 0.4); } body.homepage .hero .platform-card:hover, body.homepage .hero .console-card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px rgba(3, 10, 28, 0.5); } @keyframes v6RevealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } body.homepage .hero-left > * { animation: v6RevealUp .5s ease both; } body.homepage .hero-left > *:nth-child(2) { animation-delay: .04s; } body.homepage .hero-left > *:nth-child(3) { animation-delay: .08s; } body.homepage .hero-left > *:nth-child(4) { animation-delay: .12s; } body.homepage .hero-left > *:nth-child(5) { animation-delay: .16s; } @media (max-width: 959px) { body.homepage { --v6-card-lift: -2px; } body.homepage .hero::after { height: 78px; } } @media (max-width: 599px) { body.homepage .core-v2-card:hover, body.homepage .pain-v2-card:hover, body.homepage .pricing-v2-card:hover, body.homepage .compare-v2-card:hover, body.homepage .security-v2-card:hover, body.homepage .industries-v2-card:hover, body.homepage .solution-panel:hover, body.homepage .arch-v2-card:hover, body.homepage .cap-v2-feature:hover, body.homepage .cap-v2-shot:hover { transform: none; box-shadow: var(--v6-card-shadow); } body.homepage .hero-left > * { animation-duration: .42s; } } @media (prefers-reduced-motion: reduce) { body.homepage .hero-left > * { animation: none !important; } } /* ========================================================= V7: Information Density + Section Grouping ========================================================= */ body.homepage { --v7-group-bg: linear-gradient(180deg, rgba(8, 19, 41, 0.62), rgba(7, 16, 34, 0.52)); --v7-group-border: rgba(116, 160, 241, 0.18); --v7-group-radius: 24px; --v7-content-max: 1180px; --v7-copy: #b6c9e7; --v7-copy-strong: #d7e6fb; } body.homepage .core-v2 .container, body.homepage .cap-v2 .container, body.homepage .solutions-v2 .container, body.homepage .arch-v2 .container, body.homepage .comparison-v2 .container, body.homepage .security-v2 .container, body.homepage .industries-v2 .container, body.homepage .faq-v2 .container { width: min(var(--v7-content-max), calc(100% - 40px)); margin-inline: auto; border: 1px solid var(--v7-group-border); border-radius: var(--v7-group-radius); background: var(--v7-group-bg); padding: clamp(22px, 2.6vw, 34px); box-shadow: inset 0 1px 0 rgba(185, 213, 255, 0.06); } body.homepage .core-v2, body.homepage .cap-v2, body.homepage .solutions-v2, body.homepage .arch-v2, body.homepage .comparison-v2, body.homepage .security-v2, body.homepage .industries-v2, body.homepage .faq-v2 { padding-top: 54px; padding-bottom: 54px; } body.homepage .core-v2-card p, body.homepage .pain-v2-card p, body.homepage .pricing-v2-card p, body.homepage .compare-v2-card li, body.homepage .security-v2-card p, body.homepage .industries-v2-card p, body.homepage .solution-panel p, body.homepage .faq-v2 .faq-answer p { color: var(--v7-copy); line-height: 1.74; } body.homepage .cap-v2-feature h3, body.homepage .core-v2-card h3, body.homepage .solution-panel h3, body.homepage .arch-v2-card h3, body.homepage .compare-v2-card h3, body.homepage .security-v2-card h3, body.homepage .industries-v2-card h3 { line-height: 1.32; } body.homepage .solution-list li, body.homepage .arch-v2-card li, body.homepage .pricing-v2-card li { color: var(--v7-copy-strong); } body.homepage .compare-v2-resource-card { border-color: rgba(126, 170, 248, 0.24); } body.homepage .compare-v2-resource-card p { color: var(--v7-copy); line-height: 1.66; } body.homepage .cta-v2 { margin-top: 12px; border-top: 1px solid rgba(126, 170, 248, 0.14); border-bottom: 1px solid rgba(126, 170, 248, 0.14); } @media (max-width: 959px) { body.homepage .core-v2 .container, body.homepage .cap-v2 .container, body.homepage .solutions-v2 .container, body.homepage .arch-v2 .container, body.homepage .comparison-v2 .container, body.homepage .security-v2 .container, body.homepage .industries-v2 .container, body.homepage .faq-v2 .container { width: min(var(--v7-content-max), calc(100% - 32px)); padding: 20px 16px; border-radius: 18px; } body.homepage .core-v2, body.homepage .cap-v2, body.homepage .solutions-v2, body.homepage .arch-v2, body.homepage .comparison-v2, body.homepage .security-v2, body.homepage .industries-v2, body.homepage .faq-v2 { padding-top: 36px; padding-bottom: 36px; } } @media (max-width: 599px) { body.homepage .core-v2 .container, body.homepage .cap-v2 .container, body.homepage .solutions-v2 .container, body.homepage .arch-v2 .container, body.homepage .comparison-v2 .container, body.homepage .security-v2 .container, body.homepage .industries-v2 .container, body.homepage .faq-v2 .container { width: min(var(--v7-content-max), calc(100% - 24px)); padding: 18px 14px; border-radius: 16px; } body.homepage .section-head { margin-bottom: 16px; } body.homepage .section-desc { font-size: 13px; line-height: 1.64; } body.homepage .core-v2-card p, body.homepage .pain-v2-card p, body.homepage .pricing-v2-card p, body.homepage .compare-v2-card li, body.homepage .security-v2-card p, body.homepage .industries-v2-card p, body.homepage .solution-panel p, body.homepage .faq-v2 .faq-answer p { line-height: 1.68; } } /* ========================================================= V8: Pixel-level Alignment + Micro Interaction Final ========================================================= */ body.homepage { --v8-title-tracking: -0.02em; --v8-card-gap-tight: 10px; --v8-card-gap: 14px; --v8-btn-focus: 0 0 0 3px rgba(59, 130, 246, 0.28); } body.homepage .hero-left h1, body.homepage .section-head h2, body.homepage .cta-v2 h2 { letter-spacing: var(--v8-title-tracking); text-wrap: pretty; } body.homepage .head-line { margin-top: 10px; margin-bottom: 14px; } body.homepage .core-v2-grid, body.homepage .compare-v2-cards, body.homepage .security-v2-grid, body.homepage .faq-v2-grid { gap: var(--v8-card-gap); } body.homepage .pricing-v2-card ul, body.homepage .solution-list, body.homepage .arch-v2-card ul, body.homepage .compare-v2-card ul { gap: var(--v8-card-gap-tight); } body.homepage .pricing-v2-card li, body.homepage .solution-list li, body.homepage .arch-v2-card li, body.homepage .compare-v2-card li { align-items: flex-start; line-height: 1.62; } body.homepage .pricing-v2-card li .icon-check, body.homepage .solution-list .icon-check, body.homepage .arch-v2-card .icon-check, body.homepage .compare-v2-card .icon-check { margin-top: 1px; } body.homepage .btn:focus-visible, body.homepage .faq-question:focus-visible, body.homepage .subtab:focus-visible { outline: none; box-shadow: var(--v8-btn-focus); } body.homepage .faq-v2 .faq-question { min-height: 50px; align-items: center; } body.homepage .compare-v2-resource-card h4, body.homepage .industries-v2-card h3, body.homepage .security-v2-card h3 { margin-bottom: 7px; } body.homepage .cta-v2-actions .btn-primary { box-shadow: 0 12px 30px rgba(29, 78, 216, 0.32); } body.homepage .cta-v2-actions .btn-outline { border-color: rgba(140, 180, 255, 0.44); } @media (max-width: 959px) { body.homepage .section-head h2 { margin-bottom: 10px; } body.homepage .core-v2-grid, body.homepage .compare-v2-cards, body.homepage .security-v2-grid, body.homepage .faq-v2-grid { gap: 12px; } } @media (max-width: 599px) { body.homepage .hero-left h1 { text-wrap: balance; } body.homepage .head-line { margin-top: 8px; margin-bottom: 12px; } body.homepage .core-v2-card, body.homepage .pain-v2-card, body.homepage .pricing-v2-card, body.homepage .compare-v2-card, body.homepage .security-v2-card, body.homepage .industries-v2-card, body.homepage .solution-panel, body.homepage .arch-v2-card { padding: 16px 14px; } body.homepage .pricing-v2-card h3, body.homepage .solution-panel h3, body.homepage .compare-v2-card h3, body.homepage .security-v2-card h3, body.homepage .industries-v2-card h3 { margin-bottom: 8px; } body.homepage .btn, body.homepage .btn-lg { min-height: 46px; border-radius: 11px; } }