*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
:root{
  --brown:#1f1612;
  --brown-soft:#574840;
  --cream:#faf6f0;
  --surface:#ffffff;
  --orange:#ff5e14;
  --orange-hover:#e54d07;
  --green:#129968;
  --border:rgba(31,22,18,.1);
  --shadow-sm:0 4px 16px rgba(31,22,18,.06);
  --shadow-md:0 16px 40px -8px rgba(31,22,18,.1);
  --shadow-lg:0 28px 64px -12px rgba(31,22,18,.16);
}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  line-height:1.75;
  color:var(--brown);
  background:var(--cream);
  --c:hsl(var(--h) 78% 46%);
  --c2:hsl(calc(var(--h) + 28) 88% 56%);
  --cd:hsl(var(--h) 52% 18%);
  --cl:hsl(var(--h) 75% 94%);
  overflow-x:hidden;
  padding-top:68px;
}
a{color:inherit;text-decoration:none}
main{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3,p{margin:0}
h1{
  font-weight:900;
  font-size:clamp(2.1rem,4.6vw,3.5rem);
  line-height:1.22;
  letter-spacing:-.02em;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
h2{
  font-weight:900;
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.28;
  letter-spacing:-.015em;
  margin:0 0 .5em;
}
h2.big{
  font-size:clamp(1.85rem,4.2vw,3rem);
  line-height:1.22;
}
.sec-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 2.8rem;
}
.sec-eyebrow{
  display:inline-block;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c);
  background:var(--cl);
  padding:.35em 1em;
  border-radius:999px;
  margin-bottom:.9rem;
}

/* Header / Brandbar */
.brandbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(250,246,240,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.brand-in{
  max-width:1240px;
  margin:0 auto;
  height:68px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand-left{display:flex;align-items:center;gap:12px;min-width:0}
.logo-link{display:flex;align-items:center;line-height:0;flex-shrink:0}
.logo-link img{height:32px;width:auto;display:block}
.ind-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.82rem;
  font-weight:900;
  background:var(--surface);
  border:1px solid var(--border);
  padding:.3em .85em;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.03);
}
.ind-badge i{font-style:normal}
.page-nav{display:flex;align-items:center;gap:18px;font-size:.86rem;font-weight:700}
.page-nav a{opacity:.75;transition:opacity .2s,color .2s;white-space:nowrap}
.page-nav a:hover{opacity:1;color:var(--orange)}
.brand-right{display:flex;align-items:center;gap:10px}
.style-sw{
  display:flex;
  background:rgba(31,22,18,.06);
  padding:3px;
  border-radius:999px;
  gap:2px;
}
.st-pill{
  font-size:.73rem;
  font-weight:900;
  padding:.3em .75em;
  border-radius:999px;
  opacity:.7;
  transition:all .2s;
  white-space:nowrap;
}
.st-pill:hover{opacity:1}
.st-pill.cur{
  background:var(--surface);
  color:var(--brown);
  opacity:1;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.head-cta{
  background:var(--orange);
  color:#fff;
  font-weight:900;
  font-size:.82rem;
  padding:.55em 1.15em;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(255,94,20,.35);
  transition:transform .2s,background .2s;
}
.head-cta:hover{transform:translateY(-1px);background:var(--orange-hover)}
@media(max-width:1060px){.page-nav{display:none}}
@media(max-width:760px){
  .style-sw{display:none}
  .brand-in{height:60px;padding:0 14px}
  body{padding-top:60px}
  .logo-link img{height:26px}
  .ind-badge{font-size:.75rem;padding:.25em .65em}
  .head-cta{font-size:.76rem;padding:.48em .95em}
}

/* Primary CTA Button */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,#ff6a22 0%,#f04800 100%);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:1.08rem;
  padding:.95em 1.85em;
  border-radius:999px;
  box-shadow:0 14px 32px -8px rgba(240,72,0,.5),0 0 0 1px rgba(255,255,255,.2) inset;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
  line-height:1.25;
}
.cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -8px rgba(240,72,0,.65),0 0 0 1px rgba(255,255,255,.3) inset;
}
.cta span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.cta small{font-size:.72rem;font-weight:700;opacity:.92;margin-top:2px}
.cta .ap-ico{width:22px;height:22px;flex-shrink:0}
.cta .arr{font-style:normal;font-size:1.1em;transition:transform .2s}
.cta:hover .arr{transform:translateX(4px)}

