/* =========================================================
   Barter Connect — Multi-page marketplace/community platform
   Blue brand system, white background, card-based UI.
   ========================================================= */

:root{
  --blue: #0A188F;
  --blue-dark: #07115f;
  --blue-darker: #040a39;
  --blue-light: #edefff;
  --blue-light-2: #dbdfff;
  --gold: #FFD129;
  --white: #ffffff;
  --bg-soft: #f6f8fc;
  --border: #e6eaf2;
  --text: #14213d;
  --text-dim: #5b6472;
  --text-faint: #9399a8;
  --text-on-blue: rgba(255,255,255,.92);
  --text-on-blue-dim: rgba(255,255,255,.72);
  --border-on-blue: rgba(255,255,255,.16);

  --tag-pink-bg:#ffe4ef; --tag-pink-text:#c2255c;
  --tag-blue-bg:#e0e4ff; --tag-blue-text:#0A188F;
  --tag-purple-bg:#f1e8ff; --tag-purple-text:#7c3aed;
  --tag-green-bg:#e3f9ec; --tag-green-text:#15803d;
  --tag-orange-bg:#fff1e0; --tag-orange-text:#c2650c;
  --tag-teal-bg:#e0f7f5; --tag-teal-text:#0f8a7a;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --font-th: 'Kanit', sans-serif;
  --shadow-sm: none;
  --shadow-lg: none;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; font-size: 18px; }
body{
  margin:0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-th);
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
button{ -webkit-appearance:none; appearance:none; }
button::-moz-focus-inner{ border:0; padding:0; }
ul{ margin:0; padding:0; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.25; }
p{ margin:0; }
button{ font-family:inherit; }

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.94rem;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{
  background: var(--blue);
  color: var(--white);
}
.btn-primary:hover{ transform: translateY(-2px); background:#2650bd; }
.btn-outline{
  background: var(--white);
  color: var(--blue);
  border-color: var(--border);
}
.btn-outline:hover{ border-color: var(--blue); background: var(--blue-light); }
.btn-white{
  background: var(--white);
  color: var(--blue-dark);
}
.btn-white:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position: sticky;
  top:0; left:0; right:0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:20px;
}
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo-img{ height:60px; width:auto; display:block; }

.main-nav{ display:flex; gap:32px; }
.main-nav a{
  font-size:.86rem; color: var(--text-dim);
  position:relative; padding:4px 0;
  white-space:nowrap;
  transition: color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--blue); }
.main-nav a.active::after{
  content:''; position:absolute; left:0; bottom:-4px;
  width:100%; height:2px; background: var(--gold);
}

.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{
  background:none; border:none; font:inherit; cursor:pointer;
  display:flex; align-items:center; gap:4px;
  font-size:.86rem; color: var(--text-dim); padding:4px 0;
  transition: color .2s ease;
}
.nav-dropdown-toggle svg{ width:12px; height:12px; transition: transform .2s ease; }
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.has-active .nav-dropdown-toggle{ color: var(--blue); }
.nav-dropdown:hover .nav-dropdown-toggle svg{ transform: rotate(180deg); }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; margin-top:14px;
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-md);
  min-width:150px; padding:6px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:50;
}
.nav-dropdown:hover .nav-dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-menu a{
  display:block; padding:8px 10px; border-radius:8px;
  font-size:.86rem; color: var(--text-dim); white-space:nowrap;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active{ background: var(--blue-light); color: var(--blue); }
.nav-dropdown-menu a.active::after{ display:none; }

.header-actions{ display:flex; align-items:center; gap:12px; }
.lang-switch{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius:50%;
  color: var(--text-dim);
  cursor:pointer;
}
.lang-switch svg{ width:16px; height:16px; }
.lang-switch .lang-opt{ display:none; }

.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px;
  background:transparent; border:none; cursor:pointer;
  flex-shrink:0;
}
.hamburger span{ width:100%; height:2px; background: var(--text); border-radius:2px; transition:.3s; }

/* ---------- parallax / image frame primitives ---------- */
.parallax-frame{ position:relative; overflow:hidden; }
.parallax-img{
  position:absolute;
  top:-16%; left:0;
  width:100%; height:132%;
  object-fit:cover;
  will-change: transform;
}
.cover-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- page banner (About / Marketplace / Community / How / News) ---------- */
.page-banner{
  background: linear-gradient(120deg, var(--blue-dark), var(--blue));
  padding:64px 0;
  color: var(--white);
}
.page-banner h1{ font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--white); margin-bottom:10px; }
.page-banner p{ color: var(--text-on-blue-dim); font-size:1rem; max-width:560px; }
.page-banner .banner-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}

/* ---------- hero (home) ---------- */
.hero{ padding: 24px 0 0; background: var(--white); text-align:center; }

/* ---------- hero banner slider ---------- */
.mag-slider.hero-slider{ background:none; box-shadow:none; border-radius:0; overflow:hidden; }
.hero-slider .mag-track{ align-items:flex-start; }
.hero-slider .mag-slide{ padding:0; display:block; text-align:center; position:relative; }
.hero-banner-img{ width:100%; height:auto; display:block; border-radius: var(--radius-lg); }
.hero-banner-link{ display:block; }

/* ---------- customer logos ---------- */
.customer-logos{ margin:40px 0 0; text-align:center; }
.customer-logos-label{
  font-size:.86rem; font-weight:700; color: var(--text-faint);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:20px;
}
.customer-logos-grid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:28px 40px;
}
.customer-logos-grid img{ height:34px; width:auto; display:block; opacity:.85; transition:opacity .2s ease; }
.customer-logos-grid img:hover{ opacity:1; }
@media (max-width:860px){
  .customer-logos-grid{ gap:20px 28px; }
  .customer-logos-grid img{ height:26px; }
}
@media (max-width:560px){
  .customer-logos-grid{ gap:16px 22px; }
  .customer-logos-grid img{ height:20px; }
}

/* ---------- generic section ---------- */
.section{ padding:32px 0; position:relative; background: var(--white); }
.section.alt-bg{ background: var(--bg-soft); }
.section-head.row{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:20px; gap:16px;
}
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--blue); }
.section-head p.section-desc{ color: var(--text-dim); margin-top:8px; }
.see-more{ font-size:.9rem; font-weight:600; color: var(--blue); white-space:nowrap; padding-bottom:6px; }
.see-more:hover{ text-decoration:underline; }
.section-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue); background: var(--blue-light);
  padding:5px 14px; border-radius:999px;
  margin-bottom:14px; font-weight:700;
}
.section-tag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--gold); flex-shrink:0;
}

