/* Sawme website — shared styles (extracted from the original one-file design) */

:root{
  --rpx: calc(100vw / 750);          /* responsive unit, same scale as mini-program rpx */
  --u: clamp(11px, calc(100vw / 96), 17px);
  --bg:#0b0b0c;
  --ink:#f6f6f7;
  --dim:#a3a3ab;
  --dim2:#9a9aa2;
  --pink:#ff2e63;
  --yellow:#ffd166;
  --panel:#0f0f11;
  --hair:rgba(255,255,255,.09);
  --display:'Baloo 2','Noto Sans JP',sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}

html{font-size:var(--u);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,"Noto Sans JP","PingFang SC",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%}
a{color:var(--pink);text-decoration:none;transition:color .2s ease,background .25s ease,box-shadow .3s ease,transform .2s ease}
a:hover{color:#ff6b91}
::selection{background:var(--pink);color:#fff}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- layout shell ---------- */
.page{position:relative;overflow:hidden}
.wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}
.glow-a,.glow-b{position:absolute;pointer-events:none;filter:blur(20px)}
.glow-a{
  top:-160px;left:50%;width:1100px;height:900px;margin-left:-820px;
  background:radial-gradient(45% 45% at 50% 50%,rgba(255,46,99,.30),transparent 70%);
  animation-name:glow;animation-duration:9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.glow-b{
  top:520px;right:-320px;width:900px;height:900px;
  background:radial-gradient(45% 45% at 50% 50%,rgba(255,209,102,.16),transparent 70%);
}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:16px 0;
  background:rgba(11,11,12,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:36px;height:36px;border-radius:11px;display:block;box-shadow:0 0 22px rgba(255,46,99,.55)}
.brand span{font:800 23px/1 var(--display);color:var(--ink);letter-spacing:-.02em}
.nav{display:flex;flex:1;justify-content:center;gap:clamp(10px,2.2vw,30px);flex-wrap:wrap;font:600 13px/1 var(--mono);letter-spacing:.02em}
.nav a{color:#8b8b93}
.nav a:hover{color:#fff}
.header-right{display:flex;align-items:center;gap:10px;flex:none}
.lang{display:flex;padding:3px;border-radius:99px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.lang button{
  padding:6px 12px;border:0;border-radius:99px;cursor:pointer;background:transparent;color:#8b8b93;
  font:700 12px/1 var(--mono);
}
.lang button[data-lang-btn="ja"]{font-family:'Noto Sans JP',sans-serif}
.lang button[aria-pressed="true"]{background:var(--pink);color:#fff}
.btn-get{
  padding:10px 18px;border-radius:99px;background:var(--pink);color:#fff;
  font:700 13px/1 inherit;white-space:nowrap;box-shadow:0 0 24px rgba(255,46,99,.4);
}
.btn-get:hover{background:#ff5580;color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(48px,8vw,110px) 0 clamp(24px,3vw,40px)}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.dot{
  width:9px;height:9px;border-radius:99px;background:var(--pink);flex:none;
  box-shadow:0 0 14px var(--pink);
  animation-name:pulse;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.eyebrow span{font:700 15px/1 inherit;letter-spacing:.02em;color:var(--pink)}
.eyebrow i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,46,99,.5),transparent)}
.hero h1{margin:0;max-width:15em;font:800 clamp(44px,8.4vw,112px)/.94 var(--display);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--pink);text-shadow:0 0 60px rgba(255,46,99,.45)}
.hero p{margin:clamp(26px,3.4vw,40px) 0 0;max-width:26em;font:400 clamp(17px,1.8vw,22px)/1.55 inherit;color:#b6b6bd}
.store-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(30px,4vw,48px)}

/* ---------- store badges ---------- */
.badge{
  display:flex;align-items:center;gap:14px;padding:13px 26px;border-radius:16px;background:#0b0b0c;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);
}
.badge:hover{background:#17171a;transform:translateY(calc(var(--rpx) * -4))}
.badge:active{transform:translateY(1px)}
.badge svg,.badge img{width:26px;height:26px;flex:none;display:block}
.badge svg{width:28px;height:28px}
.badge b{display:flex;flex-direction:column;gap:1px;text-align:left;font-weight:400}
.badge small{font:400 11px/1.2 inherit;color:#c9c9ce}
.badge strong{font:700 19px/1.2 inherit;letter-spacing:-.015em;color:#fff}
.badge[data-store="play"] small{letter-spacing:.04em;text-transform:uppercase}
.on-pink .badge{box-shadow:none}

/* ---------- showcase ---------- */
.section{padding:clamp(40px,6vw,86px) 0}
.section-top{padding:clamp(40px,5vw,72px) 0 clamp(30px,4vw,54px);border-top:1px solid rgba(255,255,255,.08)}
.h2{margin:0 0 clamp(26px,3.4vw,42px);max-width:24em;font:800 clamp(30px,4.6vw,60px)/1.02 var(--display);letter-spacing:-.03em}
.shots{display:flex;gap:clamp(10px,1.4vw,22px);overflow-x:auto;padding:10px 0 14px;scrollbar-width:thin}
.shot{display:flex;flex-direction:column;gap:.8rem;flex:1 1 0;min-width:min(136px,24vw)}
.shot:nth-child(2),.shot:nth-child(4){margin-top:calc(var(--rpx) * 46)}
.shot figure{
  position:relative;margin:0;border-radius:26px;overflow:hidden;background:#000;
  box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.12);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease;
}
.shot:nth-child(1) figure,.shot:nth-child(5) figure{box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,46,99,.55)}
.shot:nth-child(3) figure{box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,209,102,.5)}
.shot figure:hover{transform:translateY(calc(var(--rpx) * -18)) scale(1.03)}
.shot img{display:block;width:100%;height:auto}
.shot span{font:800 clamp(17px,1.6vw,21px)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.shot:nth-child(1) span,.shot:nth-child(5) span{color:var(--pink)}
.shot:nth-child(3) span{color:var(--yellow)}

/* ---------- steps / stats grid ---------- */
.grid-hair{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--hair);border-radius:26px;overflow:hidden;
}
.step{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(28px,3vw,40px);background:var(--panel);overflow:hidden;transition:background .3s ease}
.step:hover{background:#141417}
.step i{position:absolute;right:14px;bottom:-22px;font:800 118px/1 var(--display);font-style:normal;color:rgba(255,255,255,.05);pointer-events:none}
.step span{font:800 clamp(21px,2vw,25px)/1.25 var(--display);letter-spacing:-.015em}
.stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:clamp(40px,6vw,86px)}
.stat{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,2.4vw,30px);background:var(--panel)}
.stat b{font:800 clamp(26px,3vw,34px)/1 var(--display);letter-spacing:-.02em;color:var(--yellow)}
.stat span{font:400 13.5px/1.55 inherit;color:#8f8f97}

/* ---------- feature cards ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(14px,1.8vw,22px);padding:0 0 clamp(40px,6vw,86px)}
.card{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.8vw,36px);
  border-radius:28px;background:#101012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,background .3s ease;
}
.card:hover{transform:translateY(calc(var(--rpx) * -11))}
.card:first-child{background:#170d13;box-shadow:inset 0 0 0 1px rgba(255,46,99,.3)}
.card::after{
  content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;border-radius:99px;
  background:rgba(154,215,255,.1);filter:blur(30px);pointer-events:none;
}
.card:first-child::after{background:rgba(255,46,99,.22)}
.card:last-child::after{background:rgba(255,209,102,.1)}
.card u{position:relative;display:block;width:26px;height:4px;border-radius:99px;background:#9ad7ff}
.card:first-child u{background:#ff8fab}
.card:last-child u{background:var(--yellow)}
.card h3{position:relative;margin:2px 0 0;font:800 clamp(23px,2.3vw,30px)/1.14 var(--display);letter-spacing:-.02em}
.card p{position:relative;margin:0;font:400 16px/1.62 inherit;color:var(--dim)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
.faq-item{border-bottom:1px solid rgba(255,255,255,.1)}
.faq-q{
  display:flex;align-items:center;gap:18px;width:100%;padding:26px 4px;
  background:transparent;border:0;text-align:left;cursor:pointer;color:var(--ink);transition:background .25s ease;
}
.faq-q:hover{background:rgba(255,255,255,.02)}
.faq-q span{flex:1;font:800 clamp(19px,1.8vw,22px)/1.35 var(--display);letter-spacing:-.015em}
.faq-q i{
  width:34px;height:34px;flex:none;border-radius:99px;background:rgba(255,255,255,.07);color:#e6e6ea;
  font:700 20px/32px inherit;font-style:normal;text-align:center;
}
.faq-item[data-open="true"] .faq-q span{color:var(--pink)}
.faq-item[data-open="true"] .faq-q i{background:var(--pink);color:#fff}
.faq-a{margin:0;padding:0 56px 28px 4px;max-width:46em;font:400 16px/1.7 inherit;color:var(--dim)}
.faq-item[data-open="false"] .faq-a{display:none}

/* ---------- download block ---------- */
.download{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;overflow:hidden;
  padding:clamp(44px,6vw,78px) clamp(20px,4vw,60px);margin-bottom:clamp(40px,6vw,80px);
  border-radius:38px;background:linear-gradient(150deg,#ff2e63 0%,#c40e46 55%,#7a0a2c 100%);
  box-shadow:0 0 90px rgba(255,46,99,.25);
}
.download::before{
  content:"";position:absolute;top:-120px;left:-60px;width:340px;height:340px;border-radius:99px;
  background:rgba(255,255,255,.16);filter:blur(40px);pointer-events:none;
}
.download .mark{position:relative;display:block;width:56px;height:56px;flex:none}
.download .mark i{
  position:absolute;inset:0;border-radius:17px;box-shadow:0 0 0 2px rgba(255,255,255,.7);pointer-events:none;
  animation-name:ringpulse;animation-duration:2.6s;animation-timing-function:ease-out;animation-iteration-count:infinite;
}
.download .mark img{position:relative;width:56px;height:56px;border-radius:17px;display:block;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.download h2{position:relative;margin:0;max-width:22em;font:800 clamp(28px,4.6vw,54px)/1.04 var(--display);letter-spacing:-.03em;color:#fff}
.download .store-row{position:relative;justify-content:center;margin-top:8px}

/* ---------- footer ---------- */
.site-footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:26px 0 46px;border-top:1px solid rgba(255,255,255,.07);
}
.site-footer .brand span{font-size:19px}
.foot-tag{font:400 13.5px/1.5 inherit;color:var(--dim2)}
.foot-links{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);font:500 14px/1 inherit}
.foot-links a{color:#c9c9ce}
.foot-links a:hover{color:#fff}
.copy{font:400 12px/1.5 var(--mono);color:var(--dim2)}

/* ---------- document pages (support / privacy / terms) ---------- */
.doc{padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,50px);max-width:860px}
.doc .back{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 inherit;color:var(--dim2)}
.doc .back:hover{color:#fff}
.doc h1{margin:22px 0 8px;font:800 clamp(30px,4.6vw,54px)/1.03 var(--display);letter-spacing:-.03em}
.doc .meta{margin:0 0 30px;font:400 13.5px/1.5 inherit;color:var(--dim2)}
.doc-lang{padding-bottom:clamp(30px,4vw,48px)}
.doc-lang + .doc-lang{border-top:1px solid rgba(255,255,255,.09);padding-top:clamp(30px,4vw,48px)}
.doc-lang h2{margin:0 0 22px;font:800 clamp(22px,2.6vw,30px)/1.1 var(--display);letter-spacing:-.02em;color:var(--pink)}
.doc-lang h3{margin:26px 0 8px;font:800 clamp(18px,1.9vw,21px)/1.3 var(--display);letter-spacing:-.01em}
.doc-lang p,.doc-lang li{font:400 16px/1.72 inherit;color:var(--dim)}
.doc-lang p{margin:0 0 14px}
.doc-lang ul{margin:0 0 14px;padding-left:1.2em}
.doc-lang li{margin-bottom:8px}
.doc-lang a{font-weight:700}
.doc-note{
  margin:26px 0 0;padding:18px 20px;border-radius:18px;background:#17171a;
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.35);
  font:400 15px/1.65 inherit;color:#e0d6bd;
}
.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:22px 0 0;padding:0;list-style:none}
.contact-list li{
  display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:22px;background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.contact-list b{font:800 17px/1.3 var(--display)}

/* ---------- animations (unchanged behaviour, responsive distances) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--rpx) * 44))}to{opacity:1;transform:translateY(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--rpx) * -16))}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes ringpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.9);opacity:0}}

@media (prefers-reduced-motion:no-preference){
  [data-rise]{animation-name:rise;animation-duration:.9s;animation-timing-function:cubic-bezier(.16,.84,.28,1);animation-fill-mode:backwards}
  [data-rise]:nth-of-type(2){animation-delay:.08s}
  [data-rise]:nth-of-type(3){animation-delay:.16s}
  [data-rise]:nth-of-type(4){animation-delay:.24s}
  .shot:nth-child(2){animation-delay:.09s}
  .shot:nth-child(3){animation-delay:.18s}
  .shot:nth-child(4){animation-delay:.27s}
  .shot:nth-child(5){animation-delay:.36s}
}