/* CreateAI public menu-platform homepage — Phase 1F */
:root {
  --hp-ink: #f8f4ea;
  --hp-muted: #aaa69d;
  --hp-line: rgba(255,255,255,.11);
  --hp-surface: #10100f;
  --hp-accent: #e8c86b;
  --hp-copper: #a56f4b;
}

html { scroll-padding-top: 88px; }
body { overflow-x: clip; }
.site-header { background: rgba(8,8,8,.72); backdrop-filter: blur(18px); }
.logo-img { width: 42px !important; height: 42px !important; }
.logo-text { font-family: Arial, sans-serif; font-size: 1.05rem; letter-spacing: -.04em; color: var(--hp-ink); }
.logo-text span { color: var(--hp-accent); }

.hp-section { position: relative; padding: clamp(6rem, 10vw, 10rem) 0; }
.hp-kicker { color: var(--hp-accent); font-size: .78rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 1rem; }
.hp-section-copy h2,
.hp-section-head h2 { color: var(--hp-ink); font-size: clamp(2rem, 4.5vw, 4.7rem); line-height: 1.16; letter-spacing: -.05em; max-width: 13ch; }
.hp-section-copy > p:not(.hp-kicker),
.hp-section-head > p:not(.hp-kicker),
.hp-section-head > div + p { color: var(--hp-muted); line-height: 2; max-width: 56ch; }
.hp-section-copy > p:not(.hp-kicker) { margin-top: 1.5rem; }

