:root{
  --bg:#0A0F1E; --bg-2:#0E1527; --bg-3:#141C34;
  --gold:#C9A84C; --gold-soft:#E8C977; --gold-deep:#8E7430;
  --ivory:#F4EFE6; --ivory-dim:#C8C3BA; --muted:#8A8578;
  --line:rgba(201,168,76,0.18); --line-soft:rgba(244,239,230,0.08);
  --f-serif:'Playfair Display',Georgia,serif;
  --f-sans:'DM Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ivory);
  font-family:var(--f-sans); line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:var(--bg)}

body::before{
  content:""; position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 60%);
  pointer-events:none; z-index:0;
}
body{background:var(--bg)}

/* Theme-specific hero overlays */
[data-theme="mint"] body::before{background:radial-gradient(1000px 600px at 80% 0%, rgba(111,181,168,0.12), transparent 60%),radial-gradient(800px 500px at 0% 50%, rgba(60,120,140,0.08), transparent 60%)}
[data-theme="plum"] body::before{background:radial-gradient(1000px 600px at 85% -5%, rgba(140,80,180,0.12), transparent 60%),radial-gradient(900px 500px at -5% 50%, rgba(201,168,76,0.08), transparent 60%)}
[data-theme="pearl"] body::before{background:radial-gradient(1000px 600px at 80% 0%, rgba(228,212,164,0.1), transparent 60%),radial-gradient(800px 500px at 10% 60%, rgba(120,90,180,0.1), transparent 60%)}
[data-theme="sage"] body::before{background:radial-gradient(1100px 600px at 75% 10%, rgba(168,199,155,0.1), transparent 60%),radial-gradient(700px 500px at 10% 70%, rgba(90,140,120,0.08), transparent 60%)}
body::after{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(244,239,230,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,239,230,0.02) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%, black, transparent 70%);
  pointer-events:none; z-index:0;
}

/* NAV */
.pnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 40px; display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,15,30,0.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.pnav a.logo{
  font-family:var(--f-serif); font-size:20px; font-weight:600;
  display:inline-flex; gap:10px; align-items:center;
}
.pnav a.logo em{color:var(--gold); font-style:normal}
.pnav .back{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--ivory-dim);
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px;
  border:1px solid var(--line-soft); border-radius:999px; transition:all .3s;
}
.pnav .back:hover{color:var(--gold); border-color:var(--gold)}

