/* AUTOPAD landing */
html { scroll-padding-top: 80px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); } .gtxt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reveal { opacity: 0; transform: translateY(26px); } html:not(.gs) .reveal { opacity: 1; transform: none; } html.calm .reveal { opacity: 1 !important; transform: none !important; }
.sec { padding: clamp(70px, 10vw, 130px) 20px 0; } .sec-h { max-width: 760px; margin-bottom: 38px; } .sec-h h2 { font-size: clamp(34px, 5.4vw, 64px); margin: 14px 0 12px; } .sec-h p { font-size: 18px; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: calc(100svh - 64px); padding: 40px 20px 30px; } .hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: .94; letter-spacing: -.045em; } .hero h1 .ln { display: block; } .hero h1 .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero h1 .mask { display: inline-flex; overflow: hidden; padding-bottom: .08em; } .hero h1 .ch { display: inline-block; }
.hero .lead { font-size: clamp(17px, 2vw, 21px); color: var(--tx2); max-width: 540px; } .trust { list-style: none; display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--tx2); } .trust li::before { content: '✓'; color: var(--ok); margin-right: 7px; font-weight: 800; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 30px; } }
.stage3 { position: relative; perspective: 1600px; } .win { border-radius: 24px; border: 1px solid var(--line2); background: linear-gradient(180deg, #17110e, #0f0b09); box-shadow: 0 50px 120px -40px rgba(255, 122, 47, .45), 0 0 0 1px rgba(255, 154, 60, .05); overflow: hidden; transform-style: preserve-3d; }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--tx3); } .win-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 232, 214, .16); } .win-bar span { margin-left: 8px; flex: 1; } .win-bar b { color: var(--gold); }
.win-body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; padding: 18px; min-height: 330px; } .wl { list-style: none; display: flex; flex-direction: column; gap: 6px; } .wl li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 14.5px; color: var(--tx3); border: 1px solid transparent; transition: .5s var(--ease); } .wl li.work { color: var(--tx); background: rgba(255, 122, 47, .09); border-color: rgba(255, 154, 60, .3); transform: translateX(5px); } .wl li.done { color: var(--tx); }
.wi { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tx3); flex: none; position: relative; transition: .4s; } .wl li.done .wi { background: var(--grad); border-color: transparent; } .wl li.done .wi::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #1a0d03; border-width: 0 2px 2px 0; transform: rotate(45deg); } .wl li.work .wi { border-color: var(--ember2); border-top-color: transparent; animation: rot .8s linear infinite; }
.wp { display: flex; flex-direction: column; gap: 12px; } .wp > * { opacity: 0; transform: translateY(14px) scale(.96); transition: .7s var(--ease); } .win[data-step="1"] .wp-brand, .win[data-step="2"] .wp-brand, .win[data-step="3"] .wp-brand, .win[data-step="4"] .wp-brand, .win[data-step="5"] .wp-brand, .win[data-step="6"] .wp-brand { opacity: 1; transform: none; } .win[data-step="3"] .wp-site, .win[data-step="4"] .wp-site, .win[data-step="5"] .wp-site, .win[data-step="6"] .wp-site { opacity: 1; transform: none; } .win[data-step="4"] .wp-x, .win[data-step="5"] .wp-x, .win[data-step="6"] .wp-x { opacity: 1; transform: none; }
.wp-brand { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel); } .wp-logo { width: 52px; height: 52px; border-radius: 15px; overflow: hidden; flex: none; box-shadow: var(--glow); } .wp-logo img { width: 100%; height: 100%; } .wp-logo.big { width: 84px; height: 84px; border-radius: 22px; } .wp-name { font: 700 17px var(--disp); } .wp-tk { color: var(--gold); font-size: 13px; } .wp-pal { margin-left: auto; display: flex; gap: 4px; } .wp-pal i { width: 14px; height: 14px; border-radius: 50%; } .wp-pal i:nth-child(1) { background: #ff7a2f; } .wp-pal i:nth-child(2) { background: #ffc15a; } .wp-pal i:nth-child(3) { background: #f5efe8; }
.wp-site { padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: #0d0907; display: grid; gap: 7px; } .wp-site div { height: 12px; border-radius: 5px; background: rgba(255, 232, 214, .1); } .wp-site .b1 { height: 38px; background: linear-gradient(120deg, rgba(255, 106, 31, .5), rgba(255, 193, 90, .3)); } .wp-site .b2 { width: 70%; } .wp-site .b3 { width: 90%; } .wp-site .b4 { width: 45%; }
.wp-x { display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); } .wp-x .xa { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #000; border: 1px solid var(--line2); } .wp-x .l1, .wp-x .l2 { height: 8px; border-radius: 4px; background: rgba(255, 232, 214, .12); } .wp-x .l2 { width: 60%; }
.win-foot { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); } .win-foot .bar { width: 120px; } @media (max-width: 560px) { .win-body { grid-template-columns: 1fr; } .wp { display: none; } .win-body { min-height: 0; } }
.float { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #1c1411; border: 1px solid var(--line2); font-size: 13px; font-weight: 600; box-shadow: 0 20px 50px -14px #000; translate: 0 var(--py, 0px); } .f-chip { right: -14px; top: -16px; color: var(--ok); border-color: rgba(94, 233, 164, .35); } .f-chip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; } .f-tick { left: -18px; bottom: 74px; color: var(--gold); animation: bob 6s ease-in-out infinite; } .f-ai { right: 24px; bottom: -20px; animation: bob 7s ease-in-out infinite reverse; }
@keyframes bob { 50% { transform: translateY(-10px); } } @media (max-width: 960px) { .float { display: none; } }
.tape { margin-top: 40px; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255, 244, 232, .02); padding: 18px 0; } .tape-in { display: flex; gap: 34px; width: max-content; animation: marq 40s linear infinite; align-items: center; } .tape span { font: 800 clamp(22px, 3.4vw, 40px) var(--disp); letter-spacing: -.02em; color: var(--tx); } .tape span:nth-of-type(odd) { color: transparent; -webkit-text-stroke: 1px var(--line2); } .tape i { color: var(--ember2); font-style: normal; font-size: 24px; } @keyframes marq { to { transform: translateX(-50%); } }

.demo { padding: 22px; } .demo-in textarea { min-height: 96px; font-size: 18px; margin-bottom: 12px; } .demo-out { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); } @media (max-width: 800px) { .demo-out { grid-template-columns: 1fr; } }
.dsteps { list-style: none; display: flex; flex-direction: column; gap: 6px; } .dsteps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--tx3); transition: .4s; } .dsteps li[data-s=working] { color: var(--tx); background: rgba(255, 122, 47, .08); } .dsteps li[data-s=done] { color: var(--tx2); } .dsteps .si { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--tx3); position: relative; flex: none; } .dsteps [data-s=working] .si { border-color: var(--ember2); border-top-color: transparent; animation: rot .8s linear infinite; } .dsteps [data-s=done] .si { background: var(--grad); border-color: transparent; } .dsteps [data-s=done] .si::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #1a0d03; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dres { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; } @media (max-width: 700px) { .dres { grid-template-columns: 1fr; } } .dres > div { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); animation: popin .7s var(--ease) both; } @keyframes popin { from { opacity: 0; transform: scale(.9) translateY(14px); } }
.dres h4 { font: 700 26px var(--disp); } .dres .mini { height: 130px; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .dres .mini b { font: 800 26px var(--disp); line-height: 1; } .dres .mini span { height: 8px; border-radius: 4px; opacity: .35; background: currentColor; } .dpost { font-size: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); margin-top: 8px; }

