:root{
  --W:#FFFFFF;--B:#000000;--G1:#111111;--G2:#1A1A1A;--G3:#222222;
  --G4:#2A2A2A;--G5:#444444;--MT:#888888;--LT:#CCCCCC;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--B);
  color:var(--W);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

a{color:var(--W);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1260px;margin:0 auto;padding:0 32px}
.divider{height:1px;background:var(--G4)}
.page{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

/* NAV */
.nav{
  background:var(--B);
  border-bottom:1px solid var(--G4);
  position:sticky;
  top:0;
  z-index:200;
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  max-width:1440px;
  margin:0 auto;
  padding:0 42px;
}

.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand-mark{height:40px;width:40px;object-fit:contain}
.brand-name{
  font-weight:800;
  letter-spacing:.32em;
  font-size:18px;
  color:var(--W);
}

.links{display:flex;gap:42px}
.link{
  color:var(--W);
  font-size:13px;
  letter-spacing:.06em;
  transition:opacity .15s;
}
.link:hover,.link.active{
  opacity:.7;
  text-decoration:none;
}

/* TICKER */
.ticker{
  background:var(--W);
  overflow:hidden;
  padding:9px 0;
  white-space:nowrap;
  border-bottom:1px solid var(--G4);
}

.ticker-track{
  display:inline-flex;
  gap:32px;
  animation:tick 30s linear infinite;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--B);
}

.tdot{opacity:.4}
@keyframes tick{to{transform:translateX(-50%)}}

/* HERO */
.hero{
  position:relative;
  min-height:68vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--B);
  border-bottom:1px solid var(--G4);
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 55% 70% at 50% 45%,rgba(255,255,255,.08),transparent 65%),
    radial-gradient(ellipse 70% 90% at 50% 50%,var(--G2),var(--B) 72%);
}

.hero-content{
  position:relative;
  max-width:900px;
  width:100%;
  padding:0 24px;
  margin:0 auto;
  z-index:2;
}

.hero-eye{
  font-size:12px;
  font-weight:500;
  letter-spacing:.55em;
  color:var(--LT);
  margin-bottom:24px;
}

.hero h1{
  font-size:clamp(48px,6vw,88px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.05em;
  margin-bottom:26px;
  color:var(--W);
}

.hero-sub{
  font-size:20px;
  color:var(--LT);
  max-width:720px;
  margin:0 auto 38px;
  line-height:1.55;
}

.hero-btns{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.hero-rule{
  position:absolute;
  right:13%;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--G4),transparent);
}

/* BUTTONS */
.btn-w{
  display:inline-block;
  min-width:150px;
  padding:15px 34px;
  background:var(--W);
  color:var(--B);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  border:1px solid var(--W);
  cursor:pointer;
  transition:opacity .15s,transform .15s;
  text-align:center;
}

.btn-w:hover{
  opacity:.9;
  transform:translateY(-1px);
  text-decoration:none;
}

.btn-o{
  display:inline-block;
  min-width:150px;
  padding:15px 34px;
  background:transparent;
  color:var(--W);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  border:1px solid var(--LT);
  cursor:pointer;
  transition:border-color .15s,transform .15s;
  text-align:center;
}

.btn-o:hover{
  border-color:var(--W);
  transform:translateY(-1px);
  text-decoration:none;
}

/* SECTION HEADS */
.sec-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:24px;
}

.sec-head h2{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
}

.see-all{
  font-size:14px;
  color:var(--W);
  transition:opacity .15s;
}

.see-all:hover{
  opacity:.7;
  text-decoration:none;
}

/* CATEGORIES */
.cats-section{padding:38px 0 72px}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
  background:transparent;
  border:none;
}

.cat-tile{
  display:block;
  background:transparent;
  text-align:center;
  transition:opacity .2s,transform .2s;
}

.cat-tile:hover{
  text-decoration:none;
  transform:translateY(-3px);
}

.cat-img{
  height:255px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  overflow:hidden;
  background-color:var(--G2);
}

.cat-img::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.08));
  z-index:1;
}

.cat-tile:nth-child(1) .cat-img{
  background-image:url('/images/categories/phn.png');
}

.cat-tile:nth-child(2) .cat-img{
  background-image:url('/images/categories/tech.png');
}

.cat-tile:nth-child(3) .cat-img{
  background-image:url('/images/categories/home.png');
}

.cat-tile:nth-child(4) .cat-img{
  background-image:url('/images/categories/fashion.png');
}

