:root { --ink:#15201f; --soft:#f3f4ee; --lime:#d9fa61; --coral:#ff765d; --line:#d8dcd2; --muted:#6b7470; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--soft); font-family:Manrope,"Noto Sans SC",sans-serif; } button,a { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; }
.topbar { height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 4.5vw; background:rgba(243,244,238,.92); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; letter-spacing:0; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--ink); color:var(--lime); font:500 10px "DM Mono",monospace; border-radius:50%; }.topbar nav { display:flex; gap:34px; margin-left:92px; }.topbar nav a,.text-button { font-size:13px; font-weight:600; }.topbar nav a:hover { color:#6a8031; }.header-actions { display:flex; align-items:center; gap:21px; }.text-button { border:0; background:transparent; }.primary-button,.generate-button { border:1px solid var(--ink); background:var(--ink); color:white; border-radius:2px; font-weight:700; padding:13px 17px; font-size:13px; transition:.2s transform,.2s background; }.primary-button:hover,.generate-button:hover { background:#30403b; transform:translateY(-2px); }.primary-button span,.generate-button span,.outline-button span { margin-left:9px; }.small { padding:10px 14px; }
.hero { max-width:1420px; margin:auto; min-height:638px; padding:74px 4.5vw 76px; display:grid; grid-template-columns:.86fr 1.14fr; gap:70px; align-items:center; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 18px; font:500 10px "DM Mono",monospace; letter-spacing:1.2px; color:#58625e; }.eyebrow i { display:inline-block; width:8px; height:8px; background:var(--coral); border-radius:50%; }.hero h1,.section-heading h2,.feature-band h2,.pricing h2 { font-size:clamp(40px,5vw,71px); line-height:1.06; letter-spacing:0; margin:0; font-weight:700; }.hero h1 em { color:#809b38; font-style:normal; }.hero-text { max-width:400px; color:#626c68; font-size:15px; line-height:1.8; margin:26px 0; }.proof { display:flex; align-items:center; gap:12px; }.proof p { font-size:11px; color:#626c68; }.faces { display:flex; }.faces span { width:23px; height:23px; margin-right:-6px; border:2px solid var(--soft); border-radius:50%; background-size:cover; }.faces span:nth-child(1){background-image:url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=80&q=80')}.faces span:nth-child(2){background-image:url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=80&q=80')}.faces span:nth-child(3){background-image:url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=80&q=80')}
.studio { background:#fff; padding:10px; box-shadow:0 16px 45px rgba(20,32,31,.1); position:relative; }.studio-top { height:34px; display:flex; align-items:center; gap:8px; padding:0 7px; font:500 9px "DM Mono",monospace; letter-spacing:1px; }.live-dot { width:7px; height:7px; background:var(--coral); border-radius:50%; }.icon-button { margin-left:auto; border:0; background:transparent; font-weight:800; letter-spacing:1px; }.image-stage { height:365px; position:relative; overflow:hidden; background:#1d2930; }.image-stage img { width:100%; height:100%; object-fit:cover; display:block; transition:.5s opacity; }.stage-label { position:absolute; left:15px; bottom:14px; color:#fff; display:flex; gap:10px; font:500 10px "DM Mono",monospace; }.stage-label span:last-child { opacity:.78; }.expand { position:absolute; top:13px; right:13px; border:0; width:34px; height:34px; color:white; background:rgba(15,25,25,.35); backdrop-filter:blur(8px); font-size:17px; }.loading-state { position:absolute; inset:0; display:none; background:rgba(16,28,27,.77); color:#fff; align-items:center; justify-content:center; flex-direction:column; gap:11px; font-size:12px; }.loading-state.active { display:flex; }.loading-state span { width:24px; height:24px; border:2px solid rgba(255,255,255,.3); border-top-color:var(--lime); border-radius:50%; animation:spin .8s linear infinite; }.loading-state p { margin:0; }.prompt-bar { border:1px solid #e2e4dc; margin-top:10px; padding:11px 11px 8px; }.prompt-bar textarea { display:block; width:100%; min-height:34px; border:0; resize:none; outline:0; font:500 13px "Noto Sans SC",sans-serif; color:var(--ink); }.prompt-actions { display:flex; align-items:center; gap:7px; }.tool-button { border:0; background:#f1f3ed; height:28px; padding:0 9px; font:500 10px "DM Mono",monospace; color:#485450; }.tool-button b { font-weight:500; margin-right:4px; }.dice { font-size:15px; margin-right:auto; }.generate-button { padding:7px 11px; font-size:11px; }.aspect-menu { display:none; position:absolute; z-index:2; right:112px; bottom:13px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px #15201f22; width:118px; }.aspect-menu.open { display:block; }.aspect-menu button { display:block; width:100%; padding:9px; border:0; background:#fff; text-align:left; font-size:11px; }.aspect-menu button:hover { background:var(--soft); }
.marquee { background:var(--lime); border-block:1px solid var(--ink); overflow:hidden; white-space:nowrap; }.marquee div { width:max-content; padding:18px 0; animation:slide 20s linear infinite; }.marquee span { font:600 12px "DM Mono",monospace; letter-spacing:1.4px; padding:0 30px; }.marquee b { font-size:17px; }
.gallery-section { padding:120px 4.5vw 110px; max-width:1420px; margin:auto; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }.section-heading h2 { font-size:clamp(31px,3.8vw,51px); }.outline-button { padding:12px 15px; font-size:12px; font-weight:700; border:1px solid var(--ink); background:transparent; }.outline-button:hover { background:var(--ink); color:#fff; }.gallery-grid { display:grid; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:240px; gap:14px; }.work { position:relative; overflow:hidden; background:#d4d7cf; }.work.tall { grid-row:span 2; }.work.wide { grid-column:span 2; }.work img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }.work:hover img { transform:scale(1.04); }.work-info { position:absolute; left:0; right:0; bottom:0; padding:31px 16px 14px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.65)); }.work-info p { margin:0 0 4px; font-size:14px; font-weight:700; }.work-info span { font:10px "DM Mono",monospace; opacity:.8; }.native-ad { margin-top:30px; min-height:92px; border-top:1px solid var(--line); padding-top:11px; overflow:hidden; }.native-ad>p { margin:0 0 7px; color:#7a827d; font:9px "DM Mono",monospace; letter-spacing:1.1px; }
.feature-band { border-block:1px solid var(--line); padding:83px 4.5vw; display:grid; grid-template-columns:.5fr 1.5fr 1fr auto; gap:40px; align-items:center; }.feature-number { font:500 12px "DM Mono",monospace; color:#829140; align-self:start; }.feature-band h2 { font-size:clamp(30px,3.6vw,51px); }.feature-copy { color:#66716c; font-size:13px; line-height:1.8; max-width:280px; }.round-arrow { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:#fff; font-size:22px; }.round-arrow:hover { transform:rotate(40deg); }
.pricing { background:#1c2926; color:#f5f7ef; padding:105px 4.5vw; text-align:center; }.pricing .eyebrow { justify-content:center; color:#bdc7c0; }.pricing h2 { font-size:clamp(34px,4vw,54px); }.about-copy { max-width:450px; margin:22px auto 32px; color:#bdc7c0; font-size:14px; line-height:1.8; }.plans { max-width:1000px; margin:50px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:left; }.plans article { min-height:260px; padding:27px; border:1px solid #496059; display:flex; flex-direction:column; align-items:flex-start; position:relative; }.plans article p { font-size:14px; margin:0 0 25px; }.plans strong { font-size:34px; }.plans strong small { font-size:12px; font-weight:400; color:#adb9b2; }.plans article>span { font-size:11px; color:#b5c1ba; margin:11px 0 auto; }.plans button { width:100%; }.plans .featured { background:var(--lime); color:var(--ink); border-color:var(--lime); }.plans .featured>span { color:#4b5a50; }.plan-tag { position:absolute; top:-12px; right:16px; background:var(--coral); padding:5px 8px; color:white; font:9px "DM Mono",monospace; }
footer { padding:29px 4.5vw; display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#66716c; } footer .brand { color:var(--ink); font-size:14px; } footer .brand-mark { width:25px; height:25px; font-size:9px; } footer div { display:flex; gap:17px; } .toast { position:fixed; z-index:20; left:50%; bottom:24px; transform:translate(-50%,130px); background:var(--ink); color:#fff; padding:11px 16px; font-size:12px; transition:.25s; }.toast.show { transform:translate(-50%,0); }.modal { position:fixed; inset:0; z-index:30; display:none; place-items:center; background:rgba(10,16,15,.88); padding:6vw; }.modal.open { display:grid; }.modal img { max-width:100%; max-height:100%; object-fit:contain; }.modal-close { position:absolute; top:25px; right:30px; border:0; background:transparent; color:#fff; font-size:34px; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes slide { to { transform:translateX(-50%); } }
@media(max-width:760px) { .topbar { height:65px; padding:0 20px; }.topbar nav,.text-button { display:none; }.hero { padding:56px 20px 58px; display:block; min-height:auto; }.hero h1 { font-size:48px; }.hero-copy { margin-bottom:44px; }.studio { padding:7px; }.image-stage { height:330px; }.gallery-section { padding:73px 20px; }.section-heading { display:block; }.section-heading .outline-button { margin-top:25px; }.gallery-grid { grid-template-columns:1fr 1fr; grid-auto-rows:176px; gap:8px; }.work.tall { grid-row:span 2; }.work.wide { grid-column:span 2; }.feature-band { padding:57px 20px; display:grid; grid-template-columns:1fr auto; gap:26px; }.feature-number,.feature-copy { grid-column:1/-1; }.plans { grid-template-columns:1fr; }.pricing { padding:72px 20px; }.plans article { min-height:210px; } footer { padding:25px 20px; flex-wrap:wrap; gap:20px; } footer p { order:3; width:100%; margin:0; } }