/* ============================================================
   veribrand.css — VeriBrand Landing Page styles
   Accent: purple (#7C3AED)
   ============================================================ */

:root {
  --brand-accent: #7C3AED;
  --brand-lt: #A78BFA;
}

/* HERO */
.vb-hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; overflow: hidden; position: relative;
  background: var(--dark);
}
.vb-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 55% at 75% 45%, rgba(124,58,237,.12) 0%,transparent 70%),
    radial-gradient(ellipse 35% 35% at 15% 75%, rgba(184,150,62,.06) 0%,transparent 60%);
}
.vb-hero-left { padding: 80px 56px 80px 80px; position: relative; z-index: 2; }
.vb-hero-left .section-label { color: var(--brand-lt); }
.vb-hero-h1 { font-family: var(--font-d); font-size: clamp(3rem,5vw,4.4rem); font-weight: 900; line-height: 1.06; color: var(--white); margin-bottom: 20px; }
.vb-hero-h1 em { font-style: italic; color: var(--brand-lt); }
.vb-hero-sub  { font-size: 1.1rem; font-weight: 500; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.vb-hero-body { font-size: .95rem; line-height: 1.72; color: rgba(255,255,255,.4); max-width: 460px; margin-bottom: 44px; }
.vb-hero-cta  { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-brand    { display: inline-block; background: var(--brand-accent); color: var(--white); padding: 13px 26px; border-radius: 5px; font-size: .88rem; font-weight: 600; transition: background .2s; }
.btn-brand:hover { background: #6D28D9; }
.vb-hero-right { position: relative; height: 100%; min-height: 600px; display: flex; align-items: center; justify-content: center; }

/* Perception visual */
.perception-visual { width: 360px; height: 360px; border-radius: 50%; position: relative; }
.pv-ring { width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(124,58,237,.2); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: spin 25s linear infinite; }
.pv-ring-2 { width: 260px; height: 260px; border-color: rgba(184,150,62,.15); animation-duration: 18s; animation-direction: reverse; }
.pv-center { width: 160px; height: 160px; border-radius: 50%; background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; }
.pv-center-label { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-lt); margin-top: 8px; }
.pv-pulse { width: 180px; height: 180px; border-radius: 50%; background: rgba(124,58,237,.06); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6} 50%{transform:translate(-50%,-50%) scale(1.15);opacity:.2} }

.pv-tag { position: absolute; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px 14px; font-size: .76rem; color: rgba(255,255,255,.7); white-space: nowrap; animation: float 4s ease-in-out infinite; }
.pv-tag strong { display: block; font-weight: 600; color: var(--white); margin-bottom: 2px; }
.pv-tag.t1 { top: 5%; left: 55%; animation-delay: 0s; }
.pv-tag.t2 { bottom: 10%; left: 0%;  animation-delay: -1.5s; }
.pv-tag.t3 { top: 45%; right: -5%; animation-delay: -3s; }

/* PROBLEM */
.vb-problem { background: var(--black); padding: 100px 80px; }
.vb-problem .section-label { color: var(--brand-lt); }
.vb-problem-h2 { font-family: var(--font-d); font-size: clamp(2rem,3.5vw,3rem); font-weight: 900; color: var(--white); line-height: 1.1; max-width: 760px; margin-bottom: 56px; }
.shapers-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: rgba(255,255,255,.06); border-radius: 12px; overflow: hidden; margin-bottom: 56px; }
.shaper-item { background: var(--black); padding: 28px 20px; text-align: center; }
.shaper-icon { margin-bottom: 12px; color: var(--brand-lt); }
.shaper-title { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.8); line-height: 1.4; }
.vb-no-system { background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.2); border-radius: 12px; padding: 32px; text-align: center; }
.vb-no-system p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.55); }
.vb-no-system strong { color: var(--white); }

