/* ============================================
   ROOT — LIGHT THEME
   ============================================ */
:root{
  --bg:#f7f7f7;
  --panel:#ffffff;
  --panel2:#f0f0f0;
  --line:#e5e5e5;
  --muted:#767676;
  --text:#171717;
  --red:#e53b42;
  --red-dark:#a92029;
  --green:#2fa96b;
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Manrope,Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}
button:disabled{opacity:.4;cursor:not-allowed}

.app-shell{
  max-width:1160px;
  margin:auto;
  padding:0 30px 105px;
}

/* ============================================
   LOGO IMAGE
   ============================================ */
.logo-img{
  display:block;
  object-fit:contain;
  width:auto;
  height:auto;
  max-width:100%;
}
.logo-loader{
  width:80px !important;
  height:80px !important;
  border-radius:14px;
  object-fit:cover;
  margin:0 auto;
}
.logo-brand{
  width:38px !important;
  height:38px !important;
  border-radius:10px;
  flex-shrink:0;
  object-fit:cover;
}
.logo-hero{
  width:70% !important;
  height:70% !important;
  border-radius:20px;
  object-fit:contain;
}
.logo-about{
  width:55% !important;
  height:55% !important;
  border-radius:18px;
  object-fit:contain;
}
.logo-fallback{
  width:46px !important;
  height:46px !important;
  border-radius:10px;
  margin:0 auto 4px;
  object-fit:cover;
}
.logo-empty{
  width:54px !important;
  height:54px !important;
  border-radius:12px;
  object-fit:cover;
}
.cart-thumb-fallback.logo-img{
  width:60% !important;
  height:60% !important;
  border-radius:8px;
  object-fit:contain;
}

/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen{
  position:fixed;
  inset:0;
  background:#f7f7f7;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity .45s, visibility .45s;
}
.loading-screen.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  margin:0 auto;
}
.loader-line{
  width:180px;
  height:2px;
  background:#ddd;
  margin-top:24px;
  overflow:hidden;
  border-radius:2px;
}
.loader-line i{
  display:block;
  height:100%;
  width:0;
  background:var(--red);
  transition:width .1s;
}
.loader-meta{
  width:180px;
  display:flex;
  justify-content:space-between;
  margin-top:9px;
  font:9px 'DM Mono',monospace;
  color:#8a8a8a;
}

/* ============================================
   TOPBAR
   ============================================ */
.topbar{
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:none;
  color:inherit;
  padding:0;
  text-align:left;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.brand-copy strong{
  font-size:11px;
  letter-spacing:1.5px;
}
.brand-copy small{
  font:9px 'DM Mono',monospace;
  letter-spacing:1.5px;
  color:var(--muted);
}
.cart-top{
  display:flex;
  align-items:center;
  gap:9px;
  background:#f0f0f0;
  border:1px solid #ddd;
  color:#333;
  padding:10px 13px;
  border-radius:100px;
  font-size:11px;
}
.cart-top svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
}
.cart-top b{
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:10px;
}

/* ============================================
   PAGES
   ============================================ */
.page{display:none;animation:pageIn .35s ease}
.page.active{display:block}
@keyframes pageIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================
   HERO + BANNER
   ============================================ */
.hero{
  margin-top:24px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  padding:0 30px;
  min-height:375px;
  box-shadow:0 4px 24px rgba(0,0,0,.04);
}
.hero:after{
  content:"";
  position:absolute;
  inset:0 0 0 48%;
  background:linear-gradient(130deg,transparent 20%,rgba(229,59,66,.06),transparent 70%);
  pointer-events:none;
}

.hero-banner{
  position:relative;
  width:calc(100% + 60px);
  margin:0 -30px 22px;
  height:200px;
  overflow:hidden;
  background:linear-gradient(135deg,#f5f5f5,#e8e8e8);
  border-bottom:1px solid var(--line);
}
.hero-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .6s ease;
}
.hero:hover .hero-banner img{transform:scale(1.03)}
.hero-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.30) 45%,
    rgba(255,255,255,0) 75%);
  pointer-events:none;
}
.hero-banner-badge{
  position:absolute;
  top:16px;
  right:16px;
  font:9px 'DM Mono',monospace;
  letter-spacing:1.5px;
  background:#ffffffd9;
  border:1px solid var(--line);
  color:#c0242a;
  padding:7px 11px;
  border-radius:6px;
  backdrop-filter:blur(8px);
}

