:root{
  --bg: #FBF6F3;
  --bg-alt: #F7EAEE;
  --card: #FFFFFF;
  --line: #EEDBE0;
  --text: #241A20;
  --text-dim: #8C6F78;
  --brass: #D6255F;
  --brass-hover: #B81E4F;
  --indigo: #5B3477;
  --pad: clamp(20px, 6vw, 84px);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html, body{overflow-x:hidden; width:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(91,52,119,.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(214,37,95,.08), transparent 55%);
  background-repeat:no-repeat;
}
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.02; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--brass); color:#FFF8F5;}
:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}
[hidden]{display:none !important;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:14px;
}
.eyebrow.center{text-align:center;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* NAV */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:22px var(--pad);
  position:sticky; top:0; z-index:30;
  background:rgba(251,246,243,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.02em;
  flex-shrink:0;
}
.wordmark .mark{color:var(--brass);}
.wordmark.small{font-size:1rem;}
.nav-links{display:flex; gap:28px;}
.nav-links a{font-size:.92rem; color:var(--text-dim); transition:color .15s;}
.nav-links a:hover{color:var(--text);}
.nav-right{display:flex; align-items:center; gap:10px;}
.nav-toggle{
  display:none;
  width:38px; height:38px;
  border:1px solid var(--line); border-radius:8px;
  background:transparent;
  align-items:center; justify-content:center;
  flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:1.5px; background:var(--text);
  position:relative; transition:transform .2s, opacity .2s;
}
.nav-toggle span::before{position:absolute; top:-5px;}
.nav-toggle span::after{position:absolute; top:5px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg);}

/* TICKER */
.ticker-wrap{
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.ticker{
  display:flex; gap:48px; white-space:nowrap; width:max-content;
  padding:9px 0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--text-dim);
  animation:ticker 32s linear infinite;
}
.ticker span{color:var(--brass);}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

@media (max-width:760px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-links.open{max-height:260px;}
  .nav-links a{padding:16px var(--pad); border-top:1px solid var(--line);}
  .nav-toggle{display:flex;}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px;
  border-radius:8px;
  font-size:.9rem; font-weight:600;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  transition:transform .12s ease, background .15s, border-color .15s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--brass); color:#FFF8F5; box-shadow:0 0 0 rgba(214,37,95,0); }
.btn-primary:hover{background:var(--brass-hover); box-shadow:0 4px 24px rgba(214,37,95,.32);}
.btn-ghost{border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--text-dim);}
.btn-wallet{border-color:var(--line); color:var(--text); font-family:var(--font-mono); font-size:.8rem; padding:9px 16px;}
.btn-wallet.connected{border-color:var(--indigo); color:var(--indigo);}

.btn-textlink{
  background:none; border:none; color:var(--text-dim);
  font-size:.8rem; text-decoration:underline; text-underline-offset:3px;
  padding:0;
}
.btn-textlink:hover{color:var(--text);}

/* USER CHIP */
.user-chip{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:8px;
  padding:8px 12px;
  font-family:var(--font-mono); font-size:.78rem;
}
.user-chip .chip-signout{
  background:none; border:none; color:var(--text-dim); font-family:inherit;
  font-size:.72rem; text-decoration:underline; padding:0;
}
.user-chip .chip-signout:hover{color:var(--text);}

/* MODAL */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(36,26,32,.55);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal{
  position:relative;
  width:100%; max-width:380px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:28px;
}
.modal-close{
  position:absolute; top:16px; right:16px;
  background:none; border:none; color:var(--text-dim); font-size:1.4rem; line-height:1;
}
.modal-close:hover{color:var(--text);}
.modal-tabs{display:flex; gap:6px; margin:14px 0 20px; background:var(--bg-alt); border-radius:8px; padding:4px;}
.modal-tab{
  flex:1; background:none; border:none; color:var(--text-dim);
  font-size:.85rem; font-weight:600; padding:8px; border-radius:6px;
}
.modal-tab.active{background:var(--card); color:var(--text); box-shadow:0 0 0 1px var(--line);}
.modal-pane label{
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
.modal-pane input{
  font-family:var(--font-body); font-size:.95rem; color:var(--text);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
.modal-lede{color:var(--text-dim); font-size:.88rem; margin-bottom:16px;}
.modal-actions{display:flex; gap:10px; margin-top:4px;}
.modal-actions .btn{flex:1;}
.modal-note{font-size:.8rem; color:var(--brass); margin-top:14px; min-height:1em;}

/* TOOL TABS */
.tool-tabs{display:flex; gap:6px; background:var(--bg-alt); border-radius:8px; padding:4px; margin-bottom:16px;}
.tool-tab{
  flex:1; background:none; border:none; color:var(--text-dim);
  font-size:.85rem; font-weight:600; padding:8px; border-radius:6px;
}
.tool-tab.active{background:var(--card); color:var(--text); box-shadow:0 0 0 1px var(--line);}

/* CHAT */
.chat-pane{display:flex; flex-direction:column; gap:12px;}
.chat-log{
  display:flex; flex-direction:column; gap:8px;
  max-height:220px; overflow-y:auto;
  padding-right:4px;
}
.chat-msg{
  font-size:.86rem; line-height:1.4;
  padding:9px 12px; border-radius:10px;
  max-width:88%;
}
.chat-msg.bot{background:var(--bg-alt); border:1px solid var(--line); color:var(--text-dim); align-self:flex-start;}
.chat-msg.user{background:var(--indigo); color:#fff; align-self:flex-end;}
.chat-form{display:flex; gap:10px;}
.chat-form input{
  flex:1; font-family:var(--font-body); font-size:.9rem; color:var(--text);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; padding:10px 12px;
}
.chat-form input:focus{border-color:var(--indigo);}
.chat-footer-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}

/* HERO */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);
  align-items:center;
  padding:64px var(--pad) 96px;
  max-width:1320px;
  margin:0 auto;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 5vw, 4rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.01em;
  margin-bottom:22px;
}
.lede{font-size:1.05rem; color:var(--text-dim); max-width:46ch; margin-bottom:14px;}
.lede-note{font-family:var(--font-mono); font-size:.82rem; color:var(--brass);}

