/* ============================================================
   ek22.homes — base stylesheet (single-file, mobile-first)
   Class prefix     : viewd9c3f-
   Variable prefix  : --viewd9c3f-
   Canvas           : 320 - 430 px (stable grid, no horizontal scroll)
   Palette base     : #1E1E1E bg / #5D5D5D gray / #F4F4F4 text
   Design tone      : stroke-led restraint, segmented CTAs,
                      short-list rhythm, large+small card mix.
   ============================================================ */

:root{
  --viewd9c3f-bg:#1E1E1E;
  --viewd9c3f-bg-deep:#151515;
  --viewd9c3f-surface:#232323;
  --viewd9c3f-surface-2:#2A2A2A;
  --viewd9c3f-line:#363636;
  --viewd9c3f-line-strong:#4A4A4A;
  --viewd9c3f-text:#F4F4F4;
  --viewd9c3f-muted:#A6A6A6;
  --viewd9c3f-dim:#7A7A7A;
  --viewd9c3f-gray:#5D5D5D;
  --viewd9c3f-accent:#FFC83D;
  --viewd9c3f-accent-ink:#1A1400;
  --viewd9c3f-accent-soft:rgba(255,200,61,.14);
  --viewd9c3f-accent-line:rgba(255,200,61,.42);
  --viewd9c3f-accent-2:#FF7A45;
  --viewd9c3f-ok:#5BD6A6;
  --viewd9c3f-warn:#FF6A6A;
  --viewd9c3f-radius-xs:3px;
  --viewd9c3f-radius-sm:5px;
  --viewd9c3f-radius-md:8px;
  --viewd9c3f-radius-lg:14px;
  --viewd9c3f-radius-pill:999px;
  --viewd9c3f-header-h:112px;
  --viewd9c3f-bottom-h:68px;
  --viewd9c3f-safe-bottom:env(safe-area-inset-bottom,0px);
  --viewd9c3f-tap:44px;
  --viewd9c3f-px:14px;
  --viewd9c3f-py:18px;
  --viewd9c3f-shadow-1:0 6px 18px rgba(0,0,0,.42);
  --viewd9c3f-shadow-glow:0 0 0 1px var(--viewd9c3f-accent-line),0 0 14px rgba(255,200,61,.18);
  --viewd9c3f-font-head:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Cascadia Code",system-ui,Segoe UI,Roboto,sans-serif;
  --viewd9c3f-font-body:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans Bengali","Hind Siliguri",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:#0E0E0E;
  color:var(--viewd9c3f-text);
  font-family:var(--viewd9c3f-font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--viewd9c3f-accent);outline-offset:2px;border-radius:var(--viewd9c3f-radius-xs)}

/* ------------------------------------------------------------
   Phone canvas — stable 430px column centered on wide screens
   ------------------------------------------------------------ */
.viewd9c3f-canvas{
  position:relative;
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:var(--viewd9c3f-bg);
  box-shadow:0 0 60px rgba(0,0,0,.65);
  overflow:hidden;
}
.viewd9c3f-skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--viewd9c3f-accent);
  color:var(--viewd9c3f-accent-ink);
  padding:8px 14px;
  z-index:200;
  border-radius:0 0 var(--viewd9c3f-radius-sm) 0;
  font-weight:600;
}
.viewd9c3f-skip:focus{left:0}

/* ------------------------------------------------------------
   Header — two stacked rows: brand + actions
   ------------------------------------------------------------ */
