/* MINTMARBLES - base: reset · type · buttons · marbles · reveal system (v6) */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink-2);background:var(--bg);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}svg{height:auto}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}ul,ol{list-style:none;padding:0}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:6px}

/* ---- headings / text ---- */
h1,h2,h3,h4,h5{font-family:var(--f-disp);font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);letter-spacing:-.02em}
h4{font-size:1.1rem;letter-spacing:-.01em}
p{text-wrap:pretty}
.display{font-size:var(--fs-display);font-weight:600;letter-spacing:-.045em;line-height:.98}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
.wrap-narrow{max-width:var(--wrap-narrow)}.wrap-text{max-width:var(--wrap-text)}
.center{text-align:center}.muted{color:var(--ink-soft)}.faint{color:var(--ink-faint)}.mono{font-family:var(--f-mono)}
.lead{font-size:var(--fs-lead);color:var(--ink-soft);line-height:1.62;max-width:60ch}
.nowrap{white-space:nowrap}.grow{flex:1}.hidden{display:none!important}

/* ---- eyebrow (structural label: mono = "this is data/technical") ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.75rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.eyebrow.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad-mint);box-shadow:0 0 0 4px var(--mint-weak)}
.eyebrow--pill{padding:.5rem .9rem;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line-2);
  box-shadow:var(--sh-1);color:var(--ink-2)}
.eyebrow--pill.dot::before{background:var(--grad-mint)}
.on-ink .eyebrow{color:var(--mint-200)}
.on-ink .eyebrow--pill{background:rgba(255,255,255,.06);border-color:var(--ink-line);color:rgba(255,255,255,.86)}

.cluster{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.stack{display:grid;gap:var(--s-4)}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.86rem;color:var(--ink-faint);margin-bottom:1rem}
.crumbs a:hover{color:var(--brand)}.crumbs span{color:var(--line-3)}
.gradient-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mint-text{color:var(--mint-600)}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;line-height:1;padding:.85rem 1.35rem;min-height:47px;
  border-radius:var(--r-pill);background:var(--ink);color:#fff;border:1.5px solid var(--ink);white-space:nowrap;overflow:hidden;
  transition:transform .16s var(--ease),box-shadow var(--dur),background var(--dur),border-color var(--dur),filter var(--dur)}
.btn>*{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
  .btn:hover::after{transform:translateX(120%)}
}
.btn:active{transform:scale(.97);transition:transform .1s var(--ease-out)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-600);box-shadow:var(--sh-brand)}
.btn-mint{background:var(--mint-600);border-color:var(--mint-600);color:#fff}
.btn-mint:hover{background:var(--mint-700);box-shadow:var(--sh-mint)}
.btn-etsy{background:var(--etsy);border-color:var(--etsy);color:#fff}
.btn-etsy:hover{background:var(--etsy-600);box-shadow:var(--sh-etsy)}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);box-shadow:var(--sh-1)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn-ghost::after{display:none}
.btn-ghost:hover{background:var(--bg-2);box-shadow:none;transform:none}
.btn-lg{padding:1.05rem 1.75rem;min-height:56px;font-size:1.03rem}
.btn-sm{padding:.55rem 1rem;min-height:40px;font-size:.86rem}
.btn .arrow{display:inline-flex;transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.on-ink .btn-outline{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.28)}
.on-ink .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--brand);font-size:.93rem}
.link-arrow .arrow{transition:transform var(--dur) var(--ease)}
.link-arrow:hover .arrow{transform:translateX(4px)}
.link-arrow.mint{color:var(--mint-600)}
.arrow svg{width:16px;height:16px}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:.3rem .62rem;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line)}
.badge svg{width:12px;height:12px}
.badge-new{background:var(--mint-050);color:var(--mint-700);border-color:transparent}
.badge-sale{background:var(--etsy-050);color:var(--etsy-600);border-color:transparent}
.badge-soon{background:var(--bg-2);color:var(--ink-soft)}

/* ---- marble spheres (the signature) ---- */
.marble{position:absolute;border-radius:50%;background:var(--marble-violet);box-shadow:var(--sh-marble);
  pointer-events:none;z-index:0;will-change:transform}
.marble::before{content:"";position:absolute;top:12%;left:16%;width:34%;height:24%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);filter:blur(1px)}
.marble.mint{background:var(--marble-mint)}
.marble.orange{background:var(--marble-orange)}
.marble.duo{background:var(--marble-duo)}
.marble.glass{background:var(--marble-glass);box-shadow:0 18px 34px rgba(20,18,43,.14),inset 0 -4px 12px rgba(58,39,198,.18),inset 0 6px 12px rgba(255,255,255,.7)}

/* ---- cards / prose ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-1)}
.grid{display:grid;gap:clamp(14px,1.4vw,22px)}
.prose{max-width:70ch;color:var(--ink-2)}
.prose h2{font-size:1.7rem;margin:2.4rem 0 1rem}.prose h3{font-size:1.25rem;margin:1.8rem 0 .7rem}
.prose p{margin:0 0 1.1rem}.prose ul{margin:0 0 1.2rem;padding-left:0}
.prose ul li{position:relative;padding-left:1.7rem;margin:.5rem 0}
.prose ul li::before{content:"";position:absolute;left:.1rem;top:.5rem;width:9px;height:9px;border-radius:3px;background:var(--grad-mint);transform:rotate(45deg)}
.prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose strong{color:var(--ink)}
.ticklist{display:grid;gap:.7rem}
.ticklist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2);font-size:.96rem}
.ticklist li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--mint-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2307AE7A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.spec-list .row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.spec-list .row:last-child{border-bottom:none}.spec-list .k{color:var(--ink-soft)}.spec-list .v{color:var(--ink);font-weight:600;text-align:right}

/* ---- price ---- */
.price{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--f-disp);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.price small{font-family:var(--f-body);font-weight:400;font-size:.72rem;color:var(--ink-faint);letter-spacing:0}
.price-was{color:var(--ink-faint);text-decoration:line-through;font-weight:400;font-size:.7em}
.price-sale{color:var(--etsy-600)}

/* ---- reveal system ---- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal="fade"]{transform:none}
[data-reveal="scale"]{transform:translateY(20px) scale(.94)}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.07s}[data-reveal-delay="2"]{transition-delay:.14s}
[data-reveal-delay="3"]{transition-delay:.21s}[data-reveal-delay="4"]{transition-delay:.28s}
[data-reveal-delay="5"]{transition-delay:.35s}
/* stagger children */
[data-stagger]>*{opacity:0;transform:translateY(22px) scale(.97);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-spring)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.04s}
[data-stagger].in>*:nth-child(2){transition-delay:.10s}
[data-stagger].in>*:nth-child(3){transition-delay:.16s}
[data-stagger].in>*:nth-child(4){transition-delay:.22s}
[data-stagger].in>*:nth-child(5){transition-delay:.28s}
[data-stagger].in>*:nth-child(6){transition-delay:.34s}
[data-stagger].in>*:nth-child(7){transition-delay:.40s}
[data-stagger].in>*:nth-child(8){transition-delay:.46s}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important}
}