/* HERO */
.p-hero{
  position:relative; min-height:90vh; padding:140px 40px 80px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center;
  max-width:1320px; margin:0 auto; z-index:1;
}
#p-hero-canvas,
.p-hero-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.9;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.p-hero-inner{position:relative; z-index:2}
.p-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--gold);
  padding:7px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(10,15,30,0.4); margin-bottom:24px;
}
.p-hero h1{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(40px,5.5vw,76px); line-height:1.02;
  letter-spacing:-0.01em; margin-bottom:20px;
}
.p-hero h1 em{
  font-style:italic; font-weight:400;
  background:linear-gradient(100deg, var(--gold-deep), var(--gold), var(--gold-soft), var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shim 4s ease-in-out infinite;
}
@keyframes shim{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.p-hero-sub{color:var(--ivory-dim); font-size:17px; max-width:52ch; line-height:1.65; margin-bottom:32px}
.p-meta{display:flex; flex-wrap:wrap; gap:28px; margin-bottom:36px}
.p-meta-item{font-family:var(--f-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase}
.p-meta-item .k{color:var(--muted); display:block; margin-bottom:4px}
.p-meta-item .v{color:var(--ivory)}
.p-ctas{display:inline-flex; gap:12px; flex-wrap:wrap}
.btn{
  font-family:var(--f-sans); font-size:14px; font-weight:500;
  padding:15px 26px; border-radius:999px;
  display:inline-flex; align-items:center; gap:10px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.btn-primary{background:var(--gold); color:var(--bg); box-shadow:0 10px 30px -10px rgba(201,168,76,0.5)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(201,168,76,0.7)}
.btn-ghost{background:transparent; color:var(--ivory); border:1px solid rgba(244,239,230,0.3)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}

/* SECTION */
.section{padding:100px 40px; position:relative; z-index:1}
.wrap{max-width:1280px; margin:0 auto}
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.3em;
  text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:12px; margin-bottom:20px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold)}
.section h2{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(32px,4vw,52px); line-height:1.08;
  letter-spacing:-0.01em; max-width:16ch; margin-bottom:40px;
}
.section h2 em{font-style:italic; color:var(--gold); font-weight:400}

/* RESULTS */
.results{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2px;
  background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:18px; overflow:hidden;
}
.result{padding:36px 28px; background:var(--bg)}
.result .num{
  font-family:var(--f-serif); font-size:clamp(36px,3.5vw,56px);
  font-weight:500; color:var(--gold); line-height:1; margin-bottom:10px;
}
.result .lbl{font-family:var(--f-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory-dim); margin-bottom:10px}
.result p{font-size:13px; color:var(--ivory-dim); line-height:1.5}

/* FEATURES */
.features{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.feature{
  padding:32px 28px; border:1px solid var(--line-soft); border-radius:16px;
  background:linear-gradient(180deg, rgba(20,28,52,0.5), transparent);
  transition:all .4s;
}
.feature:hover{transform:translateY(-4px); border-color:rgba(201,168,76,0.3)}
.feature i{color:var(--gold); font-size:20px; margin-bottom:18px; display:block}
.feature h4{font-family:var(--f-serif); font-size:20px; font-weight:500; margin-bottom:8px}
.feature p{color:var(--ivory-dim); font-size:14px; line-height:1.55}

/* GALLERY */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gshot{
  aspect-ratio:4/5; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-soft); position:relative;
  transition:transform .4s;
}
.gshot:hover{transform:translateY(-4px)}
.gshot .s{position:absolute; inset:0}
.gshot .s::after{
  content:""; position:absolute; inset:0;
  background:var(--bg-overlay, transparent);
  pointer-events:none;
}
.gshot-label{
  position:absolute; bottom:12px; left:12px; right:12px; z-index:2;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--ivory-dim);
  padding:8px 12px; background:rgba(10,15,30,0.7); backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:8px;
}

/* DEVICE MOCKS (uses inner HTML for composition) */
.device-phone{
  width:100%; aspect-ratio:9/19; max-width:260px;
  border-radius:28px; padding:6px; margin:0 auto;
  background:linear-gradient(160deg, #1a2340, #0a0f1e);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(201,168,76,0.15);
  position:relative;
}
.device-phone::before{
  content:""; position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:70px; height:16px; background:#0a0f1e; border-radius:999px; z-index:2;
}
.phone-screen{
  width:100%; height:100%; border-radius:22px; overflow:hidden;
  background:var(--bg-2); position:relative;
}

/* REVIEW */
.review-grid{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:start;
}
.review{
  padding:40px 36px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(20,28,52,0.7), rgba(14,21,39,0.4));
  backdrop-filter:blur(10px); border-radius:18px;
}
.review .stars{color:var(--gold); font-size:14px; letter-spacing:2px; margin-bottom:20px}
.review blockquote{
  font-family:var(--f-serif); font-style:italic; font-size:22px;
  line-height:1.5; margin-bottom:28px;
}
.review-author{display:flex; gap:14px; align-items:center}
.review-avatar{
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), #8E7430);
  display:grid; place-items:center; font-family:var(--f-serif);
  color:var(--bg); font-weight:600; font-size:20px;
}
.review-name{font-size:15px; font-weight:500}
.review-biz{font-family:var(--f-mono); font-size:11px; color:var(--ivory-dim); letter-spacing:0.12em; margin-top:3px}