.hero-topline,
.eyebrow,
.tiny-tag,
.hero-footer,
.art-index,
.checkout-title,
.catalog-foot{
  font:10px 'DM Mono',monospace;
  letter-spacing:1.5px;
}
.hero-topline{
  display:flex;
  align-items:center;
  gap:8px;
  color:#666;
  padding-top:0;
}
.live-dot,
.status-light{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px #e53b421c;
  display:inline-block;
}
.hero-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:280px;
  position:relative;
  z-index:1;
  gap:20px;
}
.hero-copy{
  max-width:430px;
  padding:22px 0 26px;
}
.eyebrow{
  color:var(--red);
  margin:0 0 12px;
}
.hero h1,
.page-intro h1{
  font-size:clamp(40px,6.3vw,70px);
  line-height:.99;
  letter-spacing:-3.5px;
  margin:0;
  font-weight:800;
  color:#171717;
}
.hero h1 span,
.page-intro h1 span{color:#aaa}
.hero-desc,
.page-intro>p:last-child{
  max-width:390px;
  line-height:1.8;
  color:#666;
  font-size:13px;
  margin:18px 0 22px;
}

.primary-btn{
  border:0;
  background:var(--red);
  color:white;
  border-radius:9px;
  padding:13px 17px;
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  font-weight:800;
  transition:background .2s,transform .2s;
}
.primary-btn:hover{
  background:#f04a50;
  transform:translateY(-1px);
}
.primary-btn span{
  font-size:17px;
  font-weight:400;
}

/* Hero art */
.hero-art{
  width:300px;
  height:250px;
  position:relative;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.art-ring{
  position:absolute;
  border:1px solid #ddd;
  border-radius:50%;
  transform:rotate(-25deg);
}
.ring-one{width:245px;height:155px}
.ring-two{
  width:180px;
  height:220px;
  transform:rotate(38deg);
  border-color:#f0c0c2;
}
.art-core{
  width:110px;
  height:110px;
  border-radius:32px;
  background:linear-gradient(145deg,#ffffff,#eaeaea);
  border:1px solid #ddd;
  box-shadow:0 22px 50px rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  transform:rotate(-8deg);
  padding:14px;
}
.art-index{
  position:absolute;
  bottom:14px;
  right:5px;
  color:#999;
}
.art-line{
  position:absolute;
  width:130px;
  height:1px;
  background:var(--red);
  right:-30px;
  top:50%;
  transform:rotate(-35deg);
  opacity:.7;
}
.hero-footer{
  height:38px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#999;
  font-size:9px;
}

/* ============================================
   SECTION HEADING
   ============================================ */
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:35px 0 15px;
  gap:15px;
}
.section-heading h2{
  font-size:22px;
  letter-spacing:-.8px;
  margin:0;
  color:#171717;
}
.section-heading .eyebrow{margin-bottom:8px}
.tiny-tag{
  font-size:9px;
  color:#666;
  border:1px solid #ddd;
  border-radius:5px;
  padding:7px 9px;
  background:#fff;
  white-space:nowrap;
}

/* ============================================
   SYSTEM GRID
   ============================================ */
.system-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:10px;
}
.system-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px;
  min-width:0;
  min-height:142px;
  box-shadow:0 2px 12px rgba(0,0,0,.03);
}
.card-label{
  display:flex;
  align-items:center;
  gap:7px;
  color:#666;
  font-size:10px;
}
.mini-icon{
  margin-left:auto;
  color:var(--red);
  font:11px 'DM Mono',monospace;
}

