:root{--bg:#030712;--a:#22d3ee;--b:#a78bfa;--c:#fb7185;--text:#e5e7eb;--muted:#94a3b8;--line:rgba(148,163,184,.18);--glass:rgba(15,23,42,.66)}*{box-sizing:border-box}.space-body{margin:0;min-height:100vh;background:#030712;color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}.space-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(circle at 20% 10%,rgba(34,211,238,.15),transparent 28%),radial-gradient(circle at 80% 20%,rgba(167,139,250,.15),transparent 32%),radial-gradient(circle at 50% 90%,rgba(251,113,133,.10),transparent 38%),#030712}.space-bg:before{content:"";position:absolute;inset:-90px;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#67e8f9 1px,transparent 1px),radial-gradient(#c4b5fd 1px,transparent 1px);background-size:60px 60px,110px 110px,170px 170px;background-position:0 0,30px 50px,80px 20px;opacity:.16;animation:stars 38s linear infinite}.space-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(34,211,238,.05),transparent,rgba(167,139,250,.04),transparent);animation:nebula 12s ease-in-out infinite alternate}.infinity-orbit{position:absolute;left:50%;top:45%;width:92vmax;height:46vmax;transform:translate(-50%,-50%);border:1px solid rgba(34,211,238,.16);border-radius:50%;filter:blur(.2px);animation:orbit 24s linear infinite}.infinity-orbit:before,.infinity-orbit:after{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(167,139,250,.12);transform:rotate(60deg)}.infinity-orbit:after{transform:rotate(-60deg);border-color:rgba(251,113,133,.1)}@keyframes stars{to{transform:translate3d(-80px,80px,0)}}@keyframes nebula{to{filter:hue-rotate(25deg) brightness(1.2)}}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes floaty{50%{transform:translateY(-9px)}}.space-wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:28px 18px 90px}.space-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.space-header h1{font-family:'Oxanium',sans-serif;font-size:clamp(30px,6vw,52px);font-weight:900;font-style:italic;letter-spacing:.08em;margin:0;background:linear-gradient(90deg,var(--a),#60a5fa,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px rgba(34,211,238,.18)}.space-header p{margin:4px 0 0;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.35em;font-weight:800}.space-logo{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--a);box-shadow:0 0 35px rgba(34,211,238,.12);animation:floaty 4s ease-in-out infinite}.hero-card,.search-card,.space-product,.bottom-nav,.cat-arrow,.cat-btn{border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,23,42,.76),rgba(2,6,23,.68));backdrop-filter:blur(20px);box-shadow:0 24px 70px rgba(0,0,0,.25)}.hero-card{position:relative;overflow:hidden;border-radius:32px;padding:24px;display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}.hero-card:before{content:"";position:absolute;right:-60px;top:-60px;width:210px;height:210px;border-radius:50%;background:rgba(34,211,238,.14);filter:blur(28px)}.hero-content{position:relative;max-width:720px}.hero-badge{display:inline-flex;border:1px solid rgba(251,113,133,.35);background:rgba(251,113,133,.13);color:#fda4af;border-radius:999px;padding:7px 10px;font-size:9px;font-weight:900;letter-spacing:.14em}.hero-content h2{font-family:'Oxanium',sans-serif;font-size:clamp(20px,4vw,34px);font-weight:900;margin:10px 0 6px}.hero-content p{color:#cbd5e1;font-size:13px;line-height:1.7;max-width:650px}.hero-btn,.space-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,var(--a),#60a5fa);color:#020617!important;border-radius:15px;padding:12px 15px;font-weight:900;font-size:12px;text-decoration:none;border:0;transition:.2s;box-shadow:0 0 25px rgba(34,211,238,.18)}.hero-btn:hover,.space-btn:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(34,211,238,.30)}.hero-price{position:relative;min-width:122px;height:122px;border-radius:26px;background:rgba(2,6,23,.65);border:1px solid rgba(255,255,255,.13);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(3deg);box-shadow:0 30px 80px rgba(0,0,0,.25)}.hero-price span,.hero-price small{font-size:10px;color:#94a3b8}.hero-price b{font-family:'Oxanium',sans-serif;font-size:32px;color:var(--a)}.search-card{border-radius:20px;padding:6px 13px;display:flex;align-items:center;gap:11px;position:sticky;top:12px;z-index:25;margin-bottom:14px}.search-card input{height:42px;width:100%;background:transparent;border:0;outline:0;color:white;font-size:13px;font-weight:700}.search-card i{color:var(--a)}.cat-shell{display:flex;align-items:center;gap:10px;margin-bottom:18px}.cat-scroll{display:flex;gap:9px;overflow:auto;scrollbar-width:none;flex:1}.cat-scroll::-webkit-scrollbar{display:none}.cat-arrow{width:38px;height:38px;border-radius:14px;color:#cbd5e1}.cat-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-radius:15px;padding:11px 14px;color:#cbd5e1;font-size:11px;font-weight:900;letter-spacing:.06em;transition:.2s}.cat-btn.active,.cat-btn:hover{background:linear-gradient(135deg,var(--a),#60a5fa);color:#020617;border-color:transparent;box-shadow:0 0 28px rgba(34,211,238,.22)}.product-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.space-product{border-radius:24px;padding:10px;overflow:hidden;transition:.22s}.space-product:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.35);box-shadow:0 24px 70px rgba(0,0,0,.36)}.space-product-img{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.05)}.space-product-img img{width:100%;height:100%;object-fit:cover;transition:.65s}.space-product:hover img{transform:scale(1.08)}.space-product-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),transparent 55%)}.space-label{position:absolute;right:0;top:0;z-index:2;font-size:9px;font-weight:900;padding:7px 9px;border-radius:0 0 0 14px}.label-new{background:#22d3ee;color:#020617}.label-hot{background:#f43f5e;color:white;box-shadow:0 0 18px rgba(244,63,94,.45)}.space-cat-chip,.space-sold{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.14);background:rgba(2,6,23,.66);backdrop-filter:blur(12px);border-radius:999px;padding:6px 8px;font-size:9px;font-weight:900}.space-cat-chip{left:8px;top:8px;color:#67e8f9}.space-sold{left:8px;bottom:8px;color:#e5e7eb}.space-sold i{color:#fb7185}.space-product-body{padding:10px 2px 2px}.space-product-row{display:flex;align-items:start;justify-content:space-between;gap:8px}.space-product h3{font-size:13px;line-height:1.3;font-weight:900;color:white;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.space-price{font-size:10px;font-weight:900;color:#020617;background:#22d3ee;padding:4px 6px;border-radius:999px;white-space:nowrap}.space-ready{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:10px;font-weight:800;margin-bottom:10px}.space-ready span{width:7px;height:7px;background:#22d3ee;border-radius:50%;box-shadow:0 0 12px #22d3ee}.space-btn.block{width:100%;padding:10px}.bottom-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;display:flex;gap:6px;border-radius:24px;padding:8px;max-width:440px;width:calc(100% - 28px)}.bottom-nav a{flex:1;text-decoration:none;color:#94a3b8;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:900;border-radius:17px;padding:9px 5px}.bottom-nav a.active,.bottom-nav a:hover{background:rgba(34,211,238,.14);color:#67e8f9}.info-hero{border-radius:34px;padding:30px;margin-bottom:18px}.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.info-card{border:1px solid var(--line);border-radius:26px;background:rgba(15,23,42,.66);backdrop-filter:blur(18px);padding:20px;transition:.22s}.info-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.35)}.info-card .ico{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:rgba(34,211,238,.12);color:#67e8f9;margin-bottom:14px}.info-card h3{font-weight:900;margin:0 0 8px}.info-card p{color:#cbd5e1;font-size:13px;line-height:1.65;white-space:pre-line}.preview-wrap{max-width:960px}.preview-media{border-radius:32px;overflow:hidden;border:1px solid var(--line);background:rgba(15,23,42,.7)}.preview-media img,.preview-media video{width:100%;display:block;max-height:620px;object-fit:cover}.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}.thumb-item{aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer}.thumb-item img,.thumb-item video{width:100%;height:100%;object-fit:cover}.reveal-item{opacity:0;transform:translateY(15px);animation:reveal .45s ease forwards}@keyframes reveal{to{opacity:1;transform:none}}@media(max-width:1120px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.space-wrap{padding:22px 14px 92px}.hero-card{border-radius:28px;padding:18px}.hero-price{min-width:92px;height:92px}.hero-price b{font-size:24px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.info-grid{grid-template-columns:1fr}.cat-arrow{display:none}.space-header h1{font-size:32px}.space-logo{width:46px;height:46px}.space-product{border-radius:20px;padding:8px}.space-product-img{border-radius:15px}.hero-content p{font-size:12px}.info-hero{padding:22px}}
/* ===== Product card upgrade only ===== */

.product-cover-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.space-product {
  position: relative;
  padding: 7px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .76)),
    radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .16), transparent 48%);
  border: 1px solid rgba(34, 211, 238, .18);
  overflow: hidden;
}

.space-product::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .45), transparent 28%, rgba(167, 139, 250, .28), transparent 70%);
  opacity: .16;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.space-product:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, .42);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .48),
    0 0 28px rgba(34, 211, 238, .14);
}

.space-product-img {
  aspect-ratio: 1 / 1.18;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
}

.space-product-img img {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
}

.space-product-shade {
  background:
    linear-gradient(to top, rgba(2, 6, 23, .92) 0%, rgba(2, 6, 23, .35) 46%, transparent 72%),
    radial-gradient(circle at 50% 0%, transparent, rgba(2, 6, 23, .18));
}

.space-label {
  top: 8px;
  right: 8px;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 8px;
  letter-spacing: .05em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.space-cat-chip {
  left: 8px;
  top: 8px;
  max-width: calc(100% - 75px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(15, 23, 42, .72);
  color: #67e8f9;
}

.space-sold {
  left: 8px;
  bottom: 8px;
  background: rgba(15, 23, 42, .78);
  color: #f8fafc;
}

.space-product-body {
  padding: 11px 4px 4px;
}

.product-title-line {
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.product-title-line h3,
.space-product h3 {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.28;
  font-weight: 900;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.space-price {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #60a5fa);
  box-shadow: 0 0 18px rgba(34, 211, 238, .22);
}

.space-ready {
  margin: 7px 0 11px;
  font-size: 10px;
  color: #cbd5e1;
}

.space-ready b {
  font-weight: 900;
}

.preview-pill {
  position: relative;
  width: 100%;
  min-height: 40px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 13px 0 15px;
  text-decoration: none;
  color: #020617 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  background:
    linear-gradient(135deg, #22d3ee 0%, #60a5fa 52%, #a78bfa 100%);
  box-shadow:
    0 12px 26px rgba(34, 211, 238, .18),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  overflow: hidden;
  transition: .22s ease;
}

.preview-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition: .45s ease;
}

.preview-pill i,
.preview-pill span {
  position: relative;
  z-index: 1;
}

.preview-pill i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(2, 6, 23, .14);
}

.preview-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(34, 211, 238, .28),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}

.preview-pill:hover::before {
  transform: translateX(110%);
}

@media (max-width: 760px) {
  .space-product {
    padding: 6px;
    border-radius: 20px;
  }

  .space-product-img {
    border-radius: 16px;
    aspect-ratio: 1 / 1.16;
  }

  .space-product-body {
    padding: 10px 3px 3px;
  }

  .product-title-line {
    min-height: 35px;
  }

  .product-title-line h3,
  .space-product h3 {
    font-size: 12px;
  }

  .preview-pill {
    min-height: 38px;
    border-radius: 14px;
    font-size: 10px;
  }
}
/* ===== Preview media full lightbox ===== */

.preview-media {
  cursor: zoom-in;
}

.thumb-item {
  position: relative;
  cursor: zoom-in;
  transition: .22s ease;
}

.thumb-item::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #67e8f9;
  background: rgba(2, 6, 23, .68);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: scale(.8);
  transition: .2s ease;
}

.thumb-item:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, .42);
  box-shadow: 0 18px 35px rgba(0, 0, 0, .28);
}