.side-stats{display:flex; flex-direction:column; gap:16px}
.side-stat{
  padding:24px 26px; border:1px solid var(--line-soft); border-radius:14px;
  background:rgba(20,28,52,0.4);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.side-stat .k{font-family:var(--f-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ivory-dim)}
.side-stat .v{font-family:var(--f-serif); font-size:28px; color:var(--gold)}

/* PROCESS */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{padding:28px; border:1px solid var(--line-soft); border-radius:14px; background:rgba(20,28,52,0.35)}
.step-num{font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; color:var(--gold); margin-bottom:14px}
.step h4{font-family:var(--f-serif); font-size:20px; font-weight:500; margin-bottom:8px}
.step p{color:var(--ivory-dim); font-size:14px; line-height:1.55}

/* NEXT */
.next-case{
  padding:64px 48px; border-radius:22px; margin:40px auto;
  border:1px solid var(--line); background:linear-gradient(160deg, var(--bg-2), var(--bg));
  display:flex; justify-content:space-between; align-items:center; gap:40px;
  max-width:1280px;
}
.next-case h3{font-family:var(--f-serif); font-size:clamp(26px,3vw,40px); font-weight:500; line-height:1.15}
.next-case h3 em{font-style:italic; color:var(--gold); font-weight:400}
.next-case p{color:var(--ivory-dim); font-size:14px; margin-top:8px}

/* CTA FOOTER */
.p-cta{
  padding:100px 40px 80px; text-align:center;
  border-top:1px solid var(--line-soft);
}
.p-cta h2{
  font-family:var(--f-serif); font-weight:500;
  font-size:clamp(36px,4.5vw,60px); line-height:1.05; margin-bottom:20px;
}
.p-cta h2 em{font-style:italic; color:var(--gold); font-weight:400}
.p-cta p{color:var(--ivory-dim); font-size:17px; max-width:50ch; margin:0 auto 36px}
.p-foot{
  max-width:1280px; margin:80px auto 0;
  padding:28px 40px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--muted);
}

/* WhatsApp Float */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:white; display:grid; place-items:center;
  font-size:22px; box-shadow:0 12px 32px -8px rgba(37,211,102,0.5);
  animation:waPulse 2.4s ease-in-out infinite;
}
@keyframes waPulse{
  0%,100%{box-shadow:0 12px 32px -8px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.5)}
  50%{box-shadow:0 12px 32px -8px rgba(37,211,102,0.5), 0 0 0 14px rgba(37,211,102,0)}
}