/* Hero */
.hp-hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: clamp(8rem, 13vw, 10rem) 0 5rem;
  background:
    radial-gradient(circle at 76% 28%, rgba(126,91,55,.22), transparent 32%),
    radial-gradient(circle at 15% 10%, rgba(232,200,107,.07), transparent 24%),
    #080807;
}
.hp-hero::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,#000,transparent 90%); }
.hp-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(440px,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(2rem,5vw,6rem); }
.hp-hero-copy { padding-block: 2rem; }
.hp-eyebrow { display:inline-flex; align-items:center; gap:.65rem; color:#d8d5cc; font-size:.77rem; font-weight:700; margin-bottom:1.5rem; }
.hp-eyebrow span { width:24px; height:1px; background:var(--hp-accent); box-shadow:0 0 12px var(--hp-accent); }
.hp-hero h1 { color:var(--hp-ink); font-size:clamp(2.75rem,4.8vw,5.6rem); line-height:1.08; letter-spacing:-.06em; max-width:12.5ch; text-wrap:balance; }
.hp-hero h1 em { color:var(--hp-accent); font-style:normal; }
.hp-hero-lead { color:#bcb8ad; font-size:clamp(.95rem,1.4vw,1.13rem); line-height:2; max-width:610px; margin-top:1.6rem; }
.hp-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hp-primary { background:linear-gradient(135deg,#f3d77c,var(--hp-accent))!important; color:#111!important; border-color:var(--hp-accent)!important; box-shadow:0 16px 45px rgba(232,200,107,.18); }
.hp-primary:hover { transform:translateY(-2px); box-shadow:0 22px 55px rgba(232,200,107,.26); }
.hp-hero-proof { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-top:2rem; color:#8e8b83; font-size:.74rem; }
.hp-hero-proof li { display:flex; align-items:center; gap:.35rem; }
.hp-hero-proof span { color:var(--hp-accent); }
.hp-disabled-note { color:var(--hp-muted); border:1px solid var(--hp-line); padding:.8rem 1rem; border-radius:12px; }

.hp-scene { position:relative; min-height:clamp(480px,50vw,680px); isolation:isolate; perspective:1200px; }
.hp-scene::before { content:""; position:absolute; width:88%; aspect-ratio:1; border-radius:50%; background:rgba(165,111,75,.14); filter:blur(70px); inset:9% 6%; }
.hp-scene-frame { position:absolute; inset:7% 0 5%; overflow:hidden; border:1px solid rgba(247,241,229,.14); border-radius:clamp(26px,4vw,48px); background:#17120f; box-shadow:0 48px 120px rgba(0,0,0,.48); transform:rotateY(var(--scene-x,0deg)) rotateX(var(--scene-y,0deg)); transition:transform .6s var(--ca-ease); }
.hp-scene-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 54%,rgba(8,8,7,.52)); pointer-events:none; }
.hp-scene-poster { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:43% center; }
.hp-scene-shine { position:absolute; z-index:2; width:42%; height:140%; top:-20%; left:-52%; transform:skewX(-12deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); animation:scene-shine 9s ease-in-out infinite; pointer-events:none; }
@keyframes scene-shine { 0%,60%{left:-52%} 82%,100%{left:112%} }
.hp-scene-status { position:absolute; right:2.2rem; top:2.2rem; z-index:3; color:#d7d0c4; font-size:.67rem; background:rgba(5,5,5,.62); padding:.48rem .72rem; border:1px solid var(--hp-line); border-radius:999px; backdrop-filter:blur(10px); }
.hp-scene-tag { position:absolute; z-index:4; display:flex; align-items:center; gap:.45rem; padding:.52rem .78rem; border:1px solid var(--hp-line); border-radius:999px; background:rgba(10,10,9,.78); backdrop-filter:blur(12px); color:#d9d5cb; font-size:.7rem; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.hp-scene-tag span { width:6px; height:6px; border-radius:50%; background:var(--hp-accent); box-shadow:0 0 12px var(--hp-accent); }
.hp-scene-tag-menu { top:17%; left:-2%; }
.hp-scene-tag-qr { bottom:18%; right:-2%; }
.hp-hero-orbit { position:absolute; border:1px solid rgba(255,255,255,.045); border-radius:50%; pointer-events:none; }
.hp-hero-orbit-a { width:48vw; height:48vw; max-width:820px; max-height:820px; left:-16vw; bottom:-28vw; }
.hp-hero-orbit-b { width:26vw; height:26vw; right:-10vw; top:-8vw; }
.hp-scroll-cue { position:absolute; z-index:4; bottom:1.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.35rem; color:#77746d; font-size:.64rem; }
.hp-scroll-cue span { width:1px; height:28px; background:linear-gradient(var(--hp-accent),transparent); }

/* Value strip */
.hp-value { background:#0c0c0b; border-block:1px solid var(--hp-line); overflow:hidden; }
.hp-value-line { min-height:86px; display:flex; justify-content:space-between; align-items:center; gap:1rem; white-space:nowrap; color:#d4d0c6; font-size:.8rem; }
.hp-value-line i { display:block; width:4px; height:4px; border-radius:50%; background:var(--hp-copper); }

/* Story and process */
.hp-problem { background:#0b0b0a; }
.hp-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(400px,1.1fr); gap:clamp(3rem,9vw,10rem); align-items:center; }
.hp-text-link { display:inline-flex; gap:.5rem; margin-top:1.5rem; color:var(--hp-ink); border-bottom:1px solid var(--hp-accent); padding-bottom:.3rem; }
.hp-contrast-panel { display:grid; grid-template-columns:1fr 1fr; min-height:430px; border:1px solid var(--hp-line); border-radius:30px; overflow:hidden; transform:rotate(-1.5deg); box-shadow:0 40px 100px rgba(0,0,0,.28); }
.hp-contrast-panel > div { padding:clamp(1.5rem,3vw,3.2rem); display:flex; flex-direction:column; justify-content:space-between; }
.hp-contrast-panel small { color:#8d8980; }
.hp-contrast-panel strong { font-size:clamp(1.4rem,2.4vw,2.5rem); line-height:1.55; color:var(--hp-ink); }
.hp-contrast-panel span { color:#8d8980; font-size:.8rem; }
.hp-contrast-old { background:repeating-linear-gradient(45deg,#111 0,#111 12px,#131313 12px,#131313 24px); }
.hp-contrast-new { background:var(--hp-accent); }
.hp-contrast-new small,.hp-contrast-new strong,.hp-contrast-new span { color:#161712; }

.hp-how { background:#f0ede4; color:#171713; }
.hp-how .hp-kicker { color:#73533f; }
.hp-how .hp-section-head h2,.hp-how .hp-section-head p { color:#171713; }
.hp-section-head { display:grid; gap:1rem; margin-bottom:clamp(3rem,6vw,6rem); }
.hp-section-head-row { grid-template-columns:1fr .7fr; align-items:end; }
.hp-steps { border-top:1px solid rgba(20,20,15,.18); }
.hp-steps li { display:grid; grid-template-columns:110px 1fr; gap:1rem; padding:2.25rem 0; border-bottom:1px solid rgba(20,20,15,.18); }
.hp-steps li > span { font-family:Arial,sans-serif; color:#806c59; font-size:.8rem; }
.hp-steps h3 { font-size:clamp(1.25rem,2vw,2rem); margin-bottom:.4rem; }
.hp-steps p { color:#6e6a61; }

/* Templates */
.hp-templates { background:#080807; }
.hp-template-rail { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); }
.hp-template-card { grid-column:span 4; min-width:0; }
.hp-template-card:nth-child(2),.hp-template-card:nth-child(5) { transform:translateY(3.5rem); }
.hp-template-visual { position:relative; display:block; aspect-ratio:1.18; overflow:hidden; border-radius:22px; background:#141412; border:1px solid var(--hp-line); }
.hp-template-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%,rgba(0,0,0,.72)); }
.hp-template-visual img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.hp-template-visual:hover img { transform:scale(1.035); }
.hp-template-visual > span { position:absolute; z-index:2; left:1rem; bottom:1rem; padding:.45rem .7rem; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); color:#fff; font-size:.68rem; }
.hp-template-meta { display:flex; justify-content:space-between; align-items:end; margin-top:1.15rem; }
.hp-template-meta small { color:var(--hp-copper); font-size:.65rem; }
.hp-template-meta h3 { color:var(--hp-ink); font-size:1.25rem; margin-top:.25rem; }
.hp-template-index { font-family:Arial,sans-serif; color:#494741; font-size:1.8rem; }
.hp-template-card > p { color:#858178; font-size:.78rem; line-height:1.8; margin-top:.65rem; }

/* Demo */
.hp-demo { background:#121210; overflow:hidden; }
.hp-demo-layout { display:grid; grid-template-columns:minmax(320px,.65fr) minmax(0,1.35fr); gap:clamp(2rem,6vw,7rem); align-items:center; }
.hp-demo-copy h2 { color:var(--hp-ink); font-size:clamp(2rem,4.2vw,4.2rem); line-height:1.16; letter-spacing:-.05em; }
.hp-demo-copy > p:not(.hp-kicker) { color:var(--hp-muted); line-height:2; margin-top:1.2rem; }
.hp-demo-controls { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.5rem; }
.hp-demo-controls button,.hp-device-switch button { border:1px solid var(--hp-line); background:transparent; color:#918d84; border-radius:999px; padding:.52rem .8rem; font:inherit; font-size:.67rem; cursor:pointer; }
.hp-demo-controls button.is-active,.hp-device-switch button.is-active { background:var(--hp-accent); color:#111; border-color:var(--hp-accent); }
.hp-device-switch { display:flex; gap:.35rem; margin-top:1rem; }
.hp-demo-stage { min-width:0; min-height:680px; display:grid; place-items:center; transition:all .45s ease; }
.hp-demo-browser { width:100%; height:620px; border:1px solid rgba(255,255,255,.16); border-radius:28px; overflow:hidden; background:#090909; box-shadow:0 45px 100px rgba(0,0,0,.45); transition:width .45s ease; }
.hp-demo-stage.is-mobile .hp-demo-browser { width:min(390px,100%); }
.hp-demo-browser > div { height:42px; display:flex; align-items:center; gap:6px; padding:0 14px; background:#1b1b18; color:#8d8981; font-size:.64rem; }
.hp-demo-browser i { width:7px; height:7px; border-radius:50%; background:#44423d; }
.hp-demo-browser span { margin-inline-start:auto; }
.hp-demo-browser iframe { display:block; width:100%; height:calc(100% - 42px); border:0; background:#fff; }

/* QR and audience */
.hp-qr { background:#e9ff76; color:#12130f; }
.hp-qr-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,9vw,10rem); align-items:center; }
.hp-qr .hp-kicker,.hp-qr .hp-section-copy h2,.hp-qr .hp-section-copy p { color:#12130f; }
.hp-qr-art { min-height:500px; display:grid; place-items:center; position:relative; }
.hp-qr-code { width:min(330px,72vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(7,1fr); padding:25px; gap:7px; background:#fff; border-radius:28px; box-shadow:0 35px 80px rgba(35,40,15,.18); transform:rotate(-4deg); }
.hp-qr-code i { background:#151713; border-radius:2px; }
.hp-qr-code i:nth-child(3n),.hp-qr-code i:nth-child(5n+1) { opacity:0; }
.hp-qr-ring { position:absolute; width:390px; max-width:90vw; aspect-ratio:1; border:1px solid rgba(20,23,15,.25); border-radius:50%; }
.hp-qr-art > span { position:absolute; bottom:3%; background:#141510; color:#fff; padding:.7rem 1rem; border-radius:999px; direction:ltr; font:700 .72rem Arial,sans-serif; }
.hp-inline-links { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.hp-inline-links a { color:#171812; border-bottom:1px solid #171812; font-weight:700; }
.hp-audience { background:#0b0b0a; }
.hp-audience-list { border-top:1px solid var(--hp-line); }
.hp-audience-list a { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.7rem .3rem; border-bottom:1px solid var(--hp-line); color:var(--hp-ink); font-size:clamp(1.25rem,2.3vw,2.3rem); transition:padding .25s,color .25s; }
.hp-audience-list a:hover { padding-inline:1rem; color:var(--hp-accent); }
.hp-audience-list small { font:500 .7rem Arial,sans-serif; color:#77736b; direction:ltr; }

/* Pricing and FAQ */
.hp-pricing { background:#eeeae0; color:#171713; }
.hp-pricing-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,9rem); align-items:start; }
.hp-pricing .hp-kicker { color:#775743; }
.hp-pricing .hp-section-copy h2,.hp-pricing .hp-section-copy p { color:#171713; }
.hp-plan-list { display:grid; gap:1rem; }
.hp-plan { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:1.5rem; border:1px solid rgba(20,20,15,.16); border-radius:20px; }
.hp-plan.is-featured { background:#171713; color:#fff; border-color:#171713; transform:scale(1.02); }
.hp-plan small,.hp-plan-pending small { color:#7b644f; font-size:.66rem; font-weight:800; }
.hp-plan.is-featured small { color:var(--hp-accent); }
.hp-plan h3 { margin-top:.35rem; }
.hp-plan p { color:#777167; font-size:.75rem; margin-top:.25rem; }
.hp-plan strong { font-size:1.45rem; white-space:nowrap; }
.hp-plan strong span { font-size:.65rem; font-weight:500; }
.hp-plan-pending { padding:clamp(1.5rem,4vw,3.5rem); background:#181814; color:#fff; border-radius:28px; }
.hp-plan-pending h3 { font-size:clamp(1.45rem,2.5vw,2.5rem); line-height:1.55; margin:.8rem 0; }
.hp-plan-pending p { color:#aaa69d; line-height:1.9; margin-bottom:1.5rem; }
.hp-faq { background:#0b0b0a; }
.hp-faq-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(3rem,7vw,8rem); align-items:start; }
.hp-faq .hp-section-head { position:sticky; top:130px; }
.hp-faq-list { border-top:1px solid var(--hp-line); }
.hp-faq-list details { border-bottom:1px solid var(--hp-line); }
.hp-faq-list summary { list-style:none; display:flex; justify-content:space-between; gap:1rem; padding:1.45rem 0; cursor:pointer; color:var(--hp-ink); font-weight:700; }
.hp-faq-list summary::-webkit-details-marker { display:none; }
.hp-faq-list summary span { color:var(--hp-accent); transition:transform .25s; }
.hp-faq-list details[open] summary span { transform:rotate(45deg); }
.hp-faq-list details p { color:var(--hp-muted); line-height:2; padding:0 0 1.5rem; max-width:70ch; }
.hp-final-cta { padding:2rem 0 8rem; background:#0b0b0a; }
.hp-final-panel { position:relative; overflow:hidden; padding:clamp(2rem,7vw,7rem); border-radius:38px; background:linear-gradient(135deg,#f4d28f,#d9a951); color:#141510; text-align:center; }
.hp-pricing-note{margin:6px 0 14px;color:#777167;font-size:.72rem;text-align:center}
.hp-final-panel::after { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(20,20,15,.16); border-radius:50%; left:-80px; bottom:-160px; }
.hp-final-panel .hp-kicker,.hp-final-panel h2 { color:#141510; }
.hp-final-panel h2 { font-size:clamp(2.2rem,5vw,5.4rem); letter-spacing:-.055em; }
.hp-final-panel > p:not(.hp-kicker) { margin:1rem auto 1.5rem; }
.hp-final-panel .btn { background:#141510!important; color:#fff!important; border-color:#141510!important; }

@media (max-width: 1024px) {
  .hp-hero-grid { grid-template-columns:minmax(370px,.9fr) minmax(0,1.1fr); gap:1.5rem; }
  .hp-hero h1 { font-size:clamp(2.6rem,5.7vw,4.4rem); }
  .hp-template-card { grid-column:span 6; }
  .hp-template-card:nth-child(2),.hp-template-card:nth-child(5) { transform:none; }
  .hp-demo-layout { grid-template-columns:1fr; }
  .hp-demo-copy { max-width:760px; }
}

@media (max-width: 768px) {
  html { scroll-padding-top:74px; }
  .site-header { padding:.65rem 0; }
  .header-actions .theme-toggle { display:none; }
  .hp-section { padding:5.5rem 0; }
  .hp-hero { min-height:auto; padding:7.5rem 0 4rem; }
  .hp-hero-grid { grid-template-columns:1fr; }
  .hp-hero-copy { text-align:center; padding:0; }
  .hp-eyebrow { justify-content:center; }
  .hp-hero h1 { max-width:13ch; margin-inline:auto; font-size:clamp(2.55rem,11.4vw,4.2rem); }
  .hp-hero-lead { margin-inline:auto; }
  .hp-actions,.hp-hero-proof { justify-content:center; }
  .hp-scene { min-height:390px; margin-top:.5rem; }
  .hp-scene-frame { inset:3% 0 5%; }
  .hp-scene-tag-menu { top:16%; left:2%; }
  .hp-scene-tag-qr { bottom:18%; right:0; }
  .hp-scroll-cue { display:none; }
  .hp-value-line { overflow:auto; justify-content:flex-start; padding-block:1rem; scrollbar-width:none; }
  .hp-value-line p { min-width:max-content; }
  .hp-split,.hp-qr-grid,.hp-pricing-layout,.hp-faq-layout { grid-template-columns:1fr; }
  .hp-contrast-panel { min-height:350px; transform:none; }
  .hp-section-head-row { grid-template-columns:1fr; }
  .hp-template-card { grid-column:span 12; }
  .hp-template-card:nth-child(even) { margin-inline-start:8%; }
  .hp-template-card:nth-child(odd) { margin-inline-end:8%; }
  .hp-demo-stage { min-height:610px; }
  .hp-demo-browser { height:590px; }
  .hp-qr-art { min-height:390px; order:2; }
  .hp-qr .hp-section-copy { order:1; }
  .hp-faq .hp-section-head { position:static; }
}

@media (max-width: 480px) {
  .hp-hero { padding-top:6.7rem; }
  .hp-hero h1 { font-size:clamp(2.35rem,11vw,3.2rem); }
  .hp-actions { align-items:stretch; }
  .hp-actions .btn { width:100%; justify-content:center; }
  .hp-hero-proof { display:grid; justify-items:start; max-width:260px; margin-inline:auto; }
  .hp-scene { min-height:330px; }
  .hp-scene-status { display:none; }
  .hp-scene-tag { font-size:.61rem; padding:.42rem .58rem; }
  .hp-scene-frame::after { background:linear-gradient(180deg,transparent 60%,rgba(8,8,7,.48)); }
  .hp-contrast-panel { grid-template-columns:1fr; }
  .hp-contrast-panel > div { min-height:230px; }
  .hp-steps li { grid-template-columns:54px 1fr; }
  .hp-template-card:nth-child(n) { margin-inline:0; }
  .hp-demo-stage { min-height:560px; }
  .hp-demo-browser { height:540px; border-radius:20px; }
  .hp-qr-code { padding:18px; gap:5px; }
  .hp-audience-list a { align-items:flex-start; flex-direction:column; }
  .hp-plan { align-items:flex-start; flex-direction:column; }
  .hp-final-panel { border-radius:26px; }
}

@media (min-width: 1800px) {
  .container { max-width:1580px; }
  .hp-hero-grid { grid-template-columns:.86fr 1.14fr; }
  .hp-scene { min-height:760px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-template-visual img,.hp-scene-poster,#hero3dCanvas,.hp-faq-list summary span { transition:none!important; }
  .hp-template-card:nth-child(n),.hp-contrast-panel { transform:none; }
}

[data-theme="light"] .hp-hero,
[data-theme="light"] .hp-problem,
[data-theme="light"] .hp-templates,
[data-theme="light"] .hp-audience,
[data-theme="light"] .hp-faq,
[data-theme="light"] .hp-final-cta { --hp-ink:#172038; --hp-muted:#5d6779; --hp-line:rgba(23,32,56,.13); background:#f7f8fb; }
[data-theme="light"] .hp-demo { --hp-ink:#172038; --hp-muted:#5d6779; --hp-line:rgba(23,32,56,.13); background:#edf1f7; }
[data-theme="light"] .hp-hero { background:radial-gradient(circle at 76% 28%,rgba(190,145,90,.17),transparent 32%),radial-gradient(circle at 15% 10%,rgba(107,126,44,.08),transparent 24%),#f8f8f4; }
[data-theme="light"] .hp-scene-tag,[data-theme="light"] .hp-scene-status { background:rgba(255,255,255,.82); color:#384052; }
[data-theme="light"] .hp-value { background:#eef1f5; }
[data-theme="light"] .hp-value-line { color:#30394b; }
[data-theme="light"] .hp-plan-pending { background:#172038; }

/* Premium visual final — obsidian/navy product presentation */
:root { --hp-navy:#090b22; --hp-navy-2:#111331; --hp-champagne:#f2c36f; }
.hp-hero { background:radial-gradient(circle at 73% 25%,rgba(243,182,101,.18),transparent 30%),radial-gradient(circle at 18% 6%,rgba(91,75,203,.2),transparent 27%),linear-gradient(145deg,#070819 0%,#0c0d25 48%,#070812 100%); }
.hp-hero::before { opacity:.34; background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px); }
.hp-scene-frame { border-color:rgba(242,195,111,.2); box-shadow:0 54px 140px rgba(1,2,15,.75),0 0 0 8px rgba(255,255,255,.018); }
.hp-scene::after { content:""; position:absolute; inset:17% 4% 0 12%; z-index:-1; border-radius:50%; background:rgba(84,68,191,.18); filter:blur(70px); }
.hp-primary { background:linear-gradient(135deg,#ffd995,#e9aa50)!important; box-shadow:0 18px 55px rgba(233,170,80,.24); }
.hp-value { background:#0a0b20; border-color:rgba(242,195,111,.14); }
.hp-problem,.hp-templates,.hp-audience,.hp-faq,.hp-final-cta { background:#08091b; }
.hp-how,.hp-demo,.hp-qr,.hp-pricing { background:#0e1029; }
.hp-signatures { overflow:hidden; background:radial-gradient(circle at 50% 35%,rgba(83,65,190,.17),transparent 44%),#090a1e; }
.hp-signatures::before { content:""; position:absolute; width:780px; height:780px; top:14%; right:50%; translate:50%; border:1px solid rgba(242,195,111,.08); border-radius:50%; box-shadow:0 0 0 100px rgba(255,255,255,.009),0 0 0 220px rgba(255,255,255,.006); pointer-events:none; }
.hp-signature-head { margin-inline:auto; text-align:center; align-items:center; }
.hp-signature-head h2 { max-width:16ch; margin-inline:auto; }
.hp-signature-head>p:last-child { margin-inline:auto; }
.hp-signature-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,30px); margin-top:clamp(42px,6vw,78px); }
.hp-signature-card { --sig-accent:#d6a85c; min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:34px; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow:0 35px 100px rgba(0,0,0,.32); }
.hp-signature-card.is-persian { --sig-accent:#b99b61; background:linear-gradient(145deg,rgba(255,251,239,.98),rgba(232,222,201,.94)); color:#18243b; }
.hp-signature-card.is-bold { --sig-accent:#ffb000; background:linear-gradient(145deg,#151515,#090909); }
.hp-signature-device { position:relative; width:calc(100% - 30px); min-height:470px; margin:15px 15px 0; overflow:hidden; border:7px solid #05060a; border-bottom:0; border-radius:32px 32px 0 0; background:#090909; box-shadow:0 30px 70px rgba(0,0,0,.38); }
.hp-signature-device::after { content:""; position:absolute; inset:42px 0 0; background:linear-gradient(0deg,rgba(4,5,10,.98) 3%,transparent 58%); }
.hp-signature-device img { width:100%; height:285px; object-fit:cover; }
.hp-phone-bar { position:relative; z-index:2; height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; color:#fff; background:#08090b; font-size:.68rem; }
.hp-phone-bar i { width:32px; height:6px; border-radius:99px; background:#18191d; }
.hp-phone-bar b { color:var(--sig-accent); }
.hp-phone-copy { position:absolute; z-index:3; inset:auto 19px 22px; display:grid; gap:7px; color:#fff; }
.hp-phone-copy small { color:var(--sig-accent); font-size:.66rem; }
.hp-phone-copy strong { font-size:clamp(1.15rem,2vw,1.65rem); }
.hp-phone-copy span { font-size:.7rem; opacity:.76; }
.is-persian .hp-signature-device { border-color:#eee7db; background:#f7f1e7; }
.is-persian .hp-phone-bar { color:#18243b; background:#f8f2e8; }
.is-persian .hp-signature-device::after { background:linear-gradient(0deg,#f7f1e7 3%,rgba(247,241,231,.06) 62%); }
.is-persian .hp-phone-copy { color:#18243b; }
.hp-signature-copy { padding:24px 26px 30px; color:var(--hp-ink); }
.is-persian .hp-signature-copy { color:#18243b; }
.hp-signature-copy>span { color:var(--sig-accent); font:700 .63rem/1.4 Arial,sans-serif; letter-spacing:.12em; }
.hp-signature-copy h3 { margin:8px 0; font:700 clamp(1.15rem,2vw,1.6rem)/1.25 Arial,Vazirmatn,sans-serif; }
.hp-signature-copy p { min-height:4.8em; margin:0; color:color-mix(in srgb,currentColor 67%,transparent); font-size:.78rem; line-height:1.9; }
.hp-signature-copy a { display:inline-flex; margin-top:20px; color:var(--sig-accent); font-size:.72rem; font-weight:800; text-decoration:none; }
.hp-palette { display:flex; gap:7px; margin-top:16px; }
.hp-palette i { width:15px; height:15px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:#0b0a09; }
.is-noir .hp-palette i:nth-child(2){background:#3b2a1d}.is-noir .hp-palette i:nth-child(3){background:#e3c08c}.is-noir .hp-palette i:nth-child(4){background:#f4e8d4}.is-persian .hp-palette i:nth-child(1){background:#f7f1e7}.is-persian .hp-palette i:nth-child(2){background:#14233a}.is-persian .hp-palette i:nth-child(3){background:#294d35}.is-persian .hp-palette i:nth-child(4){background:#b99b61}.is-bold .hp-palette i:nth-child(1){background:#0a0a0a}.is-bold .hp-palette i:nth-child(2){background:#ffb000}.is-bold .hp-palette i:nth-child(3){background:#e6281e}.is-bold .hp-palette i:nth-child(4){background:#fff}
.hp-audience-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.hp-audience-list .hp-industry-card { position:relative; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; overflow:hidden; padding:22px; border:1px solid rgba(255,255,255,.11); border-radius:26px; background:#101126; isolation:isolate; }
.hp-industry-card::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,#090a1e 4%,rgba(9,10,30,.15) 80%); }
.hp-industry-card img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.hp-industry-card:hover img { transform:scale(1.045); }
.hp-industry-card span { color:#fff; font-size:1.05rem; font-weight:850; }
.hp-industry-card small { color:#d0c7ba; margin-top:6px; font-size:.65rem; line-height:1.6; }
.hp-template-card { background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025)); border-color:rgba(255,255,255,.1); }
.hp-final-panel { background:radial-gradient(circle at 12% 20%,rgba(242,195,111,.18),transparent 33%),linear-gradient(135deg,#151738,#0a0b20); border-color:rgba(242,195,111,.2); }
@media(max-width:1050px){.hp-signature-grid{grid-template-columns:1fr 1fr}.hp-signature-card:last-child{grid-column:1/-1;width:min(100%,560px);justify-self:center}.hp-audience-list{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.hp-signature-grid{grid-template-columns:1fr}.hp-signature-card:last-child{grid-column:auto;width:100%}.hp-signature-device{min-height:420px}.hp-signature-device img{height:250px}.hp-signature-copy p{min-height:0}.hp-audience-list{grid-template-columns:1fr}.hp-audience-list .hp-industry-card{min-height:310px}.hp-signatures{padding-top:5rem}}
[data-theme="light"] .hp-signatures { --hp-ink:#172038; --hp-muted:#5d6779; --hp-line:rgba(23,32,56,.13); background:#eef1f7; }