.cat-tile:nth-child(5) .cat-img{
  background-image:url('/images/categories/lifestyle.png');
}

.cat-tile:nth-child(6) .cat-img{
  background-image:url('/images/categories/appliances.png');
}

.cat-label{
  font-size:16px;
  font-weight:800;
  color:var(--W);
  position:relative;
  z-index:2;
}

.cat-desc{
  font-size:14px;
  color:var(--LT);
  padding:10px 6px 0;
  line-height:1.45;
}

.cat-tile.dim{
  opacity:1;
}

.cat-tile.dim .cat-img{
  filter:none;
}

/* COMING SOON */
.soon-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3em;
  color:var(--W);
  background:rgba(0,0,0,.58);
  z-index:3;
  filter:none!important;
}

.soon-pill{
  display:inline-block;
  padding:8px 20px;
  border:1px solid var(--G4);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--MT);
}

/* PRODUCT SCROLL */
.pscroll-section{padding:0 0 72px}

.pscroll{
  display:flex;
  gap:0;
  overflow-x:scroll;
  border-top:1px solid var(--G4);
  border-bottom:1px solid var(--G4);
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.pscroll::-webkit-scrollbar{display:none}

.ptile{
  flex:0 0 240px;
  border-right:1px solid var(--G4);
  background:var(--B);
  transition:background .2s;
  cursor:pointer;
}

.ptile:hover{background:var(--G1)}

.ptile-img{
  height:240px;
  background:var(--G2);
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:12px;
  overflow:hidden;
}
.ptile-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.ptile-img .soon-overlay,
.ptile-img .pbadge{
  position:relative;
  z-index:2;
}

.pbadge{
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  padding:4px 8px;
  background:var(--W);
  color:var(--B);
  z-index:2;
}

.ptile-body{padding:16px 18px 20px}

.pcat{
  font-size:10px;
  color:var(--MT);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ptile h3{
  font-size:14px;
  font-weight:600;
  margin:4px 0 8px;
  color:var(--W);
}

.pprice{
  font-size:14px;
  font-weight:800;
  color:var(--W);
}

.ptile-dim .ptile-img{filter:blur(4px)}

/* FEATURE BLOCKS */
.fblock{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:520px;
}

.fblock-alt{direction:rtl}
.fblock-alt .fblock-copy,.fblock-alt .fblock-visual{direction:ltr}

.fblock-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 72px;
  background:var(--G1);
  border-right:1px solid var(--G4);
}

.fblock-alt .fblock-copy{
  border-right:none;
  border-left:1px solid var(--G4);
}

.fblock-eye{
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--MT);
  margin-bottom:14px;
  display:block;
}

.fblock-copy h2{
  font-size:clamp(28px,3.5vw,46px);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:16px;
  line-height:1.05;
  color:var(--W);
}

.fblock-copy p{
  font-size:15px;
  color:var(--MT);
  margin-bottom:28px;
  line-height:1.65;
  max-width:400px;
}

.fblock-visual{
  background:var(--G2);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  min-height:520px;
}

.visual-blur{filter:blur(8px)}
.visual-blur .soon-overlay{filter:none!important}

/* STATS */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.stat{
  padding:44px 24px;
  border-right:1px solid var(--G4);
  text-align:center;
  background:var(--B);
}

.stat:last-child{border-right:none}

.sn{
  display:block;
  font-size:44px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--W);
  margin-bottom:6px;
}

.sl{
  font-size:11px;
  color:var(--MT);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* REVIEWS */
.reviews-section{padding:72px 0}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--G4);
  border:1px solid var(--G4);
}

