:root { --bg:#080808; --bg-elevated:#101010; --panel:#151515; --panel-2:#1c1c1b; --panel-3:#242320; --ink:#f5f2eb; --ink-soft:#dad6cd; --muted:#aaa69d; --line:rgba(205,185,146,.17); --line-strong:rgba(205,185,146,.36); --accent:#cfb17a; --accent-dark:#a78a53; --accent-soft:rgba(207,177,122,.14); --gold:#cfb17a; }
body { background:radial-gradient(ellipse at 50% 0,rgba(156,128,77,.1),transparent 45rem),var(--bg); overflow-x:clip; }
.app-shell { width:min(100%,1280px); background:var(--bg); }
.topbar { min-height:84px; padding-inline:clamp(16px,3vw,40px); gap:12px; background:rgba(8,8,8,.94); border-bottom:1px solid var(--line); }
.brand { font-size:13px; line-height:1.15; letter-spacing:1.6px; }
.brand-mark { background:linear-gradient(145deg,#383023,#141310); color:var(--gold); border-radius:8px; }
.desktop-nav { display:flex; gap:18px; }
.desktop-nav button { background:transparent; color:var(--ink-soft); min-height:44px; }
.desktop-nav button:hover { color:var(--gold); }
.profile-button { border-radius:8px; }
.eyebrow,.hero-dot { color:var(--gold); }
.primary-btn { background:linear-gradient(120deg,#d9bc84,#b99860); color:#16120c; border:1px solid #dfc490; box-shadow:0 5px 22px rgba(173,138,77,.12); }
.primary-btn:hover { background:linear-gradient(120deg,#e8ce9d,#c8a870); color:#16120c; }
.primary-btn:disabled { opacity:.55; cursor:wait; }
.hero.luxury-hero { min-height:590px; margin:8px 20px 36px; padding:60px 26px; align-items:center; justify-content:center; background:#101010; border-radius:14px; text-align:center; }
.luxury-hero::before { background:linear-gradient(90deg,rgba(5,5,5,.2),rgba(5,5,5,.76) 34%,rgba(5,5,5,.76) 66%,rgba(5,5,5,.2)),linear-gradient(0deg,#080808,transparent 42%); z-index:1; }
.luxury-hero::after { display:none; }
.hero-portrait { position:absolute; inset:0 auto 0 0; width:50%; background-size:cover; background-position:65% 32%; z-index:0; }
.hero-portrait--military { background-image:url('/images/hero-final.png'); }
.hero-portrait--civilian { left:auto; right:0; background-image:url('/images/templates/template-with-loved-one.png'); background-position:70% 27%; }
.luxury-hero .hero-copy { position:relative; z-index:2; width:min(100%,680px); margin:auto; }
.luxury-hero h1 { font-size:clamp(38px,5vw,72px); letter-spacing:-2px; line-height:1.09; }
.luxury-hero h1 em { color:var(--gold); }
.luxury-hero p { max-width:580px; margin:22px auto 0; line-height:1.65; color:#e2dcd0; }
.luxury-hero .hero-meta { justify-content:center; color:#c4baaa; }
.hero-cta { max-width:none; width:auto; padding-inline:30px; }
.category-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.category-feature { min-width:0; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:8px; padding:24px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(135deg,#30291d,#101010); text-align:left; }
.category-feature strong { font-size:clamp(20px,2.7vw,28px); }
.category-feature span { color:var(--ink-soft); font-size:13px; }
.military-feature { background:linear-gradient(90deg,rgba(10,10,10,.93),rgba(10,10,10,.24)),url('/images/templates/template-military-avatar.png') center 25%/cover; }
.civilian-feature { background:linear-gradient(90deg,rgba(10,10,10,.93),rgba(10,10,10,.24)),url('/images/templates/template-family.png') center 30%/cover; }
.section { padding-inline:clamp(16px,3vw,36px); }
.section .template-row { margin-inline:calc(-1 * clamp(16px,3vw,36px)); padding-inline:clamp(16px,3vw,36px); }
.section-head h2 { font-size:clamp(21px,2.5vw,29px); }
.action-card,.progress-card,.confirm-card,.template-detail,.help-step,.profile-menu { background:linear-gradient(145deg,#1c1b19,#111111); border-color:var(--line); }
.action-card strong { color:var(--ink); }
.action-symbol { background:var(--accent-soft); color:var(--gold); }
.action-card:hover,.template-card:hover { border-color:var(--line-strong); }
.form-shell { max-width:880px; margin-inline:auto; width:100%; }
.form-shell:has(.template-list) { max-width:none; }
.template-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.template-card { min-width:0; background:#161615; border-radius:10px; }
.template-art { background:#1c1b19; }
.template-info strong { overflow-wrap:anywhere; }
.template-option,.format-card,.textarea,input,select { background-color:#161615; border-color:var(--line); }
.template-option.selected,.format-card.selected,.filter.active { border-color:var(--gold); background:var(--accent-soft); color:var(--ink); }
.bottom-nav { display:none; background:rgba(13,13,12,.95); border-color:var(--line); }
.nav-item.active { color:var(--gold); }
.site-footer { border-top:1px solid var(--line); margin:30px 20px 0; padding:30px 16px; display:flex; flex-direction:column; gap:14px; color:var(--muted); font-size:13px; }
.site-footer strong { color:var(--gold); letter-spacing:2px; }
.site-footer div { display:flex; flex-wrap:wrap; gap:16px; }
.site-footer div a { display:inline-block; white-space:nowrap; }
.login-shell { max-width:550px; padding-block:60px; }
.legal-page { max-width:760px; padding:60px 20px; line-height:1.7; }
.legal-page h1 { font-size:clamp(32px,5vw,52px); line-height:1.1; }
.login-shell h1 { font-size:clamp(30px,4vw,42px); line-height:1.12; }
.login-shell .textarea { width:100%; min-height:52px; margin-bottom:16px; padding:14px; }
.login-shell .helper { line-height:1.6; font-size:14px; }
.login-shell a { color:var(--gold); text-decoration:underline; }
.account-email { padding:18px; color:var(--muted); overflow-wrap:anywhere; }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.how-card { background:var(--surface); border:1px solid var(--line); padding:24px; min-width:0; }
.how-card small { color:var(--gold); letter-spacing:2px; }
.how-card h2 { font-size:22px; margin:16px 0 12px; }
.how-card p { color:var(--muted); line-height:1.6; font-size:14px; }
.account-delete { color:#f1a5a5; }
.install-note { padding:18px; border:1px solid var(--line); margin-top:20px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media (max-width:900px) { .desktop-nav { gap:8px; font-size:12px; } .template-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) {
  .how-grid { grid-template-columns:minmax(0,1fr); }
  .desktop-nav { display:none; }
  .hero.luxury-hero { min-height:640px; margin:0 12px 24px; padding:30px 18px; justify-content:flex-end; }
  .hero-portrait { width:55%; height:100%; background-position:63% 25%; }
  .hero-portrait--civilian { background-position:70% 25%; }
  .luxury-hero::before { background:linear-gradient(0deg,#080808 1%,rgba(8,8,8,.95) 27%,rgba(8,8,8,.1) 90%),linear-gradient(90deg,transparent,rgba(8,8,8,.2),transparent); }
  .luxury-hero h1 { font-size:42px; letter-spacing:-1.7px; }
  .luxury-hero p { font-size:14px; }
  .luxury-hero .hero-copy { margin:250px 0 0; }
  .category-pair { gap:10px; }
  .category-feature { padding:16px; min-height:170px; }
  .category-feature strong { font-size:19px; }
  .template-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .template-art { height:220px; }
  .template-info { padding:12px; }
  .topbar { min-height:78px; }
  .bottom-nav { display:flex; bottom:0; }
  .site-footer { padding-bottom:30px; }
}
@media (max-width:360px) {
  .brand { font-size:11px; gap:7px; }
  .topbar { padding-inline:12px; }
  .luxury-hero h1 { font-size:35px; }
  .category-pair { grid-template-columns:minmax(0,1fr); }
  .template-art { height:185px; }
  .template-info strong { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }