img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} :root { --nova-blue: #005893; --nova-blue-deep: #00385f; --nova-blue-light: #e6f1f8; --nova-accent: #1fb6ff; --nova-accent-soft: #ecfeff; --nova-dark: #06111d; --nova-gray: #6b7280; --nova-bg: #f3f5fb; --radius-lg: 18px; --radius-xl: 26px; --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.18); --shadow-soft-lg: 0 26px 60px rgba(15, 23, 42, 0.28); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Noto Sans', sans-serif; color: var(--nova-dark); background: radial-gradient(circle at top, #e0f2fe 0, #f9fafb 55%, #eef2ff 100%); line-height: 1.5; } a { color:steelblue;text-decoration: none; } a[href^=tel]{white-space:nowrap} :is(main,footer) a:hover{text-decoration:underline;text-underline-offset:3px} img { max-width: 100%; display: block;margin:0 auto;object-fit:cover } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } .page { min-height: 100vh; display: flex; flex-direction: column; } html { scroll-padding-top: 200px; scroll-padding-bottom: 100px } main :is(ol,ul){padding-left:25px} header { position: sticky; top: 0; z-index: 20; background: radial-gradient(circle at top, rgba(15, 23, 42, 0.92), rgba(15, 76, 129, 0.62)); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(148, 163, 184, 0.4); color: #e5e7eb; } header .grid { grid-template-columns: 200px 1fr; align-items: center; padding: 10px 5px } header img[src*="logo"] { height: 80px;object-fit:contain; filter: brightness(0) invert(1); margin: 2px auto } img[src*=a8bmark] { filter: brightness(0) invert(1);margin-right:0 } nav ul { padding: 0; margin: 0; text-align: center; list-style: none; color: #cbd5f5 } nav li { display: inline-block; } nav a { display: block; margin: 4px; padding: 4px; text-align: center; position: relative; color: inherit; font-size: 0.9rem } nav a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #a855f7); transition: width 160ms ease-out; } nav a:is(:hover,:focus)::after { width: 100%; } nav .btn-primary::after { display: none } .pill-support { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); background: rgba(15, 23, 42, 0.7); display: inline-flex; align-items: center; gap: 0.35rem; } .pill-support-dot { width: 7px; height: 7px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.25); } .btn-primary, .btn-secondary { border-radius: 999px; padding: 0.6rem 1.4rem; font-size: 0.85rem; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; vertical-align: middle; gap: 0.35rem; } .btn-primary { background: linear-gradient(135deg, #38bdf8, #0ea5e9, #6366f1); color: white; box-shadow: 0 18px 40px rgba(37, 99, 235, 0.55); } .btn-primary:hover { filter: brightness(1.06); } .btn-small { padding: 0.5rem 1.2rem; font-size: 0.8rem; } .btn-secondary { background: rgba(15, 23, 42, 0.7); color: #e5e7eb; border: 1px solid rgba(148, 163, 184, 0.8); } main { flex: 1; } section { padding: 4rem 1.5rem; } .container { max-width: 1160px; margin: 0 auto; } .section-header { max-width: 640px; margin-bottom: 2rem; } .section-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--nova-gray); margin-bottom: 0.5rem; } .section-title { font-size: 1.8rem; margin: 0 0 0.6rem; } .section-subtitle { color: var(--nova-gray); font-size: 0.96rem; } #hero { padding-top: 4.2rem; padding-bottom: 4rem; position: relative; overflow: hidden; } #hero::before { content: ''; position: absolute; inset: -120px -160px auto auto; background: radial-gradient(circle at 10% 0, rgba(56, 189, 248, 0.22), transparent 55%), radial-gradient(circle at 70% 20%, rgba(129, 140, 248, 0.35), transparent 65%); opacity: 0.9; pointer-events: none; z-index: -2; } #hero img, #contact img { border-radius: 10px; } #hero img{height:100%;width:auto;object-position:65% 85%} .hero.hero--inner { background: linear-gradient(135deg, #0b1220 0%, #020617 45%, #0b1120 100%); color: white; padding-top: 3.5rem; padding-bottom: 3.5rem; position: relative; overflow: hidden; border-bottom: 1px solid rgba(148, 163, 184, 0.2); } .hero.hero--inner::before { content: ''; position: absolute; inset: -80px -120px auto auto; background: radial-gradient(circle at 20% 0, rgba(56, 189, 248, 0.15), transparent 55%), radial-gradient(circle at 80% 20%, rgba(129, 140, 248, 0.22), transparent 65%); opacity: 0.8; pointer-events: none; z-index: 0; } .hero.hero--inner .container { position: relative; z-index: 1; } .hero.hero--inner .section-eyebrow { color: #94a3b8; } .hero.hero--inner .section-title { color: white; font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.15; max-width: 640px; } .hero.hero--inner .section-subtitle { color: #cbd5e1; max-width: 600px; } .hero-grid,#hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; } .hero-grid--reverse { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .hero-side-card { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.4); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem 1.7rem; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.4); } .hero-side-title { margin: 0 0 1rem; font-size: 1.1rem; color: white; } .hero-side-card .bullets { margin: 0; } .form-input, .form-textarea { width: 100%; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.5); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); color: white; font-size: 0.9rem; font-family: 'Noto Sans', sans-serif; transition: all 200ms ease; outline: none; } .form-input::placeholder, .form-textarea::placeholder { color: rgba(203, 213, 225, 0.6); } .form-input:focus, .form-textarea:focus { border-color: rgba(56, 189, 248, 0.8); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); } .form-textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.65rem 0.12rem 0.3rem; border-radius: 999px; background: rgba(15, 23, 42, 0.06); color: var(--nova-blue-deep); font-size: 0.75rem; margin-bottom: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.6); } .hero-eyebrow span.badge-dot { width: 9px; height: 9px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.25); } .hero-title { font-size: clamp(2.25rem, 4.2vw, 2.8rem); line-height: 1.03; margin: 0 0 0.9rem; } .hero-highlight { color: var(--nova-blue-deep); } .hero-subtitle { color: var(--nova-gray); font-size: 1rem; max-width: 33rem; margin-bottom: 1.7rem; } .hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-bottom: 1.1rem; } .hero-cta-row .btn-secondary { background: white; color: var(--nova-dark); } .hero-cta-row .btn-secondary span.icon { font-size: 1rem; } .hero-meta { font-size: 0.78rem; color: var(--nova-gray); display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .hero-meta span { display: inline-flex; align-items: center; gap: 0.35rem; } .hero-meta span:last-child { border-right: none; } .hero-meta-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, 0.95); } .hero-visual-wrap { position: relative; } .hero-orbit { position: absolute; inset: -32px -44px -48px -30px; background: radial-gradient(circle at 10% 0, rgba(148, 163, 255, 0.18), transparent 55%), radial-gradient(circle at 100% 0, rgba(45, 212, 191, 0.18), transparent 60%); filter: blur(4px); opacity: 0.9; z-index: -1; } .hero-card-main { background: linear-gradient(145deg, #0b1220, #020617 55%, #0b1120 100%); border-radius: 24px; padding: 1.4rem 1.4rem 1.6rem; box-shadow: var(--shadow-soft-lg); border: 1px solid rgba(148, 163, 184, 0.45); color: #e5e7eb; } .hero-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; font-size: 0.8rem; } .hero-card-badge { padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.9); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .hero-health { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: #a5b4fc; } .hero-health-indicator { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.28); } .hero-mini-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0.85rem; margin-bottom: 1rem; } .hero-chart-card { background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 65%); border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.5); padding: 0.8rem 0.85rem; font-size: 0.78rem; } .hero-chart-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; } .hero-chart-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; align-items: flex-end; height: 80px; } .hero-bar { border-radius: 999px 999px 4px 4px; background: linear-gradient(to top, #0ea5e9, #38bdf8); position: relative; overflow: hidden; } .hero-bar:nth-child(2) { height: 70%; } .hero-bar:nth-child(3) { height: 55%; } .hero-bar:nth-child(4) { height: 85%; } .hero-bar:nth-child(1) { height: 45%; } .hero-bar::after { content: ''; position: absolute; inset: 35% 0 auto; background: linear-gradient(to top, rgba(248, 250, 252, 0.5), transparent 60%); } .hero-chart-legend { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.7rem; color: #9ca3af; } .hero-chart-legend span { display: inline-flex; align-items: center; gap: 0.25rem; } .hero-dot-blue { width: 8px; height: 8px; border-radius: 999px; background: #38bdf8; } .hero-dot-gray { width: 8px; height: 8px; border-radius: 999px; background: #64748b; } .hero-callcards { display: grid; gap: 0.5rem; font-size: 0.78rem; } .hero-callcard { background: rgba(15, 23, 42, 0.9); border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.65); padding: 0.4rem 0.65rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .hero-call-left { display: flex; align-items: center; gap: 0.45rem; } .hero-avatar { width: 22px; height: 22px; border-radius: 999px; background: radial-gradient(circle at 30% 0, #e5e7eb, #1f2937); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #e5e7eb; } .hero-call-meta { display: flex; flex-direction: column; gap: 0.05rem; } .hero-call-name { font-weight: 500; } .hero-call-detail { font-size: 0.7rem; color: #9ca3af; } .hero-call-status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: #bbf7d0; } .hero-call-status-indicator { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; } .hero-footer-metrics { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; font-size: 0.76rem; } .hero-foot-metric { background: rgba(15, 23, 42, 0.95); border-radius: 12px; padding: 0.55rem 0.65rem; border: 1px solid rgba(148, 163, 184, 0.6); display: flex; flex-direction: column; gap: 0.05rem; } .hero-foot-metric strong { font-size: 0.95rem; } #fit { background: white; border-top: 1px solid rgba(148, 163, 184, 0.2); border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .fit-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; } .fit-illustration { position: relative; border-radius: 20px; padding: 1.3rem 1.4rem; background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.15), transparent 55%), radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.22), transparent 60%), #020617; color: #e5e7eb; box-shadow: var(--shadow-soft); border: 1px solid rgba(148, 163, 184, 0.4); } .fit-illustration h3 { margin: 0 0 0.4rem; font-size: 1.05rem; } .fit-illustration p { margin: 0 0 1rem; font-size: 0.87rem; color: #d1d5db; } .fit-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.78rem; } .fit-tag { padding: 0.22rem 0.55rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.85); background: rgba(15, 23, 42, 0.8); } .fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; } .fit-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.93rem; color: var(--nova-dark); } .fit-bullet { margin-top: 0.18rem; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--nova-blue); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--nova-blue); background: var(--nova-blue-light); padding: 4px; } #solutions { background: var(--nova-bg); } .solutions-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem; } .solution-card { position: relative; overflow: hidden; background: white; border-radius: var(--radius-lg); padding: 1.3rem 1.2rem 1.4rem; border: 1px solid rgba(148, 163, 184, 0.35); display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.88rem; box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08); } .solution-card::before { content: ''; position: absolute; inset: -40px -40px auto auto; background: radial-gradient(circle at 60% 0, rgba(56, 189, 248, 0.26), transparent 60%); opacity: 0.8; pointer-events: none; } .solution-icon { width: 32px; height: 32px; border-radius: 999px; background: radial-gradient(circle at 30% 0, #e0f2fe, #0ea5e9); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #0b1120; box-shadow: 0 10px 18px rgba(37, 99, 235, 0.4); } .solution-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--nova-gray); } .solution-title { font-size: 1.02rem; margin: 0; } .solution-footer { margin-top: 0.45rem; font-size: 0.8rem; color: var(--nova-blue); display: inline-flex; align-items: center; gap: 0.25rem; } .solution-footer::after { content: '→'; font-size: 0.9rem; } #process { background: white; } .process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; } .step { background: #f9fafb; border-radius: var(--radius-lg); padding: 1.25rem 1.2rem 1.3rem; border: 1px solid rgba(148, 163, 184, 0.4); font-size: 0.86rem; position: relative; overflow: hidden; } .step::before { content: ''; position: absolute; inset: auto -30px -40px auto; background: radial-gradient(circle at 80% 100%, rgba(148, 163, 248, 0.25), transparent 60%); opacity: 0.9; pointer-events: none; } .step-number { width: 26px; height: 26px; border-radius: 999px; background: white; border: 1px solid rgba(148, 163, 184, 0.9); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--nova-blue-deep); } .step h3 { margin: 0 0 0.35rem; font-size: 0.98rem; } #proof { background: radial-gradient(circle at top, #020617 0, #020617 55%, #020617 100%); color: white; } .proof-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: flex-end; margin-bottom: 2.2rem; } .proof-header-left { margin-bottom: 0; } .proof-subtitle { color: #cbd5f5; } .proof-header .section-title { color: white; } .proof-metrics { display: flex; flex-wrap: wrap; gap: 0.85rem; font-size: 0.78rem; color: #cbd5f5; } .proof-metrics span { padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); background: rgba(15, 23, 42, 0.9); } .logo-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.7rem; font-size: 0.78rem; color: #9ca3af; } .logo-pill { padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.9); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .testimonial { background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.25), transparent 65%), #020617; border-radius: var(--radius-lg); padding: 1.2rem 1.2rem 1.25rem; border: 1px solid rgba(148, 163, 184, 0.55); font-size: 0.86rem; color: #e5e7eb; position: relative; overflow: hidden; } .testimonial::before { content: '\201C'; position: absolute; font-size: 3.2rem; top: -14px; right: 14px; color: rgba(148, 163, 184, 0.25); } .testimonial-footer { margin-top: 0.85rem; font-size: 0.76rem; color: #9ca3af; } #pricing { background: var(--nova-bg); } .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; } .plan { background: white; border-radius: var(--radius-lg); padding: 1.4rem 1.3rem 1.5rem; border: 1px solid rgba(148, 163, 184, 0.4); font-size: 0.86rem; display: flex; flex-direction: column; gap: 0.45rem; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); position: relative; overflow: hidden; } .plan::before { content: ''; position: absolute; inset: -40px -40px auto auto; background: radial-gradient(circle at 60% 0, rgba(56, 189, 248, 0.18), transparent 60%); opacity: 0.9; pointer-events: none; } .plan-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; } .plan-name { font-weight: 600; font-size: 0.98rem; } .plan-range { font-weight: 600; font-size: 1rem; color: var(--nova-blue-deep); } .plan-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--nova-gray); } .plan ul { list-style: none; padding: 0; margin: 0.3rem 0 0.9rem; display: grid; gap: 0.42rem; } .plan li { display: flex; gap: 0.4rem; align-items: flex-start; } .plan-dot { flex-shrink: 0; min-width: 4px; min-height: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--nova-accent); margin-top: 0.32rem; } .plan-footer { font-size: 0.75rem; color: var(--nova-gray); margin-top: auto; } .table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08); } .compare-table { width: 100%; border-collapse: collapse; background: white; border-radius: var(--radius-lg); overflow: hidden; font-size: 0.88rem; } .compare-table thead { background: linear-gradient(135deg, var(--nova-blue-deep), var(--nova-blue)); color: white; } .compare-table th { padding: 1rem 1.2rem; text-align: left; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; border-bottom: 2px solid rgba(255, 255, 255, 0.2); } .compare-table tbody tr { border-bottom: 1px solid rgba(148, 163, 184, 0.15); transition: background-color 160ms ease; } .compare-table tbody tr:last-child { border-bottom: none; } .compare-table tbody tr:hover { background: var(--nova-blue-light); } .compare-table td { padding: 1.1rem 1.2rem; vertical-align: top; line-height: 1.5; } .compare-table td:first-child { font-weight: 600; color: var(--nova-blue-deep); } .compare-table td:nth-child(2) { color: var(--nova-gray); } #cta-final { background: white; border-top: 1px solid rgba(148, 163, 184, 0.22); } .cta-band { background: white; padding: 4rem 1.5rem; border-top: 1px solid rgba(148, 163, 184, 0.18); } .cta-panel { background: radial-gradient(circle at top left, #1e293b, #020617 55%, #020617 100%); border-radius: 26px; padding: 1.9rem 1.9rem 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; color: white; box-shadow: var(--shadow-soft-lg); border: 1px solid rgba(148, 163, 184, 0.6); } .cta-panel-main h2 { margin: 0 0 0.45rem; font-size: 1.45rem; } .cta-panel-main p { margin: 0; font-size: 0.9rem; color: #e5e7eb; } .cta-panel-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .cta-note { font-size: 0.76rem; color: #cbd5f5; } .section-alt { background: var(--nova-bg); } #values { position: relative; } .card { background: white; border-radius: var(--radius-lg); padding: 1.6rem 1.5rem 1.7rem; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08); transition: all 220ms ease; position: relative; overflow: hidden; } .card--soft { background: white; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06); } .card--soft::before { content: ''; position: absolute; inset: -40px -40px auto auto; background: radial-gradient(circle at 60% 0, rgba(56, 189, 248, 0.12), transparent 70%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .card:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14); border-color: rgba(56, 189, 248, 0.4); } .card--soft:hover::before { opacity: 1; } .card h3 { margin: 0 0 0.6rem; font-size: 1.1rem; color: var(--nova-dark); } .card p { margin: 0; font-size: 0.9rem; color: var(--nova-gray); line-height: 1.6; } .grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; } .bullets li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; } .bullets li::before { content: ''; margin-top: 0.45rem; width: 6px; height: 6px; min-width: 6px; border-radius: 999px; background: var(--nova-accent); box-shadow: 0 0 0 3px rgba(31, 182, 255, 0.15); } .hero-side-card .bullets li { color: #e5e7eb; } .checklist { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; } .checklist li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; line-height: 1.5; } .checklist li::before { content: '✓'; margin-top: 0.05rem; width: 20px; height: 20px; min-width: 20px; border-radius: 50%; background: var(--nova-blue-light); border: 1px solid var(--nova-blue); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--nova-blue); font-weight: 600; } #who-we-serve, #inner-content { background: white; } .cta-link { color: var(--nova-blue); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--nova-blue); transition: all 160ms ease; } .cta-link:hover { color: var(--nova-accent); border-bottom-color: var(--nova-accent); } .form-interests { margin-bottom: 1rem; } .form-interests-label { display: block; margin-bottom: 0.5rem; color: #e5e7eb; font-size: 0.9rem; } .form-interests-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; } .form-interests-group label { display: flex; align-items: center; gap: 0.5rem; color: #e5e7eb; font-size: 0.9rem; cursor: pointer; } .form-interests-group input[type="checkbox"] { cursor: pointer; } select.form-input option { color: white; background: rgba(15, 23, 42, 0.8); } .form-submit-center { text-align: center; } .hero-form-column { display: flex; flex-direction: column; gap: 1rem; } .schedule-button-wrapper { text-align: center; } .schedule-separator { color: rgba(203, 213, 225, 0.6); font-size: 0.9rem; margin-bottom: 0.75rem; } .pill-grid { display: grid; gap: 1.3rem; } .pill-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pill { background: white; border-radius: 999px; padding: 1.5rem 1.8rem; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08); transition: all 220ms ease; position: relative; overflow: hidden; } .pill::before { content: ''; position: absolute; inset: -40px -40px auto auto; background: radial-gradient(circle at 60% 0, rgba(56, 189, 248, 0.18), transparent 65%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .pill:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14); border-color: rgba(56, 189, 248, 0.5); } .pill:hover::before { opacity: 1; } .pill h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--nova-dark); } .pill p { margin: 0; font-size: 0.88rem; color: var(--nova-gray); line-height: 1.5; } .center { text-align: center; } .grid { display: grid; gap: 20px; } .grid.half { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.half img { height: 100%; width: 100%; } .grid.third { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.fourth { grid-template-columns: repeat(4, minmax(0, 1fr)); } .support-cards { margin-top: 3rem; } .a8bmark { margin-top: 3rem; } .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; } .faq-item { background: white; border-radius: var(--radius-lg); padding: 1.6rem 1.5rem 1.7rem; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08); transition: all 220ms ease; position: relative; overflow: hidden; } .faq-item::before { content: ''; position: absolute; inset: -40px -40px auto auto; background: radial-gradient(circle at 60% 0, rgba(56, 189, 248, 0.12), transparent 70%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .faq-item:hover { transform: translateY(-4px); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14); border-color: rgba(56, 189, 248, 0.4); } .faq-item:hover::before { opacity: 1; } .faq-item h3 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--nova-dark); line-height: 1.4; } .faq-item p { margin: 0; font-size: 0.9rem; color: var(--nova-gray); line-height: 1.6; } footer { background: #020617; color: #9ca3af; font-size: 0.8rem; padding: 1.8rem; } .ccpaNotice { background: #020617 !important; color: #9ca3af !important; border-top: none !important; } .footer-inner { max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0; align-items: center; justify-content: space-between; } .footer-links { display: flex; flex-wrap: wrap; gap: 1rem; list-style-type: none; justify-content: flex-start; margin-top: 0.5rem; margin-bottom: 1.5rem; margin-left: 0; padding-left: 0; flex-basis: 100%; } .footer-links a { color: #9ca3af; } .footer-links a:hover { color: #e5e7eb; } .footer-inner img { margin-left: auto; } #contact .grid.third div { text-align: center; } #contact .grid.third svg { display: block; margin: 0 auto 1rem; height: 100px; width: 100px; stroke-width: 0.5; } #contact .grid.third div { border: 1px solid rgba(148, 163, 184, 0.35); border-radius: var(--radius-lg); padding: 1.5rem; } .testimonial-text { line-height: 1.6; margin-bottom: 1rem; } .testimonial-author { font-weight: bold; margin: 0; color: #364C65; } .testimonial-author::before { content: "– "; } @media (max-width: 999px) { .compare-table { font-size: 0.82rem; } .compare-table th, .compare-table td { padding: 0.85rem 0.9rem; } .hero-grid, .hero-grid--reverse, .fit-grid, .process-grid, .testimonials-grid, .pricing-grid, .pill-grid--three, .faq-grid, .grid--two, .grid--three, header { grid-template-columns: minmax(0, 1fr); } .solutions-grid,#contact .grid.third { grid-template-columns: 1fr 1fr; } #contact .grid.third>div:last-of-type:nth-of-type(odd){grid-column:1 / -1} .nav-links { display: block; } .nav-links a { display: block; margin-bottom: 0.8rem; } .nav-links a:hover::after { width: 0; } .hero-card-main, .hero-side-card { margin-top: 1rem; } .hero-meta span { border: none; } .a8bmark { display: block; width: 150px; margin: 3rem auto 0; } .footer-links { padding: 0; } } @media (max-width: 767px) { #contact .grid.third { grid-template-columns: repeat(2, minmax(0, 1fr)); } #contact .grid.half { grid-template-columns: 1fr; } } @media (max-width: 700px) { header .grid{grid-template-columns:1fr} #hero img{height:clamp(250px, 50vw, 350px);width:100%} section { padding: 3.2rem 1.3rem; } .cta-panel { padding: 1.6rem 1.3rem 1.7rem; } .grid.half, #hero .hero-grid { grid-template-columns: 1fr } .hero-footer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compare-table thead { display: none; } .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; } .compare-table tr { margin-bottom: 1.2rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 0.8rem; } .compare-table td { padding: 0.5rem 0; border: none; } .compare-table td:first-child { font-size: 1.05rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.2); } .compare-table td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nova-gray); margin-bottom: 0.3rem; } .compare-table td:first-child::before { display: none; } } @media (max-width: 640px) { #contact .grid.third { grid-template-columns: 1fr; } } @media(max-width:500px){ header{position:relative} .solutions-grid,#contact .grid.third{grid-template-columns:1fr} header nav ul{display:grid;grid-template-columns:1fr 1fr 1fr;} header nav li:has(.btn-primary){grid-column:1 / -1} section{padding:2rem 10px} } @media(max-width:400px) { header nav ul { grid-template-columns: 1fr 1fr } .form-interests-group { grid-template-columns: 1fr; } }