:root{
 --bg:#f5f2eb;--paper:#fbfaf6;--ink:#171714;--muted:#706e67;--line:rgba(23,23,20,.13);
 --dark:#171817;--dark2:#20221f;--white:#f7f5ef;--dim:#aaa9a0;
 --accent:#b88455;--accent2:#d8b996;--serif:"Instrument Serif",Georgia,serif;
 --sans:"DM Sans",system-ui,sans-serif;--mono:"Space Mono",monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55}
a{text-decoration:none;color:inherit}.wrap{width:min(1160px,calc(100% - 44px));margin:auto}.mono{font-family:var(--mono)}
nav{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(245,242,235,.88);backdrop-filter:blur(14px);z-index:20}
.logo{font-weight:700;letter-spacing:-.04em;font-size:1.1rem;display:flex;align-items:center;gap:9px}.logo span{font-family:var(--serif);font-size:1.35rem;font-weight:400}.logo img{display:block;height:36px;width:auto}.logo-mark{width:34px;height:34px;display:block;border-radius:9px}
.navlinks{display:flex;gap:28px;font-size:.76rem;color:var(--muted)}.navcta{padding:10px 16px;background:var(--ink);color:var(--white);border-radius:4px;font-size:.74rem;font-weight:600}
.hero{padding:105px 0 90px;text-align:center;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(184,132,85,.16),transparent 68%);left:50%;top:-210px;transform:translateX(-50%)}
.kicker{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.kicker:before{content:"";width:7px;height:7px;background:var(--accent);border-radius:50%}
.hero h1,h1{position:relative;font-family:var(--serif);font-weight:400;font-size:clamp(4rem,9vw,8rem);line-height:.92;letter-spacing:-.035em;margin:24px auto 25px;max-width:980px;color:var(--ink)}
.hero h1 em,h1 em{font-style:italic;font-family:var(--serif)}.hero p{position:relative;color:var(--muted);font-size:1.02rem;max-width:610px;margin:0 auto}
.hero-actions{position:relative;display:flex;justify-content:center;gap:10px;margin-top:32px;flex-wrap:wrap}
.btn{padding:14px 21px;border:1px solid var(--ink);border-radius:4px;font-size:.77rem;font-weight:700}.btn.fill{background:var(--ink);color:var(--white)}.btn.light{border-color:var(--line)}
.micro{position:relative;margin-top:22px;color:var(--muted);font-size:.66rem}
.marquee{background:var(--dark);color:var(--white);overflow:hidden;border-top:1px solid var(--dark);border-bottom:1px solid var(--dark)}
.marquee-in{display:flex;width:max-content;padding:14px 0;font-family:var(--mono);font-size:.59rem;text-transform:uppercase;letter-spacing:.12em;animation:marquee-scroll 40s linear infinite;will-change:transform}
.marquee-track{display:flex;flex:none;white-space:nowrap}
.marquee-track span{padding-right:2.4em;white-space:nowrap}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-in{animation:none}}
.section{padding:105px 0;border-bottom:1px solid var(--line)}.eyebrow{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;margin-bottom:55px}.section h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5vw,4.6rem);line-height:.98;letter-spacing:-.02em;margin:10px 0}
.lead{font-size:1.05rem;color:var(--muted);max-width:560px;margin-top:10px}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.problem{background:var(--paper);padding:31px;min-height:245px}.num{font-family:var(--mono);font-size:.62rem;color:var(--accent)}
.problem h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:35px 0 10px}.problem p{font-size:.82rem;color:var(--muted);margin:0}
.demo{background:var(--dark);color:var(--white);padding:105px 0;overflow:hidden}.demo .eyebrow{color:var(--accent2)}
.demo-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center}.demo h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6vw,5.5rem);line-height:.93;margin:12px 0 22px}.demo-copy p{color:var(--dim);max-width:440px;font-size:.92rem}
.phone-wrap{position:relative;display:flex;justify-content:center}.phone{width:min(375px,100%);background:#f2eee6;color:var(--ink);border-radius:25px;padding:13px;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:rotate(2deg)}
.phone-screen{background:#e8e2d8;border-radius:17px;padding:25px 20px 22px;min-height:570px}
.p-photo{height:210px;border-radius:12px;background:linear-gradient(145deg,#5f6259,#c7ad91);position:relative;overflow:hidden}
.p-photo:after{content:"CREATOR / 01";position:absolute;bottom:13px;left:13px;font:700 .52rem var(--mono);color:white;letter-spacing:.1em}
.p-id{padding:17px 2px 8px}.p-id h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin:0}.p-id span{font: .57rem var(--mono);color:#77756f}
.p-tags{display:flex;gap:5px;margin-top:10px}.p-tags i{font-style:normal;border:1px solid #aaa59b;border-radius:99px;padding:4px 8px;font-size:.55rem}
.p-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #c4beb4;border-bottom:1px solid #c4beb4;margin-top:15px;padding:11px 0;text-align:center}.p-stats b{font-family:var(--serif);font-size:1.2rem;display:block}.p-stats span{font: .46rem var(--mono);color:#777}
.p-blocks{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.p-block{height:86px;border-radius:8px;background:#c5b39d}.p-block:nth-child(2){background:#858c80}.p-block:nth-child(3){background:#a08c8b}.p-block:nth-child(4){background:#667477}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.feature{border:1px solid var(--line);background:var(--paper);padding:28px;border-radius:5px;min-height:235px}.feature .icon{font-family:var(--serif);font-size:2.4rem}.feature h3{font-family:var(--serif);font-size:1.65rem;font-weight:400;margin:20px 0 7px}.feature p{font-size:.8rem;color:var(--muted);margin:0}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.step{background:var(--paper);padding:28px;min-height:205px}.step b{font-family:var(--mono);font-size:.61rem;color:var(--accent)}.step h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;margin:33px 0 8px}.step p{font-size:.77rem;color:var(--muted);margin:0}
.usecases{display:grid;grid-template-columns:1.1fr .9fr;gap:15px}.use{border-radius:6px;padding:35px;background:var(--paper);border:1px solid var(--line);min-height:210px}.use.big{grid-row:span 2;background:var(--dark);color:var(--white);min-height:435px}.use h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin:50px 0 8px}.use p{font-size:.8rem;color:var(--muted);max-width:420px}.use.big p{color:var(--dim)}
.compare{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}.compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line)}.compare-row:last-child{border-bottom:0}.compare-row>div{padding:17px 20px;font-size:.78rem;border-right:1px solid var(--line)}.compare-row>div:last-child{border-right:0}.compare-row.head{background:#ebe6dd;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.07em}.compare-row:not(.head)>div:first-child{font-weight:600}.yes{font-weight:700}.no{color:#999}.quote{padding:120px 0;text-align:center}.quote-mark{font-family:var(--serif);font-size:4rem;color:var(--accent);line-height:.4}.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;max-width:900px;margin:30px auto 22px}.quote small{font-family:var(--mono);font-size:.6rem;color:var(--muted);text-transform:uppercase}
.cta{background:var(--dark);color:var(--white);padding:100px 0}.cta-inner{text-align:center;max-width:850px;margin:auto}.cta h2{font-family:var(--serif);font-size:clamp(3.2rem,7vw,6.4rem);font-weight:400;line-height:.9;margin:13px 0 20px}.cta p{color:var(--dim);max-width:520px;margin:auto;font-size:.9rem}.cta .btn.fill{background:var(--white);color:var(--ink);border-color:var(--white);display:inline-block;margin-top:30px}
footer{padding:28px 0;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font: .62rem var(--mono);flex-wrap:wrap}footer b{color:var(--ink)}
@media(max-width:820px){
 .navlinks{display:none}.hero{padding:78px 0 70px}.hero h1,h1{font-size:clamp(3.5rem,17vw,6rem)}
 .section{padding:75px 0}.section-head,.demo-grid,.usecases{grid-template-columns:1fr;gap:25px}
 .problem-grid,.flow{grid-template-columns:1fr}.features{grid-template-columns:1fr}.use.big{grid-row:auto;min-height:300px}
 .compare{overflow-x:auto}.compare-row{min-width:680px}.phone{transform:none}.demo-grid{display:flex;flex-direction:column}.demo-copy{order:0}

 /* Mobile demo: make the portfolio preview compact and better balanced */
 .demo{padding:72px 0 82px}
 .demo-grid{gap:38px}
 .demo-copy p{font-size:.88rem;line-height:1.6}
 .demo-copy .hero-actions{margin-top:25px}
 .phone-wrap{width:100%;overflow:visible}
 .phone{width:min(300px,82vw);padding:10px;border-radius:22px}
 .phone-screen{padding:19px 16px 18px;min-height:0;border-radius:14px}
 .p-photo{height:165px;border-radius:10px}
 .p-photo:after{bottom:11px;left:11px;font-size:.48rem}
 .p-id{padding:14px 1px 7px}
 .p-id h3{font-size:1.75rem}
 .p-id span{font-size:.52rem}
 .p-tags{gap:4px;margin-top:8px;flex-wrap:wrap}
 .p-tags i{padding:4px 7px;font-size:.51rem}
 .p-stats{margin-top:12px;padding:9px 0}
 .p-stats b{font-size:1.08rem}
 .p-stats span{font-size:.42rem}
 .p-blocks{gap:6px;margin-top:11px}
 .p-block{height:68px;border-radius:7px}
}