/*
 * Draftstack · Copyright (c) 2026 Draftstack (draftstack.in). All rights reserved.
 * UI v8: richer home and product pages (navy + gold).
 */

/* ---------- Home hero ---------- */
.hero8 { color: #fff; background:
  radial-gradient(820px 460px at 88% 8%, rgba(226,184,103,.22), rgba(226,184,103,0) 62%),
  radial-gradient(760px 420px at -6% 100%, rgba(76,91,184,.38), rgba(76,91,184,0) 62%),
  linear-gradient(160deg, #121931 0%, #1C2541 52%, #26315C 100%); }
.hero8::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 70%, transparent 100%); }
.hero8 .hero-grid { position: relative; padding-bottom: 120px; }
.hero8 h1 { color: #fff; }
.hero8 h1 em { font-style: italic; background: linear-gradient(100deg, #F6D58E 0%, #E2B867 45%, #C9963A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.hero8 .lead { color: #C9CFE2; }
.h8-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #E9ECF5; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.h8-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 4px rgba(61,220,151,.18); flex: none; }
.h8-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 7px 7px 7px 18px; margin-top: 30px; max-width: 560px; box-shadow: 0 20px 44px -18px rgba(0,0,0,.55); color: var(--soft); }
.h8-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--ink); padding: 10px 0; }
.h8-search input::placeholder { color: #9AA0B3; }
.h8-search .btn { flex: none; border-radius: 13px; min-height: 46px; padding: 0 22px; }
.h8-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: #AEB5CC; }
.h8-pop a { text-decoration: none; color: #E4E8F3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 5px 12px; border-radius: 999px; font-weight: 500; }
.h8-pop a:hover { background: rgba(226,184,103,.18); border-color: rgba(226,184,103,.5); color: #fff; }
.hero8 .btn-row { margin-top: 26px; }
.hero8 .btn-dark { background: #E2B867; border-color: #E2B867; color: #1C2541; }
.hero8 .btn-dark:hover { background: #F2C46D; border-color: #F2C46D; color: #1C2541; }
.hero8 .btn-outline { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.hero8 .btn-outline:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.hero8 .hero-trust { color: #C9CFE2; } .hero8 .hero-trust .ic { color: #E2B867; }
.hero8 .hero-art img { box-shadow: 0 34px 60px -24px rgba(0,0,0,.65); }
.hero8 .float-card { color: var(--ink); }

/* Trust strip floats over the hero */
.trust8 { background: transparent; border: 0; position: relative; z-index: 3; margin-top: -58px; }
.trust8 .trust-row { width: min(1192px, calc(100% - 48px)); padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 50px -24px rgba(20,27,45,.35); }
.trust8 .trust-item .ti { background: linear-gradient(150deg, #1C2541, #2E3757); color: #E2B867; }

/* ---------- Categories (colour tiles with a product peek) ---------- */
.cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cat { overflow: hidden; min-height: 214px; border: 1px solid rgba(20,27,45,.06); background: #FFF6E6; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cat:nth-child(8n+2) { background: #EAF2FF; } .cat:nth-child(8n+3) { background: #FDEDF1; } .cat:nth-child(8n+4) { background: #E8F6EE; }
.cat:nth-child(8n+5) { background: #F0EDFD; } .cat:nth-child(8n+6) { background: #FFF0E4; } .cat:nth-child(8n+7) { background: #E6F5F5; } .cat:nth-child(8n+8) { background: #F3F1E8; }
.cat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); color: var(--ink); }
.cat-name, .cat-desc { position: relative; z-index: 1; max-width: 60%; }
.cat-count { z-index: 1; background: rgba(255,255,255,.75); padding: 2px 9px; border-radius: 999px; }
.cat-thumb { position: absolute; right: -16px; bottom: -16px; width: 46%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; transform: rotate(-7deg); box-shadow: 0 16px 30px -14px rgba(20,27,45,.45); border: 3px solid #fff; transition: transform .35s var(--ease); }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat:hover .cat-thumb { transform: rotate(-3deg) translateY(-4px); }

/* ---------- Product cards ---------- */
.card { border: 1px solid var(--line); border-radius: 22px; padding: 10px 10px 16px; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(20,27,45,.35); border-color: #EADFC4; }
.card-img { border-radius: 16px; box-shadow: none; background: linear-gradient(160deg, #F4F1EA, #ECEFF5); }
.card:hover .card-img { box-shadow: none; }
.card-body { padding: 2px 8px 0; }
.card .eyebrow-sm { color: var(--gold-2); }
.card .price-row .price { color: var(--navy); font-size: 19px; }

/* ---------- Home sections ---------- */
.step { position: relative; overflow: hidden; }
.step-n { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(150deg, #1C2541, #2E3757); color: #E2B867 !important; font-size: 20px !important; font-family: var(--sans) !important; font-weight: 700; }
.why8 { background: linear-gradient(160deg, #141B33, #1C2541 60%, #232E57); color: #fff; }
.why8 h2, .why8 h3 { color: #fff; } .why8 .muted { color: #B9C0D6; }
.why8 .wi { background: rgba(226,184,103,.16) !important; color: #E2B867 !important; box-shadow: inset 0 0 0 1px rgba(226,184,103,.4); }
.why8 .why-grid > div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 22px; }
.spot { box-shadow: var(--sh-2); border-color: #EADFC4; }

/* ---------- Product page ---------- */
.p8-band { background: linear-gradient(180deg, #F6F1E6 0%, #FAF8F3 55%, #FFFFFF 100%); }
.p8-band .g-main { background: #fff; border: 1px solid #ECE4D2; box-shadow: 0 30px 60px -32px rgba(20,27,45,.35); }
.p8-band .g-thumb { border-radius: 14px; }
.p8-buy { background: #fff; border: 1px solid #ECE4D2; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 50px -30px rgba(20,27,45,.35); }
.p8-buy .price { color: var(--navy); }
.p8-buy .buy-box { border: 0; padding: 4px 0 0; background: transparent; border-top: 1px dashed var(--line); border-radius: 0; padding-top: 16px; }
.p8-buy .perks .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: linear-gradient(150deg, #1C2541, #2E3757); color: #E2B867; box-sizing: border-box; }
.p8-band .tag { background: #fff; border: 1px solid #E7DFCC; }
.p8-band .tag-gold { background: #1C2541; border-color: #1C2541; color: #E2B867; }
.p-tabs .wrap { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.p-tabs a { padding: 8px 16px; border-radius: 999px; border-bottom: 0; }
.p-tabs a:hover, .p-tabs a.on { background: #1C2541; color: #fff; border-bottom-color: transparent; }
.inside-card { border: 1px solid var(--line); box-shadow: none; transition: border-color .25s, transform .25s var(--ease); }
.inside-card:hover { border-color: #E2B867; transform: translateY(-2px); }
.in-n { color: var(--gold-2) !important; }
.fr-ic { width: 42px; height: 30px; border-radius: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: #EEF0F5; color: var(--navy); }
.fr-ic.fx-xlsx, .fr-ic.fx-xls, .fr-ic.fx-csv { background: #E3F4EA; color: #17734A; }
.fr-ic.fx-pdf { background: #FDE9E7; color: #B42318; }
.fr-ic.fx-pptx { background: #FFEEE2; color: #C2501A; }
.fr-ic.fx-docx, .fr-ic.fx-doc { background: #E6EFFD; color: #2459B8; }
.fr-ic.fx-zip { background: #EFEBFD; color: #5B45B5; }
.fr-ic.fx-jpg, .fr-ic.fx-png, .fr-ic.fx-webp { background: #E4F4F3; color: #0F766E; }
.fr-ic.fx-xmp, .fr-ic.fx-dng { background: #F4EBD8; color: #8A6418; }
.hs-n { background: linear-gradient(150deg, #F2C46D, #D9A441) !important; color: #1C2541 !important; }
.how-steps li { background: #fff; transition: border-color .25s; } .how-steps li:hover { border-color: #E2B867; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hero8 .hero-grid { padding-bottom: 100px; }
}
@media (max-width: 760px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat { min-height: 186px; padding: 18px 16px; }
  .cat-name, .cat-desc { max-width: 100%; }
  .cat-desc { display: none; }
  .cat-thumb { width: 54%; right: -12px; bottom: -14px; }
  .trust8 { margin-top: -48px; }
  .p8-buy { padding: 18px 16px; border-radius: 20px; }
  .p-tabs .wrap { gap: 6px; } .p-tabs a { padding: 7px 13px; }
}
@media (max-width: 560px) {
  .h8-pill { font-size: 12.5px; }
  .h8-search { padding: 6px 6px 6px 14px; border-radius: 16px; margin-top: 24px; }
  .h8-search .btn { padding: 0 16px; min-height: 44px; }
  .h8-pop { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
  .h8-pop::-webkit-scrollbar { display: none; }
  .h8-pop a, .h8-pop span { flex: none; }
  .hero8 .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .card { padding: 8px 8px 14px; border-radius: 18px; }
  .card-img { border-radius: 12px; }
  .card-body { padding: 0 4px; }
}

/* Spotlight: show the whole product image over a soft blurred copy */
.spot-img { position: relative; overflow: hidden; isolation: isolate; }
.spot-img::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--si) center / cover no-repeat; filter: blur(34px) saturate(1.15); opacity: .9; }
.spot-img img { object-fit: contain; aspect-ratio: 1; height: auto; max-height: 100%; border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.55); width: calc(100% - 64px); margin: 32px; }
@media (max-width: 760px) { .spot-img img { width: calc(100% - 36px); margin: 18px; } .trust8 .trust-row { width: calc(100% - 32px); } }
@media (max-width: 560px) {
  .p8-buy .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12px; line-height: 1.35; }
  .p8-buy .perks b { font-size: 12.5px; }
}