.thumb-item:hover::after {
  opacity: 1;
  transform: scale(1);
}

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(34, 211, 238, .16), transparent 30%),
    rgba(2, 6, 23, .88);
  backdrop-filter: blur(18px);
}

.media-lightbox.show {
  display: flex;
  animation: lightboxFade .18s ease forwards;
}

.lightbox-content {
  width: min(100%, 1040px);
  max-height: 88vh;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, .24);
  background: rgba(15, 23, 42, .72);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .55),
    0 0 45px rgba(34, 211, 238, .13);
}

.lightbox-content img,
.lightbox-content video {
  width: 100%;
  max-height: 88vh;
  display: block;
  object-fit: contain;
  background: #020617;
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #fff;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}

.lightbox-open {
  overflow: hidden;
}

@keyframes lightboxFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}.gallery-head-mini {
  margin: 18px 0 14px;
  padding: 16px 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .78), rgba(30, 41, 59, .42)),
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, .14), transparent 42%);
  border: 1px solid rgba(34, 211, 238, .16);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.gallery-head-mini span {
  display: block;
  margin-bottom: 4px;
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gallery-head-mini h3 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.gallery-head-mini i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #020617;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 24px rgba(34, 211, 238, .22);
}

.preview-only-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.preview-only-grid .thumb-item {
  aspect-ratio: 1 / .82;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 23, 42, .58);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.preview-only-grid .thumb-item img,