/* ---------- category cards (home) ---------- */
.category-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:20px;
}
.category-card{ text-align:center; }
.category-card .cat-photo{
  border-radius: 50%;
  overflow:hidden;
  aspect-ratio:1/1;
  box-shadow: var(--shadow-sm);
  margin-bottom:14px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.category-card:hover .cat-photo{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.category-card .cat-photo img{ width:100%; height:100%; object-fit:cover; }
.category-card span{ font-size:.86rem; font-weight:600; color: var(--text); }

/* ---------- marketplace coming soon ---------- */
.market-coming-soon{ padding:96px 0; }
.market-coming-soon-box{
  max-width:440px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  color: var(--text-faint);
}
.market-coming-soon-box svg{ width:48px; height:48px; color: var(--blue); }
.market-coming-soon-box p{ font-size:1.15rem; font-weight:700; color: var(--text); }

/* ---------- deal / marketplace cards ---------- */
.deal-grid, .market-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
}
.deal-card{
  background: var(--white);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.deal-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.deal-thumb{ position:relative; height:150px; overflow:hidden; }
.deal-thumb img{ width:100%; height:100%; object-fit:cover; }
.deal-thumb.dark{
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  display:flex; align-items:center; justify-content:center;
  padding:16px; text-align:center;
}
.deal-thumb.dark span{ color: var(--white); font-weight:800; font-size:1.05rem; line-height:1.3; }
.bookmark-btn{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim);
  box-shadow: var(--shadow-sm);
}
.bookmark-btn svg{ width:15px; height:15px; }
.tag-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:999px;
}
.tag-badge.on-card{ position:static; display:inline-block; margin-bottom:10px; }
.tag-pink{ background: var(--tag-pink-bg); color: var(--tag-pink-text); }
.tag-blue{ background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.tag-purple{ background: var(--tag-purple-bg); color: var(--tag-purple-text); }
.tag-green{ background: var(--tag-green-bg); color: var(--tag-green-text); }
.tag-orange{ background: var(--tag-orange-bg); color: var(--tag-orange-text); }
.tag-teal{ background: var(--tag-teal-bg); color: var(--tag-teal-text); }

.deal-body{ padding:18px 20px; }
.deal-body h3{ font-size:1rem; color: var(--text); margin-bottom:6px; }
.deal-body .deal-desc{ color: var(--text-dim); font-size:.85rem; margin-bottom:12px; min-height:2.6em; }
.deal-price{ font-size:1.05rem; font-weight:800; color: var(--blue); margin-bottom:10px; }
.deal-price span{ font-size:.78rem; font-weight:600; color: var(--text-faint); }

.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:32px; align-items:center; }
.carousel-dots .cdot{ width:8px; height:8px; border-radius:50%; background: var(--border); }
.carousel-dots .cdot.active{ background: var(--blue); width:22px; border-radius:999px; }
.carousel-arrow{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border); background: var(--white);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim); cursor:pointer;
}
.carousel-arrow svg{ width:16px; height:16px; }

/* ---------- home: community preview (post-card carousel) ---------- */
.mag-slider.comm-slider{ background:none; border-radius:0; box-shadow:none; position:relative; overflow:hidden; }
.comm-slider .mag-slide{ padding:0 6px; display:block; }
.comm-slider .slider-arrow.prev{ left:8px; }
.comm-slider .slider-arrow.next{ right:8px; }
.home-post-link{
  display:block; color:inherit; text-decoration:none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.home-post-link:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.home-post-link .photo-collage img{ cursor:pointer; }

/* ---------- home: magazine feature ---------- */
.mag-feature{
  display:grid; grid-template-columns:60fr 40fr; align-items:center;
  gap:16px; background: var(--white);
  border-radius: var(--radius-lg); padding:32px 64px 32px 32px;
}
.mag-feature-cover{ display:flex; justify-content:flex-start; }
.mag-feature-cover img{
  width:100%; max-width:100%; height:auto; display:block;
  margin-left:-24px;
  filter: drop-shadow(0 20px 40px rgba(20,33,61,.28));
}
.mag-feature-badge{
  display:inline-block; width:fit-content;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color: var(--blue-darker); background: var(--gold);
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.mag-feature-title{
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight:700; line-height:1.35;
  color: var(--blue); margin-bottom:16px;
}
.mag-feature-title .accent{ color: var(--blue); }
.mag-feature-desc{
  color: var(--text-dim); font-size:.98rem; line-height:1.75;
  margin-bottom:24px; max-width:520px;
}
.btn-gold{
  background: var(--gold); color: var(--blue-darker);
}
.btn-gold:hover{ transform: translateY(-2px); background:#e6bb1f; }
@media (max-width:860px){
  .mag-feature{ grid-template-columns:1fr; text-align:center; padding:40px 32px; gap:28px; }
  .mag-feature-cover{ justify-content:center; }
  .mag-feature-cover img{ margin-left:0; }
  .mag-feature-desc{ margin-left:auto; margin-right:auto; }
  .mag-feature-badge{ margin-left:auto; margin-right:auto; }
}


/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  overflow:hidden;
  border-radius: var(--radius-lg);
  margin: 0 auto;
  max-width:1200px;
}
.cta-band .cta-bg{ position:absolute; inset:0; z-index:0; }
.cta-band .cta-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(19,23,58,.92) 0%, rgba(27,42,99,.85) 45%, rgba(27,42,99,.55) 100%);
}
.cta-inner{
  position:relative; z-index:2;
  padding: 64px 48px;
  max-width:520px;
}
.cta-band h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--white); margin-bottom:14px; }
.cta-band p{ color: var(--text-on-blue-dim); margin-bottom:26px; }

.cta-inner-center{ max-width:560px; margin:0 auto; text-align:center; padding:64px 32px; }
.cta-banner-section{ padding:24px 0 0; }
.cta-banner-link{
  display:block; width:100%; border:none; padding:0; margin:0;
  background:none; border-radius:18px; overflow:hidden; cursor:pointer;
}
.cta-banner-img{ width:100%; height:auto; display:block; transition:transform .25s ease; }
.cta-banner-link:hover .cta-banner-img{ transform:scale(1.015); }