.viewd9c3f-header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg,#1B1B1B 0%,#1A1A1A 100%);
  border-bottom:1px solid var(--viewd9c3f-line);
}
.viewd9c3f-brand-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px var(--viewd9c3f-px) 8px;
  min-height:56px;
}
.viewd9c3f-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.viewd9c3f-brand img{
  width:36px;
  height:36px;
  border-radius:var(--viewd9c3f-radius-sm);
  border:1px solid var(--viewd9c3f-line-strong);
  background:#0F0F0F;
  object-fit:cover;
  flex:0 0 36px;
}
.viewd9c3f-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.viewd9c3f-brand-name{
  font-family:var(--viewd9c3f-font-head);
  font-weight:700;
  font-size:18px;
  letter-spacing:1.4px;
  color:var(--viewd9c3f-text);
}
.viewd9c3f-brand-name b{color:var(--viewd9c3f-accent)}
.viewd9c3f-brand-tag{
  font-size:10.5px;
  color:var(--viewd9c3f-muted);
  letter-spacing:.6px;
  font-family:var(--viewd9c3f-font-head);
  text-transform:uppercase;
}
.viewd9c3f-menu-btn{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:1px solid var(--viewd9c3f-line-strong);
  background:var(--viewd9c3f-surface);
  border-radius:var(--viewd9c3f-radius-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.viewd9c3f-menu-btn span,
.viewd9c3f-menu-btn span::before,
.viewd9c3f-menu-btn span::after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  background:var(--viewd9c3f-text);
  border-radius:2px;
  transition:transform .2s ease,opacity .15s ease;
}
.viewd9c3f-menu-btn span{position:relative}
.viewd9c3f-menu-btn span::before{position:absolute;left:0;top:-6px}
.viewd9c3f-menu-btn span::after{position:absolute;left:0;top:6px}
.viewd9c3f-menu-btn[aria-expanded="true"] span{background:transparent}
.viewd9c3f-menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.viewd9c3f-menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.viewd9c3f-action-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 var(--viewd9c3f-px) 11px;
}

/* ------------------------------------------------------------
   Buttons — segmented action shape
   ------------------------------------------------------------ */
.viewd9c3f-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:var(--viewd9c3f-tap);
  padding:0 18px;
  border-radius:var(--viewd9c3f-radius-sm);
  border:1px solid var(--viewd9c3f-line-strong);
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  background:var(--viewd9c3f-surface);
  color:var(--viewd9c3f-text);
  transition:background .18s ease,box-shadow .18s ease,transform .1s ease,border-color .18s ease;
  flex:1;
  font-family:var(--viewd9c3f-font-body);
}
.viewd9c3f-btn:active{transform:translateY(1px)}
.viewd9c3f-btn--primary{
  background:linear-gradient(180deg,#FFD75A 0%,#FFC83D 100%);
  color:var(--viewd9c3f-accent-ink);
  border-color:#FFC83D;
  box-shadow:0 4px 14px rgba(255,200,61,.24);
}
.viewd9c3f-btn--primary:hover{box-shadow:var(--viewd9c3f-shadow-glow)}
.viewd9c3f-btn--ghost{background:transparent;color:var(--viewd9c3f-text)}
.viewd9c3f-btn--ghost:hover{border-color:var(--viewd9c3f-accent);color:var(--viewd9c3f-accent)}
.viewd9c3f-btn--block{display:flex;width:100%}
.viewd9c3f-btn--sm{min-height:36px;padding:0 12px;font-size:13px}
.viewd9c3f-btn--accent2{
  background:transparent;
  color:var(--viewd9c3f-accent-2);
  border-color:rgba(255,122,69,.55);
}
.viewd9c3f-btn--accent2:hover{background:rgba(255,122,69,.08)}

/* ------------------------------------------------------------
   Expandable nav panel
   ------------------------------------------------------------ */
.viewd9c3f-nav{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#171717;
  border-bottom:1px solid var(--viewd9c3f-line);
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  z-index:49;
}
.viewd9c3f-nav.is-open{max-height:560px;box-shadow:var(--viewd9c3f-shadow-1)}
.viewd9c3f-nav-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--viewd9c3f-line);
  padding:1px;
}
.viewd9c3f-nav-grid a{
  background:#171717;
  padding:13px 14px;
  font-size:13.5px;
  display:flex;
  align-items:center;
  gap:9px;
  border-left:3px solid transparent;
  min-height:46px;
}
.viewd9c3f-nav-grid a::before{
  content:"";
  width:6px;
  height:6px;
  background:var(--viewd9c3f-gray);
  border-radius:50%;
  flex:0 0 6px;
}
.viewd9c3f-nav-grid a:hover,
.viewd9c3f-nav-grid a:focus{background:#1F1F1F}
.viewd9c3f-nav-grid a[aria-current="page"]{
  border-left-color:var(--viewd9c3f-accent);
  background:#1F1F1F;
  color:var(--viewd9c3f-accent);
}
.viewd9c3f-nav-grid a[aria-current="page"]::before{background:var(--viewd9c3f-accent)}

/* ------------------------------------------------------------
   Main / sections
   ------------------------------------------------------------ */
.viewd9c3f-main{
  padding-bottom:calc(var(--viewd9c3f-bottom-h) + var(--viewd9c3f-safe-bottom) + 16px);
}
.viewd9c3f-section{
  padding:var(--viewd9c3f-py) var(--viewd9c3f-px);
  border-top:1px solid var(--viewd9c3f-line);
}
.viewd9c3f-section--flush{padding-top:0;border-top:0}

.viewd9c3f-eyebrow{
  font-family:var(--viewd9c3f-font-head);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--viewd9c3f-accent);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.viewd9c3f-eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--viewd9c3f-accent);
  display:inline-block;
}

