:root{
  --bg:#fbfbfd;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#22c55e; /* green */
  --accent:#f97316; /* orange */
  --alert:#ef4444; /* red */
  --link:#3b82f6; /* blue */
  --card:#ffffff;
  --ring: rgba(34,197,94,0.35);
  --radius: 1.25rem;
  --shadow: 0 10px 30px rgba(2,6,23,0.08), 0 2px 6px rgba(2,6,23,0.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;line-height:1.65}
img{max-width:100%;height:auto;border-radius:calc(var(--radius) - .25rem)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, 94vw);margin-inline:auto}
.header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid #eef2ff;z-index:20}
.nav{display:flex;align-items:center;gap:1rem;padding:.9rem 0}
.nav a.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--ink);text-decoration:none}
.badge{padding:.25rem .6rem;border-radius:999px;background:linear-gradient(90deg, var(--brand), var(--accent));color:white;font-size:.8rem}
.nav .links{margin-left:auto;display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:999px;background:var(--ink);color:white;text-decoration:none;box-shadow:var(--shadow)}
.btn.outline{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn.ghost{background:transparent;border:2px solid transparent;color:var(--ink)}
.btn.brand{background:var(--brand)}
.grid{display:grid;gap:1.25rem}
.hero{position:relative;isolation:isolate;padding:2.5rem 0 3rem}
.hero h1{font-size: clamp(2rem, 2.5vw + 1rem, 3rem);line-height:1.1;margin:0 0 .6rem}
.hero p{max-width:65ch;color:var(--muted);margin:.25rem 0 1.2rem}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap}
.blobs{position:absolute;inset:-10% -10% auto -10%;height:280px;z-index:-1;overflow:hidden}
.blob{position:absolute;filter:blur(40px);opacity:.45;animation:float 11s ease-in-out infinite}
.blob:nth-child(1){top:10%;left:5%;width:260px;height:260px;background:var(--accent);animation-duration:12s}
.blob:nth-child(2){top:30%;left:45%;width:320px;height:320px;background:var(--brand);animation-duration:10s;animation-delay:1.2s}
.blob:nth-child(3){top:15%;left:75%;width:240px;height:240px;background:var(--link);animation-duration:9s;animation-delay:.8s}
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-14px) translateX(8px)}}
.card{background:var(--card);border:1px solid #eef2ff;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.footer{margin-top:3rem;padding:2rem 0;color:#475569;border-top:1px solid #e2e8f0}
.footer a{color:inherit}
.kicker{letter-spacing:.08em;text-transform:uppercase;font-weight:700;font-size:.8rem;color:var(--accent)}
.mini{font-size:.92rem;color:var(--muted)}
.section{padding:2rem 0}
.cols-3{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.marquee{display:flex;gap:2rem;overflow:hidden;mask-image: linear-gradient(to right, transparent 0, black 10%, black 90%, transparent 100%);}
.marquee .item{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;border-radius:999px;background:white;border:1px solid #e2e8f0;box-shadow:var(--shadow);}
.marquee-track{display:flex;gap:1rem;animation:scroll 24s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.carousel{position:relative;overflow:hidden;border-radius:var(--radius)}
.carousel-track{display:flex;transition:transform .6s ease}
.carousel .slide{min-width:100%;padding:1rem}
.carousel .controls{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:.5rem}
.control{background:white;border:1px solid #e2e8f0;border-radius:999px;padding:.4rem .7rem;cursor:pointer;box-shadow:var(--shadow)}
.list{list-style:none;padding-left:0;margin:0}
.list li{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0}
.list li::before{content:"•";color:var(--brand);line-height:1.2;margin-top:.05rem}
.notice{background:#ecfeff;border:1px solid #a5f3fc;color:#164e63;padding:.75rem;border-radius:var(--radius)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e2e8f0;padding:.6rem .4rem;text-align:left}
.input, select, textarea{width:100%;padding:.75rem;border-radius:.9rem;border:1px solid #e2e8f0;outline:none}
.input:focus{box-shadow:0 0 0 6px var(--ring)}
label{font-weight:600;font-size:.9rem}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.badge-cta{display:inline-flex;gap:.5rem;align-items:center;background:linear-gradient(90deg, var(--link), var(--brand));color:white;padding:.5rem .8rem;border-radius:999px;font-weight:700}
blockquote{border-left:4px solid var(--brand);padding-left:1rem;margin-left:0;color:#334155}
/* Product cards */
.price{font-weight:800}
.product-grid{display:grid;grid-template-columns: repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.product-card{display:flex;flex-direction:column;gap:.6rem}
.product-card .actions{margin-top:auto;display:flex;gap:.5rem}
/* Tables for cart */
.qty{display:flex;gap:.25rem;align-items:center}
.qty button{padding:.25rem .55rem;border:1px solid #e2e8f0;border-radius:.6rem;background:white;cursor:pointer}
.toast{position:fixed;inset:auto 1rem 1rem auto;background:#0f172a;color:white;padding:.7rem 1rem;border-radius:.8rem;box-shadow:var(--shadow);display:none}
.show{display:block}
/* Breadcrumbs */
.breadcrumbs{font-size:.9rem;color:#64748b;margin:.5rem 0 1rem}
.breadcrumbs a{color:inherit}
/* Code for accessibility skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#ffffff;border:2px solid var(--ink);padding:.5rem;border-radius:.5rem;z-index:999}