/* ============================================================ Agent Forge — AI automation for local businesses Single stylesheet, no build step. ============================================================ */ :root{ --purple:#6C5CE7; --purple-dark:#5346d6; --purple-soft:#efecff; --ink:#0d0f1a; --ink-2:#1b1e30; --body:#4b5068; --muted:#7a7f95; --line:#e7e6f2; --line-strong:#d3cdf2; --bg:#ffffff; --bg-tint:#f7f6fd; --surface:#ffffff; --surface-2:#faf9fe; --white:#fff; --amber:#f5a623; --green:#2fbf71; --danger:#e05252; --danger-bg:#fff6f6; --success:#1d9c5c; --nav-bg:rgba(255,255,255,.86); --hero-glow-1:#eeeaff; --hero-glow-2:#f4f1ff; --surface-inverse:#0d0f1a; --radius:16px; --radius-lg:22px; --shadow-sm:0 1px 2px rgba(13,15,26,.06), 0 2px 8px rgba(13,15,26,.04); --shadow:0 8px 24px rgba(13,15,26,.08); --shadow-lg:0 24px 60px rgba(48,40,120,.16); --container:1160px; --ease:cubic-bezier(.22,.8,.3,1); } /* ───────── Dark theme ───────── Toggled by JS via [data-theme="dark"] on . See assets/js/main.js. */ :root[data-theme="dark"]{ --purple-soft:#211e3d; --ink:#f2f2f7; --ink-2:#dcdce6; --body:#b6b9cf; --muted:#82869f; --line:#2a2b40; --line-strong:#3e3b63; --bg:#0a0b12; --bg-tint:#12131f; --surface:#171827; --surface-2:#1e1f33; --danger:#ff6b6b; --danger-bg:rgba(255,107,107,.14); --success:#3ddc8a; --nav-bg:rgba(10,11,18,.82); --hero-glow-1:rgba(108,92,231,.18); --hero-glow-2:rgba(84,70,190,.14); --surface-inverse:#050509; --shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35); --shadow:0 10px 28px rgba(0,0,0,.5); --shadow-lg:0 26px 64px rgba(0,0,0,.6); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--body); background:var(--bg); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background-color .2s ease,color .2s ease; } img{max-width:100%;display:block} a{color:var(--purple);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{color:var(--ink);line-height:1.1;margin:0 0 .5em;letter-spacing:-.022em} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px} .container--narrow{max-width:800px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--surface-inverse);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0} .skip-link:focus{left:0} :focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px} /* ───────── Buttons ───────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-weight:600;font-size:16px;line-height:1; padding:15px 24px;border-radius:12px;border:1.5px solid transparent; cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease); text-decoration:none;white-space:nowrap; } .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--purple);color:#fff;box-shadow:0 6px 18px rgba(108,92,231,.32)} .btn--primary:hover{background:var(--purple-dark);box-shadow:0 10px 26px rgba(108,92,231,.4)} .btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)} .btn--ghost:hover{border-color:var(--line-strong);background:var(--surface-2)} .btn--sm{padding:11px 18px;font-size:15px} .btn--lg{padding:18px 32px;font-size:18px} .btn--block{display:flex;width:100%} /* ───────── Nav ───────── */ .nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background-color .2s} .nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(13,15,26,.05)} .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px} .brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:18px} .brand:hover{text-decoration:none} .brand__mark{width:32px;height:32px;flex:none;display:block} .nav__links{display:flex;align-items:center;gap:28px} .nav__links a{color:var(--body);font-weight:500;font-size:15.5px} .nav__links a:hover{color:var(--ink);text-decoration:none} .nav__actions{display:flex;align-items:center;gap:12px} .theme-toggle{ display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none; border:1.5px solid var(--line);background:var(--surface);border-radius:11px;cursor:pointer; color:var(--ink);padding:0;transition:border-color .16s,background .16s; } .theme-toggle:hover{border-color:var(--line-strong)} .theme-toggle__icon{width:19px;height:19px} .theme-toggle__icon--moon{display:none} :root[data-theme="dark"] .theme-toggle__icon--sun{display:none} :root[data-theme="dark"] .theme-toggle__icon--moon{display:block} .nav__toggle{display:none;width:42px;height:42px;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px} .nav__toggle span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s} .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ───────── Hero ───────── */ .hero{ position:relative;padding:76px 0 90px;overflow:hidden; background: radial-gradient(900px 420px at 88% -8%, var(--hero-glow-1) 0%, rgba(238,234,255,0) 62%), radial-gradient(700px 400px at 4% 4%, var(--hero-glow-2) 0%, rgba(244,241,255,0) 60%), var(--bg); } .hero__grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center} .pill{ display:inline-flex;align-items:center;gap:9px;margin:0 0 22px; padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface); font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2); box-shadow:var(--shadow-sm); } .pill__dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,191,113,.18)} .hero h1{font-size:clamp(40px,5.4vw,62px);font-weight:800;letter-spacing:-.033em;margin-bottom:22px} .grad{background:linear-gradient(100deg,var(--purple),#9a7bff 60%,#6C5CE7);-webkit-background-clip:text;background-clip:text;color:transparent} .lede{font-size:19px;max-width:37em;margin-bottom:30px} .lede strong{color:var(--ink)} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px} .hero__trust{display:flex;flex-wrap:wrap;gap:8px 24px} .hero__trust li{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--muted)} .hero__trust svg{width:19px;height:19px;flex:none;fill:var(--green);background:rgba(47,191,113,.12);border-radius:50%;padding:1px} /* Browser mock */ .hero__visual{position:relative} .browser{ border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line); box-shadow:var(--shadow-lg);overflow:hidden;transform:perspective(1400px) rotateY(-3deg) rotateX(1.5deg); } .browser__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)} .dot{width:10px;height:10px;border-radius:50%} .dot--r{background:#ff5f57}.dot--y{background:#febc2e}.dot--g{background:#28c840} .browser__url{margin-left:10px;flex:1;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:5px 12px;font-size:12px;color:var(--muted)} .browser__body{padding:18px} .console{background:#14161f;border-radius:14px;padding:16px;color:#e7e8f2;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .console__head{display:flex;align-items:center;gap:9px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)} .console__logo{width:18px;height:18px;flex:none;display:block} .console__title{font-weight:600;font-size:14px;color:#fff} .console__status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#9aa0b8} .console__status i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite} .console__row{display:flex;gap:11px;align-items:flex-start;padding:11px 8px;border-radius:10px;transition:background .3s} .console__row+.console__row{border-top:1px solid rgba(255,255,255,.055)} .console__row.is-live{background:rgba(108,92,231,.14)} .tick{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;background:rgba(47,191,113,.16);color:#57d99a;margin-top:2px} .tick--spin{background:rgba(108,92,231,.22);color:#a99bff;animation:spin 1.6s linear infinite} .console__text{flex:1;min-width:0} .console__text b{display:block;font-size:13.5px;font-weight:600;color:#fff;line-height:1.35} .console__text em{display:block;font-style:normal;font-size:12.5px;color:#9297ae;margin-top:2px} .console__time{font-size:11.5px;color:#767c94;flex:none;margin-top:3px} .console__foot{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-size:12px;color:#8a90a8} .blip{width:7px;height:7px;border-radius:50%;border:1.5px solid #6a7090;animation:pulse 1.8s infinite} .browser__foot{display:flex;align-items:center;gap:6px;justify-content:center;margin:16px 0 4px;font-size:12.5px;color:var(--muted)} .sw{width:11px;height:11px;border-radius:3.5px;display:inline-block;margin-right:1px} .sw--1{background:var(--purple)}.sw--2{background:var(--amber)}.sw--3{background:var(--green);margin-right:7px} .floaty{ position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:10px 15px;font-size:13px;font-weight:500;color:var(--body);box-shadow:var(--shadow); } .floaty b{color:var(--ink);font-weight:700} .floaty--handled{top:-16px;right:6px;animation:float 5s ease-in-out infinite} .floaty--handled::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} @keyframes spin{to{transform:rotate(360deg)}} /* ───────── Sections ───────── */ .section{padding:92px 0} .section--tint{background:var(--bg-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin:0 0 14px} .eyebrow--light{color:#b6aaff} .h2{font-size:clamp(29px,3.5vw,42px);font-weight:800;margin-bottom:18px} .h2--light{color:#fff} .section__lede{font-size:18px;max-width:64ch;margin-bottom:46px} .section__lede--light{color:#c3c6d8} .note{margin:34px 0 0;font-size:15px;color:var(--muted);text-align:center} .grid{display:grid;gap:22px} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:26px;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s; } .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)} .card h3{font-size:19px;font-weight:700;margin-bottom:8px} .card p{margin:0;font-size:15.5px} .card__icon{font-size:24px;display:block;margin-bottom:12px} .card__badge{ display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px; background:var(--purple-soft);color:var(--purple);font-size:13px;font-weight:700;margin-bottom:14px; } .card--problem{background:var(--surface)} .card--story{background:linear-gradient(180deg,var(--surface), var(--surface-2))} /* ───────── Why local (dark) ───────── */ .section--dark{background:linear-gradient(160deg,#141626 0%,#1d1b3c 55%,#241f4d 100%);color:#c3c6d8} .local__grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start} .localpoints{display:grid;gap:14px} .localpoints li{display:flex;gap:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:18px 20px} .localpoints span{font-size:20px;line-height:1.3} .localpoints b{display:block;color:#fff;font-size:16.5px;font-weight:650;margin-bottom:3px} .localpoints p{margin:0;font-size:14.8px;color:#b0b4c8;line-height:1.55} /* ───────── Steps ───────── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column} .step__num{ display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:var(--purple);color:#fff;font-weight:700;font-size:16px;margin-bottom:16px; box-shadow:0 5px 14px rgba(108,92,231,.35); } .step h3{font-size:18.5px;margin-bottom:8px} .step p{font-size:15.5px;margin-bottom:14px} .step__meta{display:block;margin-top:auto;font-size:13px;color:var(--purple);font-weight:600;border-top:1px solid var(--line);padding-top:12px} /* ───────── Pricing ───────── */ .price-anchor{ margin:26px 0 0;padding:18px 22px;max-width:780px; background:var(--purple-soft);border:1px solid rgba(108,92,231,.22);border-radius:14px; font-size:17px;line-height:1.55;color:var(--body); } .price-anchor b{color:var(--purple);font-weight:800;white-space:nowrap} .pricing__promise{ margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:30px 32px;box-shadow:var(--shadow-sm); display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center; } .pricing__promise .ticks{margin-bottom:0} .ticks{display:grid;gap:10px;margin-bottom:24px;flex:1} .ticks li{position:relative;padding-left:27px;font-size:15.3px;line-height:1.5} .ticks li::before{ content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%; background:var(--purple-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236C5CE7'%3E%3Cpath d='M8 13.5 4.5 10l1.4-1.4L8 10.7l6.1-6.1L15.5 6z'/%3E%3C/svg%3E") center/13px no-repeat; } .ticks--light li{color:#c9ccdd} .ticks--light li::before{background-color:rgba(255,255,255,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a99bff'%3E%3Cpath d='M8 13.5 4.5 10l1.4-1.4L8 10.7l6.1-6.1L15.5 6z'/%3E%3C/svg%3E")} /* ───────── Book ───────── */ .book{background:linear-gradient(160deg,#171932 0%,#211d45 60%,#2b2257 100%)} .book__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .book__direct{margin-top:26px;color:#9ea2b8;font-size:15px;line-height:1.9} .book__direct a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3)} .book__direct a:hover{text-decoration:none;border-bottom-color:#fff} .book__panel{background:var(--surface);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)} .form__title{font-size:21px;margin-bottom:20px} .field{margin-bottom:16px} .field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px} .opt{font-weight:400;color:var(--muted)} .field input,.field textarea{ width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink); background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px;transition:border-color .16s,background .16s; } .field input::placeholder,.field textarea::placeholder{color:var(--muted)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--purple);background:var(--surface);box-shadow:0 0 0 4px rgba(108,92,231,.13)} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)} .field textarea{resize:vertical;min-height:88px} .form__small{margin:14px 0 0;font-size:13.5px;color:var(--muted);text-align:center} .form__status{margin:12px 0 0;font-size:14.5px;font-weight:600;text-align:center;min-height:1.2em} .form__status.is-ok{color:var(--success)} .form__status.is-err{color:var(--danger)} /* ───────── FAQ ───────── */ .faq{display:grid;gap:12px} .faq__item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 22px;box-shadow:var(--shadow-sm)} .faq__item summary{ cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative; font-weight:650;font-size:17px;color:var(--ink); } .faq__item summary::-webkit-details-marker{display:none} .faq__item summary::after{ content:"";position:absolute;right:2px;top:50%;width:11px;height:11px;margin-top:-7px; border-right:2.2px solid var(--purple);border-bottom:2.2px solid var(--purple); transform:rotate(45deg);transition:transform .22s var(--ease); } .faq__item[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .faq__item p{margin:0 0 20px;font-size:15.8px} /* ───────── Final CTA ───────── */ .finalcta{padding:82px 0;background:var(--purple-soft);border-top:1px solid var(--line)} .finalcta__inner{text-align:center} .finalcta h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-bottom:12px} .finalcta p{font-size:18.5px;margin-bottom:28px} /* ───────── Footer ───────── */ .footer{background:var(--surface-inverse);border-top:1px solid var(--line);color:#9498ad;padding:56px 0 26px;font-size:15px} .footer .brand{color:#fff;margin-bottom:14px} .footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:36px} .footer__blurb{max-width:36ch;font-size:14.8px;line-height:1.65;margin:0} .footer__links{display:grid;gap:10px;align-content:start} .footer__links a,.footer__contact a{color:#b9bccd} .footer__links a:hover,.footer__contact a:hover{color:#fff;text-decoration:none} .footer__contact{display:grid;gap:8px;align-content:start} .footer__contact a{font-weight:600;color:#fff} .footer__hours{margin:6px 0 0;font-size:14px;color:#7c8097} .footer__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.09);padding-top:22px;font-size:13.5px;color:#7c8097} .footer__bar p{margin:0} /* ───────── Sticky mobile CTA ───────── */ .mobilecta{ display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:90; background:var(--purple);color:#fff;text-align:center;font-weight:650;font-size:16px; padding:15px;border-radius:13px;box-shadow:0 10px 30px rgba(108,92,231,.42); } .mobilecta:hover{text-decoration:none} /* ───────── Reveal on scroll ───────── */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* ───────── Responsive ───────── */ @media (max-width:1000px){ .hero__grid,.local__grid,.book__grid{grid-template-columns:1fr;gap:44px} .browser{transform:none} .grid--4{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .pricing__promise{grid-template-columns:1fr;gap:24px} .footer__inner{grid-template-columns:1fr 1fr} } @media (max-width:760px){ body{font-size:16px} .section{padding:66px 0} .hero{padding:48px 0 64px} .nav__links{ position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0; background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 24px 18px; } .nav__links.is-open{display:flex} .nav__links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px} .nav__links a:last-child{border-bottom:none} .nav__toggle{display:flex} .nav__actions .btn{display:none} .grid--3,.grid--4,.steps{grid-template-columns:1fr} .hero__cta .btn{flex:1 1 100%} .book__panel{padding:24px} .footer__inner{grid-template-columns:1fr;gap:28px} .mobilecta{display:block} body{padding-bottom:78px} .floaty--handled{top:-12px;right:0;font-size:12px;padding:8px 12px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} }