/* ═══════════════════════════════════════════════════════════
   BRAVOS — HOME PAGE
   Loaded from home.html via {% block extra_css %}, so it lands
   after main.css + ui2.css and before responsive.css. Responsive
   corrections therefore still win, which is why there are no
   layout breakpoints in here — only visual ones.

   Scope: every section of the home page and nothing else. Shared
   components (navbar, footer, .btn-primary-sm) are refined in
   ui2.css so the other pages move with them.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────── HERO ─────────────────────────────── */
.hero{
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%,  rgba(37,99,235,.34) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 85% 100%, rgba(96,165,250,.20) 0%, transparent 62%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 55%, #0d1f4d 100%);
  position:relative;
}

/* Fine grid wash. Sits under the content and never intercepts a click. */
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; }

.hero-heading{
  letter-spacing:-.025em;
  font-weight:800;
  text-wrap:balance;
}
.hero-sub{ color:rgba(255,255,255,.82); }

/* Staged entrance. `both` holds the from-state during the delay so
   nothing flashes at full opacity before its turn. */
@keyframes heroRise{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}
.hero-heading{ animation:heroRise .7s var(--ease-out) both; }
.hero-sub    { animation:heroRise .7s var(--ease-out) .12s both; }
.hero-btns   { animation:heroRise .7s var(--ease-out) .24s both; }
.hero-visual { animation:heroRise .9s var(--ease-out) .18s both; }

.hero-btns{ gap:16px; align-items:center; }

/* The original hover was `background:transparent`, which turned the
   solid white pill into an outline on a navy field — it read as the
   button disappearing under the cursor. It now stays filled and
   brightens, with the lift carrying the feedback. */
.btn-primary-hero{
  background:#fff; color:var(--navy);
  border-color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  font-weight:700;
}
.btn-primary-hero:hover{
  background:#fff; color:var(--navy-dark);
  border-color:#fff;
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(0,0,0,.34), 0 0 0 6px rgba(255,255,255,.14);
}
.btn-primary-hero:active{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.28); }

/* 8% white over navy was under 2:1 against the panel — effectively no
   hover. Raised to a readable fill with a matching border. */
.btn-outline-hero{
  border-color:rgba(255,255,255,.55);
  color:#fff;
  backdrop-filter:blur(2px);
}
.btn-outline-hero:hover{
  background:rgba(255,255,255,.18);
  border-color:#fff;
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.btn-outline-hero:active{ transform:translateY(-1px); }

/* Hero device — a slow float, and it responds to the pointer. */
@keyframes deviceFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-14px) rotate(-.6deg); }
}
.hero-device{
  animation:deviceFloat 7s ease-in-out infinite;
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.42);
  border-color:rgba(255,255,255,.22);
}
.hero-visual:hover .hero-device{
  animation-play-state:paused;
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 40px 100px rgba(0,0,0,.5);
}
.dc-fill{
  background:linear-gradient(90deg, var(--accent-lt), #a5c8ff);
  transition:width 1.1s var(--ease-out);
}
.device-badge{ transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-mid) var(--ease); }
.hero-visual:hover .device-badge{ transform:scale(1.06); box-shadow:0 10px 24px rgba(0,0,0,.3); }

/* ────────────────────────── SECTION RHYTHM ────────────────────────── */
.section{ padding:96px 0; }
.section-head h2{
  letter-spacing:-.02em;
  text-wrap:balance;
}
.section-head p{ color:var(--gray-500); }

/* A short rule under centred headings, so sections start deliberately. */
.section-head.center h2{ position:relative; padding-bottom:18px; }
.section-head.center h2::after{
  content:'';
  position:absolute; left:50%; bottom:0;
  width:52px; height:3px; margin-left:-26px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--navy-light), var(--accent-lt));
}