.preview-only-grid .thumb-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-only-grid .thumb-item:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(34, 211, 238, .45);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, .38),
    0 0 28px rgba(34, 211, 238, .12);
}

@media (max-width: 760px) {
  .gallery-head-mini {
    margin: 14px 0 12px;
    padding: 14px;
    border-radius: 20px;
  }

  .gallery-head-mini h3 {
    font-size: 13px;
  }

  .gallery-head-mini i {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .preview-only-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .preview-only-grid .thumb-item {
    border-radius: 18px;
    aspect-ratio: 1 / .86;
  }
}
.desc-list {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}

.desc-li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(226, 232, 240, .88);
  font-size: 14px;
  line-height: 1.7;
}

.desc-li span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 16px rgba(34, 211, 238, .55);
}

.desc-li p {
  margin: 0;
  color: inherit;
}

@media (max-width: 760px) {
  .desc-li {
    font-size: 13px;
    gap: 9px;
  }

  .desc-li span {
    width: 7px;
    height: 7px;
    margin-top: 8px;
  }
}
/* ===== Clean macOS home hero ===== */

.mac-header {
  margin-bottom: 18px;
}

.mac-header h1 {
  letter-spacing: .12em;
}

.mac-header p {
  letter-spacing: .26em;
  text-transform: uppercase;
}

.mac-logo {
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .76));
  border: 1px solid rgba(34, 211, 238, .18);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mac-hero-card {
  position: relative;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .86), rgba(2, 12, 24, .84)),
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .12), transparent 34%);
  border: 1px solid rgba(34, 211, 238, .20);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}

.mac-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 28%),
    radial-gradient(circle at 18% 100%, rgba(34, 211, 238, .08), transparent 36%);
}

