/* ========================================================================== HIGHER PROFILE — "Azure & Coral" Design System Bright-blue theme with radial glows, glassy cards, coral accents, and modern geometric type. No images, no frameworks, no external requests. ========================================================================== */ /* ---------- Fonts (self-hosted variable fonts, preloaded in ) ---------- */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/space-grotesk-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../assets/inter-latin.woff2') format('woff2'); } /* ---------- Tokens ---------- */ :root { /* Blues, dark to light */ --bg: #0A1E4F; --bg-2: #102A67; --card: #16327B; --card-2: #1C3D92; --royal: #3D7BFF; --royal-dk: #2A5AD9; --sky: #7EB3FF; --ice: #C9DCFF; --teal: #3FC7E4; /* Bright accent */ --gold: #FF6D5A; --gold-soft: #FF9C8A; --gold-dk: #E04B36; /* Text */ --text: #E9EEFB; --text-mut: #BFCDF0; --text-dim: #93A6D4; /* Lines */ --hairline: rgba(190, 216, 255, .26); --hairline-gold: rgba(255, 109, 90, .38); --display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --radius: 16px; --maxw: 1180px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); color: var(--text); line-height: 1.65; background-color: var(--bg); /* Layered sapphire glows over deep navy */ background-image: radial-gradient(1000px 600px at 85% -10%, rgba(72, 131, 255, .40), transparent 60%), radial-gradient(800px 500px at -10% 25%, rgba(52, 100, 214, .45), transparent 60%), radial-gradient(700px 500px at 50% 115%, rgba(255, 109, 90, .07), transparent 60%), linear-gradient(180deg, #0D2258, var(--bg) 40%); background-attachment: fixed; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--sky); } p { margin: 0 0 1em; } ul { padding-left: 1.2em; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--royal); color: #fff; } h1, h2, h3, .display { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--text); } h1 { font-size: clamp(2.4rem, 5.5vw, 3.9rem); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .section { padding: 76px 0; } .center { text-align: center; } .lead { font-size: 1.13rem; color: var(--text-mut); } .muted { color: var(--text-dim); } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--gold); color: #14181f; padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 8px; } /* Accent word inside headlines: coral gradient text */ .hl { color: var(--gold); background: linear-gradient(92deg, #FF9C8A 0%, #FF6D5A 55%, #FF5470 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- Ornaments ---------- */ /* Kicker pill (hero + sections) */ .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-soft); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--hairline-gold); border-radius: 999px; background: rgba(255, 109, 90, .06); margin-bottom: 20px; } .kicker::before, .kicker::after { content: "✦"; font-size: .7em; color: var(--gold); } /* Section heading: serif with a gold hairline + diamond flourish underneath */ .banner { display: block; font-family: var(--display); font-weight: 700; color: var(--text); background: none; border: none; box-shadow: none; padding: 0; margin-bottom: 18px; position: relative; padding-bottom: 22px; } .banner::after { content: ""; position: absolute; left: 0; bottom: 8px; width: 120px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(255,109,90,0)); } .banner::before { content: "◆"; position: absolute; left: 0; bottom: -1px; color: var(--gold); font-size: .5rem; line-height: 1; transform: translateY(1px); } .center > .banner::after, .banner--center::after { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, rgba(255,109,90,0), var(--gold), rgba(255,109,90,0)); } .center > .banner::before, .banner--center::before { left: 50%; transform: translate(-50%, 1px); } .banner--sub { font-size: .82rem; font-family: var(--body); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); padding-bottom: 0; margin-bottom: 10px; } .banner--sub::before, .banner--sub::after { display: none; } /* Hairline divider with center diamond, for optional use between sections */ .flourish { display: flex; align-items: center; gap: 14px; color: var(--gold); margin: 0 auto; max-width: 420px; } .flourish::before, .flourish::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,109,90,0), var(--hairline-gold)); } .flourish::after { background: linear-gradient(90deg, var(--hairline-gold), rgba(255,109,90,0)); } /* ========================================================================== CARDS .panel — glassy content card .brick + .brick--* — legacy names kept: accent-tinted feature cards ========================================================================== */ .panel { background: linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.015)), var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; box-shadow: 0 18px 44px rgba(4, 12, 40, .45); } .panel--white { /* legacy name; same glassy card */ } .brick { --ac: var(--royal); position: relative; background: linear-gradient(180deg, rgba(190,216,255,.055), rgba(190,216,255,.02)), var(--card); border: 1px solid var(--hairline); border-top: 2px solid var(--ac); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(4, 12, 40, .45); color: var(--text); } .brick--blue { --ac: var(--royal); } .brick--yellow { --ac: var(--gold); } .brick--red { --ac: var(--gold); } /* legacy mapping → gold */ .brick--green { --ac: var(--teal); } /* legacy mapping → teal-blue */ .brick--orange { --ac: var(--gold); } .brick--navy { --ac: var(--sky); } .brick a { color: var(--sky); } /* ---------- Buttons ---------- */ .btn { display: inline-block; font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: .01em; text-decoration: none; text-align: center; padding: 14px 30px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .btn--yellow { /* primary (coral) */ background: linear-gradient(180deg, #FF7C5F, #F25538 62%, #E8482B); color: #FFFFFF; box-shadow: 0 8px 26px rgba(255, 109, 90, .35); } .btn--yellow:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 109, 90, .38); } .btn--blue { /* secondary outline */ background: rgba(72, 131, 255, .18); color: var(--ice); border-color: rgba(110, 168, 255, .45); } .btn--blue:hover { background: rgba(72, 131, 255, .3); transform: translateY(-2px); } .btn--red { /* tertiary outline gold */ background: rgba(255, 109, 90, .07); color: var(--gold-soft); border-color: var(--hairline-gold); } .btn--red:hover { background: rgba(255, 109, 90, .14); transform: translateY(-2px); } .btn--lg { font-size: 1.1rem; padding: 17px 38px; } /* ========================================================================== HEADER / NAV ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(9, 26, 74, .84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; } .logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: .01em; } .logo svg { width: 34px; height: 34px; } .logo .tld { color: var(--gold); } .nav-toggle { display: none; background: rgba(72,131,255,.2); border: 1px solid var(--hairline); border-radius: 10px; width: 46px; height: 42px; cursor: pointer; padding: 9px 11px; } .nav-toggle span { display: block; height: 2px; background: var(--ice); border-radius: 2px; margin: 5px 0; } .main-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .main-nav a { display: block; color: var(--text-mut); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 11px; border-radius: 999px; white-space: nowrap; } .main-nav a:hover { color: var(--text); background: rgba(110, 168, 255, .1); } .main-nav a[aria-current="page"] { color: var(--text); background: rgba(72, 131, 255, .40); } .main-nav .nav-cta a { background: linear-gradient(180deg, #FF7C5F, #F25538 62%, #E8482B); color: #FFFFFF; font-weight: 700; box-shadow: 0 4px 18px rgba(255, 109, 90, .3); margin-left: 8px; } .main-nav .nav-cta a:hover { background: var(--gold-soft); color: #FFFFFF; } @media (max-width: 1080px) { .nav-toggle { display: block; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; /* Opaque: this panel overlays page content, so any transparency costs contrast on the menu labels. */ background: #091A4A; border-bottom: 1px solid var(--hairline); box-shadow: 0 24px 40px rgba(4, 12, 40, .5); display: none; padding: 12px 22px 20px; } .main-nav.open { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; } .main-nav a { padding: 13px; font-size: 1.05rem; border-radius: 10px; } .main-nav .nav-cta a { margin: 8px 0 0; text-align: center; } } /* ========================================================================== HERO ========================================================================== */ .hero { padding: 96px 0 72px; overflow: hidden; text-align: center; position: relative; } .hero .container { max-width: 900px; position: relative; z-index: 1; } /* Big background artwork: rising ribbons + glow orbs + rings (inline SVG) */ .hero-art { position: absolute; inset: -8% -4%; pointer-events: none; z-index: 0; } .hero-art svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: no-preference) { .hero-art .drift-a { animation: heroDrift 11s ease-in-out infinite; } .hero-art .drift-b { animation: heroDrift 14s ease-in-out infinite reverse; } .hero-art .pulse { animation: heroPulse 6s ease-in-out infinite; } @keyframes heroDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes heroPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } } .hero h1 { margin-bottom: .4em; } .hero .lead { max-width: 64ch; margin: 0 auto 1em; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; justify-content: center; } /* Stat trio (hero + trust rows) */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--hairline); } .stat-row .stat-cell { text-align: center; } .stat-row .stat-num { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--gold); display: block; line-height: 1.2; } .stat-row .stat-label { color: var(--text-dim); font-size: .9rem; font-weight: 600; } /* ========================================================================== HERO SHOWCASE — "AI answer" mockup + visibility chart Pure HTML/CSS/SVG so the text stays real, crisp, and request-free. ========================================================================== */ /* overflow-x: clip contains the bleeding halo without creating a scroll container (plain `hidden` here would break the sticky header). */ .showcase-section { position: relative; padding: 0 0 40px; overflow-x: clip; } .showcase { position: relative; margin-top: -18px; } .showcase::before { /* halo behind the card */ content: ""; position: absolute; inset: -14% -6% -22%; background: radial-gradient(60% 60% at 30% 40%, rgba(72,131,255,.42), transparent 70%), radial-gradient(50% 55% at 78% 65%, rgba(255,109,90,.26), transparent 70%); filter: blur(10px); pointer-events: none; } .showcase-card { position: relative; margin: 0; background: linear-gradient(180deg, rgba(190,216,255,.10), rgba(190,216,255,.03)), var(--card); border: 1px solid rgba(190,216,255,.34); border-radius: 20px; box-shadow: 0 40px 90px rgba(4,12,40,.65), 0 0 0 1px rgba(255,255,255,.04) inset; overflow: hidden; } /* window chrome */ .sc-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--hairline); background: rgba(8,22,60,.5); } .sc-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(190,216,255,.3); } .sc-bar .dot:first-child { background: #FF6D5A; } .sc-bar .dot:nth-child(2) { background: #FFC46B; } .sc-bar .dot:nth-child(3) { background: #56D9A3; } .sc-bar .sc-label { margin-left: 10px; font-size: .8rem; color: var(--text-dim); letter-spacing: .04em; } .sc-body { display: grid; grid-template-columns: 1.25fr .75fr; gap: 0; } @media (max-width: 880px) { .sc-body { grid-template-columns: 1fr; } } /* left: the AI conversation */ .sc-chat { padding: 26px 28px 30px; } .sc-q { display: inline-block; max-width: 100%; background: rgba(72,131,255,.2); border: 1px solid rgba(126,179,255,.35); border-radius: 16px 16px 16px 4px; padding: 12px 18px; margin: 0 0 22px; color: var(--text); font-size: 1rem; } .sc-q .cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--sky); vertical-align: text-bottom; } @media (prefers-reduced-motion: no-preference) { .sc-q .cursor { animation: scBlink 1.15s steps(1) infinite; } @keyframes scBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } } .sc-a { display: grid; grid-template-columns: auto 1fr; gap: 14px; } .sc-ai { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(150deg, var(--royal), #6C5CFF); box-shadow: 0 6px 18px rgba(72,131,255,.45); } .sc-a > div > p { margin: 6px 0 14px; color: var(--text-mut); font-size: .95rem; } .sc-rec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,109,90,.16), rgba(255,109,90,.04)); border: 1px solid rgba(255,109,90,.42); box-shadow: 0 0 30px rgba(255,109,90,.14); } .sc-rec .sc-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(160deg, #FF8A74, #F04E31); } .sc-rec strong { font-family: var(--display); font-size: 1.05rem; color: var(--text); } .sc-badge-rec { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #FFD9D1; background: rgba(255,109,90,.22); border: 1px solid rgba(255,109,90,.5); padding: 4px 11px; border-radius: 999px; } .sc-others { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; } .sc-others li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--hairline); background: rgba(8,22,60,.34); color: var(--text-dim); font-size: .92rem; } .sc-others .sc-mark { background: rgba(190,216,255,.14); color: var(--text-dim); } /* right: visibility chart */ .sc-metrics { padding: 26px 28px 30px; border-left: 1px solid var(--hairline); background: rgba(8,22,60,.28); display: flex; flex-direction: column; gap: 16px; } @media (max-width: 880px) { .sc-metrics { border-left: none; border-top: 1px solid var(--hairline); } } /* A label inside the illustration, not a document heading — kept as a