.how-pin { padding: clamp(70px, 10vw, 120px) 0 0; } .how { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; min-height: 100vh; padding: 0 20px; } @media (max-width: 980px) { .how { grid-template-columns: 1fr; min-height: 0; } }
.how h2 { font-size: clamp(32px, 4.6vw, 56px); margin: 14px 0 22px; } .hsteps { list-style: none; display: flex; flex-direction: column; gap: 4px; } .hsteps li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; border-left: 3px solid var(--line); color: var(--tx3); cursor: pointer; transition: .4s var(--ease); } .hsteps li b { font: 700 18px var(--disp); } .hsteps li span { font-size: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; } .hsteps li.on { color: var(--tx); border-left-color: var(--ember); background: linear-gradient(90deg, rgba(255, 122, 47, .13), transparent); } .hsteps li.on span { max-height: 60px; opacity: 1; margin-top: 4px; color: var(--tx2); } .hsteps li.past { color: var(--tx2); border-left-color: var(--ember2); } .hbar { margin-top: 22px; max-width: 360px; } .hbar i { transform-origin: left; }
.scene { position: relative; min-height: 400px; } .pane { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(30px) scale(.97); transition: .7s var(--ease); pointer-events: none; } .pane.on { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 980px) { .scene { min-height: 360px; } }
.mock { width: min(480px, 100%); padding: 24px; border-radius: 24px; border: 1px solid var(--line2); background: linear-gradient(180deg, #19120f, #100b09); box-shadow: 0 40px 100px -40px rgba(255, 122, 47, .4); display: flex; flex-direction: column; gap: 16px; } .mk-h { font: 700 19px var(--disp); } .mk-prompt { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); min-height: 62px; font-size: 16px; } .mk-prompt.small { min-height: 0; font-size: 14px; color: var(--tx2); } .caret { display: inline-block; width: 8px; height: 17px; background: var(--ember2); vertical-align: -3px; margin-left: 2px; animation: blink .8s infinite; } @keyframes blink { 50% { opacity: 0; } }
.mk-brand { display: flex; gap: 18px; align-items: center; } .mk-name { font: 800 28px var(--disp); } .mk-site { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #0b0807; border: 1px solid var(--line); } .mk-site div { height: 14px; border-radius: 6px; background: rgba(255, 232, 214, .1); } .mk-site .s1 { height: 70px; background: linear-gradient(120deg, rgba(255, 106, 31, .55), rgba(255, 193, 90, .3)); } .mk-site .s2 { width: 60%; } .mk-site .s3 { width: 85%; } .mk-site .s4 { height: 40px; width: 100%; opacity: .6; }
.cal2 { display: grid; gap: 8px; } .cal2 > div { display: flex; gap: 14px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14.5px; } .cal2 b { color: var(--gold); font-size: 15px; } .cal2.sm > div { padding: 8px 12px; font-size: 13px; }
.tk2 { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 14.5px; color: var(--tx2); margin-top: 8px; } .tk2::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--tx3); flex: none; } .tk2.done { color: var(--tx); } .tk2.done::before { background: var(--ok); border-color: var(--ok); } .tk2.work { color: var(--tx); border-color: rgba(255, 154, 60, .35); } .tk2.work::before { background: var(--ember2); border-color: var(--ember2); animation: pulse 1.4s infinite; } .tk2.appr::before { background: var(--warn); border-color: var(--warn); } .tk2 em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--warn); }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .bento .card { display: flex; flex-direction: column; gap: 12px; } .bento h3 { font-size: 22px; } .b-chat { grid-column: span 4; grid-row: span 2; } .b-brand { grid-column: span 2; } .b-site { grid-column: span 2; } .b-x { grid-column: span 2; } .b-task { grid-column: span 3; } .b-vis { grid-column: span 3; } .b-safe { grid-column: span 6; flex-direction: row; align-items: center; gap: 24px !important; } .b-safe h3 { white-space: nowrap; } .b-safe p { margin: 0; }
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .b-chat, .b-safe { grid-column: span 2; } .b-brand, .b-site, .b-x, .b-task, .b-vis { grid-column: span 1; } .b-safe { flex-direction: column; align-items: flex-start; } } @media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento .card { grid-column: span 1 !important; } }
.chatmock { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .chatmock .m { max-width: 80%; padding: 12px 15px; border-radius: 18px; font-size: 15px; } .chatmock .u { align-self: flex-end; background: var(--grad); color: #1a0d03; font-weight: 600; border-bottom-right-radius: 5px; } .chatmock .a { background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .ach { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ach span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; color: var(--ok); background: rgba(94, 233, 164, .1); border: 1px solid rgba(94, 233, 164, .3); }
.mini-site { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #0b0807; border: 1px solid var(--line); margin-top: auto; } .mini-site i { height: 12px; border-radius: 5px; background: rgba(255, 232, 214, .1); } .mini-site i:first-child { height: 46px; background: linear-gradient(120deg, rgba(255, 106, 31, .5), rgba(255, 193, 90, .28)); }
.pilot { padding: 26px; } .pgrid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-top: 24px; } @media (max-width: 800px) { .pgrid2 { grid-template-columns: 1fr; } } .pilot h3 { font-size: 30px; margin-bottom: 8px; } .plist2 { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 16px; } .plist2 li { display: flex; gap: 10px; color: var(--tx2); animation: rise .5s var(--ease) both; } .plist2 li::before { content: '✓'; color: var(--ok); font-weight: 800; } .never { padding: 20px; border-radius: 18px; border: 1px dashed rgba(255, 84, 112, .4); background: rgba(255, 84, 112, .05); } .never ul { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; color: var(--tx2); font-size: 14.5px; } .never li::before { content: '✕'; color: var(--hot); margin-right: 8px; font-weight: 800; }
.faq .fqs { max-width: 820px; } .fq { border-bottom: 1px solid var(--line); } .fq-q { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 22px 4px; font: 600 clamp(17px, 2.2vw, 21px) var(--sans); text-align: left; color: var(--tx); } .fq-q span { color: var(--ember2); font-size: 28px; line-height: 1; transition: transform .35s var(--ease); } .fq.open .fq-q span { transform: rotate(45deg); } .fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .fq-a > p { overflow: hidden; color: var(--tx2); padding: 0 4px; } .fq.open .fq-a { grid-template-rows: 1fr; } .fq.open .fq-a > p { padding-bottom: 22px; }
.cta-end .card { text-align: center; padding: clamp(40px, 7vw, 90px) 20px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 47, .22), transparent 65%), linear-gradient(180deg, rgba(255, 244, 232, .05), rgba(255, 244, 232, .02)); border-color: rgba(255, 154, 60, .35); } .cta-end h2 { font-size: clamp(36px, 6vw, 76px); }
.foot { margin-top: clamp(70px, 10vw, 120px); border-top: 1px solid var(--line); padding: 46px 0 30px; } .fl { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 0 20px; } .fl b { display: block; margin-bottom: 10px; font: 700 14px var(--disp); } .fl a.brand { display: flex; padding: 0; } .fl a:not(.brand) { display: block; color: var(--tx2); padding: 4px 0; font-size: 14.5px; } .fl a:hover { color: var(--tx); } .legal { margin-top: 30px; padding: 0 20px; color: var(--tx3); font-size: 12.5px; } @media (max-width: 760px) { .fl { grid-template-columns: 1fr 1fr; } }
.mk-h2 { margin: 0; }
.fl .brand b { display: inline; margin: 0; font: inherit; }
.show { padding-top: clamp(40px, 6vw, 80px); } .show-in { border-radius: 26px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 50px 120px -50px rgba(255, 122, 47, .55); } .show-in img { width: 100%; height: auto; display: block; }
.mk-field { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0, 0, 0, .35); font-size: 15px; } .mk-field small { display: block; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); margin-bottom: 3px; }
.mk-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mk-opts img, .mk-opts i { aspect-ratio: 1; border-radius: 14px; border: 1px solid var(--line2); width: 100%; object-fit: cover; } .mk-opts i { background: linear-gradient(135deg, rgba(255, 106, 31, .35), rgba(255, 193, 90, .15)); } .mk-opts.sm { margin-top: auto; } .mk-opts.sm img, .mk-opts.sm i { border-radius: 10px; }