/* ---------- CTA modal ---------- */
.cta-modal{
  position:fixed; inset:0; z-index:1000;
  background: rgba(16,23,58,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease;
}
.cta-modal.open{ opacity:1; visibility:visible; }
.cta-modal-box{
  position:relative; background: var(--white); border-radius: var(--radius-lg);
  max-width:440px; width:100%; max-height:90vh; overflow-y:auto;
  padding:36px 32px;
}
.cta-modal-close{
  position:absolute; top:16px; right:16px;
  width:36px; height:36px; border-radius:50%;
  background: var(--bg-soft); color: var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; transition: background .2s ease;
}
.cta-modal-close:hover{ background: var(--border); }
.cta-modal-close svg{ width:18px; height:18px; }
#ctaModalFormWrap h3{ font-size:1.25rem; color: var(--blue); margin-bottom:8px; padding-right:24px; }
#ctaModalFormWrap > p{ color: var(--text-dim); font-size:.86rem; margin-bottom:22px; }
.cta-modal-field{ display:block; margin-bottom:14px; }
.cta-modal-field span{ display:block; font-size:.8rem; font-weight:600; color: var(--text); margin-bottom:6px; }
.cta-modal-field input{
  width:100%; padding:12px 14px; border-radius: var(--radius-sm);
  border:1px solid var(--border); font-family:inherit; font-size:.9rem; color: var(--text);
}
.cta-modal-field input:focus{ outline:none; border-color: var(--blue); }
.cta-modal-form .btn{ margin-top:8px; }
.cta-modal-success{ text-align:center; padding:8px 0; }
.cta-modal-success-icon{
  width:52px; height:52px; border-radius:50%; margin:0 auto 16px;
  background: var(--blue); color: var(--white);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.cta-modal-success h3{ color: var(--blue); margin-bottom:8px; font-size:1.15rem; }
.cta-modal-success p{ color: var(--text-dim); font-size:.88rem; }
.cta-tag{
  display:inline-block; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color: rgba(255,255,255,.7); margin-bottom:14px;
}

/* ---------- footer ---------- */
.site-footer{ background: var(--white); border-top:1px solid var(--border); }
.footer-top{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:32px;
  padding:56px 24px 40px;
}
.footer-brand p{ color: var(--text-dim); margin:12px 0 18px; font-size:.88rem; max-width:260px; }
.footer-col h4{ color: var(--text); font-size:.9rem; margin-bottom:16px; }
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col a, .footer-col p{ color: var(--text-dim); font-size:.86rem; }
.footer-col a:hover{ color: var(--blue); }
.footer-bottom{
  border-top:1px solid var(--border);
  padding:20px 24px;
}
.footer-copy{ text-align:center; color: var(--text-faint); font-size:.8rem; }

/* ---------- social icons ---------- */
.social-row{ display:flex; gap:10px; }
.social-btn{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-soft);
  border:1px solid var(--border);
  color: var(--text-dim);
  transition: .2s ease;
}
.social-btn svg{ width:16px; height:16px; }
.social-btn:hover{ background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ---------- form ---------- */
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:.85rem; color: var(--text-dim); margin-bottom:8px; }
.form-group input, .form-group textarea{
  width:100%;
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size:.92rem;
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color: var(--blue); }

/* =========================================================
   MARKETPLACE PAGE
   ========================================================= */
.marketplace-layout{ display:grid; grid-template-columns: 240px 1fr; gap:32px; padding:40px 0 80px; }
.search-bar{
  display:flex; align-items:center; gap:10px;
  background: var(--white); border:1px solid var(--border);
  border-radius:999px; padding:12px 20px; margin:-28px 0 32px;
  position:relative; z-index:5; box-shadow: var(--shadow-sm);
  max-width:640px;
}
.search-bar svg{ width:18px; height:18px; color: var(--text-faint); flex-shrink:0; }
.search-bar input{ border:none; outline:none; flex:1; font-family:inherit; font-size:.92rem; background:transparent; color: var(--text); }

.filters-row{ display:flex; align-items:center; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
.filter-select{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:999px;
  padding:9px 16px; font-size:.85rem; color: var(--text-dim);
  background: var(--white); cursor:pointer;
}
.filter-select svg{ width:13px; height:13px; }
.news-filter-select{
  border:1px solid var(--border); border-radius:999px;
  padding:9px 34px 9px 18px; font-size:.85rem; color: var(--text-dim);
  background: var(--white) url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22><path d=%22M6 9L12 15L18 9%22 stroke=%22%235b6472%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/></svg>') no-repeat right 12px center;
  background-size:14px; appearance:none; -webkit-appearance:none; cursor:pointer; font-family:inherit;
}
.news-filter-select:focus{ outline:none; border-color: var(--blue); }
.filters-row .view-toggle{ display:flex; gap:6px; margin-left:auto; }
.view-toggle button{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background: var(--white); color: var(--text-faint); display:flex; align-items:center; justify-content:center;
}
.view-toggle button.active{ background: var(--blue); color: var(--white); border-color: var(--blue); }
.view-toggle svg{ width:15px; height:15px; }

.sidebar-cats{ display:flex; flex-direction:column; gap:4px; }
.sidebar-cats a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px; font-size:.88rem; color: var(--text-dim);
}
.sidebar-cats a svg{ width:16px; height:16px; flex-shrink:0; }
.sidebar-cats a:hover{ background: var(--bg-soft); color: var(--text); }
.sidebar-cats a.active{ background: var(--blue-light); color: var(--blue); font-weight:700; }

/* =========================================================
   COMMUNITY PAGE
   ========================================================= */
.community-layout{ display:grid; grid-template-columns: 1fr 280px; gap:32px; padding:40px 0 80px; }
.tabs-row{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.tab-pill{
  padding:9px 18px; border-radius:999px; font-size:.86rem; font-weight:600;
  color: var(--text-dim); border:1px solid var(--border); background: var(--white);
}
.tab-pill.active{ background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ---------- social-style event post card ---------- */
.post-card{
  background: var(--white); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius: var(--radius-lg);
  padding:26px; margin-bottom:22px; box-shadow: var(--shadow-sm);
  display:grid; grid-template-columns: 35fr 65fr; gap:28px; align-items:center;
}
.post-card-body{ display:flex; flex-direction:column; min-width:0; gap:10px; }
.post-card-photo{ min-width:0; }
.post-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.post-category{
  display:inline-block; font-size:.76rem; font-weight:600;
  color: var(--tag-blue-text); background: var(--tag-blue-bg);
  padding:5px 14px; border-radius:999px;
}
.post-title{ font-size:1.22rem; font-weight:700; color: var(--blue); margin-bottom:28px; display:block; line-height:1.5; }
.post-head .post-time{ font-size:.78rem; color: var(--text-faint); white-space:nowrap; flex-shrink:0; }

.photo-collage{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:420px;
  border-radius: var(--radius-md);
  overflow:hidden;
}

@media (max-width: 400px){
  .post-card{ grid-template-columns: 1fr; }
}
.photo-collage img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in; display:block; transition: opacity .2s ease; }
.photo-collage img:hover{ opacity:.9; }
.pc-top{ display:flex; gap:8px; flex:1.3; min-height:0; }
.pc-top > div{ position:relative; flex:1; min-width:0; overflow:hidden; }
.pc-bottom{ display:flex; gap:8px; flex:1; min-height:0; }
.pc-bottom > div{ position:relative; flex:1; min-width:0; overflow:hidden; }
.pc-more{
  position:absolute; inset:0; z-index:2;
  background: rgba(16,23,58,.55);
  color: var(--white); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

.post-card p.post-caption{
  color: var(--text); font-size:.94rem; line-height:1.75; margin-bottom:28px;
  max-width:720px;
}
.post-caption.clamped{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.read-more{
  background:none; border:none; padding:0; font-family:inherit;
  font-size:.88rem; font-weight:700; color: var(--blue); cursor:pointer;
  display:block; margin-bottom:36px; margin-top:4px;
}
.post-hashtags{ margin-bottom:0; max-width:720px; display:flex; flex-wrap:wrap; gap:8px; }
.post-hashtags a, .post-hashtags span{
  color: var(--tag-blue-text); font-size:.82rem; font-weight:600;
  background: var(--tag-blue-bg); padding:6px 14px; border-radius:999px;
}

.engage-bar{
  display:flex; align-items:center; gap:18px;
  padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:.82rem; color: var(--text-dim); margin-bottom:14px;
}
.engage-bar > *{ display:flex; align-items:center; gap:6px; }
.engage-bar svg{ width:17px; height:17px; }
.like-btn{
  background:none; border:none; padding:0; cursor:pointer; color: var(--text-dim);
  font-size:.82rem; font-family:inherit;
}
.like-btn svg{ transition: transform .15s ease; }
.like-btn.liked{ color: var(--blue); }
.like-btn.liked svg{ fill: var(--blue); transform: scale(1.1); }
.engage-bar .view-count{ margin-left:auto; color: var(--text-faint); }

.comment-item{ display:flex; gap:10px; margin-bottom:14px; }
.comment-item img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.comment-bubble{ background: var(--bg-soft); border-radius: var(--radius-md); padding:9px 14px; }
.comment-bubble strong{ display:block; font-size:.85rem; color: var(--text); margin-bottom:2px; }
.comment-bubble p{ font-size:.86rem; color: var(--text); }
.comment-meta{ display:flex; gap:14px; font-size:.76rem; color: var(--text-faint); margin-top:4px; padding-left:14px; }
.comment-meta button{ background:none; border:none; padding:0; font-size:.76rem; color: var(--text-faint); font-weight:700; cursor:pointer; font-family:inherit; }

.comment-composer{ display:flex; align-items:center; gap:10px; }
.comment-composer img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.comment-composer .composer-input{
  flex:1; display:flex; align-items:center; gap:8px;
  background: var(--bg-soft); border-radius:999px; padding:9px 14px;
}
.comment-composer input{
  flex:1; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:.86rem; color: var(--text);
}
.comment-composer .composer-send{
  width:34px; height:34px; border-radius:50%; border:none; background: var(--blue); color: var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
}
.comment-composer .composer-send svg{ width:15px; height:15px; }

/* =========================================================
   HOW IT WORKS PAGE
   ========================================================= */
.steps-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; position:relative; }
.step-card{
  background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:32px 24px; text-align:center; box-shadow: var(--shadow-sm); position:relative;
}
.step-num-badge{
  width:32px; height:32px; border-radius:50%; background: var(--blue-dark); color: var(--white);
  display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700;
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
}
.step-icon-lg{
  width:60px; height:60px; margin:16px auto 16px; border-radius:50%;
  background: var(--blue-light); color: var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.step-icon-lg svg{ width:28px; height:28px; }
.step-card h3{ font-size:1rem; color: var(--text); margin-bottom:8px; }
.step-card p{ color: var(--text-dim); font-size:.86rem; }

/* =========================================================
   NEWS PAGE
   ========================================================= */
.news-category{ margin-bottom:44px; }
.news-category:last-child{ margin-bottom:0; }
.news-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.news-card{
  display:block; background: var(--white); border:1px solid var(--border); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
  text-decoration:none; color:inherit;
}
.news-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-thumb{ height:150px; overflow:hidden; }
.news-thumb img{ width:100%; height:100%; object-fit:cover; }
.news-body{ padding:18px 20px; }
.news-body h3{ font-size:.96rem; color: var(--text); margin-bottom:8px; }
.news-date{ font-size:.78rem; color: var(--text-faint); }

.article-detail h1{ font-size:clamp(1.4rem,2.4vw,1.9rem); color: var(--text); margin:10px 0 20px; line-height:1.35; }
.article-thumb{ border-radius: var(--radius-lg); overflow:hidden; margin-bottom:28px; }
.article-thumb img{ width:100%; height:auto; display:block; }
.article-body p{ color: var(--text-dim); line-height:1.85; margin-bottom:18px; font-size:.96rem; }
.article-subheadline{ color: var(--text-dim); font-size:1.05rem; line-height:1.6; margin:0 0 24px; }
.article-body h2{ color: var(--text); font-size:1.28rem; margin:8px 0 16px; line-height:1.4; }
.article-block-image{ margin:0 0 22px; }
.article-block-image img{ width:100%; height:auto; border-radius: var(--radius-md); display:block; }
.article-block-image.half{ max-width:360px; }
.article-block-image figcaption{ color: var(--text-faint); font-size:.82rem; margin-top:8px; text-align:center; }
.article-block-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:0 0 22px; }
.article-block-gallery img{ width:100%; height:150px; object-fit:cover; border-radius:10px; }
.article-block-quote{ border-left:4px solid var(--blue); margin:0 0 22px; padding:6px 0 6px 20px; }
.article-block-quote p{ color: var(--text); font-size:1.08rem; font-style:italic; margin-bottom:8px; }
.article-block-quote cite{ color: var(--text-faint); font-size:.84rem; font-style:normal; }
.article-block-video{ margin:0 0 22px; }
.article-block-video .video-frame{ position:relative; padding-top:56.25%; border-radius: var(--radius-md); overflow:hidden; background:#000; }
.article-block-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }
.article-block-video .video-caption{ color: var(--text-faint); font-size:.82rem; margin-top:8px; text-align:center; }
.article-block-divider{ border:none; border-top:1px solid var(--border); margin:28px 0; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
/* ---------- feature split (about page) ---------- */
.about-community-hero{ padding:50px 0 38px; overflow:hidden; background:var(--white); }
.about-community-grid{
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr); gap:68px; align-items:center;
  max-width:1120px; min-height:0; padding:0 26px; position:relative; overflow:visible;
}
.about-community-grid::after{
  content:""; position:absolute; width:76px; height:76px; right:0; top:20px; opacity:.65;
  background-image:radial-gradient(circle,#b9cbff 2px,transparent 2.5px); background-size:18px 18px;
}
.about-community-copy{ position:relative; z-index:1; padding:4px 0; }
.about-community-copy > .section-tag{ display:none; }
.about-community-copy .section-tag{ color:var(--blue); }
.about-community-copy .section-tag::before{ background:var(--blue); }
.about-community-copy h1{
  max-width:500px; font-size:clamp(1.75rem,2.65vw,2.15rem); color:#111522;
  line-height:1.31; letter-spacing:-.018em; margin:0 0 24px;
}
.about-community-copy h1 span{ color:var(--blue); }
.about-community-copy > p:not(.section-tag){
  max-width:455px; color:#46516b; font-size:.78rem; line-height:1.78; margin-bottom:24px;
}
.about-hero-actions{ display:flex; align-items:center; gap:18px; }
.about-community-copy .btn-primary{ min-width:160px; padding:11px 22px; background:var(--blue); color:var(--white); border-color:var(--blue); border-radius:999px; box-shadow:0 7px 16px rgba(10,24,143,.16); }
.about-hero-play{ display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); font-size:.76rem; }
.about-hero-play span{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--white); border:1px solid #c9d9ff; color:var(--blue); font-size:.5rem; padding-left:1px; }
.about-community-visual{ position:relative; z-index:1; padding:0; }
.about-community-visual::before{ content:""; position:absolute; inset:118px -46px -8px 38px; background:#f4f7fd; border-radius:18px; }
.about-community-photo{ position:relative; z-index:1; border-radius:17px; overflow:hidden; aspect-ratio:1.08/1; background:#edf3ff; }
.about-community-photo .cover-img{ object-fit:cover; }
@media (max-width:860px){
  .about-community-grid{ grid-template-columns:1fr; gap:30px; min-height:0; text-align:center; padding:42px 26px 32px; }
  .about-community-copy{ padding-top:14px; }
  .about-community-copy > p:not(.section-tag){ margin-left:auto; margin-right:auto; }
  .about-community-visual{ max-width:580px; margin:0 auto; width:100%; }
}
@media (max-width:520px){
  .about-hero-actions{ justify-content:center; }
}
.feature-split{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; padding:16px 0; }
.about-story-section{ background:var(--white)!important; border:0; overflow:hidden; padding:38px 0 34px; }
.about-story-section::before{ display:none; }
.about-story-section .feature-split{ grid-template-columns:minmax(280px,.72fr) minmax(520px,1.48fr); gap:66px; padding:52px 58px; background:#f8faff; border-radius:22px; }
.about-story-section .section-tag{ display:inline-block; padding:4px 12px; background:#edefff; border-radius:999px; color:var(--blue); font-size:.62rem; }
.about-story-section .section-tag::before{ display:none; }
.about-story-section .feature-split h2{ color:#131a2e; font-size:1.65rem; margin:16px 0 22px; }
.about-story-section .feature-split p{ color:#4d5870; font-size:.82rem; line-height:1.8; margin-bottom:20px; }
.about-story-btn{ margin-top:10px; min-width:154px; padding:11px 20px; border-color:var(--blue); color:var(--blue); border-radius:999px; background:var(--white); }
.story-frame{ position:relative; order:2; padding:0; }
.story-frame::after{ display:none; }
.about-story-section .story-photo{ position:relative; z-index:1; aspect-ratio:16/9; border:0; border-radius:18px; box-shadow:0 12px 26px rgba(18,47,119,.08); }
@media (max-width:860px){
  .about-story-section .feature-split{ grid-template-columns:1fr; gap:28px; padding:34px 26px; }
  .story-frame{ order:0; width:100%; max-width:580px; margin:0 auto; }
}
.feature-split-reverse .feature-split-photo{ order:2; }
.feature-split-photo{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 4/3;
}
.feature-split-icon{
  width:56px; height:56px; border-radius:16px; background: var(--blue); color: var(--gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.feature-split-icon svg{ width:28px; height:28px; }
.feature-split h2{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom:14px; }
.feature-split p{ color: var(--text-dim); font-size:.98rem; line-height:1.75; max-width:480px; }
@media (max-width: 860px){
  .feature-split{ grid-template-columns: 1fr; text-align:center; gap:28px; }
  .feature-split-reverse .feature-split-photo{ order:0; }
  .feature-split-icon{ margin-left:auto; margin-right:auto; }
  .feature-split p{ margin-left:auto; margin-right:auto; }
}


/* ---------- story play button ---------- */
.story-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:64px; height:64px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; padding:0; transition: background .2s ease;
}
.story-play:hover{ background: var(--white); }
.story-play svg{ width:24px; height:24px; margin-left:3px; }

/* ---------- story video modal ---------- */
.video-modal-box{ max-width:900px; padding:0; background:transparent; overflow:visible; }
.video-modal .cta-modal-close{ top:-44px; right:0; background: rgba(255,255,255,.92); }
.video-modal-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--radius-lg); overflow:hidden; background:#000; }
.video-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- vision row ---------- */
.about-values-section{ padding:42px 0 48px; }
.about-values-section .section-head{ max-width:720px!important; margin-bottom:26px!important; }
.about-values-section .section-head h2{ color:#1d2945; font-size:1.7rem; }
.about-values-section .section-head h2 span{ color:var(--blue); }
.about-values-section .section-head p{ color:#5c6880; font-size:.88rem; }
.vision-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; text-align:center; margin:0 auto; max-width:1130px; }
.vision-card{
  padding:28px 32px 30px; position:relative; min-height:220px;
  background:var(--white); border:1px solid #e9edf6; border-radius:18px; box-shadow:0 12px 28px rgba(21,55,142,.065);
}
.vision-icon{
  width:70px; height:70px; border-radius:50%; background:#edefff; color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
}
.vision-icon svg{ width:34px; height:34px; }
.vision-card h3{ font-size:1.05rem; color:#1c2946; margin-bottom:12px; }
.vision-card p{ font-size:.78rem; color:#647087; line-height:1.65; }

/* ---------- mobile application features ---------- */
.app-features-section{
  position:relative; overflow:hidden;
  background:var(--white); padding:38px 0 18px;
}
.app-features-section::before,.app-features-section::after{
  content:""; position:absolute; width:78px; height:78px; opacity:.6;
  background-image:radial-gradient(circle,#b9cbff 2px,transparent 2.5px); background-size:20px 20px;
}
.app-features-section::before{ top:28px; right:36px; }
.app-features-section::after{ bottom:24px; left:36px; }
.app-features-section .container{ position:relative; z-index:1; }
.app-features-section .section-head{ margin-bottom:20px!important; }
.app-features-section .section-tag{ display:inline-block; padding:4px 12px; background:#edefff; border-radius:999px; color:var(--blue); font-size:.62rem; }
.app-features-section .section-tag::before{ display:none; }
.app-features-section .section-head h2{ color:#1d2945; font-size:1.72rem; }
.app-features-section .section-head h2 span{ color:var(--blue); }
.app-features-layout{
  display:grid; grid-template-columns:1fr 440px 1fr; gap:54px; align-items:center;
  max-width:1050px; margin:8px auto 0;
}
.app-feature-col{ display:flex; flex-direction:column; gap:42px; }
.app-feature-col:first-child{ align-items:flex-end; text-align:right; }
.app-feature-item{ display:flex; align-items:flex-start; gap:14px; max-width:250px; }
.app-feature-col:first-child .app-feature-item{ flex-direction:row-reverse; }
.app-feature-num{
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:var(--blue); border:1px solid var(--blue); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800;
}
.app-feature-item h4{ font-size:.92rem; color:var(--blue); font-weight:700; margin:0 0 8px; }
.app-feature-item p{ font-size:.76rem; color:#59667e; line-height:1.65; }
.app-phones{ width:440px; max-width:100%; margin:0 auto; }
.app-phones-img{ width:100%; height:auto; display:block; }
@media (max-width:960px){
  .app-features-layout{ grid-template-columns: minmax(0, 1fr); justify-items:center; }
  .app-features-layout > *{ min-width:0; }
  .app-feature-col{ flex-direction:column; align-items:flex-start; text-align:left; gap:28px; width:100%; max-width:100%; }
  .app-feature-item{ flex-direction:row; max-width:none; width:100%; min-width:0; }
  .app-phones{ width:100%; }
  .app-feature-col:first-child{ order:1; align-items:flex-start; text-align:left; }
  .app-feature-col:first-child .app-feature-item{ flex-direction:row; }
  .app-feature-col:first-child .app-feature-item div{ text-align:left; }
  .app-feature-col:last-child{ order:2; }
  .app-phones{ order:3; }
}
@media (max-width:860px){
  .vision-row{ grid-template-columns: 1fr; gap:28px; }
}

/* ---------- numbered pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:36px; }
.pagination button, .pagination span.ellipsis{
  min-width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.86rem; color: var(--text-dim);
  border:1px solid var(--border); background: var(--white);
  padding:0 4px;
}
.pagination button.active{ background: var(--blue); color: var(--white); border-color: var(--blue); font-weight:700; }
.pagination button.nav-btn{ color: var(--text-faint); }
.pagination button.nav-btn svg{ width:14px; height:14px; }
.pagination span.ellipsis{ border:none; background:transparent; }

/* ---------- price range filter ---------- */
.price-filter{ margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }
.price-filter h4{ font-size:.86rem; color: var(--text); margin-bottom:14px; }
.price-filter input[type="range"]{
  width:100%; accent-color: var(--blue); margin-bottom:8px;
}
.price-filter .price-labels{ display:flex; justify-content:space-between; font-size:.76rem; color: var(--text-faint); }

/* ---------- mini steps teaser (marketplace bottom) ---------- */
.mini-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin-top:24px; }
.mini-step{ display:flex; align-items:center; gap:12px; }
.mini-step .mini-num{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: var(--blue-light); color: var(--blue); font-weight:700; font-size:.86rem;
  display:flex; align-items:center; justify-content:center;
}
.mini-step p{ font-size:.84rem; color: var(--text-dim); }

/* ---------- testimonials: quote grid ---------- */
.testi-masonry{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.tm-quote{
  aspect-ratio: 3/4;
  perspective: 1400px;
  -webkit-perspective: 1400px;
  cursor:pointer;
  outline:none;
}
.tm-quote-inner{
  position:relative; width:100%; height:100%;
  transition: transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.tm-quote.flipped .tm-quote-inner{ transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.tm-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius: var(--radius-lg);
  border:1px solid var(--border); border-top:3px solid var(--gold);
  overflow:hidden;
  background: var(--white);
}
.tm-front{ padding:0; }
.tm-front img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.tm-front-overlay{
  position:absolute; left:0; right:0; bottom:0; padding:36px 18px 16px;
  background: linear-gradient(to top, rgba(10,20,50,.88), rgba(10,20,50,0));
  color:#fff;
}
.tm-front-overlay strong{ display:block; font-size:.92rem; }
.tm-front-overlay .testi-role{ display:block; font-size:.74rem; color:rgba(255,255,255,.8); margin-top:2px; }
.tm-back{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  padding:24px 24px 26px;
  display:flex; flex-direction:column;
}
.tm-back .tm-mark{ font-size:2.6rem; font-family:Georgia,serif; color: var(--blue); line-height:1; margin-bottom:6px; }
.tm-back h3{ font-size:1.02rem; color: var(--blue); line-height:1.35; margin-bottom:10px; }
.tm-back p{ font-size:.82rem; color: var(--text-dim); line-height:1.6; flex:1; overflow:auto; }
.tm-person{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.tm-person img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top; flex-shrink:0; }
.tm-person div strong{ display:block; font-size:.82rem; color: var(--text); }
.tm-person div .testi-role{ display:block; font-size:.74rem; color: var(--text-faint); }

@media (max-width: 1024px){
  .testi-masonry{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .testi-masonry{ grid-template-columns: 1fr; }
  #reviews .testi-masonry{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px;
    padding:4px 24px 12px;
    margin:0 -24px;
    -webkit-overflow-scrolling:touch;
  }
  #reviews .testi-masonry .tm-quote{
    flex:0 0 78%;
    scroll-snap-align:center;
  }
}

/* ---------- event feed (social-style, single column) ---------- */
.events-feed{ width:100%; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background: rgba(16,23,58,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px;
  opacity:0; visibility:hidden;
  transition: opacity .25s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:90vw; max-height:78vh; border-radius:14px;
}
.lightbox-caption{ color: var(--white); text-align:center; margin-top:18px; font-size:.94rem; max-width:640px; }
.lightbox-close{
  position:absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.14); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
}
.lightbox-close svg{ width:20px; height:20px; }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.14); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; z-index:5;
  transition: background .2s ease;
}
.lightbox-arrow:hover{ background: rgba(255,255,255,.26); }
.lightbox-arrow.prev{ left:20px; }
.lightbox-arrow.next{ right:20px; }
.lightbox-arrow svg{ width:22px; height:22px; }
.lightbox-counter{ color: rgba(255,255,255,.65); font-size:.82rem; margin-top:8px; }

@media (max-width: 560px){
  .lightbox-arrow{ width:40px; height:40px; }
  .lightbox-arrow.prev{ left:8px; }
  .lightbox-arrow.next{ right:8px; }
}

/* ---------- magazine embed ---------- */
.magazine-frame{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border:1px solid var(--border);
  background: var(--white);
}
.banner-highlights{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;
}
.banner-highlights .chip{
  background: rgba(255,255,255,.14); color: var(--white);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:8px 18px; font-size:.84rem; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.banner-highlights .chip svg{ width:15px; height:15px; }

/* ---------- highlights slider (banner-style carousel) ---------- */
.mag-slider{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: linear-gradient(120deg, var(--blue-dark), var(--blue));
  box-shadow: var(--shadow-lg);
}
.mag-track{ display:flex; transition: transform .5s ease; }
.mag-slide{
  min-width:100%; box-sizing:border-box;
  padding:56px 64px;
  display:flex; align-items:center; gap:36px;
}
.mag-slide-icon{
  width:96px; height:96px; border-radius:22px; flex-shrink:0;
  background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.mag-slide-icon svg{ width:44px; height:44px; color: var(--white); }
.mag-slide-tag{
  display:inline-block; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--white); background: rgba(255,255,255,.14);
  padding:5px 14px; border-radius:999px; margin-bottom:12px; font-weight:700;
}
.mag-slide-body h3{ font-size:1.4rem; color: var(--white); margin-bottom:10px; }
.mag-slide-body p{ color: rgba(255,255,255,.78); font-size:1rem; max-width:520px; }

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--blue-dark);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; z-index:5;
  transition: background .2s ease;
}
.slider-arrow:hover{ background: var(--white); }
.slider-arrow.prev{ left:16px; }
.slider-arrow.next{ right:16px; }
.slider-arrow svg{ width:18px; height:18px; }

.slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
.slider-dots .sdot{
  width:8px; height:8px; border-radius:50%; background: var(--border);
  border:none; padding:0; cursor:pointer; transition: width .2s ease, background .2s ease;
}
.slider-dots .sdot.active{ background: var(--gold); width:22px; border-radius:999px; }

@media (max-width: 860px){
  .mag-slide{ flex-direction:column; text-align:center; padding:44px 56px; }
  .mag-slide-body p{ max-width:none; }
}
@media (max-width: 560px){
  .mag-slide{ padding:40px 56px 32px; }
  .slider-arrow{ width:38px; height:38px; }
  .slider-arrow.prev{ left:8px; }
  .slider-arrow.next{ right:8px; }
}

/* ---------- phone mockup frames (mobile app showcase) ---------- */
.phone-row{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; padding:20px 0 20px; }
.phone-frame{
  width:230px; height:470px; border-radius:36px;
  background: var(--blue-darker);
  border:6px solid var(--blue-darker);
  box-shadow: var(--shadow-lg);
  overflow:hidden; position:relative; flex-shrink:0;
}
.phone-frame .phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:90px; height:18px; background: var(--blue-darker); border-radius:0 0 12px 12px; z-index:5;
}
.phone-screen{ width:100%; height:100%; background: var(--white); display:flex; flex-direction:column; }
.phone-screen.dark{ background: linear-gradient(160deg, var(--blue-dark), var(--blue-darker)); color: var(--white); align-items:center; justify-content:center; text-align:center; padding:0 24px; }
.phone-screen.dark p{ color: var(--text-on-blue-dim); font-size:.78rem; margin-bottom:24px; margin-top:0; }
.phone-screen.dark .btn{ width:160px; margin-bottom:10px; }
.phone-topbar{ display:flex; align-items:center; justify-content:space-between; padding:22px 16px 12px; font-size:.72rem; color: var(--text-dim); }
.phone-topbar strong{ color: var(--text); font-size:.86rem; }
.phone-balance{ background: var(--blue-light); border-radius:14px; padding:14px 16px; margin:0 16px 14px; }
.phone-balance span{ font-size:.72rem; color: var(--text-dim); display:block; }
.phone-balance strong{ font-size:1.2rem; color: var(--blue-dark); }
.phone-section-title{ font-size:.72rem; font-weight:700; color: var(--text-faint); text-transform:uppercase; padding:0 16px; margin-bottom:8px; }
.phone-grid-icons{ display:grid; grid-template-columns: repeat(4,1fr); gap:8px; padding:0 16px 14px; }
.phone-grid-icons div{ background: var(--bg-soft); border-radius:10px; height:44px; display:flex; align-items:center; justify-content:center; color: var(--blue); }
.phone-grid-icons svg{ width:16px; height:16px; }
.phone-thumb-row{ display:flex; gap:8px; padding:0 16px; }
.phone-thumb-row img{ width:100%; height:60px; object-fit:cover; border-radius:8px; flex:1; }
.phone-search{ margin:0 16px 12px; background: var(--bg-soft); border-radius:10px; padding:9px 12px; font-size:.72rem; color: var(--text-faint); display:flex; align-items:center; gap:6px; }
.phone-search svg{ width:13px; height:13px; }
.phone-list-item{ display:flex; align-items:center; gap:10px; padding:8px 16px; }
.phone-list-item img{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.phone-list-item div strong{ font-size:.78rem; color: var(--text); display:block; }
.phone-list-item div span{ font-size:.68rem; color: var(--text-faint); }
.phone-caption{ text-align:center; font-size:.84rem; font-weight:700; color: var(--text); margin-top:14px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; margin-bottom:20px; }
  .category-grid{ grid-template-columns: repeat(3, 1fr); }
  .deal-grid, .market-grid, .news-grid{ grid-template-columns: repeat(2, 1fr); }
  .marketplace-layout, .community-layout{ grid-template-columns: 1fr; }
  .steps-row{ grid-template-columns: repeat(2, 1fr); gap:36px; }
  .footer-top{ grid-template-columns: repeat(2, 1fr); }
  .footer-brand{ grid-column: span 2; }
  .testi-featured{ flex-direction:column; text-align:center; }
  .testi-mini-grid{ grid-template-columns: 1fr; }
  .mini-steps{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1150px){
  .main-nav{
    position:fixed; top:72px; left:0; right:0;
    background: var(--white);
    flex-direction:column; gap:0;
    border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden;
    transition: max-height .3s ease;
    z-index:150;
  }
  .main-nav.open{ max-height:520px; overflow-y:auto; }
  .main-nav a{ padding:16px 24px; border-bottom:1px solid var(--border); width:100%; font-size:.92rem; }
  .main-nav a.active::after{ display:none; }
  .hamburger{ display:flex; }
  .header-actions .btn{ display:none; }
  .nav-dropdown-toggle{
    padding:16px 24px; border-bottom:1px solid var(--border); width:100%; font-size:.92rem;
    justify-content:space-between; pointer-events:none;
  }
  .nav-dropdown-toggle svg{ display:none; }
  .nav-dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    border:none; border-radius:0; padding:0; margin:0; min-width:0;
    background: var(--bg-soft);
  }
  .nav-dropdown-menu a{ padding:14px 24px 14px 40px; border-radius:0; border-bottom:1px solid var(--border); font-size:.88rem; }
}

@media (max-width: 860px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .deal-grid, .market-grid, .news-grid{ grid-template-columns: 1fr; }
  .cta-inner{ padding:48px 28px; }
  .footer-top{ grid-template-columns: 1fr; text-align:center; }
  .footer-brand{ grid-column: span 1; display:flex; flex-direction:column; align-items:center; }
  .footer-col{ align-items:center; }
  .steps-row{ grid-template-columns: 1fr; }
  .search-bar{ margin-bottom:16px; }
  .mini-steps{ grid-template-columns: 1fr; }
  .photo-collage{ height:340px; }
  .phone-frame{ width:200px; height:410px; }
  .comm-slider .post-card{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .section{ padding:56px 0; }
  .section-head.row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .page-banner .banner-row{ flex-direction:column; align-items:flex-start; }
  .comm-slider .post-card{ padding:18px; }
  .comm-slider .photo-collage{ height:auto; aspect-ratio:1/1; }
  .photo-collage{ flex-direction:row; }
  .pc-top{ flex-direction:column; flex:1; }
  .pc-bottom{ flex-direction:column; flex:1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .parallax-img{ transform:none !important; }
}

/* ---------- internal document portal ---------- */
.portal-shell{ display:flex; min-height:100vh; align-items:stretch; }
.portal-sidebar{
  width:240px; flex-shrink:0; background: linear-gradient(180deg,#07155e 0%,#0A188F 100%);
  color: var(--white); padding:24px 18px; display:flex; flex-direction:column;
}
.portal-sidebar .logo-img{ width:130px; height:auto; align-self:center; margin-bottom:28px; }
.portal-sidebar-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  color: rgba(255,255,255,.5); margin:6px 0 10px;
}
.portal-nav{ display:flex; flex-direction:column; gap:4px; }
.portal-nav-item{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  color: rgba(255,255,255,.82); font-size:.88rem; font-weight:600; cursor:pointer;
  border:none; background:none; text-align:left; width:100%;
  transition: background .18s ease, color .18s ease;
}
.portal-nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.portal-nav-item:hover{ background: rgba(255,255,255,.1); color: var(--white); }
.portal-nav-item.active{ background: var(--white); color: var(--blue); }
.portal-sidebar-foot{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.portal-main{ flex:1; min-width:0; background: var(--bg-soft); padding:36px 44px; }
.portal-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.portal-topbar h1{ font-size:1.32rem; color: var(--text); }
.portal-topbar p{ color: var(--text-faint); font-size:.82rem; margin-top:4px; }
.portal-user{ display:flex; align-items:center; gap:14px; }
.portal-user-email{ font-size:.84rem; color: var(--text-dim); font-weight:600; }
.portal-logout{
  background: var(--white); border:1px solid var(--border); border-radius:999px;
  padding:9px 18px; font-size:.82rem; font-weight:600; color: var(--text-dim); cursor:pointer;
  transition: border-color .18s ease, color .18s ease;
}
.portal-logout:hover{ border-color: var(--blue); color: var(--blue); }
.doc-list{ background: var(--white); border-radius: var(--radius-md); border:1px solid var(--border); overflow:hidden; }
.doc-row{ display:flex; align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--border); }
.doc-row:last-child{ border-bottom:none; }
.doc-badge{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:700; color: var(--white); letter-spacing:.02em;
}
.doc-badge.pdf{ background:#d64545; }
.doc-badge.docx{ background:#2f6fed; }
.doc-badge.xlsx{ background:#1f9d55; }
.doc-badge.pptx{ background:#e08a2c; }
.doc-badge.link{ background:#7b5fe0; }
.doc-info{ flex:1; min-width:0; }
.doc-info h4{ font-size:.9rem; color: var(--text); margin-bottom:3px; }
.doc-meta{ font-size:.76rem; color: var(--text-faint); }
.doc-download{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:999px; border:1px solid var(--border);
  font-size:.8rem; font-weight:600; color: var(--blue); white-space:nowrap;
  transition: border-color .18s ease, background .18s ease;
}
.doc-download:hover{ border-color: var(--blue); background: var(--blue-light); }

@media (max-width: 900px){
  .portal-shell{ flex-direction:column; }
  .portal-sidebar{
    width:auto; flex-direction:row; align-items:center; padding:14px 16px;
    overflow-x:auto; gap:16px;
  }
  .portal-sidebar .logo-img{ margin-bottom:0; }
  .portal-sidebar-label{ display:none; }
  .portal-nav{ flex-direction:row; }
  .portal-nav-item{ white-space:nowrap; }
  .portal-sidebar-foot{ display:none; }
  .portal-main{ padding:24px 20px; }
}
@media (max-width: 560px){
  .doc-row{ flex-wrap:wrap; }
  .doc-download{ margin-left:58px; }
}