/* Reveal */
.reveal{opacity:0; transform:translateY(32px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; transform:none}
/* Fallback: if JS fails or IO hasn't fired within 1.2s, show everything */
.ready .reveal{opacity:1; transform:none}

/* ============ PER-PAGE THEMES ============ */
/* Theme: Ember (restaurant warmth) */
[data-theme="ember"]{--gold:#D9823C; --gold-soft:#F0A96B; --gold-deep:#8A4518; --bg:#120806; --bg-2:#1F0F08}

/* Theme: Saffron (biryani/festive) */
[data-theme="saffron"]{--gold:#E8A13E; --gold-soft:#F5C76F; --gold-deep:#A06218; --bg:#1A0E04; --bg-2:#261605}

/* Theme: Mint (clinic calm) */
[data-theme="mint"]{--gold:#6FB5A8; --gold-soft:#9DD4C9; --gold-deep:#3D7D72; --bg:#0A1816; --bg-2:#0E2420}

/* Theme: Plum (boutique luxe) */
[data-theme="plum"]{--gold:#C9A84C; --gold-soft:#E8C977; --gold-deep:#8E7430; --bg:#140E1E; --bg-2:#1F1530}

/* Theme: Cocoa (sweets heritage) */
[data-theme="cocoa"]{--gold:#E8B06B; --gold-soft:#F5CE95; --gold-deep:#A0712E; --bg:#14090A; --bg-2:#221011}

/* Theme: Sand (cafe calm) */
[data-theme="sand"]{--gold:#D4A373; --gold-soft:#E8C9A3; --gold-deep:#8A6943; --bg:#1A1108; --bg-2:#26190C}

/* Theme: Pearl (jewel luxe) */
[data-theme="pearl"]{--gold:#E4D4A4; --gold-soft:#F5E9C8; --gold-deep:#9E8C58; --bg:#0E0B1C; --bg-2:#181428}

/* Theme: Sage (yoga) */
[data-theme="sage"]{--gold:#A8C79B; --gold-soft:#C8DEBD; --gold-deep:#5E8453; --bg:#0A1410; --bg-2:#0F1D18}

/* Layout variants */
[data-layout="split"] .p-hero{grid-template-columns:1fr 1.2fr}
[data-layout="center"] .p-hero{grid-template-columns:1fr; text-align:center; max-width:1000px}
[data-layout="center"] .p-hero .p-visual{justify-self:center; margin-top:40px}
[data-layout="center"] .p-meta{justify-content:center}
[data-layout="center"] .p-ctas{justify-content:center}
[data-layout="editorial"] .p-hero h1{font-size:clamp(48px,7vw,96px); letter-spacing:-0.02em}
[data-layout="editorial"] .results{grid-template-columns:1fr 1fr}
[data-layout="wide"] .features{grid-template-columns:repeat(2,1fr); gap:32px}
[data-layout="wide"] .feature{padding:44px 36px}
[data-layout="wide"] .feature h4{font-size:26px}
[data-layout="gallery-first"] .gallery{grid-template-columns:2fr 1fr 1fr}
[data-layout="gallery-first"] .gshot:first-child{grid-row:span 2}

/* ============ CATEGORY TEMPLATE SHOWCASE ============ */

/* Hero imagery block — rich SVG scenes */
.hero-art{
  position:relative; width:100%; height:100%;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(160deg, var(--bg-2), var(--bg));
  border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(201,168,76,0.12);
}
.hero-art svg{position:absolute; inset:0; width:100%; height:100%}
.hero-art .float-chip{
  position:absolute; padding:10px 14px;
  background:rgba(10,15,30,0.85); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:12px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:8px;
  animation:floatY 4s ease-in-out infinite;
}
.hero-art .float-chip i{color:var(--gold)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Template preview: long browser mockup */
.site-preview{
  position:relative; width:100%; border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-2), var(--bg));
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.7);
}
.site-chrome{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft); background:rgba(10,15,30,0.6);
}
.site-chrome .dot{width:10px; height:10px; border-radius:50%; background:rgba(244,239,230,0.2)}
.site-chrome .dot:nth-child(1){background:#E06C65}
.site-chrome .dot:nth-child(2){background:#E2B756}
.site-chrome .dot:nth-child(3){background:#64C267}
.site-chrome .url{
  margin-left:14px; padding:6px 14px; border-radius:8px;
  background:rgba(244,239,230,0.06); font-family:var(--f-mono);
  font-size:11px; color:var(--ivory-dim); flex:1; max-width:420px;
}
.site-body{position:relative; background:var(--bg)}

/* Component demo strip — shows real UI blocks */
.demo-row{
  display:grid; gap:20px; margin-top:24px;
}
.demo-row.cols-2{grid-template-columns:1fr 1fr}
.demo-row.cols-3{grid-template-columns:repeat(3,1fr)}
.demo-row.cols-4{grid-template-columns:repeat(4,1fr)}
.demo-card{
  border:1px solid var(--line-soft); border-radius:16px;
  background:linear-gradient(180deg, rgba(20,28,52,0.5), rgba(10,15,30,0.3));
  overflow:hidden; position:relative;
}
.demo-head{
  padding:14px 18px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px;
}
.demo-body{padding:22px 20px}

/* UI primitives for component demos */
.ui-title{font-family:var(--f-serif); font-size:22px; font-weight:500; margin-bottom:14px}
.ui-sub{color:var(--ivory-dim); font-size:13px; margin-bottom:16px; line-height:1.5}
.ui-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold);
}
.ui-chip.solid{background:var(--gold); color:var(--bg); border-color:var(--gold)}
.ui-chip.muted{color:var(--ivory-dim); border-color:var(--line-soft)}
.ui-list{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.ui-item{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--line-soft); border-radius:12px;
  background:rgba(20,28,52,0.3); transition:.3s;
}
.ui-item:hover{border-color:var(--line); background:rgba(20,28,52,0.55)}
.ui-item .t{font-size:14px; font-weight:500}
.ui-item .s{font-size:12px; color:var(--ivory-dim); margin-top:2px}
.ui-item .r{font-family:var(--f-mono); font-size:12px; color:var(--gold)}
.ui-price{font-family:var(--f-serif); font-size:24px; color:var(--gold)}

.ui-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ui-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.ui-tile{
  aspect-ratio:1/1; border-radius:12px; border:1px solid var(--line-soft);
  background:rgba(20,28,52,0.4); display:flex; flex-direction:column;
  justify-content:flex-end; padding:12px; position:relative; overflow:hidden;
}
.ui-tile .n{font-size:12px; font-weight:500; z-index:1}
.ui-tile .p{font-family:var(--f-mono); font-size:10px; color:var(--gold); z-index:1}
.ui-tile svg{position:absolute; inset:0; width:100%; height:100%}

/* Calendar grid */
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-day{
  aspect-ratio:1/1; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:11px; color:var(--ivory-dim);
  border-radius:6px; background:rgba(20,28,52,0.3); transition:.3s;
}
.cal-day.active{background:var(--gold); color:var(--bg); font-weight:600}
.cal-day.dot{position:relative}
.cal-day.dot::after{content:""; width:3px; height:3px; background:var(--gold); border-radius:50%; position:absolute; bottom:4px}

/* Stat pill */
.stat-pill{
  padding:12px 16px; border:1px solid var(--line-soft); border-radius:10px;
  background:rgba(20,28,52,0.3); display:flex; justify-content:space-between; align-items:center;
}
.stat-pill .k{font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ivory-dim)}
.stat-pill .v{font-family:var(--f-serif); font-size:18px; color:var(--gold)}

/* Swatch row */
.swatches{display:flex; gap:8px; margin-top:14px}
.swatch{
  width:28px; height:28px; border-radius:50%;
  border:2px solid rgba(244,239,230,0.2); cursor:pointer;
  transition:.3s;
}
.swatch:hover{transform:scale(1.12); border-color:var(--gold)}

/* Photo cards — richer than solid */
.photo-card{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-soft); aspect-ratio:4/5;
}
.photo-card svg{position:absolute; inset:0; width:100%; height:100%}
.photo-card .bg-image-layer{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover; z-index:0;
}
.photo-card.has-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(10,15,30,0.08), rgba(10,15,30,0.14) 48%, rgba(10,15,30,0.72) 100%);
  pointer-events:none;
}
.photo-card .label{
  position:absolute; bottom:12px; left:12px; right:12px;
  padding:10px 14px; background:rgba(10,15,30,0.8); backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:10px;
  display:flex; justify-content:space-between; align-items:center; z-index:2;
}
.photo-card .label .n{font-size:13px; font-weight:500}
.photo-card .label .p{font-family:var(--f-mono); font-size:11px; color:var(--gold)}

/* Split section */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.split.flip{grid-template-columns:1fr 1fr}
.split-text h3{font-family:var(--f-serif); font-size:clamp(28px,3.2vw,40px); font-weight:500; line-height:1.15; margin-bottom:18px}
.split-text h3 em{font-style:italic; color:var(--gold); font-weight:400}
.split-text p{color:var(--ivory-dim); font-size:15px; margin-bottom:18px; line-height:1.65}
.split-text ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.split-text ul li{
  padding-left:26px; position:relative; font-size:14px; color:var(--ivory-dim);
}
.split-text ul li::before{
  content:""; position:absolute; left:0; top:8px;
  width:14px; height:1px; background:var(--gold);
}

/* Device mockup phone with richer content */
.phone-shell{
  width:100%; max-width:300px; aspect-ratio:9/19; padding:8px;
  border-radius:32px; margin:0 auto;
  background:linear-gradient(160deg, #222b4a, #0a0f1e);
  box-shadow:0 40px 80px -30px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(201,168,76,0.15);
  position:relative;
}
.phone-shell::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:80px; height:18px; background:#0a0f1e; border-radius:999px; z-index:3;
}
.phone-scr{
  width:100%; height:100%; border-radius:26px; overflow:hidden;
  background:var(--bg-2); position:relative;
}
.phone-scr svg{position:absolute; inset:0; width:100%; height:100%}

/* CTA template picker */
.template-cta{
  padding:48px; border-radius:22px; margin-top:40px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(201,168,76,0.12), rgba(20,28,52,0.4));
  backdrop-filter:blur(10px);
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.template-cta h3{font-family:var(--f-serif); font-size:clamp(24px,2.8vw,34px); font-weight:500; line-height:1.2; margin-bottom:10px}
.template-cta h3 em{font-style:italic; color:var(--gold); font-weight:400}
.template-cta p{color:var(--ivory-dim); font-size:14px; max-width:44ch}

@media (max-width:980px){
  .demo-row.cols-2,.demo-row.cols-3,.demo-row.cols-4{grid-template-columns:1fr}
  .split,.split.flip{grid-template-columns:1fr; gap:32px}
  .template-cta{padding:32px 24px; flex-direction:column; align-items:flex-start}
  .ui-grid-3{grid-template-columns:1fr 1fr}
}

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:2px;
  background:linear-gradient(to right, var(--gold-deep), var(--gold), var(--gold-soft));
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .1s linear;
  pointer-events:none;
}

/* ============ ENHANCED HERO IMAGE SUPPORT ============ */
.p-hero-image{
  position:relative; width:100%; height:100%;
  border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.12);
}
.p-hero-image img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(0.85) saturate(1.1);
}
.p-hero-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 40%, rgba(10,15,30,0.6));
}