.server-visual{
  height:31px;
  display:flex;
  align-items:end;
  gap:3px;
  margin:9px 0 10px;
  position:relative;
  overflow:hidden;
}
.signal-bars{
  display:flex;
  align-items:center;
  gap:3px;
  height:100%;
}
.signal-bars i{
  display:block;
  width:4px;
  height:25%;
  background:var(--red);
  border-radius:2px;
  animation:signal .85s ease-in-out infinite alternate;
}
.signal-bars i:nth-child(2n){animation-delay:.18s}
.signal-bars i:nth-child(3n){animation-delay:.4s}
.signal-bars i:nth-child(4n){animation-delay:.58s}
@keyframes signal{
  from{height:15%;opacity:.35}
  to{height:100%;opacity:1}
}
.server-pulse{
  height:1px;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:scan 2s linear infinite;
}
@keyframes scan{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

.system-main{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.system-main strong{
  font-size:12px;
  color:#171717;
}
.system-main span,
.muted-line{
  font-size:10px;
  color:#888;
  line-height:1.5;
}
.server-down{color:#d92b32!important}

.battery-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:18px 0 11px;
}
.battery-row strong,
.metric-value{
  font-size:23px;
  font-weight:700;
  letter-spacing:-1px;
  color:#171717;
}
.battery-icon{
  width:29px;
  height:15px;
  border:1px solid #999;
  border-radius:3px;
  padding:2px;
  position:relative;
}
.battery-icon:after{
  content:"";
  position:absolute;
  right:-4px;
  top:4px;
  width:2px;
  height:5px;
  background:#999;
}
.battery-icon div{
  height:100%;
  width:0;
  background:var(--green);
  border-radius:1px;
  transition:width .4s;
}
.meter{
  height:2px;
  background:#e0e0e0;
  margin-bottom:8px;
  border-radius:2px;
}
.meter i{
  display:block;
  width:0;
  height:100%;
  background:var(--green);
  transition:width .4s;
  border-radius:2px;
}
.metric-value{margin:23px 0 8px}
.negative{color:#d92b32}
.network-symbol{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  margin-left:auto;
}
.system-note{
  font-size:10px;
  color:#888;
  line-height:1.7;
  margin:10px 2px 0;
}

/* ============================================
   PRODUCTS
   ============================================ */
.product-heading{margin-top:37px}
.text-link{
  border:0;
  background:none;
  color:#444;
  font-size:11px;
  padding:7px 0;
  white-space:nowrap;
}
.text-link span{
  color:var(--red);
  font-size:16px;
  margin-left:7px;
}

.featured-grid,
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}
.product-card{
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel);
  overflow:hidden;
  min-width:0;
  transition:border-color .2s,transform .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.03);
}
.product-card:hover{
  border-color:#e5a5a8;
  transform:translateY(-2px);
}
.product-image-wrap{
  height:155px;
  position:relative;
  background:linear-gradient(135deg,#f5f5f5,#e8e8e8);
  overflow:hidden;
}
.product-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s;
}
.product-card:hover .product-image{transform:scale(1.04)}
.image-fallback{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  background:radial-gradient(ellipse at 50% 50%,#fdecec,#f5f5f5 65%);
  color:#999;
  font:8px 'DM Mono',monospace;
  letter-spacing:2px;
}
.image-fallback small{
  color:var(--red);
  font-size:8px;
}
.product-tag{
  position:absolute;
  top:10px;
  left:10px;
  font:8px 'DM Mono',monospace;
  letter-spacing:1px;
  background:#ffffffd9;
  border:1px solid #ddd;
  padding:6px 7px;
  border-radius:4px;
  color:#333;
  backdrop-filter:blur(6px);
}
.product-info{padding:14px}
.product-name-row{
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:start;
}
.product-name-row h3{
  font-size:13px;
  line-height:1.45;
  margin:0;
  font-weight:700;
  color:#171717;
}
.product-index{
  color:#999;
  font:9px 'DM Mono',monospace;
  padding-top:3px;
  flex-shrink:0;
}
.product-info>p{
  font-size:10px;
  color:#777;
  line-height:1.7;
  min-height:34px;
  margin:8px 0 13px;
}
.product-buy-row{
  border-top:1px solid #eee;
  padding-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.product-buy-row strong{
  font-size:14px;
  color:#171717;
}
.add-btn{
  width:31px;
  height:31px;
  border-radius:8px;
  border:1px solid #f0c0c2;
  background:#fdecec;
  color:#d92b32;
  font-size:22px;
  line-height:1;
  flex-shrink:0;
}
.add-btn:hover,
.add-btn.added{
  background:var(--red);
  color:white;
  border-color:var(--red);
}

.trust-strip{
  display:flex;
  align-items:center;
  gap:17px;
  padding:19px;
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(110deg,#ffffff,#f5f5f5);
}
.trust-number{
  font:22px 'DM Mono',monospace;
  color:var(--red);
}
.trust-strip strong{
  font-size:12px;
  color:#171717;
}
.trust-strip p{
  font-size:10px;
  color:#888;
  margin:5px 0 0;
}
.trust-arrow{
  margin-left:auto;
  font-size:20px;
  color:var(--red);
}

/* ============================================
   PAGE INTRO
   ============================================ */
.page-intro{
  padding:54px 0 27px;
  border-bottom:1px solid var(--line);
}
.page-intro h1{
  font-size:clamp(42px,7vw,66px);
}
.page-intro>p:last-child{
  margin-bottom:0;
  max-width:510px;
}

/* ============================================
   CATALOG
   ============================================ */
.catalog-tools{padding:20px 0 18px}
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #ddd;
  background:#fff;
  padding:0 13px;
  border-radius:10px;
  height:44px;
}
.search-box svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:#999;
  stroke-width:1.6;
  flex-shrink:0;
}
.search-box input{
  width:100%;
  border:0;
  outline:none;
  background:none;
  color:#171717;
  font-size:12px;
}
.search-box input::placeholder{color:#aaa}
.filter-row{
  display:flex;
  gap:7px;
  overflow:auto;
  padding:13px 0 2px;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{
  flex-shrink:0;
  border:1px solid #ddd;
  background:#fff;
  color:#666;
  border-radius:7px;
  padding:8px 12px;
  font-size:10px;
  transition:.2s;
}
.filter-chip.active{
  background:#fdecec;
  border-color:#f0a8ac;
  color:#c0242a;
}
.catalog-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.catalog-grid .product-image-wrap{height:180px}
.catalog-foot{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:25px;
  padding-top:15px;
  color:#999;
  font-size:9px;
}

/* ============================================
   CART (fallback)
   ============================================ */
.compact-intro{padding-top:44px}
.compact-intro h1{font-size:46px}
.compact-intro h1 span{color:var(--red)}
.cart-items{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:20px 0;
}
.cart-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:13px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.cart-thumb{
  width:73px;
  height:73px;
  flex-shrink:0;
  border-radius:9px;
  overflow:hidden;
  position:relative;
  background:#f0e0e1;
}
.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}
.cart-thumb-fallback{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  background:var(--red);
  padding:14px;
}
.cart-item-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cart-item-info>strong{
  font-size:12px;
  line-height:1.5;
  color:#171717;
}
.cart-item-info>span{
  font-size:10px;
  color:#888;
}
.qty-control{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:2px;
}
.qty-control button{
  width:24px;
  height:24px;
  border:1px solid #ddd;
  border-radius:5px;
  background:#f5f5f5;
  color:#333;
  line-height:1;
}
.qty-control span{font:11px 'DM Mono',monospace}
.cart-item-end{
  display:flex;
  flex-direction:column;
  align-items:end;
  gap:12px;
  flex-shrink:0;
}
.cart-item-end>strong{
  font-size:12px;
  color:#171717;
  white-space:nowrap;
}
.remove-item{
  border:0;
  background:none;
  color:#d92b32;
  font-size:10px;
}

.checkout-panel{
  padding:19px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.03);
}
.checkout-title{
  display:flex;
  justify-content:space-between;
  color:#888;
  font-size:9px;
  padding-bottom:17px;
  border-bottom:1px solid #eee;
  margin-bottom:12px;
  gap:10px;
}
.summary-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:10px 0;
  color:#888;
  font-size:11px;
}
.summary-row strong{
  color:#171717;
  font-weight:600;
}
.total-row{
  border-top:1px solid #e0e0e0;
  margin-top:5px;
  padding-top:15px;
  color:#171717;
}
.total-row strong{
  font-size:21px;
  color:#171717;
  letter-spacing:-.5px;
}
.checkout-note{
  font-size:10px;
  color:#888;
  line-height:1.7;
  margin:8px 0 17px;
}
.full-btn{width:100%;justify-content:center}
.secondary-btn{
  border:1px solid #ddd;
  background:#f5f5f5;
  color:#333;
  padding:13px;
  border-radius:9px;
  font-size:12px;
}

