:root{--bg:#0b0b0d;--panel:#151519;--text:#f5f3ef;--muted:#a8a8b0;--line:#2b2b31;--accent:#ff5a45;--accent2:#ff7b69;--radius:22px;--max:1040px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 400px at 50% -120px,rgba(255,90,69,.14),transparent 62%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}.shell{width:min(100%,var(--max));margin:0 auto;padding:0 18px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:750}.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 28px rgba(255,90,69,.8)}.ghost-link{border:0;background:none;color:var(--muted);padding:8px}.hero{padding:42px 0 74px;text-align:center}.eyebrow{font-size:.73rem;letter-spacing:.17em;font-weight:800;color:var(--accent);margin-bottom:14px}h1,h2,h3{font-family:"Space Grotesk",Inter,system-ui,sans-serif;letter-spacing:-.035em;margin-top:0}h1{font-size:clamp(3rem,10vw,6.7rem);line-height:.91;margin-bottom:22px}h2{font-size:clamp(2rem,6vw,3.55rem);line-height:1.02}h3{font-size:1.25rem}.hero-copy{max-width:560px;margin:0 auto 26px;color:var(--muted);font-size:1.06rem;line-height:1.6}.demo-card{max-width:630px;margin:28px auto 26px}.demo-photo{position:relative;height:370px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:linear-gradient(140deg,#5d463b,#b2846c 52%,#6c4e41);box-shadow:0 35px 85px rgba(0,0,0,.35)}.skin-art{position:absolute;inset:0;background:radial-gradient(circle at 63% 54%,rgba(0,0,0,.06) 0 2%,transparent 3%),linear-gradient(120deg,rgba(255,255,255,.09),transparent 32%,rgba(0,0,0,.12))}.tattoo-mark{position:absolute;right:25%;top:43%;font-size:90px;line-height:1;color:#121012;transform:rotate(-14deg) skewX(-5deg);opacity:.82}.demo-cover{position:absolute;inset:0;background:linear-gradient(140deg,#5d463b,#b2846c 52%,#6c4e41);clip-path:inset(0 44% 0 0);pointer-events:none}.demo-divider{position:absolute;top:0;bottom:0;left:56%;width:2px;background:#fff;pointer-events:none}.demo-photo input{position:absolute;z-index:5;inset:auto 0 0;width:100%;height:100%;opacity:0;cursor:ew-resize}.demo-labels{position:absolute;z-index:6;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;font-size:.68rem;font-weight:800;letter-spacing:.12em}.primary,.secondary{border-radius:15px;padding:15px 18px;font-weight:800;border:1px solid transparent;transition:.2s}.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 12px 36px rgba(255,90,69,.22)}.secondary{background:var(--panel);color:var(--text);border-color:var(--line)}.cta-xl{padding:18px 22px;min-width:min(100%,360px)}.trust-row{margin-top:14px;color:#d9d6d2;font-size:.84rem}.privacy-short{font-size:.75rem;color:#77777f;max-width:520px;margin:8px auto 0}.hidden{display:none!important}.flow{max-width:720px;margin:0 auto;padding:28px 0 90px}.progress-wrap{position:sticky;top:0;z-index:10;background:rgba(11,11,13,.92);backdrop-filter:blur(12px);padding:14px 0}.progress-text{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-bottom:9px}.progress-track{height:4px;background:#222228;border-radius:10px;overflow:hidden}.progress-fill{height:100%;width:33%;background:var(--accent);transition:width .35s}.step{padding:38px 0 14px}.muted{color:var(--muted);line-height:1.55}.upload-zone{display:grid;place-items:center;gap:8px;min-height:210px;margin:24px 0 18px;border:1.5px dashed #414149;border-radius:var(--radius);background:linear-gradient(180deg,#151519,#111114)}.upload-icon{font-size:32px}.upload-zone span{font-size:.8rem;color:var(--muted)}.file-preview{margin:18px 0;display:grid;gap:12px}.file-preview img{width:100%;max-height:430px;object-fit:cover;border-radius:20px;border:1px solid var(--line);background:#0f0f12}.tattoo-preview img{object-fit:contain;max-height:300px;padding:12px}.ai-note{padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:.88rem}.privacy-badge{margin-top:12px;color:#7f7f88;font-size:.75rem}.chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 28px}.chip{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:11px 15px}.chip.active{border-color:var(--accent);background:rgba(255,90,69,.11)}.loader-orb{width:82px;height:82px;border-radius:50%;margin:15px auto 28px;background:radial-gradient(circle at 35% 35%,#ff9c8d,var(--accent) 36%,#3a1713 70%);box-shadow:0 0 70px rgba(255,90,69,.27);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.08);filter:brightness(1.15)}}#loadingStep{text-align:center;padding-top:85px}.loading-lines{max-width:420px;margin:25px auto;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:8px 17px}.loading-lines div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #24242a;color:#ccc8c4}.loading-lines div:last-child{border:0}.result-card{position:relative;border-radius:24px;overflow:hidden;background:#111;border:1px solid var(--line);min-height:280px}.result-card canvas,.result-card img{width:100%;height:auto;display:block}.demo-pill{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.78);padding:6px 9px;border-radius:999px;font-size:.62rem;letter-spacing:.08em}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.price-box,.early-box{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.price-box{display:grid;gap:10px}.small-label{font-size:.65rem;font-weight:900;letter-spacing:.14em;color:var(--accent)}.early-box{text-align:center}.spark{font-size:30px;color:var(--accent)}#emailForm{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}#emailInput{min-width:0;padding:14px;border-radius:13px;background:#0f0f12;border:1px solid var(--line);color:var(--text)}.success{margin-top:12px;color:#d8f5df}.how{padding:50px 0 80px;border-top:1px solid #1c1c21}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.how article{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px}.how article>span{font-size:.72rem;color:var(--accent);font-weight:900}.how article h3{margin:35px 0 8px}.how article p{color:var(--muted);font-size:.88rem;line-height:1.55}footer{padding:28px 0 45px;border-top:1px solid #1c1c21;display:flex;justify-content:space-between;gap:12px;color:#6f6f77;font-size:.77rem}.footer-links{display:flex;gap:7px;align-items:center}dialog{width:min(calc(100% - 28px),650px);border:1px solid var(--line);border-radius:22px;background:#151519;color:var(--text);padding:28px}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}.dialog-close{float:right;background:none;border:0;color:var(--text);font-size:28px}dialog p{color:var(--muted);line-height:1.6}@media(max-width:680px){.topbar{height:62px}.brand{font-size:.88rem}.hero{padding-top:28px}.demo-photo{height:300px}.how-grid{grid-template-columns:1fr}.result-actions{grid-template-columns:1fr}#emailForm{grid-template-columns:1fr}footer{flex-direction:column}}

.top-actions{display:flex;align-items:center;gap:8px}
.language-wrap{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 8px}
.globe{font-size:.85rem}
.language-select{max-width:150px;border:0;outline:0;background:transparent;color:var(--text);font-size:.78rem;padding:5px 2px;cursor:pointer}
.language-select option{background:#151519;color:#f5f3ef}
@media(max-width:560px){
  .language-wrap{padding:3px 6px}
  .language-select{max-width:112px;font-size:.72rem}
  .top-actions .ghost-link{display:none}
}

/* Trynaro brand v0.4 */
.brand{
  letter-spacing:-.02em;
}
.brand-mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(145deg,var(--accent2),var(--accent));
  color:white;
  font-family:"Space Grotesk",Inter,system-ui,sans-serif;
  font-weight:900;
  font-size:1.05rem;
  line-height:1;
  box-shadow:0 8px 24px rgba(255,90,69,.18);
}
.brand-word{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif;
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:-.045em;
  text-transform:lowercase;
}
.hub-tagline{
  color:#77777f;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.01em;
  margin-bottom:18px;
}
footer strong{
  color:#aaa7a2;
  font-weight:800;
}

/* Trynaro split wordmark */
.brand-try{
  color:var(--accent);
}
.brand-naro{
  color:var(--text);
}


/* Trynaro Tattoo Preview v0.9 — compact conversion hero */
.brand-clean .brand-word{
  display:inline-flex;
  align-items:baseline;
  gap:0;
}
.brand-clean .brand-try,
.brand-clean .brand-naro{
  display:inline;
}
.hero-v3{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(430px,1.18fr);
  gap:52px;
  align-items:center;
  padding:26px 0 40px;
  text-align:left;
}
.hero-v3 .hero-copy-col{
  padding-top:8px;
}
.hero-v3 .eyebrow{
  margin-bottom:12px;
}
.hero-v3 h1{
  font-size:clamp(3rem,4.9vw,4.9rem);
  line-height:.93;
  letter-spacing:-.055em;
  margin:0 0 20px;
  max-width:560px;
}
.hero-v3 .hero-copy{
  margin:0 0 22px;
  max-width:500px;
  font-size:1rem;
}
.hero-v3 .hero-cta{
  width:min(100%,360px);
}
.hero-v3 .trust-row,
.hero-v3 .privacy-short{
  text-align:left;
  margin-left:0;
  max-width:470px;
}
.hero-visual-col{
  align-self:center;
  min-width:0;
}
.visual-kicker{
  margin:0 0 9px 4px;
  color:#77777f;
  font-size:.66rem;
  letter-spacing:.14em;
  font-weight:850;
}
.demo-real{
  margin:0;
  width:100%;
  max-width:620px;
}
.demo-real .demo-photo{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  max-height:650px;
  border-radius:26px;
  overflow:hidden;
  background:#151519;
  box-shadow:0 28px 70px rgba(0,0,0,.35);
}
.demo-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  user-select:none;
  pointer-events:none;
}
.demo-after-img{
  z-index:1;
}
.demo-before-layer{
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:30%;
  overflow:hidden;
}
.demo-before-layer .demo-before-img{
  width:200%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
.demo-real .demo-labels{
  z-index:6;
  top:13px;
}
.demo-real #demoRange{
  z-index:8;
}
.demo-real .demo-divider{
  z-index:7;
  left:30%;
  transform:translateX(-1px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.demo-divider span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.demo-caption{
  margin-top:8px;
  color:#77777f;
  font-size:.72rem;
  text-align:center;
}
@media(max-width:900px){
  .hero-v3{
    grid-template-columns:1fr;
    min-height:0;
    gap:26px;
    padding:30px 0 52px;
    text-align:center;
  }
  .hero-v3 .hero-copy-col{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero-v3 h1{
    font-size:clamp(3rem,10vw,4.6rem);
    max-width:650px;
  }
  .hero-v3 .hero-copy,
  .hero-v3 .trust-row,
  .hero-v3 .privacy-short{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  .hero-visual-col{
    width:min(100%,600px);
    margin:0 auto;
  }
  .visual-kicker{text-align:center}
}
@media(max-width:560px){
  .topbar{height:62px}
  .hero-v3{padding-top:18px;gap:22px}
  .hero-v3 h1{
    font-size:clamp(2.75rem,13vw,3.9rem);
    margin-bottom:15px;
  }
  .hero-v3 .hero-copy{
    font-size:.96rem;
    margin-bottom:18px;
  }
  .hero-v3 .hero-cta{
    width:100%;
  }
  .hero-v3 .demo-photo{
    aspect-ratio:4/5;
    border-radius:22px;
  }
}

/* v1.1 after-first comparison */
.demo-real .demo-labels span{
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 9px;
  border-radius:999px;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.demo-real .demo-divider{
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
}


/* v1.4 custom language menu — avoids native white Linux/Chrome dropdown */
.language-menu{
  position:relative;
  z-index:50;
}
.language-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:88px;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#111114;
  color:var(--text);
  font-weight:750;
  font-size:.78rem;
  cursor:pointer;
}
.language-trigger:hover,
.language-trigger[aria-expanded="true"]{
  border-color:#474750;
  background:#17171b;
}
.language-globe{font-size:.9rem}
.language-current{min-width:22px;text-align:center}
.language-chevron{
  color:#9b9ba4;
  font-size:.78rem;
  transform:translateY(-1px);
}
.language-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:225px;
  padding:7px;
  border:1px solid #303038;
  border-radius:16px;
  background:#151519;
  box-shadow:0 20px 60px rgba(0,0,0,.48);
  z-index:100;
}
.language-popover[hidden]{display:none!important}
.language-option{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:0;
  border-radius:11px;
  padding:11px 12px;
  background:transparent;
  color:#f5f3ef;
  text-align:left;
  font-size:.86rem;
  cursor:pointer;
}
.language-option:hover,
.language-option.is-active{
  background:#232329;
}
.language-option.is-active{
  color:#fff;
  box-shadow:inset 2px 0 0 var(--accent);
}
.language-option-code{
  color:#8d8d96;
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.08em;
}
@media(max-width:560px){
  .language-trigger{min-width:76px;padding:8px 10px}
  .language-popover{width:210px}
}

/* v1.5 compact product landing: show next section sooner */
.hero-v3{
  min-height:auto !important;
  padding:18px 0 26px !important;
  gap:42px !important;
}
.hero-v3 .hero-copy-col{
  padding-top:0 !important;
}
.hero-v3 h1{
  font-size:clamp(2.85rem,4.5vw,4.45rem) !important;
  margin-bottom:16px !important;
}
.hero-v3 .hero-copy{
  margin-bottom:18px !important;
}
.hero-v3 .trust-row{
  margin-top:10px !important;
}
.hero-v3 .privacy-short{
  margin-top:5px !important;
}
.demo-real{
  max-width:560px !important;
}
.demo-real .demo-photo{
  max-height:560px !important;
  aspect-ratio:4/5;
}
.how{
  padding:34px 0 58px !important;
}
@media(min-width:901px){
  .hero-v3{
    min-height:calc(82vh - 64px) !important;
    align-items:center;
  }
}
@media(max-width:900px){
  .hero-v3{
    padding:26px 0 38px !important;
    gap:24px !important;
  }
  .demo-real{
    max-width:520px !important;
  }
  .how{
    padding-top:28px !important;
  }
}
@media(max-width:560px){
  .hero-v3{
    padding:16px 0 32px !important;
  }
  .hero-v3 h1{
    font-size:clamp(2.55rem,12vw,3.6rem) !important;
  }
  .demo-real{
    max-width:100% !important;
  }
}