/* ============ ENHANCED P-VISUAL 3D ============ */
.p-visual{
  position:relative; aspect-ratio:1/1; max-width:520px; width:100%; justify-self:end;
  border-radius:22px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--bg-2), var(--bg));
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(201,168,76,0.1),
    inset 0 1px 0 rgba(201,168,76,0.06);
  transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.p-visual:hover{
  transform:perspective(1400px) rotateY(-2deg) rotateX(1deg);
}
.p-visual.has-photo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(160deg, rgba(0,0,0,0.04) 14%, rgba(0,0,0,0.3) 100%);
  pointer-events:none;
}
.p-visual .hero-visual-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  z-index:0;
  filter:brightness(0.96) saturate(1.08) contrast(1.04);
}
.p-visual canvas{position:absolute; inset:0; width:100% !important; height:100% !important}
.p-visual > .hero-art{
  position:absolute;
  inset:0;
  height:auto;
}
.p-visual-badge{
  position:absolute; left:20px; bottom:20px;
  padding:10px 16px; background:rgba(10,15,30,0.85);
  backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--gold); z-index:2;
  display:flex; align-items:center; gap:8px;
}
.p-visual-badge::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px var(--gold);
  animation:pvPulse 2s ease-in-out infinite;
}
@keyframes pvPulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* ============ ENHANCED HERO-ART ============ */
.hero-art{
  position:relative; width:100%; height:100%;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(160deg, var(--bg-2), var(--bg));
  border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(201,168,76,0.12);
  transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-art:hover{ transform:perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.hero-art svg{position:absolute; inset:0; width:100%; height:100%}
.hero-art .float-chip{
  position:absolute; padding:10px 14px;
  background:rgba(10,15,30,0.85); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:12px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:8px;
  animation:floatY 4s ease-in-out infinite;
}
.hero-art .float-chip i{color:var(--gold)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============ PHOTO HERO SUPPORT ============ */
.hero-art.photo-hero{
  background-size:cover !important;
  background-position:center !important;
}
.hero-art.photo-hero svg{ display:none }
.hero-art.photo-hero .bg-image-layer,
.gshot .s .bg-image-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  z-index:0;
}
.media-hero-block{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:transparent !important;
}
.media-hero-block .section-media-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  z-index:0;
}
.media-hero-block::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(160deg, rgba(7,7,15,0.18) 8%, rgba(7,7,15,0.82) 100%);
  pointer-events:none;
}
.media-hero-block > *{
  position:relative;
  z-index:2;
}
.hero-art.photo-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(160deg, rgba(0,0,0,0.08) 20%, rgba(0,0,0,0.62) 100%);
  pointer-events:none;
}
.hero-art.photo-hero .float-chip{ z-index:2 }