.viewd9c3f-page-h1{
  font-family:var(--viewd9c3f-font-head);
  font-size:24px;
  line-height:1.3;
  letter-spacing:.4px;
  margin:6px 0 10px;
  font-weight:700;
}
.viewd9c3f-page-h1 em{font-style:normal;color:var(--viewd9c3f-accent)}

.viewd9c3f-h2{
  font-family:var(--viewd9c3f-font-head);
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.3px;
  margin:0 0 10px;
}
.viewd9c3f-h2 .viewd9c3f-h2-kw{color:var(--viewd9c3f-accent)}

.viewd9c3f-h3{
  font-size:15px;
  font-weight:700;
  margin:14px 0 6px;
  color:var(--viewd9c3f-text);
  letter-spacing:.2px;
}
.viewd9c3f-lead{
  color:var(--viewd9c3f-muted);
  font-size:14px;
  margin:0 0 14px;
  line-height:1.65;
}

/* ------------------------------------------------------------
   Hero carousel
   ------------------------------------------------------------ */
.viewd9c3f-hero{
  position:relative;
  padding:14px var(--viewd9c3f-px) 6px;
}
.viewd9c3f-hero-track{
  position:relative;
  border-radius:var(--viewd9c3f-radius-lg);
  overflow:hidden;
  border:1px solid var(--viewd9c3f-line-strong);
  background:#0E0E0E;
  box-shadow:var(--viewd9c3f-shadow-1);
}
.viewd9c3f-hero-slides{
  display:flex;
  transition:transform .42s cubic-bezier(.4,.0,.2,1);
}
.viewd9c3f-hero-slide{
  position:relative;
  flex:0 0 100%;
  min-width:0;
}
.viewd9c3f-hero-slide img{
  width:100%;
  height:188px;
  object-fit:cover;
  filter:saturate(.95) contrast(1.05);
}
.viewd9c3f-hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(8,8,8,.78) 100%);
}
.viewd9c3f-hero-copy{
  position:absolute;
  left:14px;
  right:14px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.viewd9c3f-hero-title{
  font-family:var(--viewd9c3f-font-head);
  font-weight:700;
  font-size:17px;
  line-height:1.25;
  letter-spacing:.4px;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.viewd9c3f-hero-sub{
  font-size:12px;
  color:#E8E8E8;
  line-height:1.45;
}
.viewd9c3f-hero-cta{
  align-self:flex-start;
  margin-top:4px;
}
.viewd9c3f-hero-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  padding:10px 0 4px;
}
.viewd9c3f-hero-dot{
  width:18px;
  height:4px;
  border-radius:2px;
  background:var(--viewd9c3f-line-strong);
  transition:background .2s ease,width .2s ease;
}
.viewd9c9f-hero-dot{display:none}
.viewd9c3f-hero-dot.is-active{
  background:var(--viewd9c3f-accent);
  width:28px;
}

/* ------------------------------------------------------------
   Game category header + grid (large + small card mix)
   ------------------------------------------------------------ */
.viewd9c3f-cat-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 0 10px;
}
.viewd9c3f-cat-num{
  font-family:var(--viewd9c3f-font-head);
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--viewd9c3f-bg);
  background:var(--viewd9c3f-accent);
  padding:3px 6px;
  border-radius:var(--viewd9c3f-radius-xs);
  font-weight:700;
}
.viewd9c3f-cat-title{
  font-family:var(--viewd9c3f-font-head);
  font-size:17px;
  font-weight:700;
  margin:0;
  letter-spacing:.3px;
  flex:1;
  line-height:1.3;
}
.viewd9c3f-cat-count{
  font-size:11px;
  color:var(--viewd9c3f-muted);
  border:1px solid var(--viewd9c3f-line-strong);
  padding:3px 7px;
  border-radius:var(--viewd9c3f-radius-pill);
  font-family:var(--viewd9c3f-font-head);
  letter-spacing:.5px;
  white-space:nowrap;
}