/* bento: an explicit grid (no overlaps) and a smooth lift on hover instead of the jittery tilt */
.bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "chat chat chat chat brand brand" "chat chat chat chat site site" "x x task task vis vis" "safe safe safe safe safe safe"; align-items: stretch; }
.b-chat { grid-area: chat; } .b-brand { grid-area: brand; } .b-site { grid-area: site; } .b-x { grid-area: x; } .b-task { grid-area: task; } .b-vis { grid-area: vis; } .b-safe { grid-area: safe; flex-direction: row !important; align-items: center; }
.bento .card { transition: transform .5s var(--ease), border-color .35s, box-shadow .5s, background .35s; will-change: transform; } .bento .card:hover { transform: translateY(-6px); border-color: rgba(255, 154, 60, .55); box-shadow: 0 26px 60px -26px rgba(255, 122, 47, .6); background: linear-gradient(180deg, rgba(255, 140, 70, .09), rgba(255, 244, 232, .03)); }
.bento .card .chip, .bento .card .btn, .mk-opts img, .tk2 { transition: transform .35s var(--ease); } .bento .card:hover .btn { transform: translateY(-2px); } .bento .card:hover .mk-opts img, .bento .card:hover .mk-opts i { transform: scale(1.04) rotate(-1.5deg); } .bento .card:hover .tk2.work::before { animation-duration: .7s; }
.mk-opts img, .mk-opts i { transition: transform .5s var(--ease); } .pilot, .faq .fq, .show-in { transition: border-color .3s, box-shadow .4s; } .pilot:hover { border-color: rgba(255, 154, 60, .35); }
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "chat chat" "brand site" "x task" "vis vis" "safe safe"; } .b-safe { flex-direction: column !important; align-items: flex-start; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; grid-template-areas: "chat" "brand" "site" "x" "task" "vis" "safe"; } }