/* ============ NEW THEMES ============ */
/* Theme: Vibrant (e-commerce energy) */
[data-theme="vibrant"]{ --gold:#E8683C; --gold-soft:#F09070; --gold-deep:#8A3018; --bg:#180A06; --bg-2:#241210 }
[data-theme="vibrant"] body::before{background:radial-gradient(1000px 600px at 80% 0%, rgba(232,104,60,0.12), transparent 60%),radial-gradient(800px 500px at 0% 50%, rgba(180,60,20,0.08), transparent 60%)}

/* Theme: Slate (real estate professional) */
[data-theme="slate"]{ --gold:#7CAABE; --gold-soft:#A4C4D8; --gold-deep:#4A7890; --bg:#0A0E18; --bg-2:#101828 }
[data-theme="slate"] body::before{background:radial-gradient(1000px 600px at 80% 0%, rgba(124,170,190,0.1), transparent 60%),radial-gradient(800px 500px at 0% 50%, rgba(60,100,140,0.08), transparent 60%)}

/* ============ ENHANCED NAV ============ */
.pnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 40px; display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,15,30,0.82); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  transition:padding .3s, background .3s;
}
.pnav.scrolled{ padding:12px 40px; background:rgba(10,15,30,0.94); }

/* ============ RESULT NUMBER ANIMATION ============ */
.result .num{
  font-family:var(--f-serif); font-size:clamp(36px,3.5vw,56px);
  font-weight:500; color:var(--gold); line-height:1; margin-bottom:10px;
  display:inline-block;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.result:hover .num{ transform:scale(1.05) }

/* ============ FEATURE CARD ENHANCED ============ */
.feature{
  padding:32px 28px; border:1px solid var(--line-soft); border-radius:16px;
  background:linear-gradient(180deg, rgba(20,28,52,0.5), transparent);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  position:relative; overflow:hidden;
}
.feature::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(300px 200px at var(--fx,50%) var(--fy,110%), rgba(201,168,76,0.1), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.feature:hover{ transform:translateY(-6px); border-color:rgba(201,168,76,0.35); }
.feature:hover::before{ opacity:1; }
.feature i{color:var(--gold); font-size:22px; margin-bottom:18px; display:block; transition:transform .4s}
.feature:hover i{ transform:scale(1.1) }
.feature h4{font-family:var(--f-serif); font-size:20px; font-weight:500; margin-bottom:8px}
.feature p{color:var(--ivory-dim); font-size:14px; line-height:1.55}

/* RESPONSIVE */
@media (max-width:980px){
  .pnav{padding:14px 20px}
  .p-hero{grid-template-columns:1fr; gap:48px; padding:110px 20px 60px; min-height:auto}
  .p-visual{justify-self:center; max-width:380px; transform:none; aspect-ratio:auto; min-height:300px;}
  .hero-art{ transform:none; }
  .section{padding:80px 20px}
  .results{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .review-grid{grid-template-columns:1fr; gap:28px}
  .process{grid-template-columns:1fr 1fr}
  .next-case{flex-direction:column; align-items:flex-start; padding:40px 28px}
  .p-cta{padding:80px 20px 60px}
  .p-meta{gap:20px}
}
@media (max-width:560px){
  .results{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
}

/* Concept-work disclosure bar */
.concept-bar{
  position:relative; z-index:60;
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 22px;
  background:rgba(201,168,76,0.10);
  border-bottom:1px solid rgba(201,168,76,0.28);
  font-size:13px; line-height:1.55; color:#E8E2D6;
}
.concept-bar i{ color:#C9A84C; margin-top:3px }
.concept-bar strong{ color:#C9A84C }
.concept-bar a{ color:#C9A84C; text-decoration:underline; text-underline-offset:2px }
@media (max-width:600px){ .concept-bar{ font-size:12px; padding:10px 16px } }