/* Large feature card (one per category) */
.viewd9c3f-feat{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:12px;
  padding:12px;
  border:1px solid var(--viewd9c3f-line-strong);
  background:linear-gradient(180deg,#232323 0%,#1E1E1E 100%);
  border-radius:var(--viewd9c3f-radius-md);
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}
.viewd9c3f-feat::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--viewd9c3f-accent);
}
.viewd9c3f-feat-img{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:var(--viewd9c3f-radius-sm);
  border:1px solid var(--viewd9c3f-line);
  background:#0F0F0F;
}
.viewd9c3f-feat-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.viewd9c3f-feat-tag{
  font-family:var(--viewd9c3f-font-head);
  font-size:10.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--viewd9c3f-accent);
}
.viewd9c3f-feat-name{
  font-family:var(--viewd9c3f-font-head);
  font-size:16px;
  font-weight:700;
  margin:0;
  color:var(--viewd9c3f-text);
  line-height:1.25;
}
.viewd9c3f-feat-desc{
  font-size:12.5px;
  color:var(--viewd9c3f-muted);
  line-height:1.5;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.viewd9c3f-feat-cta{
  align-self:flex-start;
  margin-top:2px;
}

/* Small card grid (4 columns, 5 at >=380px) */
.viewd9c3f-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px 8px;
}
.viewd9c3f-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:left;
  padding:0;
  background:transparent;
  border:0;
  border-radius:var(--viewd9c3f-radius-sm);
  min-width:0;
}
.viewd9c3f-card-media{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--viewd9c3f-line);
  border-radius:var(--viewd9c3f-radius-sm);
  overflow:hidden;
  background:#0F0F0F;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.viewd9c3f-card:hover .viewd9c3f-card-media,
.viewd9c3f-card:focus-visible .viewd9c3f-card-media{
  border-color:var(--viewd9c3f-accent);
  box-shadow:var(--viewd9c3f-shadow-glow);
}
.viewd9c3f-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.viewd9c3f-card-name{
  font-size:11.5px;
  line-height:1.3;
  color:var(--viewd9c3f-text);
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:30px;
  word-break:break-word;
}
.viewd9c3f-grid--more{
  grid-template-columns:repeat(4,1fr);
}

/* ------------------------------------------------------------
   Supplementary content blocks
   ------------------------------------------------------------ */