so the page's heading hierarchy stays h1 -> h2 -> h3. */ .sc-metrics .sc-metrics-title { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); font-family: var(--body); font-weight: 700; margin: 0; } .sc-figure { display: flex; align-items: baseline; gap: 10px; } .sc-figure .sc-num { font-family: var(--display); font-size: 2.1rem; font-weight: 700; color: var(--text); line-height: 1; } .sc-figure .sc-delta { font-size: .82rem; font-weight: 700; color: #6BE3AE; } .sc-chart { width: 100%; height: auto; overflow: visible; } .sc-chart .sc-line { stroke-dasharray: 420; stroke-dashoffset: 420; } .reveal.in .sc-chart .sc-line { animation: scDraw 1.5s cubic-bezier(.4,.1,.2,1) .15s forwards; } .reveal.in .sc-chart .sc-fill { animation: scFade .9s ease 1s forwards; } .reveal.in .sc-chart .sc-tip { animation: scFade .5s ease 1.5s forwards; } .sc-chart .sc-fill, .sc-chart .sc-tip { opacity: 0; } @keyframes scDraw { to { stroke-dashoffset: 0; } } @keyframes scFade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sc-chart .sc-line { stroke-dashoffset: 0; } .sc-chart .sc-fill, .sc-chart .sc-tip { opacity: 1; } } .sc-chips { display: grid; gap: 8px; margin-top: auto; } .sc-chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .84rem; color: var(--text-mut); padding: 9px 13px; border-radius: 10px; border: 1px solid var(--hairline); background: rgba(8,22,60,.4); } .sc-chip b { color: var(--text); font-weight: 700; } .sc-chip .up { color: #6BE3AE; font-weight: 700; } .showcase-caption { margin: 16px auto 0; text-align: center; font-size: .82rem; color: var(--text-dim); } /* ========================================================================== SERVICE CARDS ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 38px; } .service-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.015)), var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(4, 12, 40, .45); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; overflow: hidden; } .service-card:hover { transform: translateY(-5px); border-color: rgba(255, 109, 90, .45); box-shadow: 0 24px 54px rgba(4, 12, 40, .6), 0 0 0 1px rgba(255,109,90,.12); } .service-card .card-top { margin: 22px 22px 0; padding: 0; min-height: 0; display: block; background: none; border: none; box-shadow: none; } .service-card .card-top .icon { font-size: 1.5rem; line-height: 1; display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: rgba(72, 131, 255, .25); border: 1px solid rgba(110, 168, 255, .3); filter: none; } .service-card .card-top.brick--yellow .icon, .service-card .card-top.brick--red .icon { background: rgba(255, 109, 90, .12); border-color: var(--hairline-gold); } .service-card .card-top.brick--green .icon { background: rgba(55, 184, 214, .12); border-color: rgba(55,184,214,.35); } /* card-top keeps its legacy brick classes but renders flat */ .service-card .card-top.brick { border-top: none; background: none; box-shadow: none; } .service-card .card-body { padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .service-card h3 { margin: 0; } .service-card p { margin: 0; font-size: .95rem; color: var(--text-mut); } .service-card .card-link { margin-top: auto; padding-top: 14px; font-weight: 700; font-size: .92rem; color: var(--gold); } .service-card:hover .card-link { text-decoration: underline; } /* Feature tag list (dot bullets, like the inspiration cards) */ .tag-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 7px; } .tag-list li { position: relative; padding-left: 18px; font-size: .88rem; color: var(--text-mut); } .tag-list li::before { content: ""; position: absolute; left: 0; top: .48em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(255, 109, 90, .8); } /* ========================================================================== PROCESS STEPS ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 42px; } .step { padding: 30px 24px 26px; } .step .num { font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1; display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; color: var(--gold); background: rgba(255, 109, 90, .07); border: 1px solid var(--hairline-gold); border-radius: 50%; box-shadow: none; } .step h3 { color: var(--text); } .step p { font-size: .95rem; margin: 0; color: var(--text-mut); } /* ========================================================================== TIP STRIP (highlight band) ========================================================================== */ .tip-strip { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 28px 32px; margin-top: 30px; background: radial-gradient(500px 200px at 0% 50%, rgba(72, 131, 255, .25), transparent 70%), linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.015)); background-color: var(--card); } .tip-strip .tip-icon { font-size: 2rem; filter: none; } .tip-strip h3 { margin-bottom: .3em; } .tip-strip p { margin: 0; color: var(--text-mut); } @media (max-width: 640px) { .tip-strip { grid-template-columns: 1fr; text-align: center; } .tip-strip .tip-icon { margin: 0 auto; } } /* ========================================================================== STATS / BENEFIT CARDS ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; margin-top: 38px; } .stat { text-align: left; padding: 26px 24px 24px; } .stat .big { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.25; display: block; margin-bottom: 8px; color: var(--text); } .stat p { margin: 0; font-size: .92rem; color: var(--text-mut); font-weight: 500; } /* Small stat badge (why-choose cards) */ .badge { display: inline-block; margin-top: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--gold-soft); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hairline-gold); background: rgba(255, 109, 90, .07); } /* Owner-worry cards: a worry in the owner's own words + a plain answer */ .quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 38px; } .quote-card { padding: 28px; } .quote-card blockquote { margin: 0 0 14px; font-size: 1.04rem; font-weight: 600; color: var(--text); } .quote-card blockquote::before { content: "“"; display: block; font-family: var(--display); font-size: 2.6rem; color: var(--gold); line-height: .6; margin-bottom: 10px; } .quote-card .answer { margin: 0; font-size: .95rem; color: var(--text-mut); } /* Plain-English glossary */ .jargon { margin: 36px 0 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.015)), var(--card); box-shadow: 0 18px 44px rgba(4, 12, 40, .45); } .jargon > div { display: grid; grid-template-columns: minmax(170px, 240px) 1fr; gap: 8px 30px; padding: 22px 28px; } .jargon > div + div { border-top: 1px solid var(--hairline); } .jargon dt { font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--sky); } .jargon dt .say { display: block; margin-top: 4px; font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); } .jargon dd { margin: 0; color: var(--text-mut); } @media (max-width: 700px) { .jargon > div { grid-template-columns: 1fr; padding: 20px 22px; } } /* ========================================================================== PRICING / JOURNEY TIERS ========================================================================== */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 42px; align-items: stretch; } .tier { display: flex; flex-direction: column; padding: 34px 30px; } .tier .tier-tag { align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); background: rgba(72,131,255,.22); border: 1px solid rgba(110,168,255,.3); padding: 5px 13px; border-radius: 999px; margin-bottom: 16px; } .tier--featured { border-top-color: var(--gold); box-shadow: 0 24px 60px rgba(4,12,40,.6), 0 0 40px rgba(255,109,90,.07); } .tier--featured .tier-tag { color: var(--gold-soft); background: rgba(255,109,90,.08); border-color: var(--hairline-gold); } .tier .price { font-family: var(--display); font-weight: 700; font-size: 2.2rem; color: var(--text); line-height: 1.1; } .tier .price small { font-family: var(--body); font-weight: 600; font-size: .85rem; color: var(--text-dim); display: block; margin-top: 4px; } .tier .tag-list { margin: 20px 0 26px; } .tier .btn { margin-top: auto; } /* ========================================================================== FAQ ========================================================================== */ .faq { display: grid; gap: 14px; margin-top: 34px; } .faq details { background: linear-gradient(180deg, rgba(190,216,255,.045), rgba(190,216,255,.015)), var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 0 22px; box-shadow: 0 10px 28px rgba(4, 12, 40, .35); } .faq details[open] { border-color: rgba(255, 109, 90, .35); } .faq summary { cursor: pointer; font-weight: 700; font-size: 1.03rem; padding: 18px 0; list-style: none; position: relative; padding-right: 44px; color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.3rem; color: var(--gold); width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--hairline-gold); border-radius: 50%; background: rgba(255, 109, 90, .06); box-shadow: none; } .faq details[open] summary::after { content: "–"; } .faq details > div { padding: 0 0 20px; color: var(--text-mut); } /* ========================================================================== PAGE HERO (inner pages) + breadcrumbs ========================================================================== */ .page-hero { padding: 64px 0 48px; } .breadcrumbs { font-size: .85rem; margin-bottom: 22px; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--text-dim); } .breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--text-dim); } .breadcrumbs a { color: var(--sky); font-weight: 600; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } /* Two-column layouts */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; } .split--rev { grid-template-columns: .9fr 1.1fr; } @media (max-width: 860px) { .split, .split--rev, .hero-grid { grid-template-columns: 1fr; } } /* Checklist bullets (legacy .brick-list) */ .brick-list { list-style: none; padding: 0; display: grid; gap: 12px; } .brick-list li { position: relative; padding-left: 30px; color: var(--text-mut); } .brick-list li strong { color: var(--text); } .brick-list li::before { content: "✦"; position: absolute; left: 0; top: .1em; width: auto; height: auto; border: none; border-radius: 0; background: none; box-shadow: none; color: var(--gold); font-size: .9em; } .brick-list--blue li::before, .brick-list--red li::before, .brick-list--yellow li::before { background: none; box-shadow: none; color: var(--gold); } /* ========================================================================== CTA BAND ========================================================================== */ .cta-band { margin: 60px 0 90px; } .cta-band .inner { padding: 56px 40px; text-align: center; background: radial-gradient(600px 260px at 50% -20%, rgba(72, 131, 255, .45), transparent 70%), radial-gradient(400px 200px at 50% 120%, rgba(255, 109, 90, .1), transparent 70%), linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.015)); background-color: var(--card); border-top: 2px solid var(--gold) !important; } .cta-band h2 { color: var(--text); } .cta-band .lead { max-width: 60ch; margin-left: auto; margin-right: auto; } .cta-band .btn { margin-top: 16px; } /* ========================================================================== FORMS ========================================================================== */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-grid .full { grid-column: 1 / -1; } label { font-weight: 600; font-size: .88rem; display: block; margin-bottom: 7px; color: var(--text-mut); } input, select, textarea { width: 100%; font: inherit; color: var(--text); padding: 13px 15px; border: 1px solid var(--hairline); border-radius: 10px; background: rgba(8, 22, 60, .6); box-shadow: none; } input::placeholder, textarea::placeholder { color: var(--text-dim); } input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sky) 50%), linear-gradient(135deg, var(--sky) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } select option { background: var(--bg-2); color: var(--text); } textarea { min-height: 140px; resize: vertical; } button.btn { border: none; } button.btn[disabled] { opacity: .65; cursor: progress; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* Spam honeypot — hidden from people, still reachable by bots */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Form messages */ .form-note { margin: 0 0 14px; padding: 13px 16px; border-radius: 10px; font-size: .92rem; } .form-note--error { color: #FFD9D1; background: rgba(255,109,90,.12); border: 1px solid rgba(255,109,90,.5); } .form-note--error a { color: var(--gold-soft); } .form-success { text-align: center; padding: 40px 28px; border: 1px solid rgba(107,227,174,.45); border-radius: var(--radius); background: linear-gradient(180deg, rgba(107,227,174,.12), rgba(107,227,174,.03)), var(--card); } .form-success .fs-check { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; font-size: 1.6rem; color: #08351F; background: linear-gradient(160deg, #8CF0C2, #3FBF89); } .form-success h3 { margin-bottom: .4em; } .form-success p { margin: 0; color: var(--text-mut); } /* ========================================================================== BLOG CARDS ========================================================================== */ .post-card { padding: 30px; } .post-card .meta, .meta { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { margin-top: 40px; background: radial-gradient(700px 300px at 50% 0%, rgba(46, 107, 255, .1), transparent 70%), #081C4C; border-top: 1px solid var(--hairline); color: var(--text-mut); padding: 60px 0 30px; } .site-footer a { color: var(--text-mut); text-decoration: none; } .site-footer a:hover { color: var(--gold-soft); } .site-footer .logo { color: var(--text); } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; } .site-footer h3 { color: var(--gold); font-family: var(--body); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .95rem; } .footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .85rem; color: var(--text-dim); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== SCROLL REVEAL ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .reveal-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; } .reveal-ready .reveal.in { opacity: 1; transform: none; } } /* ---------- Small screens ---------- */ @media (max-width: 640px) { .section { padding: 52px 0; } .hero { padding: 64px 0 52px; } .hero-ctas .btn { width: 100%; } .cta-band .inner { padding: 40px 24px; } } /* ---------- 404 ---------- */ .err-wrap { min-height: 55vh; display: grid; place-items: center; text-align: center; padding: 80px 20px; } .err-code { font-family: var(--display); font-weight: 700; font-size: clamp(4.5rem, 15vw, 9rem); line-height: 1; color: transparent; background: linear-gradient(180deg, var(--ice), var(--royal)); -webkit-background-clip: text; background-clip: text; display: block; padding: 0; border: none; box-shadow: none; margin-bottom: 10px; } .err-code::before, .err-code::after { display: none; }