/* ============================================================ MEGAWATT IQ — DESIGN SYSTEM · "Spectrum" Single source of truth. Tokens + base + components. Fonts (load in ): Fraunces (display/italic accents) · Hanken Grotesk (UI/body) · JetBrains Mono (data/labels) ============================================================ */ /* ---- 1. TOKENS ------------------------------------------------ */ :root{ /* Surface / ink */ --bg:#faf8f3; /* page */ --bg-2:#f3efe7; /* alt band */ --card:#ffffff; /* raised surface */ --ink:#16140f; /* primary text */ --ink-2:#524e44; /* secondary text */ --ink-3:#8b8578; /* muted / labels */ --hairline:#e7e0d3; /* default border */ --hairline-2:#d8d0c0; /* stronger border */ /* Brand */ --accent:#4338ca; /* indigo primary */ --accent-press:#372cb0; --accent-soft:#eef0fb; /* tinted bg */ /* RAG signal system (the product's language) */ --g:#16936a; --g-bg:#e4f3ec; --g-line:#cfe8db; --a:#c98215; --a-bg:#fbf0dc; --a-line:#f1dfbe; --r:#cc4338; --r-bg:#fae7e4; --r-line:#f1cbc6; /* Type families */ --serif:'Fraunces',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; /* Radii */ --r-sm:10px; --r-md:16px; --r-lg:20px; --r-pill:100px; /* Shadows */ --shadow-sm:0 1px 2px rgba(22,20,15,.06); --shadow-md:0 20px 40px -28px rgba(22,20,15,.4); --shadow-lg:0 50px 90px -50px rgba(22,20,15,.4),0 0 0 1px rgba(22,20,15,.02); --shadow-accent:0 6px 18px -6px rgba(67,56,202,.5); /* Layout */ --maxw:1200px; --gutter:40px; /* Motion */ --ease:cubic-bezier(.2,.7,.2,1); } /* ---- 2. BASE -------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} ::selection{background:var(--accent);color:#fff} a{color:inherit} img{max-width:100%;display:block} /* ---- 3. LAYOUT ------------------------------------------------ */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .sec{padding:96px 0} .sec-sm{padding:64px 0} .band{background:var(--bg-2);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .sec-head{max-width:680px;margin:0 auto 60px;text-align:center} .sec-head.left{margin-left:0;text-align:left} .sec-head .mono{color:var(--accent);display:block;margin-bottom:16px;font-weight:500} .sec-head h2{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.08} .sec-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)} .sec-head p{margin-top:16px;font-size:18px;color:var(--ink-2)} /* ---- 4. TYPE HELPERS ------------------------------------------ */ .mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:11px} .serif-em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)} .display{font-size:clamp(40px,6vw,78px);line-height:1.02;font-weight:700;letter-spacing:-.038em} .lede{font-size:19px;color:var(--ink-2);line-height:1.6} /* ---- 5. BUTTONS ----------------------------------------------- */ .btn{font-family:var(--sans);font-size:14px;font-weight:600;border:none;cursor:pointer;border-radius:var(--r-pill);padding:11px 20px;transition:all .2s var(--ease);text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .btn-lg{padding:14px 26px;font-size:15px} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(67,56,202,.3)} .btn-primary:hover{background:var(--accent-press);transform:translateY(-1px);box-shadow:var(--shadow-accent)} .btn-line{background:var(--card);color:var(--ink);border:1px solid var(--hairline-2)} .btn-line:hover{border-color:var(--ink-3)} .btn-ghost{background:transparent;color:var(--ink-2)} .btn-ghost:hover{color:var(--ink)} /* ---- 6. RAG CHIPS / SIGNALS ----------------------------------- */ .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);letter-spacing:.01em} .chip .d{width:7px;height:7px;border-radius:50%} .chip.g{background:var(--g-bg);color:var(--g)} .chip.g .d{background:var(--g)} .chip.a{background:var(--a-bg);color:var(--a)} .chip.a .d{background:var(--a)} .chip.r{background:var(--r-bg);color:var(--r)} .chip.r .d{background:var(--r)} /* ---- 7. NAV --------------------------------------------------- */ nav.site{position:sticky;top:0;z-index:50;background:rgba(250,248,243,.82);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s} nav.site.scrolled{border-bottom:1px solid var(--hairline)} .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap;text-decoration:none;color:var(--ink)} .brand .logo{width:26px;height:26px;border-radius:8px;background:var(--accent);position:relative;flex:none} .brand .logo::after{content:"";position:absolute;inset:6px;border-radius:3px;border:2px solid #fff;border-right-color:transparent;transform:rotate(45deg)} .nav-links{display:flex;gap:34px} .nav-links a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s} .nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-cta{display:flex;align-items:center;gap:18px} .signin{color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap} /* ---- 8. HERO / PILL ------------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:6px 14px 6px 7px;font-size:13px;color:var(--ink-2);font-weight:500} .pill b{background:var(--accent-soft);color:var(--accent);font-weight:600;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.02em} .hero{padding:80px 0 60px;text-align:center} .hero h1{font-size:clamp(40px,6vw,78px);line-height:1.02;font-weight:700;letter-spacing:-.038em;max-width:14em;margin:0 auto} .hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)} .hero .lede{max-width:34em;margin:28px auto 0} .hero-cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .micro{margin-top:18px;font-size:13px;color:var(--ink-3)} /* ---- 9. APP MOCK (product surface) ---------------------------- */ .stage{margin-top:64px;position:relative} .stage::before{content:"";position:absolute;inset:-40px -10% auto;height:340px;background:radial-gradient(60% 100% at 50% 0,rgba(67,56,202,.10),transparent 70%);z-index:0} .app{position:relative;z-index:1;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;text-align:left} .app-top{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--hairline);background:var(--bg)} .app-top .dots{display:flex;gap:6px} .app-top .dots i{width:10px;height:10px;border-radius:50%;background:var(--hairline-2);display:block} .app-top .crumb{font-size:13px;color:var(--ink-3);font-weight:500} .app-top .crumb b{color:var(--ink);font-weight:600} .app-grid{display:grid;grid-template-columns:1.4fr 1fr} .app-main{padding:26px 28px;border-right:1px solid var(--hairline)} .app-main .label{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .app-main .label .mono{color:var(--ink-3)} .heat{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .hcell{border-radius:var(--r-sm);padding:12px;min-height:78px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid transparent} .hcell .ws{font-size:11px;font-weight:600;line-height:1.2} .hcell .v{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums} .hcell.g{background:var(--g-bg);border-color:var(--g-line);color:var(--g)} .hcell.a{background:var(--a-bg);border-color:var(--a-line);color:var(--a)} .hcell.r{background:var(--r-bg);border-color:var(--r-line);color:var(--r)} .app-side{padding:26px;background:linear-gradient(180deg,#fcfbf8,#fff)} .score-block{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--hairline)} .ring{position:relative;width:120px;height:120px;margin:0 auto 4px} .ring svg{transform:rotate(-90deg)} .ring .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ring .v b{font-size:34px;font-weight:700;letter-spacing:-.02em} .ring .v span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:2px} .score-block .cap{font-size:13px;color:var(--ink-2);margin-top:6px} .side-flags{margin-top:18px} .side-flags .mono{color:var(--ink-3);display:block;margin-bottom:12px} .sf{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:13px} .sf:last-child{border-bottom:none} .sf .d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:none} .sf.r .d{background:var(--r)} .sf.a .d{background:var(--a)} .sf.g .d{background:var(--g)} .sf .t{flex:1;line-height:1.4} .sf .badge{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)} /* ---- 10. FEATURE CARDS ---------------------------------------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cards.two{grid-template-columns:repeat(2,1fr)} .fcard{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-md);padding:26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .fcard .ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:18px} .fcard h3{font-size:18px;font-weight:600;letter-spacing:-.01em} .fcard p{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.55} /* ---- 11. COVERAGE TAGS ---------------------------------------- */ .cov-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center} .cov-tags{display:flex;flex-wrap:wrap;gap:10px} .tag2{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:14px 16px;font-size:14px;font-weight:500} .tag2 b{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;font-weight:500} /* ---- 11b. WHO IT'S FOR (personas) ----------------------------- */ .who{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .persona{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-md);padding:22px 22px 24px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .persona:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .persona .role{display:flex;align-items:center;gap:8px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--accent);font-weight:500} .persona .role .d{width:6px;height:6px;border-radius:50%;background:var(--accent)} .persona h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-top:11px} .persona p{font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.5} /* ---- 12. STEPS (how it works) --------------------------------- */ .steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline)} .step{display:grid;grid-template-columns:64px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--hairline);align-items:start} .step .n{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:500;padding-top:5px} .step h3{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.01em} .step p{color:var(--ink-2);font-size:16px;margin-top:8px;line-height:1.6;max-width:42em} /* ---- 13. PRICING ---------------------------------------------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch} .plan{background:var(--card);border:1px solid var(--hairline);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column} .plan.feature{border-color:var(--accent);box-shadow:0 24px 50px -34px rgba(67,56,202,.5);position:relative} .plan.feature .ribbon{position:absolute;top:-11px;left:28px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;padding:4px 11px;border-radius:var(--r-pill);letter-spacing:.02em} .plan h3{font-family:var(--serif);font-size:22px;font-weight:500} .plan .price{margin-top:16px;font-size:40px;font-weight:700;letter-spacing:-.03em} .plan .price span{font-size:15px;font-weight:500;color:var(--ink-3)} .plan .desc{color:var(--ink-2);font-size:14px;margin-top:8px;min-height:40px} .plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:11px} .plan li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start} .plan li::before{content:"›";color:var(--accent);font-weight:700} .plan .btn{margin-top:auto;justify-content:center;width:100%} /* ---- 14. FAQ / PROSE ------------------------------------------ */ .faq{max-width:760px;margin:0 auto;border-top:1px solid var(--hairline)} .faq details{border-bottom:1px solid var(--hairline)} .faq summary{cursor:pointer;list-style:none;padding:22px 0;font-size:17px;font-weight:600;display:flex;justify-content:space-between;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-size:22px;font-weight:400} .faq details[open] summary::after{content:"–"} .faq details p{padding:0 0 22px;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:60ch} /* ---- 15. FORM (contact) --------------------------------------- */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .field label{font-size:13px;font-weight:600;color:var(--ink)} .field input,.field textarea,.field select{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .2s,box-shadow .2s} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .field textarea{resize:vertical;min-height:120px} /* ---- 16. TRUST ------------------------------------------------ */ .trust{text-align:center;max-width:760px;margin:0 auto} .trust .mono{color:var(--accent);font-weight:500;display:block;margin-bottom:18px} .trust h2{font-size:clamp(30px,4.4vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.05} .trust h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)} .trust p{margin-top:20px;font-size:18px;color:var(--ink-2)} /* ---- 17. CTA BAND --------------------------------------------- */ .cta-band{text-align:center;background:var(--accent);color:#fff;border-radius:24px;padding:64px 40px;position:relative;overflow:hidden} .cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 140% at 50% 0,rgba(255,255,255,.16),transparent 60%)} .cta-band>*{position:relative;z-index:1} .cta-band h2{font-size:clamp(30px,4vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.08} .cta-band h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#fff} .cta-band p{margin-top:14px;font-size:18px;color:rgba(255,255,255,.85);max-width:34em;margin-left:auto;margin-right:auto} .cta-band .btn-primary{background:#fff;color:var(--accent);margin-top:30px} .cta-band .btn-primary:hover{background:#f4f2ff;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)} /* ---- 18. FOOTER ----------------------------------------------- */ footer.site{border-top:1px solid var(--hairline);padding:56px 0 52px;background:var(--bg-2)} .foot{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap} .foot .brand{margin-bottom:14px} .foot .tag{color:var(--ink-3);font-size:14px;max-width:22em;line-height:1.6} .foot-cols{display:flex;gap:64px} .foot-col h5{text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--ink-3);margin-bottom:14px;font-weight:700} .foot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:14px;margin-bottom:10px;transition:color .2s} .foot-col a:hover{color:var(--accent)} .foot-base{margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;color:var(--ink-3);font-size:12px;flex-wrap:wrap;gap:12px} /* ---- 19. UTILITIES + MOTION ----------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---- 20. RESPONSIVE ------------------------------------------- */ @media(max-width:900px){ :root{--gutter:22px} .nav-links{display:none} .app-grid{grid-template-columns:1fr} .app-main{border-right:none;border-bottom:1px solid var(--hairline)} .heat{grid-template-columns:repeat(3,1fr)} .cards,.cards.two{grid-template-columns:1fr} .who{grid-template-columns:1fr} .cov-in{grid-template-columns:1fr;gap:32px} .price-grid{grid-template-columns:1fr} .step{grid-template-columns:1fr;gap:8px} .step .n{padding-top:0} .foot{flex-direction:column} } /* ---- 21. HELP WIDGET (support chat + feedback) ----------------- */ .mw-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:0 10px 30px -8px rgba(67,56,202,.55);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),background .2s} .mw-fab:hover{transform:translateY(-2px);background:var(--accent-press)} .mw-fab svg{width:24px;height:24px} .mw-panel{position:fixed;right:22px;bottom:88px;z-index:91;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 120px);background:var(--card);border:1px solid var(--hairline);border-radius:18px;box-shadow:0 40px 80px -30px rgba(22,20,15,.45);display:none;flex-direction:column;overflow:hidden} .mw-panel.open{display:flex} .mw-head{padding:12px 14px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:10px;background:var(--bg)} .mw-head .t{font-weight:700;font-size:14px;flex:1} .mw-tabs{display:flex;gap:3px;background:var(--bg-2);border:1px solid var(--hairline);border-radius:100px;padding:3px} .mw-tabs button{font-family:var(--sans);font-size:12px;font-weight:600;border:none;background:transparent;color:var(--ink-2);padding:5px 12px;border-radius:100px;cursor:pointer} .mw-tabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)} .mw-x{border:none;background:transparent;color:var(--ink-3);font-size:18px;cursor:pointer;padding:2px 6px;line-height:1} .mw-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px} .mw-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap} .mw-msg.bot{background:var(--bg-2);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start} .mw-msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end} .mw-msg.typing{color:var(--ink-3);font-style:italic;background:var(--bg-2);border-bottom-left-radius:4px;align-self:flex-start} .mw-foot{padding:12px;border-top:1px solid var(--hairline);display:flex;gap:8px} .mw-foot input{flex:1;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--hairline-2);border-radius:100px;padding:10px 14px;min-width:0} .mw-foot input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .mw-send{flex:none;width:40px;height:40px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center} .mw-send:hover{background:var(--accent-press)} .mw-fbwrap{flex:1;overflow-y:auto;padding:16px;display:none} .mw-fbwrap p.intro{font-size:13px;color:var(--ink-2);margin-bottom:14px;line-height:1.5} .mw-ok{text-align:center;padding:40px 16px;display:none} .mw-ok .big{font-size:30px;margin-bottom:10px} .mw-ok h4{font-size:16px;font-weight:700} .mw-ok p{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5} @media(max-width:480px){.mw-panel{right:8px;bottom:80px}} /* ---- 22. INTEGRATION POLISH (focus rings · launch checklist) ---- */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .btn:focus-visible{outline-offset:3px}