.empty-state{
  border:1px dashed #ddd;
  border-radius:14px;
  padding:35px 20px;
  text-align:center;
  color:#333;
  grid-column:1/-1;
  background:#fff;
}
.empty-state strong{font-size:13px}
.empty-state p{
  color:#888;
  font-size:11px;
  line-height:1.7;
  margin:8px 0 18px;
}
.empty-mark{
  display:grid;
  place-items:center;
  width:70px;
  height:70px;
  margin:0 auto 14px;
  border-radius:16px;
  background:radial-gradient(ellipse,#fdecec,#f5f5f5 70%);
  border:1px solid #f0dada;
  padding:14px;
}

/* ============================================
   ABOUT
   ============================================ */
.about-feature{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:25px;
  align-items:center;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}
.about-mark{
  height:170px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#fdecec,#f5f5f5 70%);
  border:1px solid #f0dada;
  border-radius:16px;
  padding:20px;
}
.about-feature h2{
  font-size:25px;
  letter-spacing:-1px;
  margin:0 0 10px;
  color:#171717;
}
.about-feature p:not(.eyebrow){
  font-size:12px;
  color:#777;
  line-height:1.9;
  max-width:500px;
}
.principle-list>div{
  display:flex;
  gap:20px;
  padding:19px 0;
  border-bottom:1px solid #eee;
}
.principle-list>div>span{
  font:12px 'DM Mono',monospace;
  color:var(--red);
  padding-top:2px;
  flex-shrink:0;
}
.principle-list strong{
  font-size:13px;
  color:#171717;
}
.principle-list p{
  font-size:11px;
  color:#888;
  margin:6px 0 0;
  line-height:1.7;
}

.contact-card{
  display:flex;
  align-items:center;
  gap:15px;
  margin:22px 0 35px;
  padding:19px;
  border:1px solid #f0c0c2;
  background:linear-gradient(120deg,#fdecec,#f9f9f9);
  border-radius:14px;
  text-decoration:none;
  color:#171717;
}
.contact-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--red);
  font-size:21px;
  color:#fff;
  flex-shrink:0;
}
.contact-card>span:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.contact-card small{
  font:9px 'DM Mono',monospace;
  color:#a66;
  letter-spacing:1px;
}
.contact-card strong{
  font-size:14px;
  color:#171717;
}
.contact-card em{
  font-size:10px;
  color:#888;
  font-style:normal;
}
.contact-arrow{
  margin-left:auto;
  color:#d92b32;
  font-size:19px;
  flex-shrink:0;
}

