:root{
  /* ===== App Colors ===== */
  --bg:#ffffff;                 /* white */
  --panel:#ffffff;
  --panel2:#E6EEF4;              /* purple_500 / purple_700 */
  --text:#000000;                /* black */
  --muted:#6b7280;
  --line:rgba(0,0,0,.08);

  --brand:#FE5725;               /* mcolo */
  --brand-soft:rgba(254,87,37,.1);

  --shadow:0 14px 40px rgba(0,0,0,.08);
  --radius:18px;
  --radius2:24px;
  --max:1100px;
  --font: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font)
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font-family:inherit}

.container{
  width:min(var(--max), calc(100% - 32px));
  margin-inline:auto
}

/* ================= Topbar ================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0
}

.brand{
  display:flex;
  align-items:center;
  gap:12px
}

.brand__logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background:#fff;
  padding:6px;
  border:1px solid var(--line)
}

.brand__text h1{
  margin:0;
  font-size:18px
}

.brand__text p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}

.nav a{
  padding:8px 12px;
  border-radius:12px;
  color:var(--muted)
}

.nav a:hover{
  background:var(--panel2);
  color:var(--text)
}

.nav__pill{
  background:var(--brand);
  color:#fff !important;
  font-weight:700
}

/* ================= Hero ================= */
.hero{padding:30px 0}

.hero__inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px
}

@media(max-width:900px){
  .hero__inner{grid-template-columns:1fr}
}

.badge{
  display:inline-block;
  background:var(--panel2);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:999px;
  color:var(--text);
  font-size:12px
}

.hero__content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  padding:22px;
  box-shadow:var(--shadow)
}

.hero__content h2{
  margin:12px 0 8px;
  font-size:32px
}

.hero__content p{
  margin:0;
  color:var(--muted)
}

.hero__actions{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap
}

/* ================= Buttons ================= */
.btn{
  padding:11px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-weight:700
}

.btn:hover{
  background:var(--panel2)
}

.btn--primary{
  background:var(--brand);
  border:none;
  color:#fff
}

.btn--ghost{
  background:transparent
}

.w100{width:100%}

/* ================= Mini Info ================= */
.mini-info{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px
}

.mini-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px
}

.mini-card span{
  color:var(--muted);
  font-size:12px
}

/* ================= Phone Preview ================= */
.hero__preview{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  padding:18px
}

.phone{
  border-radius:28px;
  border:1px solid var(--line);
  background:var(--panel2);
  overflow:hidden
}

.phone__top{
  padding:10px;
  border-bottom:1px solid var(--line)
}

.phone__body{padding:14px}
.phone__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}

/* ================= Sections ================= */
.section{padding:30px 0}

.section--alt{
  background:var(--panel2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

/* ================= Cards ================= */
.cards,.grid{
  display:grid;
  gap:14px
}

.cards{grid-template-columns:repeat(3,1fr)}
.grid{grid-template-columns:repeat(4,1fr)}

@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:520px){
  .cards,.grid{grid-template-columns:1fr}
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden
}

.card__img{
  aspect-ratio:4/3;
  background:var(--panel2)
}

.card__body{padding:12px}

.card__desc{
  color:var(--muted);
  font-size:13px
}

.price{
  font-weight:900;
  color:var(--brand)
}

.tag{
  font-size:12px;
  color:var(--brand);
  background:var(--brand-soft);
  padding:6px 10px;
  border-radius:999px
}

/* ================= Cart ================= */
.fab{
  position:fixed;
  left:18px;
  bottom:18px;
  background:var(--brand);
  color:#fff;
  border:none;
  padding:12px 16px;
  border-radius:999px;
  box-shadow:var(--shadow);
  cursor:pointer
}

.cart{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(420px,92vw);
  background:#fff;
  border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:.2s;
  display:flex;
  flex-direction:column
}

.cart.is-open{transform:translateX(0)}

/* ================= Footer ================= */
.footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:26px 0
}

.footer__links a{
  color:var(--muted)
}

.footer__links a:hover{
  color:var(--brand)
}