.viewd9c3f-block{
  border:1px solid var(--viewd9c3f-line);
  border-radius:var(--viewd9c3f-radius-md);
  padding:14px;
  background:var(--viewd9c3f-surface);
  margin-bottom:12px;
}
.viewd9c3f-block:last-child{margin-bottom:0}
.viewd9c3f-block p{margin:0 0 8px;font-size:13.5px;color:var(--viewd9c3f-muted);line-height:1.7}
.viewd9c3f-block p strong{color:var(--viewd9c3f-text);font-weight:600}
.viewd9c3f-block p:last-child{margin-bottom:0}

.viewd9c3f-list{margin:6px 0 0;padding:0;list-style:none}
.viewd9c3f-list li{
  position:relative;
  padding:7px 0 7px 22px;
  font-size:13.5px;
  color:var(--viewd9c3f-muted);
  border-bottom:1px dashed var(--viewd9c3f-line);
  line-height:1.55;
}
.viewd9c3f-list li:last-child{border-bottom:0}
.viewd9c3f-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:13px;
  width:9px;
  height:9px;
  border:1.5px solid var(--viewd9c3f-accent);
  border-radius:1px;
  background:transparent;
}
.viewd9c3f-list li strong{color:var(--viewd9c3f-text)}

/* Inline promotion link (anchor inside body copy) */
.viewd9c3f-inline-link{
  color:var(--viewd9c3f-accent);
  border-bottom:1px dashed var(--viewd9c3f-accent-line);
  font-weight:600;
  padding-bottom:1px;
}

/* Promotion tiles row */
.viewd9c3f-promo-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}
.viewd9c3f-promo-tile{
  border:1px solid var(--viewd9c3f-line-strong);
  background:linear-gradient(180deg,#242424 0%,#1B1B1B 100%);
  border-radius:var(--viewd9c3f-radius-md);
  padding:11px 11px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.viewd9c3f-promo-tile::after{
  content:"";
  position:absolute;
  top:-30px;right:-30px;
  width:80px;height:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,61,.16),transparent 70%);
}
.viewd9c3f-promo-tile-tag{
  font-family:var(--viewd9c3f-font-head);
  font-size:10px;
  letter-spacing:1.2px;
  color:var(--viewd9c3f-accent);
  text-transform:uppercase;
}
.viewd9c3f-promo-tile-title{
  font-size:14px;
  font-weight:700;
  color:var(--viewd9c3f-text);
  line-height:1.3;
}
.viewd9c3f-promo-tile-desc{
  font-size:12px;
  color:var(--viewd9c3f-muted);
  line-height:1.45;
}

/* Testimonials */
.viewd9c3f-quote{
  border-left:3px solid var(--viewd9c3f-accent);
  padding:8px 0 8px 12px;
  margin:8px 0 0;
}
.viewd9c3f-quote p{margin:0 0 4px;font-size:13.5px;color:var(--viewd9c3f-text);font-style:normal;line-height:1.6}
.viewd9c3f-quote-meta{
  font-size:11.5px;
  color:var(--viewd9c3f-muted);
  font-family:var(--viewd9c3f-font-head);
  letter-spacing:.4px;
}

/* Payment chips */
.viewd9c3f-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:8px;
}
.viewd9c3f-chip{
  border:1px solid var(--viewd9c3f-line-strong);
  background:var(--viewd9c3f-surface);
  border-radius:var(--viewd9c3f-radius-pill);
  padding:6px 11px;
  font-size:12px;
  color:var(--viewd9c3f-text);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.viewd9c3f-chip::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--viewd9c3f-accent);
}