.fine{font-size:.8rem;color:var(--brown-soft);margin-top:.85em;line-height:1.55}
.note{font-size:.92rem;color:var(--brown-soft);margin-bottom:1.2em}
.eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1.5px solid hsl(var(--h) 65% 80%);
  color:var(--cd);
  font-weight:900;
  font-size:.88rem;
  padding:.4em 1.05em;
  border-radius:999px;
  margin-bottom:1.2rem;
  box-shadow:var(--shadow-sm);
}
.ep-emo{font-size:1.15em}
.lead{font-size:clamp(1.05rem,1.8vw,1.22rem);font-weight:700;margin:.9em 0 1.3em;color:var(--brown)}
.lead-sub{display:block;font-size:.92rem;font-weight:500;color:var(--brown-soft);margin-top:.45em;line-height:1.65}

/* Hero Value Chips */
.hero-chips{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.hero-chips li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hero-chips b{
  font-size:.86rem;
  font-weight:900;
  color:var(--c);
  display:flex;
  align-items:center;
  gap:4px;
}
.hero-chips b:before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--cl);color:var(--c);font-size:.7rem}
.hero-chips span{font-size:.75rem;color:var(--brown-soft);font-weight:700;line-height:1.35}
@media(max-width:560px){
  .hero-chips{grid-template-columns:1fr;gap:8px}
  .hero-chips li{flex-direction:row;align-items:center;justify-content:space-between;padding:9px 14px}
}

/* Hero layout */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:2.8rem;
  align-items:center;
  padding:3.2rem 0 3.6rem;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:left;padding:2rem 0 2.5rem;gap:2.2rem}
}
.hero-copy,.hero .stage{position:relative;z-index:1}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center}
.phone-wrap{display:flex;flex-direction:column;align-items:center;width:100%}
.img-note{font-size:.74rem;color:var(--brown-soft);margin-top:.75em;text-align:center}

/* Scene Switcher Tabs above phone */
.sc-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-bottom:14px;
  background:var(--surface);
  padding:5px;
  border-radius:999px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.sc-tabs button{
  font:inherit;
  font-size:.74rem;
  font-weight:900;
  border:0;
  background:transparent;
  color:var(--brown-soft);
  padding:.4em .85em;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s;
}
.sc-tabs button.on{
  background:var(--brown);
  color:#fff;
}

/* Phone Mockup */
.phone{
  position:relative;
  width:min(308px,82vw);
  aspect-ratio:300/620;
  border-radius:48px;
  background:linear-gradient(145deg,#2a2829,#121113);
  padding:11px;
  box-shadow:0 36px 72px -20px rgba(31,22,18,.38),0 0 0 2px #3e3a3d inset,0 0 0 1px rgba(0,0,0,.6);
  transition:transform .4s ease;
}
.notch{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:92px;
  height:24px;
  background:#000;
  border-radius:20px;
  z-index:4;
}
.screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:38px;
  overflow:hidden;
  --c:#ea5628;--c2:#ff7a3d;--cl:#2c2622;--cd:#f3ece4;
  background:#1f1a17;
  color:#f3ece4;
}
.sc{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s ease;
  padding:52px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}
