/* Msingi Web Studio: plush black, amber, cream and pink, themed from the owner's ValueMint NFT. Warm and playful, distinct from SpinTech's cold neon. */
:root{color-scheme:light;--bg:#FBF7EC;--card:#FFFDF8;--ink:#17171A;--muted:#55535B;--accent-text:#8A5A00;--amber:#E5A324;--pink:#F4B6B6;--line:#E8DFC8;--focus:#17171A;--btn-radius:999px}
body{background:var(--bg);color:var(--ink);font-family:"Figtree",system-ui,sans-serif;font-size:1.05rem}
h1,h2,h3,.brand-name{font-family:"Bricolage Grotesque","Figtree",sans-serif;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{color:var(--muted)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,247,236,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:38px;height:38px}
.brand-name{font-size:1.2rem;font-weight:800}
@media (min-width:821px){#site-nav{display:flex;align-items:center;gap:1.75rem}}
#site-nav a{text-decoration:none;color:var(--muted)}
#site-nav a:hover{color:var(--accent-text)}
#site-nav a.back{color:var(--ink);font-weight:600;border-bottom:2px solid var(--amber)}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:var(--accent-text)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}
.hero{padding:clamp(3.5rem,9vw,6.5rem) 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.6rem);font-weight:800;margin-bottom:1.25rem;max-width:14em}
.lead{font-size:1.2rem;max-width:34rem;margin-bottom:2rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem}
.browser{background:var(--card);border:2px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--amber);overflow:hidden}
.browser .top{display:flex;gap:6px;padding:.7rem 1rem;border-bottom:2px solid var(--ink);background:#F3F3F3}
.browser .top i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.browser .body{padding:1.5rem;display:grid;gap:.8rem}
.browser .body i{display:block;height:14px;border-radius:7px;background:var(--line)}
.browser .body i:first-child{height:70px;background:var(--amber)}
.browser .body i:nth-child(3){width:70%}.browser .body i:nth-child(5){width:50%}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}}
section{padding:clamp(3.5rem,8vw,5.5rem) 0}
.head{max-width:40rem;margin-bottom:2.5rem}.head h2{margin-bottom:.75rem}
.white{background:var(--card)}
section+section{border-top:1px solid var(--line)}
section.contact{border-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}
.card,.plan,.work{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:1.75rem}
.card{transition:transform .2s,box-shadow .2s}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--amber)}
.icon{display:inline-flex;color:var(--accent-text);margin-bottom:1rem}
.card h3{margin-bottom:.5rem}
.optional-note{margin-top:1.5rem;font-size:.95rem}
.work{display:block;text-decoration:none;color:inherit;padding:1rem 1rem 1.5rem}
a.work{transition:transform .2s}a.work:hover{transform:translateY(-4px)}
.work h3{margin:1rem .5rem .25rem}.work p{margin:0 .5rem}
.mock{height:170px;border-radius:10px;border:2px solid var(--ink);display:grid;gap:8px;padding:14px;align-content:start}
.mock i{display:block;border-radius:6px;background:rgba(18,38,58,.14);height:12px}
.mock i:first-child{height:60px;background:var(--ink)}
.mock-0{background:#FCE3B0}.mock-1{background:#F9D3D3}.mock-2{background:#E3E5EA}
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.plan .from{font-size:.9rem;margin-top:1rem}
.plan .price{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:800;color:var(--ink);margin-bottom:.5rem}
.plan ul{margin-top:1rem;display:grid;gap:.5rem}
.plan li{padding-left:1.5rem;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.5rem;width:10px;height:6px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);transform:rotate(-45deg)}
.contact{background:var(--ink);color:#fff;text-align:center}
.contact h2{margin-bottom:.75rem}.contact p{color:#C7D3DD;max-width:34rem;margin:0 auto 1.75rem}
.btn-wa{background:var(--amber);color:var(--ink)}.btn-wa:hover{background:#fff}
.site-footer{padding:2.5rem 0;background:#fff;border-top:1px solid var(--line);font-size:.95rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;align-items:center}
.foot a{color:var(--accent-text);font-weight:600}
.hero h1 mark{background:linear-gradient(transparent 58%,var(--amber) 58% 92%,transparent 92%);color:inherit;padding:0 .1em}
.hatch{height:14px;background:repeating-linear-gradient(135deg,var(--ink) 0 6px,transparent 6px 14px)}
.work .visit{color:var(--accent-text);font-weight:600}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F3F3F3}
.work .shot{border:2px solid var(--ink);border-radius:12px}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot .cover{position:absolute;inset:0}
.qr{margin:0;justify-self:center;width:min(360px,100%);background:#fff;border:2px solid var(--ink);border-radius:24px;padding:1.25rem;box-shadow:10px 10px 0 var(--amber);text-align:center}
.qr img{width:100%;height:auto}
.qr figcaption{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.15rem;margin-top:.75rem}
@media (max-width:820px){#site-nav a.back{align-self:flex-start;margin-top:.5rem}}