/* SOLUTION */
.vb-solution { background: var(--dark); padding: 100px 80px; }
.vb-solution .section-label { color: var(--brand-lt); text-align: center; }
.vb-solution-h2 { font-family: var(--font-d); font-size: clamp(2rem,3.5vw,3rem); font-weight: 900; color: var(--white); text-align: center; margin-bottom: 56px; }
.vb-sol-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.vb-sol-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 28px 24px; transition: border-color .2s, background .2s; }
.vb-sol-card:hover { border-color: rgba(124,58,237,.3); background: rgba(124,58,237,.06); }
.vb-sol-icon { margin-bottom: 16px; color: var(--brand-lt); }
.vb-sol-title { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.vb-sol-desc  { font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.65; }

/* CAPABILITIES */
.vb-caps { background: var(--black); padding: 100px 80px; }
.vb-caps .section-label { color: var(--brand-lt); }
.vb-caps-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.vb-caps-h2 { font-family: var(--font-d); font-size: clamp(2rem,3vw,2.8rem); font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 40px; }
.caps-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); cursor: default; transition: background .2s, border-color .2s; }
.cap-item:hover { background: rgba(124,58,237,.07); border-color: rgba(124,58,237,.2); }
.cap-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: rgba(124,58,237,.15); display: flex; align-items: center; justify-content: center; color: var(--brand-lt); }
.cap-title { font-size: .9rem; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.cap-desc  { font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.6; }
.vb-caps-visual { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 32px; }
.caps-vis-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 24px; }
.caps-metric { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.caps-metric:last-child { border-bottom: none; }
.caps-metric-name { font-size: .83rem; color: rgba(255,255,255,.6); }
.caps-metric-bar { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; margin: 0 16px; }
.caps-metric-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--brand-accent), var(--brand-lt)); }
.caps-metric-val { font-size: .8rem; font-weight: 600; color: var(--brand-lt); min-width: 36px; text-align: right; }

/* WHO IT'S FOR */
.vb-who { background: var(--dark); padding: 100px 80px; }
.vb-who .section-label { color: var(--brand-lt); text-align: center; }
.vb-who-h2 { font-family: var(--font-d); font-size: clamp(2rem,3vw,2.6rem); font-weight: 900; color: var(--white); text-align: center; margin-bottom: 48px; }
.who-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; overflow: hidden; }
.who-item { padding: 28px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.07); font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.6); transition: background .2s, color .2s; }
.who-item:last-child { border-right: none; }
.who-item:hover { background: rgba(124,58,237,.08); color: var(--white); }

/* PACKAGES */
.vb-packages { background: var(--black); padding: 100px 80px; }
.vb-packages .section-label { color: var(--brand-lt); text-align: center; }
.vb-packages-h2 { font-family: var(--font-d); font-size: clamp(2rem,3vw,2.6rem); font-weight: 900; color: var(--white); text-align: center; margin-bottom: 56px; }
.pkg-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pkg-card { border-radius: 16px; padding: 36px 32px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.pkg-card.featured { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.35); }
.pkg-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 20px; background: rgba(124,58,237,.2); color: var(--brand-lt); }
.pkg-name { font-family: var(--font-d); font-size: 1.6rem; font-weight: 900; color: var(--white); margin-bottom: 10px; }
.pkg-desc { font-size: .88rem; color: rgba(255,255,255,.45); line-height: 1.65; margin-bottom: 28px; }
.pkg-cta { display: inline-block; padding: 11px 22px; border-radius: 5px; font-size: .85rem; font-weight: 600; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); transition: all .2s; }
.pkg-cta:hover { border-color: var(--brand-accent); color: var(--white); background: rgba(124,58,237,.1); }
.pkg-card.featured .pkg-cta { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--white); }
.pkg-card.featured .pkg-cta:hover { background: #6D28D9; }

/* FINAL CTA */
.vb-cta { background: var(--dark); padding: 120px 80px; text-align: center; }
.vb-cta-h2 { font-family: var(--font-d); font-size: clamp(2.4rem,4vw,3.4rem); font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 20px; }
.vb-cta-h2 em { font-style: italic; color: var(--brand-lt); }
.vb-cta-sub { font-size: 1rem; color: rgba(255,255,255,.45); max-width: 480px; margin: 0 auto 44px; line-height: 1.7; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .vb-hero { grid-template-columns: 1fr; }
  .vb-hero-left { padding: 60px 28px 40px; }
  .vb-hero-right { min-height: 320px; }
  .vb-problem,.vb-solution,.vb-caps,.vb-who,.vb-packages,.vb-cta { padding: 72px 28px; }
  .shapers-grid { grid-template-columns: 1fr 1fr; }
  .vb-sol-grid { grid-template-columns: 1fr 1fr; }
  .vb-caps-inner { grid-template-columns: 1fr; gap: 40px; }
  .who-grid { grid-template-columns: 1fr 1fr; }
  .who-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .pkg-grid { grid-template-columns: 1fr; }
}