/* Styles used only on the Home page */
.btn-outline{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);font-weight:600;font-size:15px;transition:.2s;white-space:nowrap}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-primary.lg,.btn-outline.lg{height:64px;padding:0 32px;font-size:16px}
/* ===== Hero v2 ===== */
.hero{padding:144px 0 64px;border-top:0;position:relative;overflow:visible}
.hero-grid{max-width:1440px;margin:0 auto;padding:0 96px;display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:center}
.hero-copy{grid-column:1/7}
.hero h1{font-size:52px;line-height:1.08;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:0 0 24px}
.hero-copy p{font-size:18px;line-height:1.6;color:#4B5563;max-width:560px;margin:0 0 32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.switcher{grid-column:7/13;justify-self:end;width:100%;max-width:640px;min-width:0}
/* ===== Revolving product carousel (grouped by category) ===== */
.orbit{--box:240px;position:relative;isolation:isolate;height:480px;border-radius:36px;overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,#FFFFFF 0%,#F5F6F8 55%,#EBEEF2 100%);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.orbit.drag{cursor:grabbing}
.orbit:focus-visible{box-shadow:0 0 0 3px var(--teal)}
.orbit-glow{position:absolute;left:50%;top:42%;width:440px;height:440px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(122,31,43,.09),rgba(122,31,43,0) 65%);pointer-events:none}
.orbit-path{position:absolute;left:50%;top:60%;width:88%;height:130px;transform:translate(-50%,-50%);pointer-events:none}
.orbit-path ellipse{fill:none;stroke:#D6DBE2;stroke-width:1.2;stroke-dasharray:3 7}
.ring{position:absolute;inset:0}
.o-item{position:absolute;left:50%;top:42%;width:var(--box);height:var(--box);display:flex;align-items:center;justify-content:center;will-change:transform,opacity;cursor:pointer}
.o-item img{max-width:none;max-height:none;width:calc(var(--box) * var(--fw,1));height:calc(var(--box) * var(--fh,1));object-fit:contain;filter:drop-shadow(0 20px 22px rgba(20,30,60,.16));pointer-events:none}
.o-item.on img{animation:bob 5s ease-in-out infinite}
.o-more{position:relative;width:86%;height:86%;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(18,26,34,.35);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 12px 20px;text-align:center;overflow:hidden}
.o-more .fan{position:relative;flex:1;min-height:0;width:100%;display:flex;justify-content:center;align-items:center;margin-bottom:10px}
.o-more .fan img{width:40%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(20,30,60,.14));margin:0 -6%}
.o-more .fan img:nth-child(1){transform:rotate(-12deg) translateY(6px)}
.o-more .fan img:nth-child(2){transform:translateY(-4px);z-index:1}
.o-more .fan img:nth-child(3){transform:rotate(12deg) translateY(6px)}
.o-more strong{font-size:2.4rem;line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--teal)}
.o-more span{font-size:13px;font-weight:600;color:var(--muted);line-height:1.3;margin-top:6px}
.o-item.is-more::after{display:none}
.o-item.is-more.on img{animation:none}
.o-item::after{content:"";position:absolute;left:20%;right:20%;bottom:-18px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(18,26,34,.2),rgba(18,26,34,0))}
.o-arrow{position:absolute;top:42%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);font-size:18px;display:grid;place-items:center;cursor:pointer;z-index:200;transition:.2s;box-shadow:0 6px 18px -10px rgba(18,26,34,.3)}
.o-arrow:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.o-arrow.prev{left:16px}
.o-arrow.next{right:16px}
.o-top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;z-index:200;pointer-events:none}
.o-top>*{pointer-events:auto}
.o-pill{height:34px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;background:#fff;color:var(--ink);border:1px solid var(--line)}
.o-pill i{font-style:normal;color:var(--muted);font-weight:500}
.o-tl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.o-play{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:11px}
.o-play:hover{border-color:var(--teal);color:var(--teal)}
.o-cap{position:absolute;left:20px;right:20px;bottom:20px;z-index:200;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:20px;padding:14px 14px 14px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.o-cap .t{transition:opacity .25s,transform .25s;min-width:0}
.o-cap .t.swap{opacity:0;transform:translateY(6px)}
.o-brands{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:4px}
.o-brands span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B9C0C9;transition:color .3s}
.o-brands span.cur{color:var(--teal)}
.o-name{display:block;font-size:17px;font-weight:700;color:var(--ink);line-height:1.25}
.o-shop{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;transition:.2s}
.o-shop:hover{background:var(--teal)}
.o-nav{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.o-chip{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px 9px 16px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s;display:inline-flex;align-items:center;gap:8px}
.o-chip b{font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:var(--cream-2);color:var(--muted);padding:0 6px}
.o-chip:hover{color:var(--ink);border-color:#cfd5dd}
.o-chip[aria-current="true"]{color:var(--teal);border-color:var(--teal)}
.o-chip[aria-current="true"] b{background:var(--teal);color:#fff}
.o-chip .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal);transition:width .5s ease}
@media(max-width:1024px){
    .hero{padding:124px 0 48px}
    .hero-grid{grid-template-columns:1fr;padding:0 24px;gap:40px}
    .hero-copy,.switcher{grid-column:auto;max-width:none;justify-self:stretch;min-width:0}
    .hero h1{font-size:40px}
  }
@media(max-width:640px){
    .hero h1{font-size:34px}
    .hero-copy p{font-size:16px}
    .hero-actions{flex-direction:column}
    .hero-actions a{width:100%;justify-content:center}
    .orbit{height:400px;border-radius:28px}
    .orbit-glow{width:300px;height:300px}
    .o-arrow{display:none}
    .o-cap{left:12px;right:12px;bottom:12px;padding:12px 12px 12px 16px;gap:10px}
    .o-name{font-size:14px}
    .o-brands{gap:2px 8px}
    .o-brands span{font-size:10px;letter-spacing:.05em}
    .o-shop{height:40px;padding:0 14px;font-size:13px}
    .o-top{top:12px;left:12px;right:12px}
    .o-pill{height:30px;font-size:12px}
    .o-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
    .o-nav::-webkit-scrollbar{display:none}
    .o-chip{flex:0 0 auto}
  }
@media(prefers-reduced-motion:reduce){
    .o-cap .t{transition:none}
    .o-item.on img{animation:none}
  }
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){
    .pillars{grid-template-columns:1fr}
  }
.pillar{background:#fff;border-radius:var(--r);padding:36px;border:1px solid var(--line);transition:.3s;display:flex;flex-direction:column;min-height:360px}
.pillar:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(31,42,46,.35);background:#fff}
.pillar .n{display:none;font-family:inherit;font-style:normal;color:var(--sage-deep);font-size:1.1rem}
.pillar .ico{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;margin:0 0 22px;background:#fff;border:1px solid var(--line);color:var(--teal)}
.pillar h3{font-weight:600;font-size:1.45rem;margin-bottom:12px;letter-spacing:-.02em}
.pillar p{font-size:.98rem;color:var(--muted)}
.pillar .more{margin-top:auto;padding-top:24px;font-weight:600;font-size:.88rem;color:var(--teal)}
@media(max-width:640px){
    .hero{padding:96px 0 40px}
    .hero-grid{padding:0 20px;gap:28px}
    .hero h1{font-size:32px;line-height:1.1;margin-bottom:16px}
    .hero-copy p{font-size:16px;margin-bottom:24px}
    .btn-primary.lg,.btn-outline.lg{height:56px;font-size:15px}
    .pillar{padding:26px;min-height:0}
    .pillar h3{font-size:1.25rem}
  }
@media(max-width:380px){
    .hero h1{font-size:28px}
  }
.o-chip[aria-current="true"]{color:var(--red);border-color:var(--red)}
.o-chip[aria-current="true"] b{background:var(--red)}
.o-chip .bar{background:var(--red)}
.o-brands span.cur{color:var(--red)}