.faq-heading{margin-top:0}
.faq-list details{
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.faq-list summary{
  cursor:pointer;
  list-style:none;
  font-size:12px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#171717;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{
  content:"+";
  font-size:18px;
  font-weight:400;
  color:var(--red);
  line-height:12px;
  flex-shrink:0;
}
.faq-list details[open] summary:after{content:"−"}
.faq-list details p{
  font-size:11px;
  line-height:1.8;
  color:#888;
  max-width:700px;
  margin:13px 0 0;
}

/* ============================================
   BOTTOM NAV
   ============================================ */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,1160px);
  z-index:50;
  background:#fffffffa;
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:17px 17px 0 0;
  padding:9px 12px max(9px,env(safe-area-inset-bottom));
  display:flex;
  justify-content:space-around;
  box-shadow:0 -4px 20px rgba(0,0,0,.05);
}
.nav-item{
  position:relative;
  min-width:56px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  background:none;
  border:0;
  color:#999;
  font-size:9px;
  padding:3px 8px;
}
.nav-icon{
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
}
.nav-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-item.active{color:#171717}
.nav-item.active .nav-icon{color:#d92b32}
.nav-item.active:before{
  content:"";
  position:absolute;
  top:-9px;
  width:22px;
  height:2px;
  background:var(--red);
  border-radius:4px;
}
.nav-count{
  position:absolute;
  top:-1px;
  right:5px;
  min-width:14px;
  height:14px;
  border-radius:7px;
  background:var(--red);
  color:white;
  font-size:8px;
  font-style:normal;
  display:grid;
  place-items:center;
}

.site-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#999;
  font:8px 'DM Mono',monospace;
  letter-spacing:1px;
  padding-top:30px;
}

/* ============================================
   TOAST
   ============================================ */
.toast{
  position:fixed;
  z-index:300;
  left:50%;
  bottom:90px;
  transform:translate(-50%,12px);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  background:#171717;
  color:#fff;
  border-radius:9px;
  padding:12px 16px;
  font-size:11px;
  font-weight:700;
  box-shadow:0 8px 25px rgba(0,0,0,.15);
  max-width:90%;
  text-align:center;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

/* ============================================
   MODAL INSTRUKSI PEMBELIAN
   ============================================ */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,17,17,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:200;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  opacity:0;
  transition:opacity .25s;
}
.modal-backdrop.open{
  display:flex;
  opacity:1;
}

.modal-box{
  position:relative;
  width:min(100%,520px);
  max-height:92vh;
  overflow-y:auto;
  background:#ffffff;
  border-radius:22px 22px 0 0;
  padding:24px 22px max(24px, env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.18);
  animation:modalUp .3s ease;
  color:var(--text);
}
@keyframes modalUp{
  from{transform:translateY(30px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f0f0f0;
  border:1px solid #ddd;
  color:#555;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.modal-close:hover{
  background:#e6e6e6;
  color:#111;
}

.modal-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  padding-right:40px;
}
.modal-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0;
  background:#f5f5f5;
}
.modal-eyebrow{
  font:9px 'DM Mono',monospace;
  letter-spacing:1.5px;
  color:var(--red);
  margin:0 0 4px;
}
.modal-header h3{
  font-size:17px;
  margin:0;
  font-weight:800;
  letter-spacing:-.4px;
  line-height:1.3;
}

.modal-product{
  display:flex;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  background:#fafafa;
  border-radius:14px;
  margin-bottom:18px;
}
.modal-product-thumb{
  width:64px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  background:#f0e0e1;
  flex-shrink:0;
  position:relative;
}
.modal-product-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.modal-product-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1;
}
.modal-product-info span{
  font:8px 'DM Mono',monospace;
  letter-spacing:1px;
  color:var(--red);
  text-transform:uppercase;
}
.modal-product-info strong{
  font-size:15px;
  color:#111;
}
.modal-product-info small{
  font-size:10px;
  color:#777;
  line-height:1.5;
}

