:root { --ink:#0b1020; --paper:#f6f4ef; --white:#fffefd; --muted:#657083; --line:#d9dbe2; --accent:#7567f8; --mint:#a8e8d1; --serif:Georgia, 'Times New Roman', serif; --sans:Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.55; } a { color:inherit; } .skip-link { position:absolute; left:1rem; top:-5rem; background:var(--ink); color:white; padding:.7rem 1rem; z-index:10; } .skip-link:focus { top:1rem; }
.site-header, main, footer { max-width:1200px; margin:auto; padding-left:clamp(1.25rem,4vw,4rem); padding-right:clamp(1.25rem,4vw,4rem); }.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; } .brand { font-weight:750; font-size:1.1rem; text-decoration:none; letter-spacing:-.06em; display:inline-flex; align-items:center; gap:.15rem; } .brand > span:last-child { color:var(--accent); } .brand-mark { display:grid; place-items:center; width:1.65rem; height:1.65rem; border-radius:50%; color:white; background:var(--ink); font-family:var(--serif); font-size:1.12rem; margin-right:.25rem; } nav { display:flex; align-items:center; gap:clamp(.75rem,2vw,1.7rem); font-size:.88rem; } nav a { text-decoration:none; } nav a:not(.nav-cta):hover, .text-link:hover { text-decoration:underline; text-underline-offset:.25em; } .nav-cta { border:1px solid var(--ink); padding:.55rem .9rem; border-radius:99px; }
.hero { min-height:calc(100vh - 92px); display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:4rem; padding-top:3rem; padding-bottom:6rem; } .eyebrow { margin:0 0 1rem; text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:750; color:var(--accent); } h1,h2,h3,p { margin-top:0; } h1 { font:clamp(3rem,6vw,6.1rem)/.98 var(--serif); letter-spacing:-.07em; max-width:740px; margin-bottom:1.7rem; } h1 em { color:var(--accent); font-style:italic; } .lead { max-width:570px; color:var(--muted); font-size:1.08rem; } .hero-detail { display:flex; align-items:center; gap:.5rem; color:#4d5870; font-size:.78rem; font-weight:650; letter-spacing:.015em; margin:1.25rem 0 -1rem; }.hero-detail span { color:var(--accent); }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; margin-top:2.1rem; }.button { display:inline-flex; gap:.7rem; justify-content:center; align-items:center; border:0; border-radius:99px; padding:.85rem 1.15rem; text-decoration:none; font:700 .9rem var(--sans); cursor:pointer; } .button-primary { background:var(--ink); color:#fff; box-shadow:0 7px 0 #242b40; transition:transform .2s, box-shadow .2s; } .button-primary:hover { transform:translateY(3px); box-shadow:0 4px 0 #242b40; } .button-primary:disabled { cursor:wait; opacity:.65; transform:none; box-shadow:none; }.text-link { font-weight:700; font-size:.9rem; }
.hero-art { position:relative; min-height:380px; overflow:hidden; border-radius:28px; background:linear-gradient(140deg,#ece9ff,#d9f7ec); } .orb { position:absolute; border-radius:50%; filter:blur(1px); } .orb-one { width:290px; height:290px; background:var(--accent); top:-85px; right:-65px; opacity:.8; }.orb-two { width:220px; height:220px; background:var(--mint); left:-65px; bottom:-75px; }.browser-card { position:absolute; left:12%; right:12%; top:20%; min-height:230px; padding:1rem; background:#fffefa; border:1px solid #fff; border-radius:14px; box-shadow:0 25px 55px #55547a44; transform:rotate(-5deg); }.browser-top { display:flex; gap:5px; border-bottom:1px solid var(--line); padding-bottom:12px; }.browser-top i { display:block; width:7px; height:7px; border-radius:50%; background:#d9dce4; }.browser-body { padding:26px 10px; }.browser-body span,.browser-body strong,.browser-body b { display:block; border-radius:8px; }.browser-body span { width:25%; height:9px; background:var(--accent); }.browser-body strong { width:84%; height:32px; margin:14px 0 22px; background:var(--ink); }.browser-body b { height:11px; margin:10px 0; background:#e7e6ee; }.browser-body b:nth-of-type(1) { width:93%; }.browser-body b:nth-of-type(2) { width:72%; }.browser-body b:nth-of-type(3) { width:48%; }
.principles,.process { padding:7rem 0; border-top:1px solid var(--line); }.section-heading { display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; margin-bottom:3rem; }.section-heading h2 { font:clamp(2.1rem,4vw,3.8rem)/1.03 var(--serif); letter-spacing:-.06em; margin:0; }.principle-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }.principle-grid article { min-height:260px; background:var(--white); border:1px solid #e8e7e2; border-radius:12px; padding:1.5rem; }.number { color:var(--accent); font:1.1rem var(--serif); }.principle-grid h3 { margin:2.7rem 0 .6rem; font-size:1rem; }.principle-grid p,.process p { color:var(--muted); font-size:.91rem; }.statement { padding:6rem 0; background:var(--ink); color:white; text-align:center; }.statement p { margin:0; font:clamp(2.4rem,5vw,5.4rem)/1 var(--serif); letter-spacing:-.06em; }.statement span { color:var(--mint); font-style:italic; }.offer { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,7vw,7rem); padding:clamp(4.5rem,9vw,8rem) 0; }.offer h2 { font:clamp(2.7rem,5vw,5.1rem)/.98 var(--serif); letter-spacing:-.07em; margin-bottom:1.4rem; }.offer h2 em { font-style:italic; color:var(--accent); }.offer-intro > p:not(.eyebrow) { max-width:450px; color:var(--muted); font-size:1.03rem; margin-bottom:1.8rem; }.offer-card { position:relative; overflow:hidden; padding:2rem; background:var(--ink); border-radius:18px; color:white; box-shadow:18px 18px 0 var(--mint); }.offer-card::after { content:''; position:absolute; width:210px; height:210px; border-radius:50%; right:-95px; top:-100px; background:var(--accent); opacity:.72; }.offer-card > * { position:relative; z-index:1; }.offer-label { margin-bottom:.35rem; color:var(--mint); text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; font-weight:750; }.price { display:flex; align-items:baseline; gap:.45rem; margin-bottom:.45rem; }.price strong { font:clamp(4rem,7vw,5.4rem)/.8 var(--serif); letter-spacing:-.08em; }.price span { color:#c9cdd9; font-size:.9rem; }.offer-summary { max-width:300px; color:#d6d8e1; font-size:.9rem; }.offer-card ul { list-style:none; padding:1.25rem 0; margin:1.5rem 0 1.3rem; border-top:1px solid #ffffff26; border-bottom:1px solid #ffffff26; }.offer-card li { display:flex; gap:.7rem; padding:.38rem 0; font-size:.88rem; }.offer-card li span { color:var(--mint); font-weight:800; }.new-site { display:flex; gap:.75rem; align-items:flex-start; }.new-site-icon { display:grid; place-items:center; flex:0 0 auto; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--mint); color:var(--ink); font-weight:800; }.new-site p { margin:0; color:#d6d8e1; font-size:.8rem; }.new-site strong { display:block; color:white; margin-bottom:.15rem; font-size:.88rem; }.offer-scope { margin:1.35rem 0 0; padding-top:1rem; border-top:1px solid #ffffff26; color:#bfc4d2; font-size:.72rem; line-height:1.5; }.process ol { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:0; list-style:none; counter-reset:steps; }.process li { counter-increment:steps; border-top:1px solid var(--ink); padding-top:1rem; }.process li::before { content:'0' counter(steps); color:var(--accent); font:1.25rem var(--serif); }.process strong { display:block; margin-top:2.5rem; }.contact { margin-bottom:6rem; background:var(--white); border:1px solid #e8e7e2; border-radius:20px; padding:clamp(1.5rem,5vw,4rem); display:grid; grid-template-columns:.8fr 1.2fr; gap:4rem; }.contact h2 { font:clamp(2.4rem,5vw,4.5rem)/.98 var(--serif); letter-spacing:-.07em; }.contact-intro > p:not(.eyebrow) { color:var(--muted); max-width:280px; }.contact-intro a { text-decoration-color:var(--accent); }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } label { display:grid; gap:.45rem; margin-bottom:1rem; font-size:.82rem; font-weight:700; } input,select,textarea { width:100%; border:1px solid #cdd0da; border-radius:7px; padding:.75rem; color:var(--ink); font:400 1rem var(--sans); background:#fff; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }.honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.form-note { color:var(--muted); font-size:.78rem; }.form-status { min-height:1.5em; margin:.9rem 0 0; font-size:.9rem; font-weight:650; } footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:2rem; padding-bottom:2rem; font-size:.84rem; } footer p { margin:0; color:var(--muted); }.error-page { min-height:100vh; display:grid; place-items:center; }.error-page main { max-width:630px; text-align:center; }.error-page h1 { margin-inline:auto; }.error-page main > p:not(.eyebrow) { color:var(--muted); margin-bottom:2rem; }
@media (max-width:760px) { .site-header { height:76px; } nav a:not(.nav-cta) { display:none; }.hero { grid-template-columns:1fr; gap:2.5rem; min-height:auto; padding:4rem 0; }.hero-art { min-height:310px; }.section-heading,.offer,.contact { grid-template-columns:1fr; gap:1.5rem; }.principles,.process { padding:4.5rem 0; }.offer { padding:4.5rem 0; }.offer-card { box-shadow:10px 10px 0 var(--mint); }.principle-grid { grid-template-columns:repeat(2,1fr); }.principle-grid article { min-height:210px; }.principle-grid h3 { margin-top:1.5rem; }.process ol { grid-template-columns:1fr; gap:2.5rem; }.process strong { margin-top:1rem; }.form-grid { grid-template-columns:1fr; gap:0; }.contact { margin-bottom:3rem; } footer { align-items:flex-start; flex-direction:column; } }
@media (max-width:410px) { .principle-grid { grid-template-columns:1fr; } h1 { font-size:3rem; } }