/* Comparison table (data-rhythm rows) */
.viewd9c3f-comp{
  border:1px solid var(--viewd9c3f-line);
  border-radius:var(--viewd9c3f-radius-md);
  overflow:hidden;
  margin-top:6px;
}
.viewd9c3f-comp-row{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--viewd9c3f-line);
  font-size:13px;
  align-items:center;
}
.viewd9c3f-comp-row:last-child{border-bottom:0}
.viewd9c3f-comp-row:nth-child(odd){background:#1F1F1F}
.viewd9c3f-comp-key{
  color:var(--viewd9c3f-muted);
  font-family:var(--viewd9c3f-font-head);
  font-size:12px;
  letter-spacing:.4px;
}
.viewd9c3f-comp-val{color:var(--viewd9c3f-text);font-weight:600}

/* Decision CTA band */
.viewd9c3f-cta-band{
  border:1px solid var(--viewd9c3f-accent-line);
  background:
    radial-gradient(circle at top right,rgba(255,200,61,.12),transparent 60%),
    var(--viewd9c3f-surface);
  border-radius:var(--viewd9c3f-radius-md);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}
.viewd9c3f-cta-band h3{margin:0;font-family:var(--viewd9c3f-font-head);font-size:16px;color:var(--viewd9c3f-accent)}
.viewd9c3f-cta-band p{margin:0;font-size:13px;color:var(--viewd9c3f-muted);line-height:1.6}
.viewd9c3f-cta-actions{display:flex;gap:8px;flex-wrap:wrap}
.viewd9c3f-cta-actions .viewd9c3f-btn{flex:1 1 auto;min-width:120px}

/* ------------------------------------------------------------
   Extended footer directory
   ------------------------------------------------------------ */
.viewd9c3f-ext{
  padding:var(--viewd9c3f-py) var(--viewd9c3f-px);
  border-top:1px solid var(--viewd9c3f-line);
  background:linear-gradient(180deg,#1A1A1A 0%,#131313 100%);
}
.viewd9c3f-ext-brand{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding-bottom:14px;
  border-bottom:1px dashed var(--viewd9c3f-line);
  margin-bottom:14px;
}
.viewd9c3f-ext-brand img{width:34px;height:34px;border-radius:var(--viewd9c3f-radius-sm);border:1px solid var(--viewd9c3f-line-strong);flex:0 0 34px}
.viewd9c3f-ext-brand p{margin:0;font-size:12.5px;color:var(--viewd9c3f-muted);line-height:1.6}

.viewd9c3f-ext-title{
  font-family:var(--viewd9c3f-font-head);
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--viewd9c3f-accent);
  margin:0 0 9px;
}
.viewd9c3f-ext-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--viewd9c3f-line);
  border:1px solid var(--viewd9c3f-line);
  border-radius:var(--viewd9c3f-radius-sm);
  overflow:hidden;
  margin-bottom:14px;
}
.viewd9c3f-ext-grid a,
.viewd9c3f-ext-grid button{
  background:#161616;
  padding:11px 12px;
  font-size:12.5px;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:42px;
  border-bottom:1px solid transparent;
  transition:background .15s ease,color .15s ease;
}
.viewd9c3f-ext-grid a::after,
.viewd9c3f-ext-grid button::after{
  content:"›";
  color:var(--viewd9c3f-dim);
  font-size:16px;
}
.viewd9c3f-ext-grid a:hover,
.viewd9c3f-ext-grid button:hover{
  background:#1F1F1F;
  color:var(--viewd9c3f-accent);
}
.viewd9c3f-ext-grid a:hover::after,
.viewd9c3f-ext-grid button:hover::after{color:var(--viewd9c3f-accent)}

.viewd9c3f-ext-promos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}
.viewd9c3f-ext-promo{
  border:1px solid var(--viewd9c3f-line-strong);
  background:#1B1B1B;
  border-radius:var(--viewd9c3f-radius-sm);
  padding:10px 11px;
  font-size:12.5px;
  color:var(--viewd9c3f-text);
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:46px;
}
.viewd9c3f-ext-promo span{
  font-family:var(--viewd9c3f-font-head);
  font-size:10px;
  letter-spacing:1px;
  color:var(--viewd9c3f-accent);
  text-transform:uppercase;
}

.viewd9c3f-disclaimer{
  font-size:11.5px;
  color:var(--viewd9c3f-dim);
  line-height:1.6;
  border-top:1px dashed var(--viewd9c3f-line);
  padding-top:12px;
}

