:root { --bg:#111011; --ink:#f1e8dc; --muted:#a49a91; --accent:#b33445; --line:#3b292d; --card:#1d1a1c; --cream:#e9ddce; }
* { box-sizing:border-box; }
body { position:relative; margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 12% 5%,#2d1a20 0,transparent 24%),radial-gradient(circle at 92% 34%,#21151a 0,transparent 28%),var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body:before { content:''; position:fixed; inset:-18px; z-index:0; pointer-events:none; background-image:linear-gradient(120deg,rgba(8,7,8,.9),rgba(57,17,27,.68)),url('/assets/tattoo-bg.jpg'); background-size:cover; background-position:center; filter:grayscale(.85) contrast(.82) brightness(.62) blur(4px); opacity:.34; transform:scale(1.04); }
body:after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at center,transparent 12%,rgba(8,7,8,.5) 100%); }
button,input { font:inherit; } button { border:0; cursor:pointer; color:inherit; }
.app-shell { position:relative; z-index:1; max-width:760px; margin:0 auto; min-height:100vh; padding-bottom:36px; }
.hero { position:relative; overflow:hidden; margin:0 0 10px; padding:54px 22px 24px; min-height:310px; background:linear-gradient(140deg,#090909,#21151a 62%,#521e29); color:var(--cream); border-radius:0 0 28px 28px; border-bottom:1px solid #6b2c36; }
.hero:after { content:'✦  ✧  ✦'; position:absolute; right:18px; bottom:22px; color:#ad3a49; letter-spacing:9px; font-size:18px; transform:rotate(-8deg); }
.hero-orb { position:absolute; width:260px; height:260px; right:-80px; top:-90px; border-radius:50%; border:1px solid rgba(179,52,69,.38); background:radial-gradient(circle at 35% 35%,#b33445 0 2%,transparent 3% 28%,rgba(179,52,69,.12) 29% 30%,transparent 31%); opacity:.85; }
.brand-mark { position:relative; width:58px; height:58px; display:grid; place-items:center; border:1px solid #b33445; border-radius:50%; font-family:Georgia,serif; font-size:29px; margin-bottom:28px; color:#f6dfcb; box-shadow:0 0 0 5px rgba(179,52,69,.12),inset 0 0 16px rgba(179,52,69,.2); }
.eyebrow { margin:0 0 8px; letter-spacing:.16em; font-size:10px; font-weight:700; opacity:.76; } h1,h2,p { margin-top:0; }
h1 { position:relative; margin-bottom:8px; font:500 36px/1.03 Georgia,serif; letter-spacing:.02em; text-transform:uppercase; } h2 { margin-bottom:6px; font:500 26px/1.1 Georgia,serif; letter-spacing:-.03em; }
.hero-copy { position:relative; max-width:260px; color:#d9c8ba; font-size:14px; }
.primary-button { background:var(--accent); color:#fff6ee; border-radius:8px; padding:15px 18px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 10px 20px rgba(0,0,0,.28); transition:transform .18s,opacity .18s; }
.primary-button:hover { transform:translateY(-1px); opacity:.94; } .primary-button span { float:right; font-size:19px; line-height:15px; } .wide { width:100%; margin-top:18px; }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:8px 16px 4px; position:sticky; top:0; z-index:4; background:rgba(17,16,17,.9); backdrop-filter:blur(12px); border-bottom:1px solid #2e2528; }
.tab { padding:11px 4px; border-radius:7px; background:transparent; color:var(--muted); font-size:12px; font-weight:700; } .tab.active { background:#2a2023; color:var(--cream); box-shadow:inset 0 -2px var(--accent); }
.view { display:none; padding:28px 18px; animation:rise .22s ease-out; } .view.active { display:block; } @keyframes rise { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.section-heading { margin-bottom:22px; } .muted,small { color:var(--muted); } .service-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.feature-card { min-height:154px; text-align:left; padding:18px; border-radius:8px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; box-shadow:0 6px 18px rgba(0,0,0,.22); border:1px solid #3d292e; }
.feature-card strong { font-size:17px; margin:8px 0 4px; } .feature-card small { font-size:11px; line-height:1.35; }
.feature-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(179,52,69,.2); border:1px solid #93404c; color:#efc8bb; font-size:20px; }
.blush { background:linear-gradient(145deg,#28181d,#431e27); }.sand { background:linear-gradient(145deg,#24201b,#493326); }.lavender { background:linear-gradient(145deg,#1f1b26,#342440); }.mint { background:linear-gradient(145deg,#17211e,#233b34); }
.stack-list { display:grid; gap:10px; } .service-item,.info-card,.booking-card { background:linear-gradient(145deg,#211d1f,#171617); border:1px solid var(--line); border-radius:8px; padding:17px; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.service-item { display:flex; justify-content:space-between; gap:12px; align-items:center; text-align:left; } .service-item strong { display:block; margin-bottom:5px; }.service-item small { display:block; line-height:1.35; }.price { font-weight:800; white-space:nowrap; color:#d56a76; }
.date-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .date-button,.slot-button { background:#1c191b; border:1px solid var(--line); border-radius:7px; padding:12px 6px; text-align:center; }
.date-button strong { display:block; font-size:15px; }.date-button small { font-size:10px; }.date-button.available { border-color:#82404a; background:#251a1d; }.date-button.selected,.slot-button.selected { background:var(--accent); border-color:var(--accent); color:#fff; }.date-button.selected small { color:#fbeeed; }
.slot-panel,.booking-form { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }.panel-title { font-weight:800; margin-bottom:12px; }.slot-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.slot-button { font-weight:700; }.hidden { display:none !important; }
.booking-form label { display:block; margin:12px 0; font-size:12px; font-weight:700; }.booking-form input { width:100%; margin-top:7px; padding:14px; border:1px solid var(--line); border-radius:7px; background:#141314; color:var(--ink); outline:none; }.booking-form input:focus { border-color:var(--accent); }
.category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.category-button { min-height:110px; padding:16px; text-align:left; border-radius:8px; background:linear-gradient(145deg,#402026,#8b3040); color:#fff; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid #a03c4c; }.category-button small { color:#f4d8cf; }
.photo-viewer { margin-top:20px; padding:12px; border-radius:8px; background:#1b181a; border:1px solid var(--line); }.photo-viewer img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:5px; }.photo-nav { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }.photo-nav button { background:#332126; color:var(--cream); border-radius:6px; padding:9px 14px; }
.booking-card { min-height:145px; }.booking-card h3 { font:500 22px Georgia,serif; margin:0 0 12px; }.booking-card p { color:var(--muted); line-height:1.5; }.danger-button { width:100%; padding:13px; border-radius:7px; background:#52242b; color:#f0c3bc; font-weight:800; }
.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:12px 17px; color:#fff; background:#2f2927; border-radius:7px; font-size:13px; transition:.25s; z-index:10; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:700px) { .hero { margin:18px 18px 10px; border-radius:30px; min-height:340px; padding:62px 34px 30px; } .tabs { margin:0 18px; border-radius:8px; } .view { padding:34px; } }