/* ───────────────────────────── FEATURES ───────────────────────────── */
.features-grid{ gap:30px; }
.feature-card{
  padding:38px 30px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
/* Accent bar wipes in from the left edge on hover. */
.feature-card::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--navy-light), var(--accent-lt));
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-slow) var(--ease-out);
}
.feature-card:hover::before{ transform:scaleY(1); }
.feature-card:hover{ background:#fdfdff; }
.feature-card h3{ font-size:1.12rem; margin-bottom:12px; letter-spacing:-.01em; }
.feature-card p{ font-size:.9rem; color:var(--gray-500); line-height:1.75; }
.feat-icon{ width:56px; height:56px; border-radius:16px; }
.feat-icon svg{ width:26px; height:26px; }

/* ──────────────────────── TWO-COLUMN SECTIONS ──────────────────────── */
.about-strip{ background:linear-gradient(180deg, var(--gray-50) 0%, #fff 100%); }
.resume-promo{ background:#fff; }
.two-col-grid{ gap:76px; }
.two-col-text h2{ letter-spacing:-.02em; margin-bottom:18px; }
.two-col-text > p{ font-size:.96rem; line-height:1.85; }

.image-card-placeholder{
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease);
}
.image-card-placeholder:hover{ transform:translateY(-6px); box-shadow:var(--shadow-xl); }

/* ───────────────────── PRODUCT MOCK-UPS ─────────────────────
   These replace the flat SVG skeletons. Built from live markup so
   the counters and meters can animate on scroll (see home.html's
   extra_js) and so they stay sharp on any display. */
.mock{
  border-radius:20px;
  background:#fff;
  border:1px solid var(--gray-200);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease);
}
.mock:hover{ transform:translateY(-6px); box-shadow:var(--shadow-xl); }

/* ── Window chrome ── */
.mock-bar{
  display:flex; align-items:center; gap:7px;
  padding:13px 18px;
  background:var(--gray-50);
  border-bottom:1px solid var(--gray-200);
}
.mock-dot{ width:9px; height:9px; border-radius:50%; background:var(--gray-300); }
.mock-dot:nth-child(1){ background:#ff5f57; }
.mock-dot:nth-child(2){ background:#ffbd2e; }
.mock-dot:nth-child(3){ background:#28c840; }
.mock-bar-title{
  margin-left:10px; font-size:.78rem; font-weight:700;
  color:var(--gray-600); letter-spacing:.01em;
}
.mock-pill{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#16a34a; background:rgba(34,197,94,.12);
  padding:4px 10px; border-radius:100px;
}
.mock-pill::before{
  content:''; width:6px; height:6px; border-radius:50%; background:#22c55e;
  animation:mockPulse 2s var(--ease) infinite;
}
@keyframes mockPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.8); } }

.mock-body{ padding:22px; }

/* ── Stat tiles ── */
.mock-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px; }
.mock-stat{
  padding:14px 12px; border-radius:14px;
  background:var(--gray-50); border:1px solid var(--gray-100);
  text-align:left;
  transition:background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.mock:hover .mock-stat{ background:#fff; border-color:var(--gray-200); }
.mock-stat:hover{ transform:translateY(-3px); }
.ms-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-bottom:9px;
}
.ms-icon svg{ width:15px; height:15px; }
.ms-blue { background:rgba(37,99,235,.12);  color:var(--navy-light); }
.ms-green{ background:rgba(34,197,94,.14);  color:#16a34a; }
.ms-amber{ background:rgba(245,158,11,.14); color:#d97706; }
.mock-stat b{
  display:block; font-size:1.5rem; font-weight:800;
  color:var(--gray-900); letter-spacing:-.02em; line-height:1.1;
}
.mock-stat span:last-child{ font-size:.72rem; color:var(--gray-500); font-weight:500; }

/* ── Bar chart ── */
.mock-chart-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.76rem; font-weight:600; color:var(--gray-500); margin-bottom:12px;
}
.mock-trend{
  display:inline-flex; align-items:center; gap:5px;
  color:#16a34a; font-weight:800;
}
.mock-trend svg{ width:13px; height:13px; }
.mock-chart{ display:flex; align-items:flex-end; gap:8px; height:96px; }
.mock-chart span{
  flex:1; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg, var(--accent-lt), var(--navy-light));
  height:0;
  transition:height .9s var(--ease-out), filter var(--t-mid) var(--ease);
}
.mock.in .mock-chart span{ height:var(--h); }
.mock-chart span:last-child{ background:linear-gradient(180deg, #86efac, #16a34a); }
.mock:hover .mock-chart span{ filter:saturate(1.25); }
/* Stagger so the series reads left-to-right rather than snapping. */
.mock-chart span:nth-child(1){ transition-delay:.02s } .mock-chart span:nth-child(2){ transition-delay:.06s }
.mock-chart span:nth-child(3){ transition-delay:.10s } .mock-chart span:nth-child(4){ transition-delay:.14s }
.mock-chart span:nth-child(5){ transition-delay:.18s } .mock-chart span:nth-child(6){ transition-delay:.22s }
.mock-chart span:nth-child(7){ transition-delay:.26s } .mock-chart span:nth-child(8){ transition-delay:.30s }

/* ── Resume preview ── */
.mock-resume{ padding:26px; }
.mock-res-head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--gray-100);
}
.mock-res-head b{ display:block; font-size:1.1rem; color:var(--gray-900); letter-spacing:-.01em; }
.mock-res-head span{ font-size:.82rem; color:var(--gray-500); }

.mock-score{ position:relative; width:72px; height:72px; flex-shrink:0; }
.mock-score svg{ width:72px; height:72px; }
.mock-score-arc{
  stroke-dasharray:188.5;
  stroke-dashoffset:188.5;                      /* full circle hidden */
  transition:stroke-dashoffset 1.3s var(--ease-out);
}
.mock.in .mock-score-arc{ stroke-dashoffset:11.3; }   /* 94% of 188.5 */
.mock-score i{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:1.25rem; font-weight:800; color:#16a34a;
}

.mock-res-meters{ display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
.mrm{ display:flex; align-items:center; gap:12px; font-size:.78rem; color:var(--gray-500); }
.mrm > span{ width:74px; flex-shrink:0; font-weight:600; }
.mrm b{ width:24px; text-align:right; color:var(--gray-800); font-weight:700; }
.mrm-track{ flex:1; height:7px; border-radius:4px; background:var(--gray-100); overflow:hidden; }
.mrm-track i{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg, var(--navy-light), var(--accent-lt));
  transition:width 1.1s var(--ease-out);
}
.mock.in .mrm-track i{ width:var(--w); }
.mrm:nth-child(2) .mrm-track i{ transition-delay:.1s }
.mrm:nth-child(3) .mrm-track i{ transition-delay:.2s }

.mock-res-lines{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.mock-res-lines span{ height:8px; border-radius:3px; background:var(--gray-100); width:var(--w); }
.mock-res-lines .mrl-title{ height:11px; width:130px; border-radius:4px; background:var(--gray-200); margin-top:8px; }

.mock-res-foot{ display:flex; gap:10px; flex-wrap:wrap; }
.mock-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:100px;
  font-size:.74rem; font-weight:700;
  background:var(--gray-50); color:var(--gray-600); border:1px solid var(--gray-200);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mock-chip svg{ width:13px; height:13px; }
.mock-chip-green{ background:rgba(34,197,94,.12); color:#16a34a; border-color:rgba(34,197,94,.25); }
.mock-chip:not(.mock-chip-green):hover{ background:var(--navy-light); color:#fff; border-color:transparent; }

/* ── Resource card medallions ── */
/* Replaces three flat gradient blocks that carried no information. */
.resource-img{ display:flex; align-items:center; justify-content:center; }
.resource-img::before{
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(15,23,42,.10) 1px, transparent 0);
  background-size:16px 16px;
  opacity:.55;
}
.rc-medallion{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:66px; height:66px; border-radius:20px;
  background:rgba(255,255,255,.75);
  box-shadow:0 8px 22px rgba(15,23,42,.12);
  backdrop-filter:blur(4px);
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease);
}
.rc-medallion svg{ width:28px; height:28px; }
.rc-blue   .rc-medallion{ color:var(--navy-light); }
.rc-green  .rc-medallion{ color:#16a34a; }
.rc-purple .rc-medallion{ color:#7c3aed; }
.resource-card:hover .rc-medallion{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 14px 32px rgba(15,23,42,.18);
}

/* Tick becomes a filled disc — the bare ✓ glyph sat too light next to
   the body copy to read as a list marker. */
.check-list{ gap:12px; margin:24px 0 32px; }
.check-list li{
  font-size:.92rem; color:var(--gray-600);
  transition:color var(--t-fast) var(--ease), transform var(--t-mid) var(--ease-out);
}
.check-list li::before{
  content:'✓';
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(34,197,94,.14); color:#16a34a;
  font-size:.72rem; font-weight:800;
  transition:background var(--t-fast) var(--ease), transform var(--t-mid) var(--ease-out);
}
.check-list li:hover{ color:var(--gray-800); transform:translateX(3px); }
.check-list li:hover::before{ background:rgba(34,197,94,.24); transform:scale(1.1); }

/* ───────────────────────── STATS / CTA BANNER ───────────────────────── */
.stats-banner{
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(96,165,250,.22) 0%, transparent 65%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  position:relative; overflow:hidden;
}
.stats-banner-top h2{ letter-spacing:-.02em; text-wrap:balance; }
.stats-banner-top p{ color:rgba(255,255,255,.78); }

.btn-outline-white{ border-color:rgba(255,255,255,.55); }
.btn-outline-white:hover{
  background:rgba(255,255,255,.18);
  border-color:#fff; color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.btn-primary-banner{
  background:linear-gradient(135deg, var(--accent), var(--navy-light));
  border-color:transparent;
  box-shadow:0 6px 20px rgba(59,130,246,.36);
}
/* Was --navy on hover: the button sank into the navy banner behind it. */
.btn-primary-banner:hover{
  background:linear-gradient(135deg, #60a5fa, var(--accent));
  border-color:transparent; color:#fff;
  box-shadow:0 14px 34px rgba(59,130,246,.5);
}

.stats-row{ padding-top:52px; }
.stat-item{
  padding:8px 4px; border-radius:14px;
  transition:transform var(--t-slow) var(--ease-out), background var(--t-mid) var(--ease);
}
.stat-item:hover{ transform:translateY(-4px); background:rgba(255,255,255,.06); }
.stat-item strong{
  background:linear-gradient(135deg, #fff 0%, #bfdbfe 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.02em;
}
.stat-item span{ color:rgba(255,255,255,.68); font-weight:500; }

/* ───────────────────────────── RESOURCES ───────────────────────────── */
.resources-section{ background:linear-gradient(180deg, #fff 0%, var(--gray-50) 100%); }
.resources-grid{ gap:28px; }
.resource-card{
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:18px;
  display:flex; flex-direction:column;
}
.resource-img{
  height:170px;
  position:relative; overflow:hidden;
  transition:transform var(--t-slow) var(--ease-out);
}
.resource-card:hover .resource-img{ transform:scale(1.04); }
.resource-body{ padding:24px; display:flex; flex-direction:column; flex:1; }

.rc-tag{
  align-self:flex-start;
  font-size:.7rem; letter-spacing:.09em;
  padding:4px 12px; margin-bottom:14px;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.resource-card:hover .rc-tag{ background:var(--navy); color:#fff; }

.resource-body h4{ font-size:1rem; line-height:1.5; margin-bottom:10px; }
.resource-body h4 a{
  color:var(--gray-900);
  background-image:linear-gradient(var(--navy-light), var(--navy-light));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:color var(--t-fast) var(--ease), background-size var(--t-mid) var(--ease-out);
}
/* Brightens to the accent; the old rule darkened to --navy, which on
   near-black body text was almost no change at all. */
.resource-body h4 a:hover{ color:var(--navy-light); background-size:100% 2px; }
.resource-body p{ font-size:.86rem; line-height:1.7; margin-bottom:18px; flex:1; }

/* "Read More" had no hover rule of its own and fell through to the
   global a:hover, which darkened it. Now it brightens and steps right. */
.rc-read{
  display:inline-flex; align-items:center; gap:7px;
  align-self:flex-start;
  font-size:.85rem; font-weight:700; color:var(--navy-light);
  transition:color var(--t-fast) var(--ease), gap var(--t-mid) var(--ease-out);
}
.rc-read::after{
  content:'→';
  transition:transform var(--t-mid) var(--ease-out);
}
.rc-read:hover{ color:var(--accent); gap:11px; }
.rc-read:hover::after{ transform:translateX(3px); }

.btn-outline-dark{
  border-color:var(--navy); color:var(--navy); background:transparent;
}
.btn-outline-dark:hover{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  border-color:transparent; color:#fff;
  box-shadow:0 12px 28px rgba(37,99,235,.32);
}
.section-cta-center{ margin-top:48px; }

/* ──────────────────────────── TOUCH DEVICES ──────────────────────────── */
/* :hover sticks after a tap, so the lifts and colour shifts would latch
   on whichever card was touched last. */
@media(hover:none){
  .hero-visual:hover .hero-device{ transform:none; animation-play-state:running; }
  .hero-visual:hover .device-badge{ transform:none; }
  .image-card-placeholder:hover,
  .stat-item:hover,
  .check-list li:hover{ transform:none; }
  .resource-card:hover .resource-img{ transform:none; }
  .resource-card:hover .rc-tag{ background:rgba(30,58,138,.08); color:var(--navy); }
  .rc-read:hover{ gap:7px; }
}

@media(prefers-reduced-motion:reduce){
  .hero-heading,.hero-sub,.hero-btns,.hero-visual,.hero-device{ animation:none; }
}