/* ------------------------------------------------------------
   Common footer (copyright only)
   ------------------------------------------------------------ */
.viewd9c3f-foot{
  padding:14px var(--viewd9c3f-px) 16px;
  text-align:center;
  font-size:11.5px;
  color:var(--viewd9c3f-dim);
  font-family:var(--viewd9c3f-font-head);
  letter-spacing:.6px;
  border-top:1px solid var(--viewd9c3f-line);
}

/* ------------------------------------------------------------
   Bottom nav — 5 slots, center raised
   ------------------------------------------------------------ */
.viewd9c3f-bottom{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  height:calc(var(--viewd9c3f-bottom-h) + var(--viewd9c3f-safe-bottom));
  padding-bottom:var(--viewd9c3f-safe-bottom);
  background:linear-gradient(180deg,rgba(20,20,20,.96) 0%,rgba(10,10,10,.98) 100%);
  border-top:1px solid var(--viewd9c3f-line-strong);
  backdrop-filter:blur(6px);
  z-index:60;
  box-shadow:0 -6px 18px rgba(0,0,0,.5);
}
.viewd9c3f-bottom-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:end;
  height:var(--viewd9c3f-bottom-h);
  padding:0 4px;
}
.viewd9c3f-bottom-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 2px 6px;
  min-height:var(--viewd9c3f-bottom-h);
  color:var(--viewd9c3f-muted);
  font-size:10.5px;
  letter-spacing:.3px;
  text-align:center;
  position:relative;
  transition:color .18s ease,transform .12s ease;
}
.viewd9c3f-bottom-item svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.viewd9c3f-bottom-item:hover{color:var(--viewd9c3f-text)}
.viewd9c3f-bottom-item[aria-current="page"]{color:var(--viewd9c3f-accent)}
.viewd9c3f-bottom-item[aria-current="page"] svg{stroke:var(--viewd9c3f-accent)}

/* Center raised promotion slot */
.viewd9c3f-bottom-item--raised{
  transform:translateY(-14px);
  color:var(--viewd9c3f-accent-ink);
}
.viewd9c3f-bottom-item--raised::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  transform:translateX(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(180deg,#FFD75A 0%,#FFC83D 100%);
  box-shadow:0 4px 14px rgba(255,200,61,.4),0 0 0 4px rgba(20,20,20,.96);
  z-index:-1;
}
.viewd9c3f-bottom-item--raised svg{
  width:22px;
  height:22px;
  stroke:var(--viewd9c3f-accent-ink);
  stroke-width:1.8;
  position:relative;
  z-index:1;
}
.viewd9c3f-bottom-item--raised .viewd9c3f-bottom-label{
  position:relative;
  z-index:1;
  margin-top:18px;
  color:var(--viewd9c3f-accent);
  font-weight:700;
}
.viewd9c3f-bottom-label{font-size:10px;line-height:1}

/* ------------------------------------------------------------
   Utilities
   ------------------------------------------------------------ */
.viewd9c3f-visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.viewd9c3f-row{display:flex;gap:10px;flex-wrap:wrap}
.viewd9c3f-row--between{justify-content:space-between;align-items:center}
.viewd9c3f-divider{
  height:1px;background:var(--viewd9c3f-line);
  margin:14px 0;border:0;
}

/* ------------------------------------------------------------
   Responsive — keep stable grid tracks 320 - 430 px
   ------------------------------------------------------------ */
@media (min-width:360px){
  .viewd9c3f-hero-slide img{height:210px}
  .viewd9c3f-page-h1{font-size:26px}
}
@media (min-width:380px){
  .viewd9c3f-grid{grid-template-columns:repeat(5,1fr)}
  .viewd9c3f-grid--more{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:430px){
  .viewd9c3f-hero-slide img{height:230px}
  .viewd9c3f-promo-row{grid-template-columns:repeat(4,1fr)}
  .viewd9c3f-ext-promos{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}