.mac-window-bar {
  position: relative;
  z-index: 1;
  height: 42px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(2, 6, 23, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mac-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mac-dots span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.mac-dots span:nth-child(1) {
  background: #ff5f57;
}

.mac-dots span:nth-child(2) {
  background: #ffbd2e;
}

.mac-dots span:nth-child(3) {
  background: #28c840;
}

.mac-window-title {
  color: rgba(203, 213, 225, .58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.mac-hero-inner {
  position: relative;
  z-index: 1;
  padding: 28px 32px 30px;
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: center;
  gap: 26px;
}

.mac-hero-card .hero-content {
  min-width: 0;
}

.mac-hero-card .hero-badge {
  position: static;
  width: max-content;
  margin-bottom: 13px;
  padding: 7px 10px;
  border-radius: 7px;
  color: #f472b6;
  background: rgba(236, 72, 153, .08);
  border: 1px solid rgba(236, 72, 153, .40);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.mac-hero-card h2 {
  margin: 0 0 12px;
  color: #f8fafc;
  font-size: clamp(20px, 4vw, 27px);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.mac-hero-card p {
  max-width: 520px;
  margin: 0;
  color: rgba(226, 232, 240, .76);
  font-size: 14px;
  line-height: 1.72;
}

.mac-hero-btn {
  margin-top: 18px;
  width: max-content;
  min-height: 43px;
  padding: 0 18px;
  border-radius: 11px;
  color: #020617 !important;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  box-shadow:
    0 14px 28px rgba(34, 211, 238, .16),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
}

.mac-hero-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 38px rgba(34, 211, 238, .24),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}

.mac-price-card {
  position: relative !important;
  inset: auto !important;
  width: 122px;
  min-height: 104px;
  padding: 17px 12px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .90));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.mac-price-card span,
.mac-price-card small {
  display: block;
  color: rgba(203, 213, 225, .62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.mac-price-card b {
  display: block;
  margin: 4px 0 2px;
  color: #2dd4bf;
  font-size: 26px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 0 20px rgba(45, 212, 191, .32);
}

@media (max-width: 720px) {
  .mac-hero-inner {
    grid-template-columns: 1fr;
    padding: 24px 22px 24px;
  }

  .mac-price-card {
    width: 100%;
    min-height: auto;
    padding: 14px 16px;
    grid-template-columns: auto 1fr auto;
    justify-content: start;
    gap: 8px;
    text-align: left;
  }

  .mac-price-card b {
    margin: 0;
    font-size: 24px;
  }

  .mac-hero-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ===== Fix macOS hero layout conflict ===== */

.mac-hero-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.mac-hero-card .hero-content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.mac-hero-inner {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px !important;
  align-items: center !important;
  gap: 28px !important;
}

.mac-window-bar {
  width: 100% !important;
  display: flex !important;
}

.mac-hero-card .hero-badge {
  display: inline-flex !important;
}

.mac-hero-card h2 {
  max-width: 520px !important;
}

.mac-hero-card p {
  max-width: 560px !important;
}

.mac-price-card {
  justify-self: end !important;
}

@media (max-width: 720px) {
  .mac-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .mac-price-card {
    justify-self: stretch !important;
    width: 100% !important;
  }
}
/* ===== macOS hero small action row ===== */

.mac-action-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mac-action-row .mac-hero-btn {
  margin-top: 0 !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  letter-spacing: .02em;
}

.mac-action-row .mac-hero-btn i {
  font-size: 10px;
}

.mac-price-badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px !important;
  border-radius: 10px !important;
  color: #2dd4bf !important;
  background: rgba(45, 212, 191, .08) !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 0 16px rgba(45, 212, 191, .35);
}

@media (max-width: 520px) {
  .mac-action-row {
    gap: 8px;
  }

  .mac-action-row .mac-hero-btn,
  .mac-price-badge {
    min-height: 34px !important;
    border-radius: 9px !important;
  }

  .mac-action-row .mac-hero-btn {
    padding: 0 12px !important;
    font-size: 10px !important;
  }

  .mac-price-badge {
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}
/* fix order button + price badge inline */
.mac-action-row {
  margin-top: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: 100% !important;
}

.mac-action-row .mac-hero-btn {
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.mac-action-row .mac-price-badge {
  position: static !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  color: #2dd4bf !important;
  background: rgba(45, 212, 191, .08) !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
}

@media (max-width: 520px) {
  .mac-action-row {
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .mac-action-row .mac-hero-btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .mac-action-row .mac-price-badge {
    flex: 0 0 auto !important;
  }
}
/* ===== Preview product macOS card ===== */

.preview-mac-card {
  margin-top: 16px;
  margin-bottom: 18px;
}

.preview-mac-inner {
  grid-template-columns: 1fr !important;
  padding: 26px 30px 28px !important;
}

.preview-mac-card .mac-window-title {
  text-transform: uppercase;
}

.preview-mac-card h2 {
  max-width: 720px !important;
  margin-bottom: 14px !important;
}

.preview-mac-card .desc-list {
  max-width: 760px;
  margin-top: 14px;
}

.preview-mac-card .desc-li {
  color: rgba(226, 232, 240, .82);
}

.preview-meta-row {
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.preview-meta-row .cat-btn {
  margin: 0;
  min-height: 35px;
  border-radius: 11px;
  background: rgba(15, 23, 42, .54);
  border: 1px solid rgba(34, 211, 238, .14);
}

.preview-price-chip {
  color: #2dd4bf !important;
  border-color: rgba(45, 212, 191, .25) !important;
}

.preview-mac-card .mac-action-row {
  margin-top: 18px !important;
}

.preview-mac-card .mac-hero-btn {
  min-height: 38px !important;
  height: 38px !important;
}

.preview-mac-card .mac-price-badge {
  min-height: 38px !important;
  height: 38px !important;
}

@media (max-width: 720px) {
  .preview-mac-inner {
    padding: 23px 21px 24px !important;
  }

  .preview-meta-row .cat-btn {
    width: auto;
  }

  .preview-mac-card .mac-action-row {
    width: 100% !important;
  }
}
/* ===== TrueID macOS list page ===== */

.trueid-wrap {
  max-width: 760px;
}

.trueid-mac-hero {
  margin-bottom: 24px;
}

.trueid-hero-inner {
  grid-template-columns: 1fr 112px !important;
  padding: 25px 30px 27px !important;
}

.trueid-mac-hero h2 {
  margin-bottom: 10px !important;
}

.trueid-mac-hero p {
  max-width: 560px !important;
}

.trueid-secure-mini {
  justify-self: end;
  width: 96px;
  min-height: 88px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .88));
  border: 1px solid rgba(34, 211, 238, .16);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.trueid-secure-mini i {
  color: #22d3ee;
  font-size: 28px;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, .42));
}

.trueid-secure-mini span {
  color: rgba(203, 213, 225, .68);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.trueid-service-section {
  margin-top: 20px;
}

.section-title-mac {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.section-title-mac span {
  width: 4px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #2dd4bf);
  box-shadow: 0 0 18px rgba(34, 211, 238, .45);
}

.section-title-mac h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 19px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.trueid-list {
  display: grid;
  gap: 13px;
}

.trueid-list-item {
  position: relative;
  min-height: 76px;
  padding: 15px 17px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .70)),
    radial-gradient(circle at 0% 0%, rgba(34, 211, 238, .09), transparent 34%);
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  overflow: hidden;
  transition: .22s ease;
}

.trueid-list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .07), transparent 28%),
    radial-gradient(circle at 100% 50%, rgba(34, 211, 238, .10), transparent 30%);
  opacity: .55;
  pointer-events: none;
}

.trueid-list-item:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, .30);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, .32),
    0 0 26px rgba(34, 211, 238, .08);
}

.trueid-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(34, 211, 238, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.trueid-list-item:nth-child(even) .trueid-icon {
  background: linear-gradient(135deg, #22d3ee, #2dd4bf);
  border-color: rgba(34, 211, 238, .25);
}

.trueid-icon i {
  color: #22d3ee;
  font-size: 17px;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, .40));
}

.trueid-list-item:nth-child(even) .trueid-icon i {
  color: #020617;
  filter: none;
}

.trueid-info {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.trueid-info h3 {
  margin: 0 0 4px;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.trueid-info p {
  margin: 0;
  color: rgba(203, 213, 225, .68);
  font-size: 12px;
  line-height: 1.45;
}

.trueid-price-badge {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f472b6;
  background: rgba(236, 72, 153, .10);
  border: 1px solid rgba(236, 72, 153, .32);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .05em;
  white-space: nowrap;
}

.trueid-price-badge.is-free {
  color: #2dd4bf;
  background: rgba(45, 212, 191, .08);
  border-color: rgba(45, 212, 191, .30);
}

@media (max-width: 720px) {
  .trueid-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 23px 21px 24px !important;
  }

  .trueid-secure-mini {
    width: 100%;
    min-height: 56px;
    grid-template-columns: auto auto;
    justify-content: center;
  }

  .trueid-list-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
  }

  .trueid-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .trueid-price-badge {
    grid-column: 2;
    width: max-content;
    min-height: 28px;
    margin-top: -2px;
  }

  .section-title-mac h2 {
    font-size: 17px;
  }
}
/* ===== Info macOS page ===== */

.info-wrap {
  max-width: 760px;
}

.info-mac-hero {
  margin-bottom: 24px;
}

.info-hero-inner {
  grid-template-columns: 1fr 112px !important;
  padding: 25px 30px 27px !important;
}

.info-mac-hero h2 {
  margin-bottom: 10px !important;
}

.info-mac-hero p {
  max-width: 560px !important;
}

.info-status-card {
  justify-self: end;
  width: 96px;
  min-height: 88px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .86), rgba(2, 6, 23, .88));
  border: 1px solid rgba(34, 211, 238, .16);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.info-status-card i {
  color: #22d3ee;
  font-size: 27px;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, .42));
}