.review-card{
  background:var(--B);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.stars{
  color:var(--W);
  font-size:14px;
  letter-spacing:3px;
}

.review-card p{
  font-size:15px;
  color:var(--LT);
  line-height:1.55;
  font-style:italic;
}

.rauthor{
  font-size:13px;
  font-weight:800;
  color:var(--W);
}

.rprod{
  font-size:12px;
  color:var(--MT);
}

/* NOTIFY */
.notify-section{
  background:var(--W);
  border-top:1px solid var(--G4);
}

.notify-inner{
  max-width:580px;
  margin:0 auto;
  text-align:center;
  padding:80px 24px;
}

.notify-inner h2{
  font-size:clamp(32px,5vw,52px);
  font-weight:800;
  letter-spacing:-.04em;
  margin-bottom:12px;
  color:var(--B);
}

.notify-inner p{
  font-size:15px;
  color:var(--G5);
  margin-bottom:32px;
}

.nform{
  display:flex;
  max-width:420px;
  margin:0 auto;
}

.ninput{
  flex:1;
  padding:14px 16px;
  background:var(--W);
  border:1px solid var(--G4);
  border-right:none;
  color:var(--B);
  font-size:14px;
  outline:none;
}

.ninput:focus{border-color:var(--B)}
.ninput::placeholder{color:var(--G5)}
.nform .btn-w{border:1px solid var(--B)}

/* FOOTER */
.footer{
  border-top:1px solid var(--G4);
  background:var(--B);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:28px 32px;
  font-size:12px;
  color:var(--MT);
  max-width:1260px;
  margin:0 auto;
}

/* SHOP PAGE */
.section{padding:64px 0}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--G4);
  border:1px solid var(--G4);
}

.card{
  background:var(--B);
  transition:background .2s;
  cursor:pointer;
}

.card:hover{background:var(--G1)}

.card-thumb{
  height:220px;
  background:var(--G2);
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:12px;
}

.card-cat{
  display:block;
  font-size:10px;
  color:var(--MT);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:16px 20px 0;
}

.card h3{
  font-size:14px;
  font-weight:600;
  padding:4px 20px;
  color:var(--W);
}

.card p{
  font-size:12px;
  color:var(--MT);
  padding:0 20px;
}

.price{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--W);
  padding:8px 20px 20px;
}

.filter-row{
  display:flex;
  border-bottom:1px solid var(--G4);
  overflow-x:auto;
  scrollbar-width:none;
}

.filter-row::-webkit-scrollbar{display:none}

.filter{
  padding:14px 24px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--MT);
  cursor:pointer;
  border-right:1px solid var(--G4);
  white-space:nowrap;
  transition:color .15s,background .15s;
}

.filter:hover{color:var(--W)}
.filter.active{background:var(--W);color:var(--B)}

/* PROSE */
.prose{max-width:720px}

.prose p{
  color:var(--LT);
  font-size:16px;
  line-height:1.7;
  margin-bottom:16px;
}

.prose h2{
  font-size:22px;
  font-weight:800;
  margin:32px 0 12px;
  color:var(--W);
}

.facts{list-style:none}

.facts li{
  padding:10px 0;
  border-bottom:1px solid var(--G4);
  font-size:14px;
  color:var(--LT);
}

/* RESPONSIVE */
@media(max-width:1024px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .fblock,.fblock-alt{grid-template-columns:1fr;direction:ltr}
  .fblock-copy{
    border-right:none;
    border-bottom:1px solid var(--G4);
    padding:48px 40px;
  }
  .fblock-visual{min-height:300px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--G4)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .hero-content{padding:0 40px}
}

