:root { --bg:#0f172a; --surface:#111827; --surface-2:#182235; --text:#fff; --muted:#cbd5e1; --dim:#8fa0b9; --line:rgba(255,255,255,.09); --blue:#4f8cff; --green:#34d399; --radius:22px; --shell:min(1160px, calc(100% - 48px)); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans",sans-serif; line-height:1.5; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; } .shell { width:var(--shell); margin-inline:auto; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.ambient { position:fixed; pointer-events:none; filter:blur(2px); border-radius:50%; opacity:.32; z-index:-1; animation:drift 15s ease-in-out infinite alternate; } .ambient-one { width:560px; height:560px; top:-270px; right:-170px; background:radial-gradient(circle, rgba(79,140,255,.25), transparent 68%); } .ambient-two { width:480px; height:480px; top:1150px; left:-280px; background:radial-gradient(circle, rgba(52,211,153,.12), transparent 68%); animation-delay:-8s; }
.site-header { display:flex; width:var(--shell); align-items:center; justify-content:space-between; height:78px; margin:auto; position:sticky; top:0; z-index:10; transition:background .2s, border .2s, box-shadow .2s; } .site-header.is-scrolled { background:rgba(15,23,42,.82); backdrop-filter:blur(18px); border-inline:1px solid var(--line); padding-inline:22px; width:min(1204px,100%); box-shadow:0 8px 28px rgba(0,0,0,.1); } .brand { display:inline-flex; align-items:center; gap:10px; font-family:Manrope,sans-serif; font-weight:800; letter-spacing:-.04em; font-size:1.14rem; } .brand img { width:31px; height:31px; object-fit:contain; } .desktop-nav { display:flex; gap:29px; color:var(--muted); font-size:.91rem; } .desktop-nav a,.footer-links a { transition:color .2s; } .desktop-nav a:hover,.footer-links a:hover { color:#fff; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:50px; padding:0 21px; border:1px solid #70a3ff; background:var(--blue); color:#fff; border-radius:12px; font-weight:700; font-size:.94rem; box-shadow:0 9px 25px rgba(38,100,217,.23); transition:transform .2s,background .2s,box-shadow .2s; } .button:hover { background:#669bff; transform:translateY(-2px); box-shadow:0 13px 30px rgba(38,100,217,.32); } .button-small { min-height:40px; padding:0 15px; border-radius:10px; font-size:.86rem; }.menu-toggle,.mobile-menu,.mobile-menu-backdrop { display:none; }
body.menu-open { overflow:hidden; }
.hero { display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:57px; min-height:665px; padding:75px 0 85px; } .eyebrow,.section-label { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:#a8c5ff; } .eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 22px; }.eyebrow span { width:8px; height:8px; background:var(--green); border-radius:100%; box-shadow:0 0 0 4px rgba(52,211,153,.12); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Manrope,sans-serif; letter-spacing:-.05em; line-height:1.08; } h1 { max-width:610px; margin-bottom:23px; font-size:clamp(3rem,5vw,4.63rem); } .hero-text { max-width:555px; color:var(--muted); font-size:1.12rem; line-height:1.65; } .button-row { display:flex; gap:24px; align-items:center; margin-top:31px; } .text-link { display:inline-flex; align-items:center; gap:8px; color:#dbe7ff; font-size:.94rem; font-weight:700; }.text-link:hover { color:#8eb8ff; }.availability { display:flex; align-items:center; gap:8px; margin:25px 0 0; color:var(--dim); font-size:.83rem; }.check,.yes { color:var(--green); }
.hero-product { position:relative; } .product-window { overflow:hidden; position:relative; min-height:420px; border:1px solid rgba(184,208,255,.18); border-radius:17px; background:#243043; box-shadow:0 35px 70px rgba(0,0,0,.32),0 0 0 7px rgba(255,255,255,.018); transform:perspective(1500px) rotateY(-4deg) rotateX(2deg); } .window-bar { height:37px; background:#192337; display:flex; align-items:center; justify-content:center; font-size:10px; color:#91a0b8; }.window-controls { position:absolute; left:13px; display:flex; gap:5px; }.window-controls i { display:block; width:7px;height:7px;border-radius:100%;background:#536075;}.window-controls i:nth-child(1){background:#ed7271}.window-controls i:nth-child(2){background:#edbf65}.window-controls i:nth-child(3){background:#6ac482}.window-avatar { position:absolute; right:13px; width:18px;height:18px;border-radius:100%;display:grid;place-items:center;background:#82aef6;color:#173b77;font-weight:800;font-size:9px;}.desktop-content { min-height:383px; position:relative; background:linear-gradient(135deg,#d5e9ff 0%,#b6d2f2 43%,#f3ecdc 100%);overflow:hidden;}.desktop-content:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 35%,rgba(255,255,255,.58),transparent 24%),linear-gradient(115deg,transparent 40%,rgba(125,174,231,.25)); }.fake-sidebar { position:absolute; z-index:1; inset:0 auto 0 0; width:52px;background:rgba(241,247,255,.72); display:flex;flex-direction:column;align-items:center;gap:19px;padding-top:18px;}.side-logo { display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#3d80ee;color:#fff;font-size:11px;font-weight:800;}.fake-sidebar span { width:17px;height:17px;border-radius:5px;background:#a3b4c6;opacity:.8;}.fake-sidebar .side-active{background:#6097ee;box-shadow:0 0 0 4px rgba(96,151,238,.14)}.document { position:absolute;z-index:1;left:78px;top:38px;width:260px;height:280px;padding:17px 23px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(42,79,118,.13);border-radius:4px;}.document-toolbar { display:flex;gap:9px;border-bottom:1px solid #e5e8ed;padding-bottom:12px;margin-bottom:21px;}.document-toolbar span {width:15px;height:3px;background:#bcc9da;border-radius:99px;}.document-copy b { display:block;color:#40526b;font:700 11px Manrope;margin:15px 0 9px;}.document-copy i {display:block;width:100%;height:4px;background:#e0e6ed;border-radius:99px;margin:7px 0;}.document-copy i.short{width:62%;}.context-pills { position:absolute;z-index:2;left:72px;bottom:19px;display:flex;gap:7px;flex-wrap:wrap;}.context-pills span {display:flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid rgba(255,255,255,.62);border-radius:7px;background:rgba(255,255,255,.75);box-shadow:0 2px 7px rgba(56,84,111,.1);font-size:8px;color:#4a617d;}.context-pills b{color:#25a873}.context-pills img{width:10px;height:10px}.assistant-card {position:absolute;z-index:3;right:18px;bottom:18px;width:275px;padding:13px;background:rgba(15,25,43,.94);border:1px solid rgba(255,255,255,.17);border-radius:13px;box-shadow:0 20px 35px rgba(15,36,69,.28);color:#eaf2ff;}.assistant-head {display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;}.assistant-head i {margin-left:auto;width:6px;height:6px;background:#48d4a2;border-radius:50%;}.assistant-mark {display:grid;place-items:center;width:19px;height:19px;background:#427feb;border-radius:6px;overflow:hidden;}.assistant-mark img {width:16px;height:16px;object-fit:contain;}.assistant-card p{margin:12px 0;font-size:10px;line-height:1.5;color:#d1ddeb}.assistant-actions {display:flex;gap:6px}.assistant-actions button{border:0;padding:5px 8px;border-radius:5px;background:#3978e6;color:#fff;font-size:8px}.assistant-actions button+button{background:#2c3b52;color:#c7d4e6}.ask-bar{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding:7px 8px;border:1px solid #41526c;border-radius:6px;color:#8191a8;font-size:8px}.ask-bar b{padding:1px 3px;border:1px solid #506178;border-radius:3px;color:#aebdd0}
.intro { padding:110px 0 120px; text-align:center; max-width:850px; }.intro h2,.section-heading h2 { margin:14px 0 19px; font-size:clamp(2.15rem,4vw,3.38rem); }.intro>p:last-child { max-width:570px;margin:auto;color:var(--muted);font-size:1.05rem; }.features { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:150px;}.feature-card {min-height:220px;padding:29px;background:linear-gradient(140deg,rgba(31,43,64,.9),rgba(17,24,39,.88));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 22px rgba(0,0,0,.07);transition:transform .25s,border .25s,background .25s;}.feature-card:hover{transform:translateY(-5px);border-color:rgba(126,173,255,.33);background:#172338}.icon {display:grid;place-items:center;width:39px;height:39px;margin-bottom:26px;border:1px solid rgba(115,164,255,.33);border-radius:11px;background:rgba(79,140,255,.12);color:#99beff;font-size:19px;}.feature-card h3{margin-bottom:10px;font-size:1.14rem;}.feature-card p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55;}
.workflow {padding:0 0 150px}.section-heading{text-align:center}.workflow-grid {display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:19px;margin-top:49px}.workflow-card{min-height:240px;padding:27px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(17,24,39,.74);}.workflow-card>span{color:#7396d3;font:700 .76rem Manrope;letter-spacing:.09em}.workflow-icon{display:grid;place-items:center;width:43px;height:43px;margin:27px 0 22px;border-radius:50%;background:rgba(79,140,255,.14);color:#8ab4ff;font-size:20px}.workflow-card h3{font-size:1.17rem;margin-bottom:8px}.workflow-card p{color:var(--muted);font-size:.92rem;margin:0}.flow-arrow{color:#6680aa;font-size:22px}.workflow-note{text-align:center;margin:27px 0 0;color:#aebed1;font-size:.91rem}.workflow-note i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#50617b;margin:0 11px 3px}
.comparison {display:grid;grid-template-columns:.72fr 1.28fr;gap:67px;align-items:center;padding:100px 0 150px}.comparison-copy h2{font-size:clamp(2.15rem,3.5vw,3.2rem);margin:14px 0 19px}.comparison-copy>p:last-child{color:var(--muted)}.comparison-table{overflow:hidden;border:1px solid var(--line);border-radius:17px;background:rgba(17,24,39,.72);font-size:.82rem}.comparison-header,.comparison-row{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;align-items:center}.comparison-header{height:57px;border-bottom:1px solid var(--line);color:#90a1ba;font-size:.74rem;font-weight:700}.comparison-row{min-height:61px;border-bottom:1px solid var(--line);color:#c1cddb}.comparison-row:last-child{border:0}.comparison-header>*,.comparison-row>*{padding:0 16px}.comparison-row>span:first-child{color:#fff;font-weight:600}.wingman-col,.comparison-row .yes{height:100%;display:flex;align-items:center;background:rgba(79,140,255,.09);border-inline:1px solid rgba(116,163,255,.18)}.no{color:#a1afc1}.yes{color:#b6f4d8}
.quote {padding:11px 0 152px;text-align:center}.quote blockquote{max-width:880px;margin:auto;font:700 clamp(1.9rem,3.6vw,3.35rem)/1.22 Manrope;letter-spacing:-.05em}.beta{display:grid;grid-template-columns:.88fr 1.12fr;gap:72px;margin-bottom:150px;padding:68px;border:1px solid rgba(128,174,255,.2);border-radius:30px;background:radial-gradient(circle at 18% 0%,rgba(79,140,255,.17),transparent 36%),#141f32;box-shadow:0 20px 50px rgba(0,0,0,.13)}.beta-copy h2{font-size:clamp(2.3rem,4vw,3.55rem);margin:14px 0 19px}.beta-copy>p:not(.section-label){color:var(--muted);max-width:370px}.beta-points{display:grid;gap:10px;margin-top:30px;color:#c8d5e7;font-size:.9rem}.beta-points span::first-letter{color:var(--green)}.beta-form{display:grid;gap:16px;padding:26px;background:rgba(9,16,29,.46);border:1px solid rgba(255,255,255,.08);border-radius:18px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.beta-form label{display:grid;gap:7px;color:#d7e1f0;font-size:.78rem;font-weight:600}.beta-form input:not([type=checkbox]),.beta-form select{width:100%;height:45px;padding:0 12px;border:1px solid rgba(196,216,255,.15);border-radius:9px;background:#0e192b;color:#fff;outline:none}.beta-form select option{background:#0e192b}.beta-form input:focus,.beta-form select:focus{border-color:#6b9df5;box-shadow:0 0 0 3px rgba(79,140,255,.12)}.consent{display:flex!important;grid-template-columns:auto 1fr;align-items:start;gap:9px!important;color:#aebdd0!important;font-weight:400!important;line-height:1.45}.consent input{margin-top:3px;accent-color:var(--blue)}.consent a{color:#aaccff;text-decoration:underline}.form-submit{border:0;width:100%;margin-top:3px}.form-status{min-height:19px;margin:0;color:#b7c6db;font-size:.84rem;text-align:center}.form-status.success{color:#74e1b3}
.wingo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:27px;padding:30px 37px;margin-bottom:92px;border:1px solid var(--line);border-radius:18px;background:rgba(17,24,39,.58)}.wingo-symbol{display:grid;place-items:center;width:49px;height:49px;border-radius:14px;background:linear-gradient(135deg,#679aff,#3e6fce);font:800 21px Manrope}.wingo h2{font-size:1.3rem;margin:5px 0}.wingo p{margin:0;color:var(--muted);font-size:.92rem;max-width:610px}.wingo .section-label{font-size:.63rem}.site-footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;padding:31px 0 43px;border-top:1px solid var(--line)}.footer-links{display:flex;justify-content:center;gap:19px;flex-wrap:wrap;color:#9eacc0;font-size:.78rem}.site-footer p{margin:0;color:#728198;font-size:.77rem}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}@keyframes float{50%{transform:perspective(1500px) rotateY(-3deg) rotateX(1deg) translateY(-8px)}}@keyframes drift{to{transform:translate(60px,30px)}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:55px;padding-top:65px}.hero-copy{text-align:center}.hero-copy>*{margin-inline:auto}.button-row{justify-content:center}.hero-product{width:min(610px,100%);margin:auto}.features{grid-template-columns:repeat(2,1fr)}.comparison{grid-template-columns:1fr;gap:38px}.comparison-copy{text-align:center}.comparison-copy p{margin-inline:auto}.beta{grid-template-columns:1fr;gap:44px}.wingo{grid-template-columns:auto 1fr}.wingo>.text-link{grid-column:2}.site-footer{grid-template-columns:1fr;text-align:center}.site-footer .brand{justify-self:center}.footer-links{gap:12px 18px}}
@media(max-width:640px){:root{--shell:min(100% - 32px,1160px)}.site-header{height:67px}.site-header.is-scrolled{padding-inline:16px}.desktop-nav,.site-header>.button{display:none}.menu-toggle{display:grid;place-content:center;gap:5px;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:9px;background:transparent}.menu-toggle i{display:block;width:16px;height:1px;background:#fff;transition:transform .2s}.menu-toggle[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}.mobile-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:8;background:rgba(4,7,14,.94);backdrop-filter:blur(2px)}.mobile-menu:not([hidden]){display:grid}.mobile-menu{position:fixed;z-index:9;top:63px;right:16px;left:16px;gap:4px;padding:15px;border:1px solid var(--line);border-radius:15px;background:#152035;box-shadow:0 20px 40px rgba(0,0,0,.3)}.mobile-menu a:not(.button){padding:10px;color:#cfdbeb}.mobile-menu .button{margin-top:8px}.hero{min-height:0;padding:55px 0 75px}.eyebrow{font-size:.65rem}h1{font-size:clamp(2.75rem,12vw,4.2rem)}.hero-text{font-size:1rem}.button-row{flex-direction:column;gap:19px}.product-window{min-height:310px}.desktop-content{min-height:273px}.document{left:55px;top:25px;width:190px;height:202px;padding:10px 15px}.document-toolbar{margin-bottom:10px;padding-bottom:8px}.document-copy b{margin:8px 0 6px;font-size:8px}.document-copy i{height:3px;margin:5px 0}.fake-sidebar{width:39px;gap:12px;padding-top:11px}.fake-sidebar span{width:13px;height:13px}.side-logo{width:20px;height:20px}.assistant-card{right:10px;bottom:10px;width:212px;padding:10px}.assistant-card p{font-size:8px;margin:8px 0}.context-pills{left:47px;bottom:9px;max-width:180px}.context-pills span{font-size:6px;padding:3px}.intro{padding:75px 0 80px}.intro h2,.section-heading h2{font-size:2.1rem}.features{grid-template-columns:1fr;padding-bottom:92px}.feature-card{min-height:0;padding:24px}.workflow{padding-bottom:90px}.workflow-grid{grid-template-columns:1fr;gap:11px;margin-top:33px}.flow-arrow{transform:rotate(90deg);justify-self:center}.workflow-card{min-height:0;padding:22px}.workflow-icon{margin:17px 0}.comparison{padding:30px 0 90px}.comparison-table{font-size:.7rem}.comparison-header,.comparison-row{grid-template-columns:.75fr 1fr 1fr}.comparison-header>*,.comparison-row>*{padding:0 8px}.comparison-row{min-height:75px}.quote{padding-bottom:90px}.quote blockquote{font-size:1.7rem}.beta{margin-bottom:80px;padding:30px 20px;border-radius:22px}.form-row{grid-template-columns:1fr}.wingo{grid-template-columns:1fr;padding:25px}.wingo>.text-link{grid-column:1}.site-footer{gap:21px}.footer-links{font-size:.75rem}.reveal{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Real Wingman application preview */
.product-window.product-shot { min-height:0; margin:0; aspect-ratio:16 / 9; background:#172235; }
.product-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

/* Give the real product UI more presence on wide desktop screens, and cut
   the empty vertical space above/below it. Text keeps the left third, the
   product owns the right two-thirds, with real breathing room between them
   (gap widened from 30px to 105px) and the image nudged down so it doesn't
   align exactly with the top of the headline. */
@media (min-width:901px) {
  .hero { grid-template-columns:.62fr 1.38fr; gap:105px; padding:58px 0 64px; min-height:0; }
  .hero-product { width:calc(100% + 74px); justify-self:end; margin-top:38px; }
}

/* Small, quiet reassurance line right under the main availability line. */
.trust-note { margin-top:6px; }

/* Small "example" badges floating over the product screenshot - realistic,
   human examples instead of technical labels. */
.hero-badge { position:absolute; z-index:2; display:flex; flex-direction:column; gap:3px; padding:10px 14px; background:rgba(15,23,42,.88); border:1px solid rgba(255,255,255,.14); border-radius:12px; backdrop-filter:blur(10px); box-shadow:0 12px 30px rgba(0,0,0,.28); font-size:.78rem; font-weight:700; color:#eaf2ff; }
.hero-badge i { font-style:normal; font-weight:500; font-size:.72rem; color:var(--muted); }
.hero-badge-top { top:16px; left:16px; }
.hero-badge-bottom { bottom:16px; right:16px; text-align:right; }

/* "What can Wingman help with?" cards - compact version of .feature-card. */
.help { padding:0 0 140px; }
.help-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:49px; }
.help-card { padding:22px 20px; background:rgba(17,24,39,.74); border:1px solid var(--line); border-radius:16px; transition:transform .25s,border .25s,background .25s; }
.help-card:hover { transform:translateY(-4px); border-color:rgba(126,173,255,.33); background:#172338; }
.help-card .icon { width:33px; height:33px; margin-bottom:16px; font-size:16px; }
.help-card h3 { font-size:.98rem; margin-bottom:6px; }
.help-card p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.5; }

/* Family Mode section - reuses .feature-card styling for the three cards. */
.family { padding:0 0 150px; }
.family .section-heading p { max-width:560px; margin:12px auto 0; color:var(--muted); font-size:1.02rem; }
.family-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:49px; margin-bottom:27px; }

@media (max-width:900px) {
  .help-grid { grid-template-columns:repeat(3,1fr); }
  .family-grid { grid-template-columns:1fr; gap:12px; }
}
@media (max-width:640px) {
  .hero-badge { display:none; }
  .help { padding-bottom:90px; }
  .help-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .help-card { padding:18px; }
  .family { padding-bottom:90px; }
}