.sc.on{opacity:1}
.sc img,img.sc{width:100%;height:100%;object-fit:cover;padding:0}
.bar{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--c);padding-bottom:6px}
.bar b{font-size:1.05rem}.bar span{font-size:.75rem;opacity:.6}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{border-radius:14px;background:var(--cl);padding:12px 8px;display:flex;flex-direction:column;gap:2px;font-size:.78rem;font-weight:700;color:#f3ece4;border:2px solid transparent}
.tile b{font-size:.95rem}
.foot-sc{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;font-weight:900;border-top:2px dashed #fff3;padding-top:8px}
.cartl{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.85rem}
.cartl li{display:flex;justify-content:space-between;border-bottom:1px solid #fff2;padding:6px 0}
.go{background:var(--c);color:#fff;text-align:center;font-weight:900;border-radius:14px;padding:.8em}
.nav{display:flex;gap:10px;align-items:baseline;font-size:.72rem;color:#8c8076;font-weight:700}
.nav b{flex:1;color:#f3ece4;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .o{color:#ea5628}
.sc-keypad{gap:7px}
.sc-keypad .disp{background:#14100e;border-radius:14px;padding:14px 12px 8px;text-align:right}
.sc-keypad .disp b{font-size:1.85rem;color:#f3ece4;display:block;line-height:1.15}
.sc-keypad .disp .lines{text-align:left;display:grid;font-size:.72rem;color:#9a8f85;margin-bottom:4px;line-height:1.45}
.sc-keypad .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sc-keypad .keys i{font-style:normal;text-align:center;background:var(--cl);color:var(--cd);padding:.52em 0;font-size:.95rem;font-weight:900;border-radius:11px}
.keys.k3 i.d{background:#14100e;color:#9a8f85;font-size:.75rem}
.keys.k3 i.ol{background:transparent;border:2px solid #ea5628;color:#ea5628;font-size:.75rem}
.tap{background:#ea5628;color:#fff;text-align:center;font-weight:900;border-radius:14px;padding:.75em;font-size:.86rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.two i{font-style:normal;background:#3a322b;text-align:center;border-radius:12px;padding:.75em .2em;font-size:.68rem;font-weight:900}
.sc-pay{background:#0b0a09;padding:56px 12px 12px;justify-content:center;align-items:center;text-align:center;color:#fff}
.modal{background:#201b18;border:1px solid #3a322b;border-radius:22px;padding:16px 10px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}
.modal .mt{font-weight:900;font-size:.95rem}
.modal .amt{font-size:1.9rem;font-weight:900}
.modal .ms{font-size:.62rem;color:#a2937f;font-weight:700;line-height:1.5}
.ringw{position:relative;width:124px;height:124px;margin:8px 0;display:grid;place-items:center}
.ringw .rings{position:absolute;inset:0;margin:0}
.ringw .rings i{position:absolute;inset:0;border:3px solid #ea5628;border-radius:50%;opacity:0}
.sc-pay.on .rings i{animation:ring 2s infinite}
.rings i:nth-child(2){animation-delay:.6s!important}
@keyframes ring{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.22);opacity:0}}
.ringw:before{content:"";position:absolute;inset:6px;border:2px solid #ea5628;border-radius:50%}
.sc .aicon{position:relative;width:66px;height:66px;object-fit:contain;border-radius:16px;box-shadow:0 0 24px #ea562866}
.cancel{width:100%;border:1px solid #3a322b;border-radius:14px;padding:.65em;font-weight:900;font-size:.78rem;color:#a2937f}
.sc-done{align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#1f1a17,#2c2622)}
.check{width:88px;height:88px;border-radius:50%;background:var(--c);position:relative;transform:scale(0);margin-bottom:8px}
.sc-done.on .check{animation:pop .5s .1s cubic-bezier(.3,1.6,.5,1) forwards}
.check:after{content:"";position:absolute;left:28px;top:18px;width:22px;height:40px;border:solid #fff;border-width:0 8px 8px 0;transform:rotate(45deg)}
@keyframes pop{to{transform:scale(1)}}
.amt{font-size:2.1rem;font-weight:900}
.say{font-weight:700;font-size:.95rem}
.rc{margin-top:10px;font-size:.8rem;border:2px solid #f3ece4;border-radius:999px;padding:.4em 1.2em;font-weight:700}
.sc-qr{align-items:center;justify-content:center;text-align:center;color:#f3ece4;gap:12px}
.qr{display:grid;grid-template-columns:repeat(9,1fr);width:168px;height:168px;gap:0;border:8px solid #fff;border-radius:12px;background:#fff}
.qr u{background:#fff}.qr u.k{background:#111}
.qsub{font-size:.72rem;opacity:.75}

/* Theme switcher */
.themes{display:flex;align-items:center;gap:6px;margin-top:1rem;flex-wrap:wrap;justify-content:center}
.th-lbl{font-size:.75rem;font-weight:700;opacity:.7;margin-right:2px}
.themes button{
  font:inherit;font-weight:900;font-size:.76rem;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--brown);
  border-radius:999px;
  padding:.35em .9em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .2s;
}
.themes button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%}
.sw-br{background:#ea5628}.sw-cr{background:#a8325c}.sw-gr{background:#2fd6a0}
.screen.th-cream{--c:#a8325c;--c2:#c8527c;--cl:#fffaf2;--cd:#2b1a10;background:#f4e3cf;color:#2b1a10}
.screen.th-cream .nav b,.screen.th-cream .disp b{color:#2b1a10}
.screen.th-cream .nav{color:#7a6a5c}
.screen.th-cream .sc-keypad .disp{background:#fffaf2}
.screen.th-cream .disp .lines{color:#7a6a5c}
.screen.th-cream .keys i,.screen.th-cream .tile{background:#fffaf2;color:#2b1a10}
.screen.th-cream .keys.k3 i.d{background:#ead7c0;color:#7a6a5c}
.screen.th-cream .two i{background:#ecdcdf;color:#2b1a10}
.screen.th-cream .nav .o,.screen.th-cream .keys.k3 i.ol{color:#a8325c;border-color:#a8325c}
.screen.th-cream .tap{background:#a8325c}
.screen.th-cream .sc-done{background:linear-gradient(160deg,#fffaf2,#f4e3cf)}
.screen.th-cream .sc-pay{background:#e9d3b8;color:#2b1a10}
.screen.th-cream .modal{background:#fffaf2;border-color:#e2cdb2}
.screen.th-cream .modal .ms,.screen.th-cream .cancel{color:#7a6a5c;border-color:#e2cdb2}
.screen.th-cream .ringw .rings i,.screen.th-cream .ringw:before{border-color:#a8325c}
.screen.th-green{--c:#2fd6a0;--c2:#5be8bd;--cl:#1a2d27;background:#0f1d19}
.screen.th-green .nav .o,.screen.th-green .keys.k3 i.ol{color:#2fd6a0;border-color:#2fd6a0}
.screen.th-green .tap{background:#2fd6a0;color:#06251c}
.screen.th-green .sc-keypad .disp{background:#0a1411}
.screen.th-green .two i{background:#1f3a31}
.screen.th-green .sc-pay{background:#0a1411}
.screen.th-green .modal{background:#14231d;border-color:#24443a}
.screen.th-green .ringw .rings i,.screen.th-green .ringw:before{border-color:#2fd6a0}
.screen.th-green .sc-done{background:linear-gradient(160deg,#0f1d19,#1a2d27)}

/* Real Screenshots Section */
.real{padding:4.5rem 0}
.pairphones{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:2rem;
}
.rp{
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  padding:1.6rem 1.4rem 1.8rem;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.rp:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rp-badge{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--c);
  background:var(--cl);
  padding:.3em .9em;
  border-radius:999px;
  margin-bottom:1rem;
}
.realp{
  width:min(264px,74vw);
  aspect-ratio:720/1420;
  padding:9px;
  border-radius:40px;
  box-shadow:0 20px 44px -15px rgba(0,0,0,.35),0 0 0 2px #333 inset;
}
.realp .notch{width:76px;height:18px;top:14px}
.realp .screen{background:#1f1a17;padding-top:0;border-radius:32px}
.realimg{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#1f1a17}
.rp figcaption{margin-top:1.25rem;display:flex;flex-direction:column;gap:6px}
.rp figcaption strong{font-weight:900;font-size:1.2rem;color:var(--brown)}
.rp figcaption span{font-size:.86rem;color:var(--brown-soft);line-height:1.55}

/* 10 Features Grid & Sample Box */
.feat-sec{padding:4.5rem 0}
.feat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px;
}
.feat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:1.35rem 1.25rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s,border-color .2s;
}
.feat-card:hover{transform:translateY(-3px);border-color:var(--c)}
.feat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem}
.feat-ico{
  width:42px;height:42px;
  border-radius:12px;
  background:var(--cl);
  display:grid;place-items:center;
  font-size:1.3rem;
}
.feat-num{font-size:.78rem;font-weight:900;color:var(--c);opacity:.75;letter-spacing:.08em}
.feat-card h3{font-size:1.04rem;font-weight:900;margin-bottom:.35rem;line-height:1.35}
.feat-card p{font-size:.86rem;color:var(--brown-soft);line-height:1.6}

.sample-box{
  margin-top:2rem;
  background:linear-gradient(135deg,var(--surface),var(--cl));
  border:1.5px solid hsl(var(--h) 55% 82%);
  border-radius:26px;
  padding:1.8rem 2rem;
  box-shadow:var(--shadow-sm);
}
.sample-head h3{font-size:1.25rem;font-weight:900;margin:.2rem 0 .4rem}
.sample-head p{font-size:.88rem;color:var(--brown-soft);margin-bottom:1.2rem}
.sample-pills{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
}
.sample-pills li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.65rem .95rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.9rem;
}
.sp-no{font-size:.72rem;font-weight:900;color:var(--c);background:var(--cl);padding:.15em .5em;border-radius:6px}
.sp-name{font-weight:700;flex:1}
.sp-price{font-weight:900;color:var(--brown)}

/* Interactive Live Demo */
.try{padding:4.5rem 0}
.demo-shell{
  width:min(580px,100%);
  border-radius:28px;
  overflow:hidden;
  background:#1f1a17;
  border:2px solid #3a322b;
  box-shadow:0 32px 64px -20px rgba(31,22,18,.35);
}
.demo-head{
  background:#14100e;
  color:#f3ece4;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #2e2621;
  font-size:.85rem;
  font-weight:900;
}
.demo-dots{display:flex;gap:6px}
.demo-dots i{width:10px;height:10px;border-radius:50%;background:#ff5f56;display:block}
.demo-dots i:nth-child(2){background:#ffbd2e}
.demo-dots i:nth-child(3){background:#27c93f}
.demo-head small{font-size:.72rem;color:#ea5628;background:rgba(234,86,40,.14);padding:.25em .7em;border-radius:999px}
.demo{
  padding:20px;
  background:var(--surface);
  display:grid;
  gap:14px;
  width:100%;
  color:#1b1b1f;
}
.demo .items{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  gap:8px;
}
.demo button{
  font:inherit;
  border:1.5px solid hsl(var(--h) 45% 84%);
  border-radius:14px;
  padding:.75em .65em;
  background:var(--cl);
  color:var(--cd);
  cursor:pointer;
  font-weight:900;
  font-size:.9rem;
  transition:transform .12s,background .15s,border-color .15s;
}
.demo button:hover{border-color:var(--c)}
.demo button b{display:block;font-size:1.05rem;margin-top:2px;color:var(--c)}
.demo button:active{transform:scale(.96)}
.demo .free{display:flex;gap:8px}
.demo .free input{
  flex:1;
  font:inherit;
  font-weight:700;
  padding:.7em .9em;
  border:1.5px solid rgba(0,0,0,.18);
  border-radius:12px;
  min-width:0;
  font-size:.95rem;
}
.demo .free .addfree{
  background:var(--brown);
  color:#fff;
  border-color:var(--brown);
  padding:.7em 1.3em;
}
.demo .cart{
  list-style:none;
  margin:0;
  padding:10px 14px;
  min-height:3.2em;
  background:#f8f5f0;
  border-radius:14px;
  border:1px inset rgba(0,0,0,.06);
}
.demo .cart li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:.35em 0;
  border-bottom:1px dashed rgba(0,0,0,.12);
  font-weight:700;
  font-size:.92rem;
}
.demo .cart li:last-child{border-bottom:0}
.demo .cart button{
  padding:.15em .65em;
  margin-left:8px;
  background:#fff;
  color:#d9381e;
  border:1px solid rgba(217,56,30,.3);
  border-radius:8px;
}
.demo .total{
  font-size:1.9rem;
  font-weight:900;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:8px 14px;
  background:#14100e;
  color:#f3ece4;
  border-radius:14px;
}
.demo .total span:first-child{font-size:.9rem;color:#9a8f85}
.demo .pay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo .pay button{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  padding:.9em;
  font-size:.96rem;
  box-shadow:0 8px 20px -6px rgba(255,94,20,.45);
}
.demo .pay button[data-p="cash"]{
  background:#2d2520;
  border-color:#2d2520;
  box-shadow:none;
}
.demo .msg{
  min-height:1.6em;
  font-weight:900;
  color:var(--green);
  text-align:center;
  font-size:.95rem;
}
.demo .reset{
  background:#f0ece6;
  border-color:transparent;
  color:#574840;
  padding:.55em;
  font-size:.82rem;
}

/* Pricing Card */
.pricing{padding:3.5rem 0}
.price-card{
  background:linear-gradient(145deg,#231a15 0%,#140f0c 100%);
  color:#f7f2eb;
  border-radius:32px;
  padding:clamp(1.8rem,4vw,3.2rem);
  box-shadow:0 32px 72px -20px rgba(31,22,18,.4);
  border:1px solid rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
}
.price-badge{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  font-weight:900;
  font-size:.82rem;
  padding:.35em 1.1em;
  border-radius:999px;
  margin-bottom:1.2rem;
}
.price-main{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:2.5rem;
  align-items:center;
}
@media(max-width:820px){.price-main{grid-template-columns:1fr;gap:1.8rem}}
.price-sub{font-size:.95rem;color:#c7b8ab;font-weight:700}
.pn{
  font-weight:900;
  font-size:clamp(3.2rem,8vw,5.2rem);
  line-height:1.05;
  color:#fff;
  margin:.15em 0;
}
.pn small{font-size:.28em;margin-left:.25em;color:#c7b8ab;font-weight:700}
.pt{font-weight:900;font-size:1.25rem;color:#ffb088}
.price-card .fine{color:#b0a093;margin-top:.75rem}
.price-cta{margin-top:1.5rem}
.price-right{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  padding:1.5rem 1.6rem;
}
.pr-title{font-weight:900;font-size:.95rem;color:#ffb088;margin-bottom:.85rem}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.88rem}
.pr-list li{display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.pr-list li span{color:#ff7a3d;font-weight:900}

/* Tape */
.tape{
  overflow:hidden;
  white-space:nowrap;
  background:var(--brown);
  color:#faf6f0;
  margin:1.5rem -24px;
  padding:.75em 0;
  font-weight:900;
  font-size:clamp(1rem,2.2vw,1.25rem);
}
.track{display:inline-block;animation:slide 34s linear infinite}
.tape span{margin:0 1.2em;display:inline-flex;align-items:center;gap:8px}
.tape span i{color:var(--orange);font-style:normal;font-size:.75em}
@keyframes slide{to{transform:translateX(-33.33%)}}

/* FAQ */
.faq{padding:3.5rem 0}
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
details{
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.05em 1.35em;
  background:var(--surface);
  color:var(--brown);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s;
}
details[open]{border-color:var(--c)}
summary{
  cursor:pointer;
  font-weight:900;
  font-size:1.04rem;
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
}
summary::-webkit-details-marker{display:none}
.q-mark{
  background:var(--cl);
  color:var(--c);
  font-size:.8rem;
  font-weight:900;
  padding:.25em .65em;
  border-radius:8px;
  flex-shrink:0;
}
.q-txt{flex:1}
summary:after{
  content:"+";
  font-size:1.3rem;
  color:var(--c);
  font-weight:900;
  transition:transform .2s;
}
details[open] summary:after{transform:rotate(45deg)}
.faq-ans{padding:.85rem 0 .2rem 2.8rem;color:var(--brown-soft);font-size:.95rem}

/* End CTA Section */
.end{padding:3.5rem 0 5rem}
.end-card{
  background:linear-gradient(135deg,var(--cl),#fff);
  border:2px solid hsl(var(--h) 60% 84%);
  border-radius:32px;
  padding:clamp(2.2rem,5vw,4rem) 1.5rem;
  text-align:center;
  box-shadow:var(--shadow-md);
}
.end-emo{font-size:3rem;display:block;margin-bottom:.5rem}
.end .cta{margin-top:1rem}

/* Footer & Sticky Mobile Bar */
.foot{
  border-top:1px solid var(--border);
  background:rgba(31,22,18,.03);
  padding:36px 24px 100px;
  font-size:.82rem;
  color:var(--brown-soft);
}
.foot-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.foot-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.foot-styles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.foot-copy a{text-decoration:underline;font-weight:700}

.bar-cta{
  position:fixed;left:0;right:0;bottom:0;
  padding:10px 16px 14px;
  background:rgba(250,246,240,.92);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  text-align:center;
  z-index:90;
  display:none;
}
.bar-cta .cta{margin:0;padding:.8em 1.4em;width:100%;max-width:460px;font-size:.98rem}
@media(max-width:760px){.bar-cta{display:block}}

/* Photo Band */
.pband{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:1.5rem 0}
.pband img{width:100%;height:clamp(220px,34vw,360px);object-fit:cover;display:block;border-radius:24px;box-shadow:var(--shadow-md)}
.panel.img img{width:100%;display:block;object-fit:cover}

/* Hero Photo Mode */
.hasimg .hero{
  background:linear-gradient(95deg,rgba(18,12,8,.88) 0%,rgba(18,12,8,.65) 55%,rgba(18,12,8,.3) 100%),var(--hero) center/cover;
  border-radius:32px;
  padding:3rem 2.4rem;
  margin-top:1rem;
  color:#fff;
}
.hasimg .hero .lead,.hasimg .hero .lead-sub,.hasimg .hero .fine{color:rgba(255,255,255,.88)}

/* Scroll Reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .check{transform:scale(1)}
}