@media(max-width:640px){
  .wrap{padding:0 20px}
  .nav-inner{padding:0 20px;height:64px}
  .footer-inner{padding:20px}
  .hero{min-height:75vh}
  .hero-content{padding:0 24px}
  .hero h1{font-size:42px}
  .hero-sub{font-size:16px}
  .hero-eye{font-size:10px;letter-spacing:.35em}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-img{height:190px}
  .cat-desc{font-size:12px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr 1fr}
  .links{gap:20px}
  .brand-name{font-size:15px}
  .nform{flex-direction:column}
  .ninput{
    border-right:1px solid var(--G4);
    border-bottom:none;
  }
  .nform .btn-w{border:1px solid var(--B)}
}
.shop-wrap{ padding:48px 0 80px }
.shop-head{ padding:0 0 28px }
.shop-head h1{ font-size:36px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px }
.shop-head p{ font-size:15px;color:var(--MT) }
.card-badge{
  position:absolute;top:12px;left:12px;
  font-size:9px;font-weight:800;letter-spacing:.12em;
  padding:4px 10px;background:var(--W);color:var(--B);z-index:2
}
.card-thumb{
  height:280px;background:var(--G2);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.card-thumb img{
  width:100%;height:100%;object-fit:cover;display:block
}
/* ABOUT */
.about-hero{
  padding:100px 0 80px;
  background:var(--G1);
  border-bottom:1px solid var(--G4);
}
.about-eye{
  font-size:11px;font-weight:800;letter-spacing:.22em;
  color:var(--MT);margin-bottom:20px;
}
.about-hero h1{
  font-size:clamp(40px,6vw,72px);font-weight:800;
  letter-spacing:-.04em;line-height:1.05;margin-bottom:22px;
}
.about-sub{
  font-size:18px;color:var(--MT);max-width:560px;line-height:1.6;
}

.about-split{
  display:grid;grid-template-columns:1fr 1fr;min-height:480px;
}
.about-split-text{
  display:flex;flex-direction:column;justify-content:center;
  padding:64px 72px;background:var(--G1);border-right:1px solid var(--G4);
}
.about-split-text h2{
  font-size:clamp(26px,3vw,38px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:18px;line-height:1.1;
}
.about-split-text p{
  font-size:15px;color:var(--MT);line-height:1.7;margin-bottom:14px;max-width:420px;
}
.about-split-visual{
  background:var(--G2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.about-split-visual::after{
  content:'NAVIJ';font-size:72px;font-weight:800;
  letter-spacing:-.04em;color:var(--G3);
}

.about-values{padding:72px 0}
.values-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--G4);border:1px solid var(--G4);
}
.value-card{
  background:var(--B);padding:36px 28px;
  display:flex;flex-direction:column;gap:12px;
}
.value-num{
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--MT);
}
.value-card h3{font-size:17px;font-weight:800;color:var(--W)}
.value-card p{font-size:14px;color:var(--MT);line-height:1.6}

.about-details{padding:64px 0}
.details-grid{
  border:1px solid var(--G4);overflow:hidden;
}
.detail-row{
  display:flex;align-items:center;
  padding:18px 24px;border-bottom:1px solid var(--G4);
  gap:24px;
}
.detail-row:last-child{border-bottom:none}
.detail-label{
  font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--MT);min-width:180px;
}
.detail-value{
  font-size:15px;color:var(--W);font-weight:500;
}

.about-cta{
  padding:80px 0;text-align:center;background:var(--G1);
}
.about-cta h2{
  font-size:clamp(28px,4vw,48px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:12px;
}
.about-cta p{font-size:16px;color:var(--MT);margin-bottom:28px}

@media(max-width:1024px){
  .about-split{grid-template-columns:1fr}
  .about-split-visual{min-height:280px}
  .about-split-text{border-right:none;border-bottom:1px solid var(--G4);padding:48px 32px}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .about-hero{padding:64px 0 48px}
  .values-grid{grid-template-columns:1fr}
  .detail-row{flex-direction:column;align-items:flex-start;gap:4px}
  .detail-label{min-width:unset}
}

/* CONTACT */
.contact-section{ padding:72px 0 }

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:0;
  border:1px solid var(--G4);
}

.contact-info{
  border-right:1px solid var(--G4);
  display:flex;
  flex-direction:column;
}

.contact-block{
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-label{
  font-size:10px;font-weight:800;
  letter-spacing:.2em;color:var(--MT);
}

.contact-value{
  font-size:16px;font-weight:600;color:var(--W);
}

a.contact-value:hover{ opacity:.7;text-decoration:none }

.contact-form-wrap{
  padding:40px 48px;
}

.contact-form-wrap h2{
  font-size:26px;font-weight:800;
  letter-spacing:-.02em;margin-bottom:6px;
}

.contact-form-sub{
  font-size:14px;color:var(--MT);margin-bottom:28px;
}

.cform{ display:flex;flex-direction:column;gap:18px }

.cform-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}

.cform-group{
  display:flex;flex-direction:column;gap:7px;
}

.cform-group label{
  font-size:11px;font-weight:800;
  letter-spacing:.1em;color:var(--MT);
}

.cform-group input,
.cform-group textarea{
  background:var(--G2);
  border:1px solid var(--G4);
  color:var(--W);
  font-size:14px;
  padding:13px 16px;
  outline:none;
  font-family:inherit;
  resize:none;
  transition:border-color .15s;
}

.cform-group input:focus,
.cform-group textarea:focus{
  border-color:var(--W);
}

.cform-group input::placeholder,
.cform-group textarea::placeholder{
  color:var(--G5);
}

.form-success{
  font-size:14px;color:var(--W);
  padding:12px 16px;border:1px solid var(--G4);
  background:var(--G2);margin-top:4px;
}

@media(max-width:900px){
  .contact-grid{ grid-template-columns:1fr }
  .contact-info{ border-right:none;border-bottom:1px solid var(--G4) }
  .contact-form-wrap{ padding:32px 24px }
  .cform-row{ grid-template-columns:1fr }
}