.info-status-card span {
  color: rgba(203, 213, 225, .68);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.info-service-section {
  margin-top: 20px;
}

.info-title-line span {
  background: linear-gradient(180deg, #38bdf8, #a78bfa);
  box-shadow: 0 0 18px rgba(56, 189, 248, .42);
}

.info-mac-list {
  display: grid;
  gap: 13px;
}

.info-mac-item {
  position: relative;
  min-height: 82px;
  padding: 16px 17px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .72)),
    radial-gradient(circle at 100% 0%, rgba(167, 139, 250, .10), transparent 34%);
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  overflow: hidden;
  transition: .22s ease;
}

.info-mac-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .07), transparent 28%),
    radial-gradient(circle at 0% 50%, rgba(34, 211, 238, .09), transparent 28%);
}

.info-mac-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #a78bfa);
  opacity: .95;
  box-shadow: 0 0 18px rgba(34, 211, 238, .38);
}

.info-mac-item:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, .30);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, .32),
    0 0 26px rgba(34, 211, 238, .08);
}

.info-mac-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(34, 211, 238, .14), rgba(167, 139, 250, .12));
  border: 1px solid rgba(34, 211, 238, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 14px 26px rgba(0, 0, 0, .20);
}

.info-mac-icon i {
  color: #67e8f9;
  font-size: 17px;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, .38));
}