.hero-tool{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  display:grid;
  gap:22px;
}
.tool-form{display:flex; flex-direction:column; gap:14px;}
.tool-form label{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:flex; flex-direction:column; gap:6px;
}
.tool-form input[type=text]{
  font-family:var(--font-body);
  font-size:.95rem;
  color:var(--text);
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
}
.tool-form input:focus{border-color:var(--indigo);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:420px){
  .row2{grid-template-columns:1fr;}
}
.swatches{display:flex; gap:10px; margin-top:2px;}
.swatch{
  width:30px; height:30px; border-radius:50%;
  background:var(--sw);
  border:2px solid transparent;
}
.swatch.active{border-color:var(--text);}
.tool-actions{display:flex; gap:10px; margin-top:4px;}
.credits-line{font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim);}

.receipt-stage{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  min-width:0;
}
.receipt-stage canvas{display:block; width:100%; height:auto; max-width:320px; border-radius:6px;}

/* FLOW */
.flow{padding:70px var(--pad); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt);}
.flow-steps{
  max-width:1100px; margin:0 auto;
  display:grid; gap:28px;
  grid-template-columns:repeat(3,1fr);
}
.flow-step{border-left:2px solid var(--brass); padding-left:18px;}
.flow-index{
  display:block;
  font-family:var(--font-display);
  font-size:1.15rem; font-weight:600;
  margin-bottom:8px;
}
.flow-step p{color:var(--text-dim); font-size:.95rem;}

/* GALLERY */
.gallery{padding:80px var(--pad); max-width:1320px; margin:0 auto;}
.gallery h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); margin:8px 0 40px;}
.gallery-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.gallery-grid canvas{
  display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-grid canvas:hover{
  transform:translateY(-6px) rotate(-0.6deg);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.gallery-grid canvas:nth-child(even):hover{ transform:translateY(-6px) rotate(0.6deg); }

/* PRICING */
.pricing{padding:80px var(--pad); border-top:1px solid var(--line); background:var(--bg-alt);}
.pricing h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); margin:8px 0 12px; max-width:26ch;}
.pricing .lede{margin:0 auto 44px;}
.price-grid{
  max-width:1100px; margin:0 auto;
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px; display:flex; flex-direction:column; gap:10px;
  position:relative;
  transition:transform .2s ease, border-color .2s ease;
}
.price-card:hover{transform:translateY(-4px);}
.price-card.featured{border-color:var(--brass);}
.price-card .tag{
  position:absolute; top:-11px; right:20px;
  background:var(--brass); color:#FFF8F5;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600;
  padding:4px 10px; border-radius:20px; letter-spacing:.04em;
}
.tier{font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);}
.price{font-family:var(--font-display); font-size:1.9rem; font-weight:700;}
.price span{font-family:var(--font-body); font-size:.8rem; color:var(--text-dim); font-weight:400;}
.tier-desc{color:var(--text-dim); font-size:.88rem; margin-bottom:6px;}
.price-card ul{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.price-card li{font-size:.86rem; color:var(--text-dim);}
.price-card li::before{content:"— "; color:var(--brass);}
.price-card .btn{margin-top:auto;}

/* FAQ */
.faq{padding:80px var(--pad); max-width:820px; margin:0 auto;}
.faq h2{font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); margin:8px 0 36px;}
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.faq-list summary{
  cursor:pointer; font-weight:600; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-list summary::after{content:"+"; color:var(--brass); font-size:1.3rem;}
.faq-list details[open] summary::after{content:"–";}
.faq-list p{color:var(--text-dim); margin-top:12px; font-size:.92rem; max-width:62ch;}

/* FOOTER */
.footer{
  padding:48px var(--pad) 60px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
  color:var(--text-dim); font-size:.85rem;
}

.credit-line{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.credit-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim);
}
.credit-link{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--card);
  transition:border-color .15s ease, transform .15s ease;
}
.credit-link:hover{border-color:var(--brass); transform:translateY(-1px);}
.credit-logo{
  height:26px; width:auto;
  border-radius:6px;
  display:block;
}
.x-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--text); color:var(--bg);
  font-size:.68rem; font-weight:600; line-height:1;
  flex-shrink:0;
}
.credit-handle{
  font-family:var(--font-mono); font-size:.82rem; color:var(--text);
  white-space:nowrap;
}

@media (max-width:520px){
  .credit-line{justify-content:center; text-align:center;}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding-top:40px;}
  .flow-steps{grid-template-columns:1fr;}
}

@media (max-width:600px){
  .hero-tool{padding:18px;}
  .receipt-stage{padding:10px;}
  .tool-actions{flex-wrap:wrap;}
  .tool-actions .btn{flex:1 1 auto;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .ticker{animation:none;}
  .gallery-grid canvas, .price-card, .btn{transition:none;}
}