:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { min-width: 320px; }
.public-site { background:#f7f1e7; }
.public-site h1,.public-site h2,.public-site h3 { text-wrap:balance; }
.public-header { box-shadow:0 1px 0 rgba(87,66,40,.02); }
.brand-word { text-decoration:none; }
.cream-button { background:linear-gradient(135deg,#c99a5a,#b9823f); color:#fffdf8; box-shadow:0 12px 28px rgba(149,101,45,.18); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.cream-button:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(149,101,45,.24); filter:saturate(1.04); }
.cream-button-outline { border:1px solid #d6b987; background:rgba(255,253,248,.66); color:#9b6c32; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.cream-button-outline:hover { transform:translateY(-1px); background:#fffdf8; border-color:#c7975a; }
.cream-pill { border:1px solid #eadcc8; background:rgba(255,253,248,.76); color:#a3763f; box-shadow:0 8px 30px rgba(88,64,35,.05); }
.cream-eyebrow { font-size:.7rem; line-height:1rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#a8783f; }
.cream-hero { background:linear-gradient(145deg,#fffdf8 0%,#fbf7ef 47%,#f4eadc 100%); }
.cream-glow { position:absolute; border-radius:999px; filter:blur(80px); pointer-events:none; }
.cream-glow-one { width:420px; height:420px; right:4%; top:-16%; background:rgba(214,185,141,.24); }
.cream-glow-two { width:330px; height:330px; left:-9%; bottom:-20%; background:rgba(239,225,202,.55); }
.landscape-art { background:linear-gradient(to bottom,#fbf6ee 0%,#f4e7d6 56%,#dfc7a5 100%); border:1px solid rgba(220,200,173,.45); box-shadow:inset 0 0 80px rgba(255,255,255,.5); }
.landscape-art:after { content:""; position:absolute; inset:auto 0 0; height:35%; background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(218,193,157,.48)); }
.landscape-sun { position:absolute; width:180px; height:180px; right:15%; top:8%; border-radius:999px; background:rgba(255,250,240,.88); filter:blur(2px); box-shadow:0 0 70px rgba(255,246,225,.95); }
.mountain { position:absolute; transform-origin:center bottom; }
.mountain-back { left:4%; right:8%; bottom:31%; height:44%; background:linear-gradient(135deg,#dbc2a0,#c7a37a); clip-path:polygon(0 100%,18% 78%,32% 54%,44% 70%,62% 34%,74% 54%,88% 20%,100% 100%); opacity:.65; }
.mountain-front { left:0; right:0; bottom:24%; height:40%; background:linear-gradient(135deg,#c9a57d,#9c7653); clip-path:polygon(0 100%,11% 83%,26% 52%,35% 67%,47% 39%,61% 72%,72% 50%,83% 68%,100% 44%,100% 100%); opacity:.72; filter:saturate(.82); }
.shore-line { position:absolute; left:-5%; right:-5%; bottom:16%; height:28%; border-radius:50%; background:linear-gradient(180deg,rgba(255,252,246,.44),rgba(193,160,118,.35)); transform:rotate(-3deg); }
.device-stage { filter:drop-shadow(0 30px 30px rgba(73,49,25,.18)); }
.laptop-shell { position:relative; }
.laptop-screen { overflow:hidden; aspect-ratio:16/10; border:7px solid #292623; border-bottom-width:10px; border-radius:14px 14px 7px 7px; background:#f8f2e9; box-shadow:0 20px 50px rgba(34,26,18,.25); }
.laptop-base { width:108%; height:12px; margin-left:-4%; border-radius:2px 2px 16px 16px; background:linear-gradient(#d7d1c9,#b9b2a9); box-shadow:0 6px 12px rgba(37,28,18,.18); }
.mock-browser-top { display:flex; align-items:center; gap:4px; height:24px; padding:0 10px; background:#e9e2d8; }
.mock-browser-top span { width:5px; height:5px; border-radius:999px; background:#bcb2a5; }
.mock-website { height:calc(100% - 24px); background:#fbf7f0; padding:16px 20px; }
.mock-nav { display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.12em; color:#39322b; }
.mock-nav div { display:flex; gap:7px; }
.mock-nav span { display:block; width:24px; height:2px; background:#c6baaa; }
.mock-hero-inner { display:grid; grid-template-columns:1fr .72fr; gap:18px; align-items:center; height:82%; padding-top:18px; }
.mock-hero-inner small { font-size:6px; letter-spacing:.16em; color:#b3844a; font-weight:800; }
.mock-hero-inner h3 { margin:8px 0 10px; font-family:'DM Serif Display',serif; font-size:23px; line-height:1.02; color:#28221d; }
.mock-hero-inner p { height:4px; border-radius:99px; background:#d8cfc2; width:90%; }
.mock-hero-inner p.short { width:68%; margin-top:5px; }
.mock-hero-inner button { width:65px; height:18px; border-radius:3px; background:#2a2723; margin-top:15px; }
.mock-vase { position:relative; min-height:130px; border-radius:50% 50% 18px 18px; background:linear-gradient(145deg,#e8dcc9,#cbb493); }
.mock-vase:before,.mock-vase:after { content:""; position:absolute; width:2px; height:75px; bottom:88%; left:49%; background:#7f6d58; transform-origin:bottom; }
.mock-vase:before { transform:rotate(-20deg); }
.mock-vase:after { transform:rotate(20deg); }
.phone-shell { width:96px; height:190px; padding:5px; border-radius:19px; background:#22201d; box-shadow:0 18px 30px rgba(37,27,18,.28); }
.phone-notch { position:absolute; left:50%; top:8px; width:34px; height:5px; border-radius:99px; background:#1a1917; transform:translateX(-50%); z-index:2; }
.phone-content { height:100%; overflow:hidden; border-radius:14px; background:#fbf7f0; padding:18px 10px 10px; }
.feature-strip-item { min-height:118px; }
.cream-plan-card { position:relative; border:1px solid #e7dac7; border-radius:24px; background:rgba(255,253,248,.88); padding:30px; box-shadow:0 14px 45px rgba(78,57,31,.06); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.cream-plan-card:hover { transform:translateY(-3px); border-color:#d9bf98; box-shadow:0 22px 55px rgba(78,57,31,.10); }
.cream-plan-featured { border-color:#d4b27d; background:linear-gradient(180deg,#fffaf1,#fffdf8); box-shadow:0 22px 65px rgba(129,88,37,.13); }
.cream-plan-badge { position:absolute; left:50%; top:0; transform:translate(-50%,-50%); border-radius:999px; background:#c39758; padding:6px 13px; color:#fff; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.website-showcase { border:1px solid #eadcc8; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.88),transparent 25%),linear-gradient(145deg,#eee0cc,#d6b990); box-shadow:inset 0 0 90px rgba(255,255,255,.28); }
.website-laptop { filter:drop-shadow(0 28px 28px rgba(57,40,23,.22)); }
.website-laptop-screen { overflow:hidden; aspect-ratio:16/10; border:7px solid #292623; border-radius:12px 12px 6px 6px; background:#fff; }
.website-laptop-base { width:108%; height:10px; margin-left:-4%; border-radius:2px 2px 14px 14px; background:linear-gradient(#d8d2cb,#b9b1a8); }
.showcase-page { background:#fbf7f0; color:#2d2822; }
.showcase-nav { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; font-size:8px; letter-spacing:.12em; }
.showcase-nav div { display:flex; gap:7px; }
.showcase-nav i { width:22px; height:2px; background:#d2c6b5; }
.showcase-body { padding:24px 28px; }
.showcase-body small { font-size:6px; color:#b1844c; letter-spacing:.18em; font-weight:800; }
.showcase-body h3 { margin-top:9px; font-family:'DM Serif Display',serif; font-size:26px; line-height:1.04; }
.showcase-body p { height:4px; width:80%; margin-top:16px; border-radius:99px; background:#d8cfc2; }
.showcase-body p.short { width:58%; margin-top:5px; }
.showcase-body button { width:78px; height:21px; margin-top:19px; border-radius:4px; background:#292623; }
.tablet-shell { height:245px; border:6px solid #292623; border-radius:17px; background:#292623; box-shadow:0 18px 35px rgba(55,37,21,.24); }
.mini-phone { width:95px; height:180px; padding:18px 10px 10px; border:5px solid #292623; border-radius:18px; background:#fbf7f0; box-shadow:0 18px 35px rgba(55,37,21,.22); }
.why-card { border:1px solid transparent; border-radius:20px; padding:26px 20px; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.why-card:hover { transform:translateY(-2px); background:#fbf7f0; border-color:#e8dccb; }
.cream-cta { border:1px solid #e1ceb0; background:linear-gradient(180deg,#f8eddd,#e4c8a1); box-shadow:0 18px 55px rgba(92,63,31,.08); }
.cream-cta:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.6),transparent 33%); }
.cta-mountain { position:absolute; bottom:-2px; width:42%; height:66%; background:rgba(150,112,72,.36); }
.cta-mountain-left { left:-7%; clip-path:polygon(0 100%,23% 69%,46% 83%,72% 37%,100% 100%); }
.cta-mountain-right { right:-5%; clip-path:polygon(0 100%,28% 48%,49% 74%,72% 24%,100% 100%); }
.public-site .form-label { display:block; margin-bottom:.5rem; font-size:.76rem; font-weight:800; color:#5f5449; }
.public-site .form-input { width:100%; border:1px solid #e2d3bf; border-radius:.85rem; padding:.9rem 1rem; font-size:.9rem; color:#2b241e; background:#fffdf9; }
.public-site .form-input::placeholder { color:#aa9d8e; }
.public-site .billing-option { position:relative; display:flex; cursor:pointer; }
.public-site .billing-option input { position:absolute; opacity:0; pointer-events:none; }
.public-site .billing-option span { width:100%; border:1px solid #e2d3bf; border-radius:.85rem; background:#fffdf9; padding:.8rem 1rem; text-align:center; font-size:.8rem; font-weight:800; color:#75685c; transition:.2s ease; }
.public-site .billing-option input:checked + span { border-color:#c79b5b; background:#f7ead7; color:#8a5e2b; box-shadow:0 0 0 3px rgba(199,155,91,.10); }
.public-site input:focus,.public-site textarea:focus,.public-site select:focus { border-color:#c79b5b!important; box-shadow:0 0 0 3px rgba(199,155,91,.12); outline:none; }
/* Dashboard/admin styles retained from V3 */
.hero-v3 { background:linear-gradient(135deg,#06131f 0%,#081d2c 50%,#071827 100%); }
.hero-grid { background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%); }
.hero-orb { position:absolute; border-radius:999px; filter:blur(90px); pointer-events:none; }
.hero-orb-one { width:460px; height:460px; background:rgba(11,182,238,.16); right:5%; top:2%; }
.hero-orb-two { width:360px; height:360px; background:rgba(168,255,120,.07); left:-8%; bottom:-10%; }
.text-gradient { background:linear-gradient(95deg,#fff 10%,#7de0ff 58%,#a8ff78 120%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow { font-size:.72rem; line-height:1rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#08759f; }
.plan-card { position:relative; overflow:hidden; border:1px solid #e2e8f0; border-radius:28px; background:#fff; padding:2rem; color:#071827; box-shadow:0 12px 40px rgba(7,24,39,.04); }
.plan-card-featured { border-color:#071827; background:#071827; color:#fff; box-shadow:0 28px 80px rgba(7,24,39,.22); transform:translateY(-4px); }
.service-tile { border:1px solid #e2e8f0; border-radius:24px; padding:1.75rem; background:#fff; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.service-tile:hover { transform:translateY(-3px); border-color:#b5edff; box-shadow:0 22px 60px rgba(7,24,39,.08); }
.site-mockup { overflow:hidden; border:1px solid #e2e8f0; border-radius:28px; background:#fff; color:#071827; }
.site-mockup-top { display:flex; align-items:center; gap:.4rem; border-bottom:1px solid #f1f5f9; padding:1rem 1.2rem; }
.site-mockup-top>span { width:.58rem; height:.58rem; border-radius:999px; background:#cbd5e1; }
.cta-v3 { background:radial-gradient(circle at 80% 20%,rgba(11,182,238,.2),transparent 30%),linear-gradient(135deg,#071827 0%,#0a2436 100%); box-shadow:0 30px 90px rgba(7,24,39,.18); }
.form-label { display:block; margin-bottom:.5rem; font-size:.78rem; font-weight:800; color:#334155; }
.form-input { width:100%; border:1px solid #e2e8f0; border-radius:.9rem; padding:.9rem 1rem; font-size:.9rem; color:#0f172a; background:#fff; }
.billing-option { position:relative; display:flex; cursor:pointer; }
.billing-option input { position:absolute; opacity:0; pointer-events:none; }
.billing-option span { width:100%; border:1px solid #e2e8f0; border-radius:.85rem; background:#fff; padding:.8rem 1rem; text-align:center; font-size:.8rem; font-weight:800; color:#64748b; transition:.2s ease; }
.billing-option input:checked + span { border-color:#0bb6ee; background:#eefbff; color:#08759f; box-shadow:0 0 0 3px rgba(11,182,238,.08); }
.dashboard-scroll::-webkit-scrollbar { width:8px; height:8px; }
.dashboard-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:99px; }
.progress-stripe { background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size:1rem 1rem; }
input,textarea,select { outline:none; }
@media (max-width:1023px){ .plan-card-featured{transform:none;} .landscape-art{top:0;} }
@media (max-width:640px){ .cream-hero .landscape-art{opacity:.62;} .device-stage{bottom:18px;} .laptop-screen{border-width:5px;border-bottom-width:8px;} .mock-hero-inner h3{font-size:17px;} }
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important;transition:none!important;animation:none!important;} }