.info-mac-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.info-mac-body h3 {
  margin: 0 0 5px;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.info-mac-body p {
  margin: 0;
  color: rgba(203, 213, 225, .70);
  font-size: 12px;
  line-height: 1.55;
}

.info-mac-tag {
  position: relative;
  z-index: 1;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #67e8f9;
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .28);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .05em;
  white-space: nowrap;
}

.info-mac-tag.is-danger {
  color: #f472b6;
  background: rgba(236, 72, 153, .10);
  border-color: rgba(236, 72, 153, .32);
}

@media (max-width: 720px) {
  .info-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 23px 21px 24px !important;
  }

  .info-status-card {
    width: 100%;
    min-height: 56px;
    grid-template-columns: auto auto;
    justify-content: center;
  }

  .info-mac-item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    padding: 14px;
  }

  .info-mac-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .info-mac-tag {
    grid-column: 2;
    width: max-content;
    min-height: 28px;
    margin-top: -2px;
  }
}
/* =========================================================
   10 HEADER DESIGNS - CLEAN / PREMIUM / MACOS / FUTURISTIC
   ========================================================= */

.top-brand {
  position: relative;
  margin-bottom: 18px;
  color: #fff;
}

.top-brand h1 {
  margin: 0;
  color: #22d3ee;
  font-family: "Oxanium", sans-serif;
  font-size: clamp(28px, 8vw, 46px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: .13em;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(34, 211, 238, .22);
}

.top-brand p {
  margin: 9px 0 0;
  color: rgba(226, 232, 240, .72);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .30em;
  text-transform: uppercase;
}

.brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #22d3ee;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(2, 6, 23, .74));
  border: 1px solid rgba(34, 211, 238, .20);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255,255,255,.07);
  text-decoration: none;
}

/* ===== Design 1 ===== */
.brand-v1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 2px;
}

.brand-v1 .brand-icon {
  animation: softFloatIcon 4.5s ease-in-out infinite;
}

/* ===== Design 2 ===== */
.brand-v2 {
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .62));
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.brand-window-top {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: rgba(2, 6, 23, .30);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand-window-top span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.brand-window-top span:nth-child(1) {
  background: #ff5f57;
}

.brand-window-top span:nth-child(2) {
  background: #ffbd2e;
}

.brand-window-top span:nth-child(3) {
  background: #28c840;
}

.brand-window-body {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-v2 h1 {
  font-size: clamp(25px, 7vw, 38px);
}

/* ===== Design 3 ===== */
.brand-v3 {
  padding: 4px;
}

.brand-capsule {
  position: relative;
  padding: 18px 18px 18px 22px;
  border-radius: 999px 30px 999px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(34, 211, 238, .14), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .80), rgba(2, 6, 23, .68));
  border: 1px solid rgba(34, 211, 238, .18);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

.brand-v3 h1 {
  font-size: clamp(25px, 7vw, 40px);
}

/* ===== Design 4 ===== */
.brand-v4 {
  display: grid;
  grid-template-columns: 5px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
}

.brand-line {
  width: 5px;
  height: 62px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 22px rgba(34, 211, 238, .48);
}

/* ===== Design 5 ===== */
.brand-v5 {
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(2, 6, 23, .82), rgba(15, 23, 42, .70));
  border: 1px solid rgba(34, 211, 238, .16);
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}

.terminal-label {
  min-height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(203, 213, 225, .68);
  background: rgba(2, 6, 23, .32);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.terminal-label i {
  color: #22d3ee;
}

.terminal-brand-row {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-v5 h1 {
  font-size: clamp(24px, 7vw, 38px);
  letter-spacing: .08em;
}

.brand-v5 h1 span {
  color: #2dd4bf;
  font-style: normal;
}

/* ===== Design 6 ===== */
.brand-v6 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.brand-slant {
  position: relative;
  padding: 18px 22px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .78), rgba(2, 6, 23, .64));
  border: 1px solid rgba(34, 211, 238, .16);
  box-shadow: 0 18px 46px rgba(0,0,0,.25);
  clip-path: polygon(0 0, 96% 0, 100% 100%, 0% 100%);
}

