:root { --bg: #021E18; --bg2: #03241C; --bg3: #042E23; --surface: #003B2D; --surface2: #0A4A38; --mint: #59C3BA; --amber: #F3B45E; --text: #D9DFD9; --text2: #B8C4BD; --muted: #7FA493; --line: rgba(89, 195, 186, .22); --line-strong: rgba(89, 195, 186, .42); --shadow: 0 28px 80px rgba(0, 0, 0, .25); --radius: 22px; --shell: min(1180px, calc(100% - 40px)); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Prompt", Arial, sans-serif; line-height: 1.72; }
img { display: block; max-width: 100%; } a { color: inherit; } .shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 12px 18px; border-radius: 10px; background: var(--amber); color: var(--bg); font-weight: 700; } .skip-link:focus { top: 12px; }
.site-header { position: sticky; z-index: 50; top: 0; min-height: 76px; padding: 12px max(20px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(2, 30, 24, .92); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand img { width: 168px; } .site-header nav { display: flex; align-items: center; gap: 8px; } .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; color: var(--text2); text-decoration: none; font-size: .91rem; } .site-header nav a:hover, .site-header nav a[aria-current] { background: rgba(89, 195, 186, .1); color: var(--mint); } .site-header .nav-cta { border: 1px solid rgba(243, 180, 94, .55); color: var(--amber); }
.hero { position: relative; min-height: 690px; display: grid; align-items: end; isolation: isolate; overflow: hidden; } .hero-image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; } .hero-overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(2, 30, 24, .96) 0%, rgba(2, 30, 24, .82) 47%, rgba(2, 30, 24, .28) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 44%); } .hero-content { padding-block: 110px 130px; }
.eyebrow { margin: 0 0 14px; color: var(--mint); font: 600 .78rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; } .client-pill { display: inline-flex; margin: 0 0 22px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text2); background: rgba(0, 59, 45, .6); } h1, h2, h3, h4, p { overflow-wrap: anywhere; } h1 { max-width: 890px; margin: 0; font-size: clamp(2.7rem, 6.4vw, 5.9rem); line-height: 1.07; letter-spacing: -.045em; } .hero-copy { max-width: 720px; margin: 28px 0 0; color: var(--text2); font-size: clamp(1.03rem, 1.8vw, 1.3rem); } .hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
.button, .text-link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .button { padding: 12px 22px; border-radius: 12px; background: var(--amber); color: var(--bg); font-weight: 700; box-shadow: 0 14px 32px rgba(243, 180, 94, .18); } .text-link { color: var(--mint); font-weight: 600; } .review-label { margin: 18px 0 0; color: var(--muted); font-size: .86rem; }
.metrics { position: relative; z-index: 2; margin-top: -62px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: linear-gradient(145deg, var(--surface), var(--bg2)); box-shadow: var(--shadow); } .metrics article { min-width: 0; padding: 24px; border-right: 1px solid var(--line); } .metrics article:last-child { border-right: 0; } .metrics span, .metrics small { display: block; color: var(--muted); } .metrics strong { display: block; margin-block: 6px; color: var(--amber); font-size: clamp(1.4rem, 2.3vw, 2.05rem); line-height: 1.2; }
.section { padding-block: 96px; scroll-margin-top: 88px; } .surface { background: linear-gradient(180deg, var(--bg2), var(--bg3)); border-block: 1px solid var(--line); } .section-heading { max-width: 850px; margin-bottom: 36px; } .section-heading h2 { margin: 0; font-size: clamp(2rem, 4.3vw, 4rem); line-height: 1.12; letter-spacing: -.035em; } .section-copy { max-width: 760px; margin: 18px 0 0; color: var(--text2); font-size: 1.05rem; } .executive-copy { max-width: 900px; display: grid; gap: 18px; } .executive-copy p { margin: 0; color: var(--text2); font-size: 1.12rem; }
.opportunity-grid, .channel-grid, .plan-grid, .creative-grid, .journey-grid, .scenario-grid, .roadmap-grid, .next-grid { display: grid; gap: 18px; } .opportunity-grid { grid-template-columns: repeat(4, 1fr); } .opportunity-grid article, .channel-grid article, .plan-card, .creative-grid article, .journey-grid article, .scenario-card, .roadmap-grid article, .next-grid article, .kpi-list article, .checklist article { border: 1px solid var(--line); border-radius: 18px; background: rgba(0, 59, 45, .56); box-shadow: inset 0 1px rgba(255, 255, 255, .025); } .opportunity-grid article { padding: 24px; } .opportunity-grid strong { color: var(--amber); font-size: 1.7rem; } .opportunity-grid h3 { margin: 13px 0 8px; font-size: 1rem; } .opportunity-grid p, .channel-grid p, .plan-card p, .creative-grid p, .journey-grid p, .next-grid p { margin: 0; color: var(--text2); }
.current-context { margin-top: 28px; padding: 26px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(2, 30, 24, .52); } .current-context > h3 { margin: 0 0 18px; font-size: 1.28rem; } .current-context-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .current-context-grid article { padding: 20px; border-left: 3px solid var(--mint); background: rgba(0, 59, 45, .42); } .current-context-grid .context-label { margin: 0 0 8px; color: var(--muted); font: 600 .78rem/1.5 "IBM Plex Mono", monospace; } .current-context-grid strong { display: block; color: var(--amber); font-size: 1.35rem; } .current-context-grid article > p:last-child { margin: 8px 0 0; color: var(--text2); }
.channel-grid { grid-template-columns: repeat(2, 1fr); } .channel-grid article { padding: 30px; } .channel-label { color: var(--mint) !important; font: 600 .78rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; } .channel-grid strong { display: block; margin-block: 8px 20px; color: var(--amber); font-size: 2rem; } .channel-grid h3 { margin: 0 0 14px; font-size: 1.12rem; }
.plan-grid { grid-template-columns: repeat(3, 1fr); } .google-grid { grid-template-columns: repeat(4, 1fr); } .plan-card { padding: 26px; } .plan-card > div { display: flex; justify-content: space-between; gap: 12px; color: var(--mint); } .plan-card > div strong { color: var(--amber); } .plan-card h3 { margin: 24px 0 10px; } .plan-card small { display: block; margin-top: 16px; color: var(--muted); } .subheading { margin: 54px 0 20px; font-size: 1.45rem; }
.creative-grid { grid-template-columns: repeat(4, 1fr); } .creative-grid article { padding: 24px; } .creative-grid span, .journey-grid span, .next-grid span { color: var(--amber); font: 600 .82rem/1.4 "IBM Plex Mono", monospace; } .creative-grid h4, .journey-grid h3, .next-grid h3 { margin: 20px 0 10px; font-size: 1.05rem; } .highlight, .final-callout { margin-top: 28px; padding: 24px; border-left: 3px solid var(--amber); background: rgba(243, 180, 94, .08); } .highlight p, .final-callout p { margin: 6px 0 0; color: var(--text2); }
.journey-grid { grid-template-columns: repeat(4, 1fr); } .journey-grid article { padding: 28px; } .scenario-grid { grid-template-columns: repeat(3, 1fr); } .scenario-card { overflow: hidden; } .scenario-card h3 { margin: 0; padding: 20px 22px; background: var(--surface2); } .scenario-card dl { margin: 0; padding: 8px 22px 20px; } .scenario-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); } .scenario-card dl div:last-child { border-bottom: 0; } .scenario-card dt { color: var(--muted); } .scenario-card dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.kpi-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .kpi-list article { padding: 20px 22px; } .kpi-list h4 { margin: 0; font-size: 1rem; } .kpi-list strong { display: block; margin: 8px 0; color: var(--amber); } .kpi-list p { margin: 0; color: var(--text2); } .roadmap-grid { grid-template-columns: repeat(3, 1fr); } .roadmap-grid article { padding: 26px; } .period { color: var(--amber); font: 600 .82rem/1.4 "IBM Plex Mono", monospace; } .roadmap-grid h3 { margin: 14px 0; } .roadmap-grid ul { margin: 0; padding-left: 21px; color: var(--text2); } .roadmap-grid li + li { margin-top: 9px; }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .checklist article { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 16px; padding: 20px; } .checklist span { color: var(--mint); font: 600 .8rem/1.4 "IBM Plex Mono", monospace; } .checklist p { margin: 0; color: var(--text2); } .next-steps { background: radial-gradient(circle at 88% 5%, rgba(89, 195, 186, .16), transparent 30%), var(--surface); border-block: 1px solid var(--line-strong); } .next-grid { grid-template-columns: repeat(3, 1fr); } .next-grid article { padding: 30px; background: var(--bg2); } .source-note { padding-block: 28px; color: var(--muted); font-size: .82rem; } footer { padding-block: 30px; border-top: 1px solid var(--line); background: #011713; } footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; } footer img { width: 142px; } footer p { margin: 0; color: var(--muted); font-size: .84rem; } :focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
@media (max-width: 980px) { .metrics, .opportunity-grid, .creative-grid, .google-grid, .journey-grid { grid-template-columns: repeat(2, 1fr); } .metrics article:nth-child(2) { border-right: 0; } .metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .plan-grid, .roadmap-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { :root { --shell: min(100% - 28px, 1180px); } .site-header { min-height: 68px; padding: 10px 14px; } .brand img { width: 132px; } .site-header nav a:not(.nav-cta) { display: none; } .site-header .nav-cta { padding-inline: 12px; font-size: .82rem; } .hero { min-height: 620px; } .hero-image { object-position: 61% center; } .hero-overlay { background: linear-gradient(180deg, rgba(2, 30, 24, .4), rgba(2, 30, 24, .96) 58%, var(--bg)); } .hero-content { padding-block: 90px 98px; } h1 { font-size: clamp(2.28rem, 12.4vw, 3.45rem); } .hero-copy { font-size: 1rem; } .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; } .metrics { grid-template-columns: 1fr; margin-top: -46px; } .metrics article { border-right: 0; border-bottom: 1px solid var(--line); } .metrics article:last-child { border-bottom: 0; } .section { padding-block: 68px; } .section-heading h2 { font-size: clamp(2rem, 10vw, 2.9rem); } .opportunity-grid, .channel-grid, .creative-grid, .journey-grid, .scenario-grid, .kpi-list, .checklist, .next-grid, .current-context-grid { grid-template-columns: 1fr; } .scenario-card dl div { align-items: flex-start; } .checklist article { grid-template-columns: 38px 1fr; } footer .shell { align-items: flex-start; flex-direction: column; } }
@media (max-width: 420px) and (max-height: 900px) { .hero { min-height: calc(100svh - 68px); } .hero-content { padding-block: 24px 28px; } .hero-content .eyebrow { margin-bottom: 7px; font-size: .7rem; line-height: 1.3; } .client-pill { margin-bottom: 10px; padding: 5px 10px; font-size: .88rem; } h1 { font-size: clamp(1.9rem, 9.5vw, 2.3rem); line-height: 1.03; } .hero-copy { margin-top: 12px; font-size: .94rem; line-height: 1.5; } .hero-actions { margin-top: 16px; } .review-label { margin-top: 10px; font-size: .76rem; line-height: 1.35; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }