:root{
  --brown:#3b2314;
  --brown-2:#6b4226;
  --caramel:#d98324;
  --butter:#f5c451;
  --cream:#fff8e8;
  --ink:#2b1a10;
  --glass:rgba(255,255,255,.55);
  --glass-b:rgba(255,255,255,.75);
  --ease:cubic-bezier(.22,1,.36,1);
  --f-body:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
  --f-serif:'Shippori Mincho B1','Hiragino Mincho ProN',serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--cream);line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
.integral{font-family:var(--f-serif);font-style:italic;color:var(--caramel)}

/* ===== 全体背景 (PC: 横長 / SP: 縦長) + 半透明白オーバーレイ ===== */
.site-bg{
  position:fixed;inset:0;z-index:-1;
  background-color:var(--cream);
  background-image:
    linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),
    url('/watermarked_img_8191874278128785286.jpg');
  background-size:cover;background-position:center top;background-repeat:no-repeat;
}
@media (min-width:768px){
  .site-bg{
    background-image:
      linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),
      url('/watermarked_img_18353549560204264331.jpg');
  }
}

#scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--butter),var(--caramel));z-index:100}

/* ===== Nav ===== */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:.8rem clamp(1rem,4vw,3rem);transition:background .4s,backdrop-filter .4s,box-shadow .4s,color .4s;color:#fff}
.site-nav.scrolled{background:rgba(255,248,232,.78);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 4px 24px rgba(59,35,20,.1);color:var(--brown)}
.nav-logo{font-weight:900;letter-spacing:.04em;font-size:1.05rem}
.nav-logo .integral{font-size:1.4em;margin-right:.1em;color:var(--butter)}
.site-nav.scrolled .nav-logo .integral{color:var(--caramel)}
.site-nav nav{display:flex;gap:clamp(.8rem,2.5vw,2rem);font-size:.9rem;font-weight:700}
.site-nav nav a{position:relative;padding:.2rem 0}
.site-nav nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.site-nav nav a:hover::after{transform:scaleX(1)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;background:#2a170c}
.hero-img{
  position:absolute;inset:-4%;
  /* メイン画像 → 無い場合は背景画像がフォールバック */
  background-image:var(--main),url('/watermarked_img_8191874278128785286.jpg');
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.25);filter:blur(14px) saturate(1.1);
  animation:heroIn 2.4s var(--ease) .1s forwards, heroDrift 22s ease-in-out 2.5s infinite alternate;
  will-change:transform,opacity;
}
@media (min-width:768px){
  .hero-img{background-image:var(--main),url('/watermarked_img_18353549560204264331.jpg')}
}
@keyframes heroIn{to{opacity:1;transform:scale(1.04);filter:blur(0) saturate(1.1)}}
@keyframes heroDrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}}
.hero-shade{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 55%,rgba(30,15,6,.25) 0%,rgba(30,15,6,.68) 75%),
  linear-gradient(180deg,rgba(30,15,6,.55) 0%,rgba(30,15,6,.15) 35%,rgba(30,15,6,.8) 100%)}
.hero-glow{position:absolute;left:50%;bottom:-20%;width:140%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,150,40,.4),transparent 55%);mix-blend-mode:screen;animation:flicker 3.5s ease-in-out infinite alternate}
@keyframes flicker{0%{opacity:.55}50%{opacity:.9}100%{opacity:.65}}
.kernels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kernel{position:absolute;bottom:-40px;border-radius:50% 45% 55% 50%;background:radial-gradient(circle at 35% 30%,#fffdf2,#f6d98a 60%,#d9a441);box-shadow:0 2px 8px rgba(0,0,0,.35);animation:rise linear forwards;opacity:0}
@keyframes rise{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:0}
  10%{opacity:.95}
  100%{transform:translate3d(var(--dx),-110vh,0) rotate(var(--rot));opacity:0}
}

.hero-inner{position:relative;text-align:center;padding:6rem 1.2rem 5rem;max-width:960px}
.reveal-hero{opacity:0;transform:translateY(28px);filter:blur(6px);animation:heroText 1.1s var(--ease) var(--d,0s) forwards}
@keyframes heroText{to{opacity:1;transform:none;filter:none}}
.hero-eyebrow{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem 1rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:.78rem;letter-spacing:.12em;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-eyebrow i{color:#ffb347}
.hero-kicker{margin-top:1.6rem;font-family:var(--f-serif);letter-spacing:.5em;font-size:clamp(1rem,2.4vw,1.4rem);color:var(--butter)}
.hero-title{margin-top:.2rem;font-family:var(--f-serif);font-weight:800;font-size:clamp(3rem,12vw,8.5rem);line-height:1.05;letter-spacing:.02em;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.integral-big{display:inline-block;font-style:italic;color:var(--butter);margin-right:.04em;transform:scaleY(1.1);animation:integralBob 5s ease-in-out infinite}
@keyframes integralBob{50%{transform:scaleY(1.1) translateY(-6px) rotate(-3deg)}}
.hero-title .pop{display:block;font-size:.62em;letter-spacing:.08em;background:linear-gradient(100deg,#fff 20%,var(--butter) 50%,#fff 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;text-shadow:none;filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))}
@keyframes shine{to{background-position:-200% 0}}
.hero-formula{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.formula-main{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.15rem,3.8vw,2.1rem);padding:.4rem 1.2rem;border-radius:12px;background:rgba(20,10,4,.45);border:1px solid rgba(245,196,81,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-height:1.8em;min-width:12ch}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--butter);vertical-align:-.15em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.formula-note{font-size:clamp(.85rem,2vw,1.05rem);opacity:.92;letter-spacing:.08em}
.hero-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;font-size:.7rem;letter-spacing:.3em;opacity:.85}
.scroll-cue i{animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}

/* ===== Buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.7rem;border-radius:999px;font-family:inherit;font-weight:900;font-size:1rem;letter-spacing:.05em;border:0;cursor:pointer;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;-webkit-tap-highlight-color:transparent}
.btn-primary{background:linear-gradient(135deg,#ffcb4f,#ee8a1c);color:var(--brown);box-shadow:0 10px 30px rgba(238,138,28,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px rgba(238,138,28,.55)}
.btn-primary:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.28);transform:translateY(-4px)}
.btn-ghost-dark{color:var(--brown);background:rgba(255,255,255,.55);border:1.5px solid rgba(59,35,20,.35)}
.btn-ghost-dark:hover{background:#fff;transform:translateY(-4px);box-shadow:0 12px 28px rgba(59,35,20,.18)}
.btn-xl{padding:1.1rem 2.2rem;font-size:1.15rem}
.btn:focus-visible,.chip:focus-visible{outline:3px solid var(--brown);outline-offset:3px}

/* ===== Sections ===== */
.section{padding:clamp(4.5rem,10vw,8rem) 1.2rem;position:relative}
.container{max-width:1120px;margin:0 auto}
.section-head.center{text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem)}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.35em;color:var(--caramel);font-weight:700;margin-bottom:.6rem}
.section-title{font-family:var(--f-serif);font-weight:800;font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.35;color:var(--brown)}
.section-title .hl{background:linear-gradient(transparent 62%,rgba(245,196,81,.85) 62%);padding:0 .1em}
.lead{margin-top:1.2rem;font-size:clamp(.95rem,2vw,1.1rem);color:#4a3224;font-weight:500}
.lead b{color:var(--brown);font-weight:900}
.pc-br{display:none}.sp-br{display:inline}
@media (min-width:768px){.pc-br{display:inline}.sp-br{display:none}}

.price-badge{display:inline-flex;align-items:baseline;gap:.35rem;margin-top:1.1rem;padding:.3rem 1.6rem .4rem;border-radius:999px;background:var(--brown);color:var(--butter);box-shadow:0 10px 26px rgba(59,35,20,.3)}
.price-badge span{font-size:.9rem;color:#f0dcc0}
.price-badge b{font-family:var(--f-serif);font-size:2.4rem;line-height:1}

/* ===== Glass ===== */
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 32px rgba(59,35,20,.12),inset 0 1px 0 rgba(255,255,255,.9);border-radius:24px}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(46px) scale(.98);filter:blur(5px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ===== Theorems ===== */
.theorem-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:768px){.theorem-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.theorem{position:relative;height:100%;padding:2rem 1.6rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s}
.theorem:hover,.flavor:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(59,35,20,.22),inset 0 1px 0 #fff;background:var(--glass-b)}
.theorem-no{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;padding:.15rem .7rem;border-radius:999px;background:var(--brown);color:var(--butter)}
.theorem-icon{display:block;margin:1.2rem 0 .6rem;font-size:2rem;color:var(--caramel);transition:transform .5s var(--ease)}
.theorem:hover .theorem-icon{transform:scale(1.25) rotate(-8deg)}
.theorem h3{font-family:var(--f-serif);font-size:1.4rem;font-weight:800;color:var(--brown)}
.theorem p{margin-top:.5rem;font-size:.95rem;color:#4a3224}

.stat-row{margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.stat{padding:1.2rem .4rem;text-align:center}
.stat b{display:block;font-family:var(--f-serif);font-size:clamp(2rem,7vw,3.6rem);line-height:1.1;color:var(--caramel)}
.stat span{font-size:clamp(.7rem,2.2vw,.9rem);font-weight:700;color:var(--brown)}

/* ===== Original flavors ===== */
.flavor-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:900px){.flavor-grid{grid-template-columns:repeat(2,1fr);gap:1.8rem}}
.flavor{position:relative;height:100%;padding:2rem 1.7rem 1.8rem;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s;transform-style:preserve-3d}
.flavor::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.flavor::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--accent2),transparent 70%);opacity:.7;transition:transform .7s var(--ease)}
.flavor:hover::after{transform:scale(1.5)}
.flavor>*{position:relative;z-index:1}
.flavor-bg-no{position:absolute!important;right:1rem;bottom:-1.5rem;font-family:var(--f-serif);font-weight:800;font-size:8rem;line-height:1;color:var(--accent);opacity:.1;z-index:0!important;pointer-events:none}
.flavor-top{display:flex;justify-content:space-between;align-items:center}
.flavor-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--accent);color:#fff;font-size:1.4rem;box-shadow:0 8px 18px rgba(0,0,0,.2);transition:transform .5s var(--ease)}
.flavor:hover .flavor-icon{transform:rotate(-12deg) scale(1.12)}
.flavor-price{font-family:var(--f-serif);font-weight:800;font-size:2.2rem;color:var(--brown)}
.flavor-price small{font-size:.9rem;margin-left:.1rem}
.flavor-tag{margin-top:1.1rem;font-size:.85rem;font-weight:900;letter-spacing:.1em;color:var(--accent)}
.flavor-name{margin-top:.1rem;font-family:var(--f-serif);font-weight:800;font-size:clamp(1.6rem,4.4vw,2.1rem);line-height:1.3;color:var(--brown)}
.flavor-name small{display:block;font-size:.55em;font-weight:700;color:var(--brown-2)}
.flavor-desc{margin-top:.8rem;font-size:.95rem;color:#3d281b}
.heat{margin-top:1.2rem;display:flex;align-items:center;gap:.7rem;font-size:.8rem;font-weight:900;color:var(--brown)}
.heat-label i{color:#e8541c}
.heat-bar{flex:1;height:8px;border-radius:99px;background:rgba(59,35,20,.12);overflow:hidden}
.heat-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffd066,#ee6a1c);transition:width 1.6s var(--ease) .5s}
.reveal.in .heat-bar i{width:var(--w)}
.heat-val{min-width:4.6em;text-align:right}
.steps{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem;counter-reset:s}
.steps li{counter-increment:s;font-size:.78rem;font-weight:700;padding:.25rem .8rem .25rem .4rem;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid rgba(59,35,20,.12);display:flex;align-items:center;gap:.4rem}
.steps li::before{content:counter(s);display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.72rem}

/* secret */
.flavor-secret{background:linear-gradient(145deg,#2b170b,#4a2a14);color:#fff;border-radius:24px;border:1px solid rgba(245,196,81,.5);box-shadow:0 8px 32px rgba(59,35,20,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.flavor-secret::before{background:repeating-linear-gradient(45deg,var(--butter) 0 12px,#2b170b 12px 24px)}
.flavor-secret:hover{transform:translateY(-10px);box-shadow:0 26px 50px rgba(59,35,20,.45),0 0 40px rgba(245,196,81,.25)}
.flavor-secret .flavor-icon{background:var(--butter);color:var(--brown)}
.flavor-secret .flavor-price,.flavor-secret .flavor-name{color:var(--butter)}
.flavor-secret .flavor-desc{color:#f3e2c8}
.flavor-secret .flavor-bg-no{color:#fff}
.redact{display:inline-block;background:#000;color:#000;border-radius:3px;padding:0 .2em;user-select:none;transition:background .6s,color .6s}
.flavor-secret:hover .redact{background:rgba(245,196,81,.2);color:var(--butter);animation:glitch .5s steps(2) 3}
@keyframes glitch{50%{transform:translateX(2px);filter:hue-rotate(60deg)}}
.secret-stamp{margin-top:1.1rem;display:inline-block;padding:.25rem 1rem;border:2px solid #ff6a5a;color:#ff6a5a;font-family:var(--f-mono);font-weight:700;letter-spacing:.2em;transform:rotate(-4deg);border-radius:6px;animation:stamp 3s ease-in-out infinite}
@keyframes stamp{50%{transform:rotate(-4deg) scale(1.06)}}
.secret-hint{margin-top:.8rem;font-size:.9rem;font-weight:700;color:var(--butter)}
.flavor-secret::after{background:radial-gradient(circle,rgba(245,196,81,.35),transparent 70%)}

/* ===== Mixer ===== */
.combo-eq{margin-top:1.2rem;font-family:var(--f-serif);font-weight:800;font-size:clamp(1.8rem,6vw,3.2rem);color:var(--brown)}
.combo-eq sub{font-size:.55em;vertical-align:baseline}
.combo-eq sub:first-child{vertical-align:sub}
.combo-eq b{font-size:1.3em;color:var(--caramel);padding:0 .1em}
.combo-eq span{font-size:.6em}
.plus-50{display:inline-block;margin:0 .3em;padding:0 .7em;border-radius:99px;background:var(--caramel);color:#fff;font-weight:900}
.mixer{max-width:880px;margin:0 auto;padding:clamp(1.2rem,4vw,2.4rem);text-align:center}
.mixer-board{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:.4rem}
@media (max-width:520px){.mixer-board{grid-template-columns:1fr;gap:.2rem}.mix-op{line-height:1}}
.mix-slot,.mix-result{min-height:96px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.6rem;transition:transform .4s var(--ease),background .4s,border-color .4s}
.mix-slot{background:rgba(255,255,255,.7);border:2px dashed rgba(59,35,20,.3)}
.mix-slot small,.mix-result small{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.15em;color:var(--brown-2)}
.mix-slot b{font-family:var(--f-serif);font-size:clamp(1.05rem,3.4vw,1.45rem);color:var(--brown);line-height:1.3}
.mix-slot.filled{border-style:solid;border-color:var(--caramel);background:#fff;animation:pop .5s var(--ease)}
.mix-result{background:linear-gradient(135deg,var(--brown),#5a3419);color:var(--butter)}
.mix-result small{color:#e8cfa8}
.mix-result b{font-family:var(--f-serif);font-size:2.2rem;line-height:1.2}
.mix-result em{font-style:normal;font-size:.9rem;margin-left:.1rem}
.mix-result.ready{animation:pop .6s var(--ease);box-shadow:0 0 0 4px rgba(245,196,81,.5),0 14px 30px rgba(59,35,20,.4)}
@keyframes pop{0%{transform:scale(.88)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
.mix-op{font-family:var(--f-serif);font-size:1.8rem;font-weight:800;color:var(--caramel)}
.mix-formula{margin-top:1rem;font-family:var(--f-mono);font-size:clamp(.85rem,2.4vw,1.05rem);font-weight:700;color:var(--brown);min-height:1.6em}
.mix-warn{min-height:1.5em;font-size:.85rem;font-weight:700;color:#c0392b}
.mix-chips{margin-top:.6rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.chip{font-family:inherit;cursor:pointer;padding:.5rem 1rem;border-radius:99px;border:1.5px solid rgba(59,35,20,.25);background:rgba(255,255,255,.75);font-weight:700;font-size:.9rem;color:var(--brown);transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.chip:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(59,35,20,.18);background:#fff}
.chip.on{background:var(--brown);color:var(--butter);border-color:var(--brown);transform:translateY(-2px) scale(1.05);box-shadow:0 10px 20px rgba(59,35,20,.35)}
.chip.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mix-actions{margin-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.rules{margin-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;font-size:.82rem;font-weight:700;color:var(--brown)}
.rules .fa-circle-check{color:#3f8a3f}.rules .fa-circle-xmark{color:#c0392b}

/* ===== Standard ===== */
.std-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media (min-width:640px){.std-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media (min-width:1000px){.std-grid{grid-template-columns:repeat(4,1fr)}}
.std-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;min-height:116px;padding:1rem 1.1rem;border-radius:20px;overflow:hidden;cursor:default;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s}
.std-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--butter),var(--caramel));transform:scaleY(.3);transform-origin:top;transition:transform .5s var(--ease)}
.std-card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 20px 38px rgba(59,35,20,.22);background:rgba(255,255,255,.88)}
.std-card:hover::before{transform:scaleY(1)}
.std-no{font-family:var(--f-mono);font-size:.7rem;font-weight:700;color:var(--caramel);letter-spacing:.15em}
.std-name{font-weight:900;font-size:clamp(.95rem,2.6vw,1.1rem);line-height:1.4;color:var(--brown)}
.std-price{align-self:flex-end;font-family:var(--f-serif);font-weight:800;font-size:1.3rem;color:var(--brown-2)}
.std-price small{font-size:.7rem}

/* ===== Closing ===== */
.closing-card{max-width:860px;margin:0 auto;text-align:center;padding:clamp(2rem,6vw,4rem) clamp(1.2rem,4vw,3rem);background:linear-gradient(145deg,rgba(59,35,20,.88),rgba(90,52,25,.82));color:#fff;border-color:rgba(245,196,81,.4);position:relative;overflow:hidden}
.closing-card::before{content:"∫";position:absolute;left:-1rem;top:-3rem;font-family:var(--f-serif);font-style:italic;font-size:22rem;line-height:1;color:rgba(245,196,81,.08);pointer-events:none}
.closing-card>*{position:relative}
.closing-title{margin-top:.4rem;font-family:var(--f-serif);font-weight:800;font-size:clamp(1.9rem,6vw,3.4rem);line-height:1.35;color:var(--butter)}
.closing-card .lead{color:#fbeed6}
.closing-card .btn-ghost-dark{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.closing-card .btn-ghost-dark:hover{background:rgba(255,255,255,.3)}
.center-cta{margin-top:2rem}
.closing-note{margin-top:1.4rem;font-size:.85rem;letter-spacing:.1em;color:#ecd6b4}

.site-footer{text-align:center;padding:2.4rem 1rem 3rem;color:var(--brown);font-weight:700;background:rgba(255,248,232,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-footer .small{font-size:.8rem;font-weight:500;margin-top:.2rem}
.to-top{display:inline-block;margin-top:1rem;font-size:.85rem;padding:.4rem 1.1rem;border-radius:99px;border:1.5px solid rgba(59,35,20,.35);transition:background .3s,transform .3s}
.to-top:hover{background:#fff;transform:translateY(-3px)}

/* confetti */
.confetti{position:fixed;top:0;z-index:200;pointer-events:none;border-radius:50% 45% 55% 50%;background:radial-gradient(circle at 35% 30%,#fffdf2,#f6d98a 60%,#d9a441);box-shadow:0 2px 6px rgba(0,0,0,.3);animation:fall linear forwards}
@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0)}100%{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot))}}
.toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,40px);opacity:0;z-index:210;padding:.9rem 1.6rem;border-radius:99px;background:var(--brown);color:var(--butter);font-weight:900;box-shadow:0 14px 36px rgba(0,0,0,.35);transition:transform .5s var(--ease),opacity .5s;max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-hero{opacity:1;transform:none;filter:none}
  .hero-img{opacity:1;transform:none;filter:none}
}