.modal-step-title{
  font-size:11px;
  font-weight:700;
  color:#333;
  margin:0 0 10px;
}

.pay-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:16px;
}
.pay-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1.5px solid #ddd;
  background:#fafafa;
  border-radius:12px;
  text-align:left;
  transition:.2s;
  font-family:inherit;
  cursor:pointer;
}
.pay-tab:hover{border-color:#ccc}
.pay-tab.active{
  border-color:var(--red);
  background:#fdecec;
}
.pay-tab-icon{
  font-size:20px;
  color:var(--red);
  line-height:1;
}
.pay-tab span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.pay-tab b{
  font-size:12px;
  color:#111;
  font-weight:700;
}
.pay-tab small{
  font-size:9px;
  color:#777;
}

.pay-panel{
  display:none;
  margin-bottom:16px;
}
.pay-panel.active{display:block}

.qris-wrap{
  display:grid;
  place-items:center;
  padding:16px;
  background:#fafafa;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:12px;
}
.qris-wrap img{
  width:min(100%, 240px);
  height:auto;
  display:block;
  border-radius:8px;
  background:#fff;
}

.dana-wrap{
  padding:16px;
  background:#fafafa;
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:12px;
}
.dana-label{
  display:block;
  font:9px 'DM Mono',monospace;
  letter-spacing:1.5px;
  color:#888;
  margin-bottom:8px;
}
.dana-number{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background:#fff;
  border:1.5px dashed var(--red);
  border-radius:10px;
  margin-bottom:8px;
}
.dana-number strong{
  font-size:19px;
  letter-spacing:.5px;
  color:#111;
  font-family:'DM Mono',monospace;
}
.copy-btn{
  background:var(--red);
  color:#fff;
  border:0;
  border-radius:7px;
  padding:8px 14px;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
}
.copy-btn:hover{background:#f04a50}
.dana-hint{
  font-size:10px;
  color:#888;
}
.dana-hint b{color:#333}

.pay-note{
  font-size:11px;
  color:#777;
  line-height:1.7;
  margin:0;
}
.pay-note b{color:#333}

.modal-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:#fdecec;
  border:1px solid #f0c0c2;
  border-radius:12px;
  margin:16px 0 14px;
}
.modal-total span{
  font-size:11px;
  color:#a66;
  font-weight:600;
}
.modal-total strong{
  font-size:19px;
  color:#c0242a;
  letter-spacing:-.4px;
}

/* ============================================
   TOMBOL WHATSAPP — DIPERBAIKI UNTUK <a>
   ============================================ */
.confirm-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:#25D366;
  color:#fff;
  border:0;
  border-radius:12px;
  padding:15px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition:background .2s, transform .2s;
  text-decoration:none;   /* ← WAJIB untuk <a> */
}
.confirm-btn:hover{
  background:#1ebe5b;
  transform:translateY(-1px);
}
.confirm-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wa-fallback-btn{
  display:block;         /* ← untuk <a> */
  width:100%;
  text-align:center;
  background:none;
  border:0;
  color:#888;
  font-size:10px;
  text-decoration:underline;
  padding:12px 0 4px;
  cursor:pointer;
}
.wa-fallback-btn:hover{color:var(--red)}

.modal-footnote{
  text-align:center;
  font-size:10px;
  color:#999;
  line-height:1.6;
  margin:8px 0 0;
}
.modal-footnote b{color:#555}

/* ============================================
   RESPONSIVE — DESKTOP
   ============================================ */
@media(min-width:900px){
  .hero{
    min-height:400px;
    padding-left:42px;
    padding-right:42px;
  }
  .hero-banner{
    width:calc(100% + 84px);
    margin:0 -42px 24px;
    height:260px;
  }
  .hero-banner-badge{
    top:20px;
    right:20px;
    padding:8px 13px;
  }
  .hero-content{min-height:305px}
  .hero-art{width:380px;height:280px}
  .ring-one{width:310px;height:190px}
  .ring-two{width:220px;height:280px}
  .art-core{width:130px;height:130px}
  .product-image-wrap{height:180px}
  .catalog-grid .product-image-wrap{height:210px}
}

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
@media(max-width:760px){
  .app-shell{padding:0 16px 100px}
  .topbar{height:70px}
  .logo-brand{
    width:34px !important;
    height:34px !important;
    border-radius:9px;
  }
  .brand-copy strong{font-size:10px}
  .cart-top{padding:9px 10px}
  .hero{
    padding:0 20px;
    margin-top:16px;
    min-height:0;
  }
  .hero-banner{
    width:calc(100% + 40px);
    margin:0 -20px 16px;
    height:160px;
  }
  .hero-banner-badge{
    top:12px;
    right:12px;
    font-size:8px;
    padding:6px 9px;
  }
  .hero-content{
    min-height:250px;
    gap:10px;
  }
  .hero-copy{
    max-width:58%;
    padding:23px 0;
  }
  .hero h1{
    font-size:clamp(37px,8vw,56px);
    letter-spacing:-2.8px;
  }
  .hero-desc{
    font-size:11px;
    line-height:1.7;
  }
  .hero-art{
    width:40%;
    height:200px;
    margin-right:-8px;
  }
  .ring-one{width:160px;height:110px}
  .ring-two{width:125px;height:170px}
  .art-core{
    width:77px;
    height:77px;
    border-radius:23px;
  }
  .logo-hero{
    width:65% !important;
    height:65% !important;
  }
  .art-line{
    width:70px;
    right:-14px;
  }
  .system-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .system-card{min-height:137px}
  .featured-grid,
  .catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .product-image-wrap{height:130px}
  .catalog-grid .product-image-wrap{height:145px}
  .product-info{padding:11px}
  .product-name-row h3{font-size:12px}
  .product-info>p{
    font-size:9px;
    min-height:44px;
  }
  .product-buy-row strong{font-size:12px}
  .add-btn{width:29px;height:29px}
  .section-heading h2{font-size:20px}
  .page-intro{padding-top:40px}
  .page-intro h1{
    font-size:53px;
    letter-spacing:-3px;
  }
  .about-feature{
    grid-template-columns:115px 1fr;
    gap:17px;
  }
  .about-mark{height:130px}
  .logo-about{
    width:60% !important;
    height:60% !important;
  }
  .about-feature h2{font-size:21px}
  .about-feature p:not(.eyebrow){font-size:11px}
  .site-footer{
    font-size:7px;
    letter-spacing:.5px;
  }
  .nav-item{
    padding:3px 5px;
    min-width:49px;
  }
  .nav-item>span:last-of-type{font-size:8px}
}

/* ============================================
   RESPONSIVE — SMALL MOBILE
   ============================================ */
@media(max-width:390px){
  .app-shell{
    padding-left:12px;
    padding-right:12px;
  }
  .hero{padding:0 15px}
  .hero-banner{
    width:calc(100% + 30px);
    margin:0 -15px 14px;
    height:130px;
  }
  .hero-banner-overlay{
    background:linear-gradient(90deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.40) 55%,
      rgba(255,255,255,0) 80%);
  }
  .hero h1{font-size:36px}
  .hero-art{
    width:36%;
    margin-right:-5px;
  }
  .hero-desc{font-size:10px}
  .primary-btn{
    padding:12px;
    font-size:10px;
    gap:12px;
  }
  .product-image-wrap{height:115px}
  .catalog-grid .product-image-wrap{height:125px}
  .product-info{padding:9px}
  .product-name-row h3{font-size:11px}
  .product-info>p{min-height:52px}
  .product-buy-row strong{font-size:11px}
  .nav-item{min-width:43px}
  .nav-icon svg{
    width:17px;
    height:17px;
  }
  .nav-item>span:last-of-type{font-size:7px}
  .cart-thumb{width:60px;height:60px}
  .cart-item{gap:9px;padding:9px}
  .cart-item-end>strong{font-size:10px}
}

/* ============================================
   RESPONSIVE — MODAL DESKTOP
   ============================================ */
@media(min-width:600px){
  .modal-backdrop{
    align-items:center;
    padding:20px;
  }
  .modal-box{
    border-radius:22px;
    animation:modalPop .3s ease;
  }
  @keyframes modalPop{
    from{transform:scale(.96);opacity:0}
    to{transform:scale(1);opacity:1}
  }
}

@media(max-width:390px){
  .modal-box{
    padding:20px 16px max(20px, env(safe-area-inset-bottom));
  }
  .modal-header h3{font-size:15px}
  .modal-logo{width:38px;height:38px}
  .dana-number strong{font-size:16px}
  .copy-btn{
    padding:7px 11px;
    font-size:10px;
  }
  .qris-wrap img{width:min(100%, 200px)}
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media(prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}