@font-face { font-family: "Figtree"; src: url("/Figtree-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/Figtree-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/Figtree-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root { --ink:#151515; --muted:#676767; --paper:#fbfaf7; --blue:#0866e5; --blue-dark:#064ca9; --line:#deddd8; --card:#fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Figtree",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { display:block; max-width:100%; }
.shell { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
.narrow { width:min(900px,calc(100% - 40px)); }
.section-pad { padding:110px 0; }
.eyebrow,.section-kicker { margin:0 0 24px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.section-kicker.light { color:#8fbdff; }
h1,h2,h3,p { overflow-wrap:break-word; }
h2 { margin:0; font-size:clamp(44px,5.2vw,72px); line-height:.98; letter-spacing:-.05em; }

.hero { min-height:620px; display:grid; align-items:center; background:radial-gradient(circle at 88% 18%,rgba(8,102,229,.12),transparent 28%),linear-gradient(180deg,#fff 0%,var(--paper) 100%); border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:1fr; }
h1 { margin:0; max-width:820px; font-size:clamp(52px,6.4vw,91px); line-height:.96; letter-spacing:-.055em; }
h1 span { color:var(--blue); }
.lead { max-width:680px; margin:34px 0 30px; color:var(--muted); font-size:21px; line-height:1.55; }
.text-link { display:inline-flex; gap:12px; align-items:center; color:var(--blue); font-weight:700; text-underline-offset:6px; }
.hero-note { padding:28px; background:var(--ink); color:#fff; border-radius:5px; box-shadow:0 26px 70px rgba(20,20,20,.17); }
.hero-note p { margin:0; }
.hero-note .note-label { color:#8fbdff; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero-note .note-title { margin:16px 0 20px; font-size:24px; font-weight:600; line-height:1.22; }
.hero-note>p:last-of-type { color:#bdbdbd; line-height:1.55; }
.signature { margin-top:34px; padding-top:18px; border-top:1px solid #363636; font-weight:600; }

.video-section h2 { max-width:700px; margin-bottom:40px; }
.video-embed { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:#101010; box-shadow:0 26px 80px rgba(0,0,0,.14); }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-external-link { display:inline-flex; align-items:center; gap:8px; margin-top:20px; color:var(--blue); font-weight:700; text-underline-offset:6px; }
.video-external-link:hover { color:var(--blue-dark); }
.video-card { min-height:440px; display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border-radius:8px; background:#101010; color:#fff; box-shadow:0 26px 80px rgba(0,0,0,.14); }
.video-copy { display:flex; flex-direction:column; justify-content:center; padding:54px; }
.video-pill { align-self:flex-start; padding:7px 11px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#8fbdff; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.video-copy h3 { margin:25px 0 16px; font-size:clamp(30px,4vw,47px); line-height:1.02; letter-spacing:-.035em; }
.video-copy p { margin:0; max-width:390px; color:#b8b8b8; line-height:1.55; }
.portrait-wrap { position:relative; min-height:420px; background:linear-gradient(135deg,#151f32,#0b5ecf); overflow:hidden; }
.portrait-wrap:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,25,59,.28)); }
.portrait-wrap img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.play { position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; display:grid; place-items:center; width:84px; height:84px; padding-left:5px; border-radius:50%; background:#fff; color:var(--blue); font-size:27px; box-shadow:0 16px 45px rgba(0,0,0,.28); }
.diagnosis-intro { max-width:760px; margin:58px 0 34px; font-size:23px; line-height:1.5; letter-spacing:-.015em; }
.diagnosis-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.diagnosis-card { padding:28px; background:var(--card); border:1px solid var(--line); border-radius:6px; }
.diagnosis-card>span { color:var(--blue); font-size:13px; font-weight:700; }
.diagnosis-card h3 { margin:34px 0 10px; font-size:24px; letter-spacing:-.025em; }
.diagnosis-card p { margin:0; color:var(--muted); line-height:1.55; }
.detail-note { margin:26px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.caveat { margin-top:28px; padding:24px 28px; border-left:4px solid var(--blue); background:#eef5ff; color:#324253; line-height:1.6; }

.problems { background:#fff; }
.section-heading { max-width:800px; margin-bottom:54px; }
.section-heading>p:last-child { max-width:650px; margin:24px 0 0; color:var(--muted); font-size:19px; line-height:1.55; }
.split-heading { max-width:none; display:grid; grid-template-columns:1.5fr .7fr; align-items:end; gap:80px; }
.split-heading>p:last-child { margin:0; }
.problem-list { border-top:1px solid var(--line); }
.problem-row { display:grid; grid-template-columns:70px minmax(220px,.75fr) 1.35fr; gap:30px; align-items:start; padding:30px 0; border-bottom:1px solid var(--line); }
.row-number { color:var(--blue); font-size:13px; font-weight:700; }
.problem-row h3 { margin:0; font-size:24px; letter-spacing:-.025em; }
.problem-row p { margin:0; color:var(--muted); line-height:1.55; }

.scope { background:var(--paper); }
.scope-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.scope-card { padding:30px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.scope-number { width:42px; height:42px; display:grid; place-items:center; background:#edf4ff; color:var(--blue); border-radius:50%; font-size:13px; font-weight:700; }
.scope-card h3 { margin:28px 0 18px; font-size:26px; letter-spacing:-.03em; }
.scope-card ul { margin:0; padding:0; list-style:none; }
.scope-card li { position:relative; padding:12px 0 12px 21px; border-top:1px solid #ecebe7; color:var(--muted); font-size:15px; line-height:1.45; }
.scope-card li:before { content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; }
.after-launch { margin-top:18px; display:grid; grid-template-columns:140px 1fr; gap:30px; padding:26px 30px; background:var(--ink); color:#fff; border-radius:5px; }
.after-launch span { color:#8fbdff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.after-launch ul { display:grid; gap:9px; margin:0; padding:0; color:#d0d0d0; line-height:1.55; list-style:none; }
.after-launch li { position:relative; padding-left:19px; }
.after-launch li:before { content:"✓"; position:absolute; left:0; color:#8fbdff; font-weight:700; }

.timeline-section { background:#fff; }
.timeline-section h2 { margin-bottom:48px; }
.timeline { border-top:1px solid var(--line); }
.timeline-row { display:grid; grid-template-columns:54px 1fr 170px; gap:24px; align-items:center; padding:23px 0; border-bottom:1px solid var(--line); }
.timeline-row>span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; font-weight:700; }
.timeline-row h3 { margin:0 0 4px; font-size:20px; }
.timeline-row p { margin:0; color:var(--muted); }
.timeline-row strong { text-align:right; color:var(--blue); font-size:14px; }
.timeline-summary { margin:34px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }
.timeline-summary strong { color:var(--ink); }

.results { background:#111; color:#fff; }
.results h2 { margin-bottom:54px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #3b3b3b; border-bottom:1px solid #3b3b3b; }
.metrics>div { padding:34px; border-right:1px solid #3b3b3b; }
.metrics>div:last-child { border-right:0; }
.metrics strong { display:block; color:#77aeff; font-size:clamp(40px,5vw,66px); line-height:1; letter-spacing:-.05em; }
.metrics span { display:block; margin-top:16px; color:#aaa; line-height:1.45; }
.case-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
.case-card { padding:38px; background:#1b1b1b; border:1px solid #333; border-radius:6px; }
.accent-case { background:var(--blue); border-color:var(--blue); }
.case-label { margin:0 0 40px; color:#8fbdff; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.accent-case .case-label { color:#cfe1ff; }
.case-card h3 { margin:0 0 20px; font-size:clamp(30px,3.2vw,46px); line-height:1.02; letter-spacing:-.04em; }
.case-card>p:last-of-type { margin:0; color:#aaa; line-height:1.6; }
.accent-case>p:last-of-type { color:#e6efff; }
.case-card a { display:inline-block; margin-top:28px; color:#fff; font-weight:700; text-underline-offset:5px; }

.portfolio { background:#f1f0eb; }
.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.project-image { display:block; overflow:hidden; background:#fff; border:1px solid #d8d7d2; border-radius:8px; box-shadow:0 18px 45px rgba(0,0,0,.07); transition:border-color .25s ease,box-shadow .25s ease; }
.project-image img { width:100%; height:auto; }
.project-image:hover { border-color:#9ec4f8; box-shadow:0 22px 55px rgba(8,102,229,.14); }
.figma-link { margin-top:32px; display:flex; justify-content:space-between; align-items:center; gap:28px; padding:26px 30px; background:var(--blue); color:#fff; border-radius:7px; box-shadow:0 18px 45px rgba(8,102,229,.25); font-size:21px; font-weight:700; text-decoration:none; transition:transform .22s ease,background .22s ease,box-shadow .22s ease; }
.figma-link:hover { transform:translateY(-2px); background:var(--blue-dark); box-shadow:0 22px 55px rgba(8,102,229,.34); }
.figma-link:focus-visible { outline:3px solid #87b9ff; outline-offset:4px; }
.figma-link-copy { display:flex; flex-direction:column; gap:5px; }
.figma-link-copy small { color:#cfe1ff; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.figma-link b { display:grid; place-items:center; flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--blue); font-size:24px; }

.testimonials { background:#fff; }
.testimonials h2 { margin-bottom:48px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testimonial-grid figure { margin:0; display:flex; flex-direction:column; min-height:390px; padding:30px; background:var(--paper); border:1px solid var(--line); border-radius:6px; }
.quote-mark { color:var(--blue); font-size:62px; line-height:.7; font-weight:700; }
.testimonial-grid blockquote { margin:34px 0; font-size:19px; line-height:1.55; letter-spacing:-.01em; }
.testimonial-grid figcaption { margin-top:auto; padding-top:22px; border-top:1px solid var(--line); }
.testimonial-grid figcaption strong,.testimonial-grid figcaption span { display:block; }
.testimonial-grid figcaption span { margin-top:4px; color:var(--muted); font-size:14px; }

.investment h2 { margin-bottom:44px; }
.price-card { padding:48px; background:var(--blue); color:#fff; border-radius:8px; box-shadow:0 30px 80px rgba(8,102,229,.22); }
.price-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.price-top>span { font-size:18px; font-weight:600; }
.price-top small { padding:7px 10px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#dceaff; }
.price { margin:56px 0 6px; font-size:clamp(68px,10vw,112px); line-height:.85; font-weight:700; letter-spacing:-.07em; }
.price span { font-size:21px; letter-spacing:-.02em; }
.payment { margin:15px 0 0; color:#dceaff; }
.date-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.date-grid>div { padding:18px; background:rgba(0,0,0,.13); border-radius:4px; }
.date-grid span,.date-grid strong { display:block; }
.date-grid span { color:#cfe1ff; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.date-grid strong { margin-top:7px; font-size:19px; }
.primary-button,.inverse-button { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; background:#fff; color:var(--blue-dark); border-radius:4px; box-shadow:0 10px 28px rgba(0,0,0,.12); font-weight:700; text-decoration:none; transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease; }
.primary-button:hover,.inverse-button:hover { transform:translateY(-3px); background:var(--ink); color:#fff; box-shadow:0 16px 38px rgba(0,0,0,.24); }
.primary-button:focus-visible,.inverse-button:focus-visible { outline:3px solid #b8d6ff; outline-offset:4px; }
.addons { margin-top:38px; }
.addons h3 { font-size:23px; }
.addons>div { display:flex; justify-content:space-between; gap:30px; padding:17px 0; border-top:1px solid var(--line); }
.addons>div:last-child { border-bottom:1px solid var(--line); }
.addons span { color:var(--muted); }

.next { background:var(--blue); color:#fff; }
.next h2 { margin-bottom:48px; }
.next-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.32); }
.next-grid article { min-height:320px; padding:30px; border-right:1px solid rgba(255,255,255,.32); }
.next-grid article:last-child { border-right:0; }
.next-grid article>span { color:#b9d6ff; font-size:13px; font-weight:700; }
.next-grid h3 { margin:42px 0 16px; font-size:31px; letter-spacing:-.035em; }
.next-grid p { color:#d9e8ff; line-height:1.55; }
.next-grid a:not(.inverse-button) { display:inline-block; margin-top:20px; color:#fff; font-weight:700; text-underline-offset:5px; }
.calendar-link { text-decoration:none; }
.calendar-link:hover,.calendar-link:focus-visible { text-decoration:underline; }
.inverse-button { margin-top:24px; }

footer { padding:34px 0 90px; background:#101010; color:#fff; }
.footer-inner { display:flex; justify-content:space-between; gap:60px; align-items:start; }
.footer-inner strong,.footer-inner span { display:block; }
.footer-inner span { margin-top:7px; color:#8d8d8d; }
.footer-inner p { max-width:470px; margin:0; color:#777; text-align:right; line-height:1.45; }
.floating-reply { position:fixed; z-index:35; right:22px; bottom:24px; display:grid; grid-template-columns:1fr auto; gap:7px 16px; align-items:center; min-width:205px; padding:18px 20px; background:linear-gradient(135deg,var(--blue),#0053c5); color:#fff; border-radius:12px; box-shadow:0 18px 50px rgba(8,102,229,.35); text-decoration:none; transition:translate .22s ease,box-shadow .22s ease,background .22s ease; }
.floating-reply>span { grid-column:1 / -1; display:flex; align-items:center; gap:8px; color:#dceaff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.floating-reply i { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.14); animation:floatingPulse 1.8s ease-in-out infinite; }
.floating-reply strong { font-size:17px; }
.floating-reply b { font-size:22px; }
.floating-reply:hover { translate:0 -6px; background:linear-gradient(135deg,#064ca9,#073b80); box-shadow:0 24px 62px rgba(8,102,229,.45); }
.floating-reply:focus-visible { outline:3px solid #87b9ff; outline-offset:4px; }

.exit-overlay { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(8,12,20,.72); backdrop-filter:blur(9px); animation:exitFade .2s ease both; }
.exit-modal { position:relative; width:min(650px,100%); overflow:hidden; padding:48px; background:radial-gradient(circle at 90% 5%,rgba(69,143,244,.28),transparent 36%),#111827; color:#fff; border:1px solid rgba(143,189,255,.32); border-radius:14px; box-shadow:0 35px 100px rgba(0,0,0,.48); animation:exitEnter .28s ease both; }
.exit-modal:after { content:"→"; position:absolute; right:-15px; bottom:-82px; color:rgba(143,189,255,.1); font-size:250px; font-weight:700; line-height:1; rotate:-18deg; pointer-events:none; }
.exit-close { position:absolute; z-index:2; right:18px; top:16px; width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:25px; line-height:1; transition:background .2s ease,rotate .2s ease; }
.exit-close:hover { background:rgba(255,255,255,.18); rotate:8deg; }
.exit-close:focus-visible { outline:3px solid #87b9ff; outline-offset:3px; }
.exit-kicker { margin:0 0 20px; color:#8fbdff; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.exit-modal h2 { position:relative; z-index:1; max-width:560px; font-size:clamp(38px,6vw,60px); }
.exit-modal>p:not(.exit-kicker) { position:relative; z-index:1; max-width:560px; margin:28px 0 0; color:#c7d0dd; font-size:18px; line-height:1.6; }
.exit-actions { position:relative; z-index:1; display:grid; grid-template-columns:1.4fr .8fr; gap:12px; margin-top:34px; }
.exit-actions a,.exit-actions button { display:flex; align-items:center; justify-content:center; min-height:58px; padding:16px 20px; border-radius:5px; font:inherit; font-weight:700; cursor:pointer; }
.exit-actions a { justify-content:space-between; background:var(--blue); color:#fff; text-decoration:none; transition:background .2s ease,transform .2s ease; }
.exit-actions a:hover { background:#2c7ce8; transform:translateY(-2px); }
.exit-actions button { border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; transition:background .2s ease; }
.exit-actions button:hover { background:rgba(255,255,255,.08); }
.exit-actions a:focus-visible,.exit-actions button:focus-visible { outline:3px solid #87b9ff; outline-offset:3px; }
.exit-modal>small { position:relative; z-index:1; display:block; margin-top:16px; color:#7f8b9c; }
.mobile-sticky { display:none; }

@keyframes floatingPulse { 50% { box-shadow:0 0 0 10px rgba(255,255,255,0); } }
@keyframes exitFade { from { opacity:0; } }
@keyframes exitEnter { from { opacity:0; transform:translateY(20px) scale(.97); } }

@media (max-width:900px) {
  .scope-grid { grid-template-columns:1fr 1fr; }
  .metrics>div { padding:26px 20px; }
}

@media (max-width:760px) {
  .section-pad { padding:76px 0; }
  .shell,.narrow { width:min(100% - 30px,900px); }
  h2 { font-size:46px; }
  .hero { min-height:auto; padding-top:70px; }
  .hero-grid { grid-template-columns:1fr; gap:42px; }
  h1 { font-size:clamp(49px,15vw,68px); }
  .lead { margin-top:26px; font-size:18px; }
  .hero-note { padding:24px; }
  .video-card { grid-template-columns:1fr; }
  .video-copy { padding:34px 26px; }
  .portrait-wrap { min-height:340px; }
  .diagnosis-grid,.scope-grid,.case-grid,.portfolio-grid,.testimonial-grid,.next-grid { grid-template-columns:1fr; }
  .diagnosis-intro { font-size:20px; }
  .split-heading { grid-template-columns:1fr; gap:24px; }
  .problem-row { grid-template-columns:42px 1fr; gap:12px; }
  .problem-row p { grid-column:2; }
  .after-launch { grid-template-columns:1fr; gap:12px; }
  .timeline-row { grid-template-columns:42px 1fr; }
  .timeline-row strong { grid-column:2; text-align:left; }
  .metrics { grid-template-columns:1fr; }
  .metrics>div { border-right:0; border-bottom:1px solid #3b3b3b; }
  .metrics>div:last-child { border-bottom:0; }
  .figma-link { padding:22px; font-size:18px; }
  .testimonial-grid figure { min-height:0; }
  .price-card { padding:30px 23px; }
  .price-top { align-items:flex-start; flex-direction:column; }
  .price { margin-top:45px; }
  .date-grid { grid-template-columns:1fr; }
  .addons>div { flex-direction:column; gap:5px; }
  .next-grid article { min-height:auto; padding:30px 4px; border-right:0; border-bottom:1px solid rgba(255,255,255,.32); }
  .footer-inner { flex-direction:column; gap:26px; }
  .footer-inner p { text-align:left; }
  .floating-reply { display:none; }
  .exit-modal { padding:38px 24px 26px; }
  .exit-actions { grid-template-columns:1fr; }
  .mobile-sticky { position:fixed; z-index:20; left:0; right:0; bottom:0; display:block; padding:10px 15px max(10px,env(safe-area-inset-bottom)); background:rgba(16,16,16,.93); backdrop-filter:blur(12px); translate:0 110%; transition:translate .28s ease; }
  .mobile-sticky.visible { translate:0 0; }
  .mobile-sticky a { display:block; padding:16px 20px; background:var(--blue); color:#fff; border-radius:4px; text-align:center; font-weight:700; text-decoration:none; transition:background .22s ease,transform .22s ease; }
  .mobile-sticky a:hover,.mobile-sticky a:focus-visible { background:var(--blue-dark); transform:translateY(-2px); }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .mobile-sticky,.floating-reply,.exit-overlay,.exit-modal { transition:none; animation:none; } }