.brand-slant::after {
  content: "";
  position: absolute;
  right: 18px;
  top: -30px;
  width: 110px;
  height: 160px;
  transform: rotate(18deg);
  background: linear-gradient(180deg, rgba(34,211,238,.16), transparent);
  pointer-events: none;
}

.brand-v6 .brand-icon {
  transform: rotate(-7deg);
}

/* ===== Design 7 ===== */
.brand-v7 {
  display: flex;
  justify-content: center;
}

.brand-dock {
  width: 100%;
  padding: 14px 17px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  gap: 15px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .74), rgba(2, 6, 23, .60));
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow:
    0 18px 46px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.dock-orb {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #020617;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  box-shadow:
    0 14px 30px rgba(34,211,238,.20),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.brand-v7 h1 {
  font-size: clamp(25px, 7vw, 40px);
}

/* ===== Design 8 ===== */
.brand-v8 {
  padding: 18px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(236,72,153,.12), transparent 34%),
    linear-gradient(145deg, rgba(15, 23, 42, .76), rgba(2, 6, 23, .62));
  border: 1px solid rgba(236, 72, 153, .18);
  box-shadow:
    0 18px 46px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.premium-pill {
  width: max-content;
  min-height: 25px;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #f472b6;
  background: rgba(236, 72, 153, .10);
  border: 1px solid rgba(236, 72, 153, .28);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand-v8 .brand-icon {
  color: #f472b6;
  border-color: rgba(236, 72, 153, .24);
}

/* ===== Design 9 ===== */
.brand-v9 {
  padding: 5px;
}

.curve-plate {
  position: relative;
  padding: 20px 20px 18px;
  min-height: 105px;
  border-radius: 28px 28px 52px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    radial-gradient(circle at 100% 100%, rgba(34,211,238,.14), transparent 34%),
    linear-gradient(145deg, rgba(15,23,42,.78), rgba(2,6,23,.62));
  border: 1px solid rgba(34,211,238,.16);
  box-shadow: 0 18px 46px rgba(0,0,0,.25);
}

.curve-plate::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 72px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, transparent);
}

.curve-chip {
  width: 54px;
  height: 54px;
  border-radius: 22px 22px 32px 22px;
  display: grid;
  place-items: center;
  color: #020617;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  box-shadow: 0 14px 30px rgba(34,211,238,.20);
}

/* ===== Design 10 ===== */
.brand-v10 {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.brand-accent {
  width: 4px;
  height: 70px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #2dd4bf, #a78bfa);
  box-shadow: 0 0 22px rgba(34,211,238,.42);
}

.brand-code-text {
  padding: 12px 14px;
  border-radius: 16px;
  color: #22d3ee;
  background: rgba(15,23,42,.70);
  border: 1px solid rgba(34,211,238,.18);
  font-family: "Oxanium", monospace;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

/* animations */
@keyframes softFloatIcon {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 620px) {
  .top-brand h1 {
    font-size: clamp(24px, 9vw, 34px);
  }

  .top-brand p {
    font-size: 9px;
    letter-spacing: .22em;
  }

  .brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .brand-window-body,
  .terminal-brand-row,
  .brand-v8,
  .curve-plate {
    align-items: flex-start;
  }

  .brand-v2 .brand-icon,
  .brand-v5 .brand-icon,
  .brand-v8 .brand-icon {
    display: none;
  }

  .brand-capsule {
    border-radius: 26px;
    padding: 17px;
  }

  .brand-v4 {
    grid-template-columns: 4px 1fr;
  }

  .brand-v4 .brand-icon {
    display: none;
  }

  .brand-v6 {
    grid-template-columns: 1fr;
  }

  .brand-v6 .brand-icon {
    display: none;
  }

  .brand-slant {
    clip-path: none;
  }

  .brand-dock {
    padding: 13px;
  }

  .dock-orb {
    width: 48px;
    height: 48px;
    border-radius: 18px;
  }

  .brand-v10 {
    grid-template-columns: 4px 1fr;
  }

  .brand-code-text {
    display: none;
  }
}