/* ═══════════════════════════════════════════════
   BRAVOS — Main Stylesheet
   Monochrome: ink #0a0a0a on #ffffff.
   Hue survives in exactly two places — --success and --error — because a
   greyed-out validation message is one nobody reads.
   ═══════════════════════════════════════════════ */

/* ── VARS ──
   The --navy* names are historical. They are greys now; ~180 declarations
   across 15 stylesheets reference them, so renaming would be a large diff
   for no visual change. Read them as an ink ramp:
     --navy        strongest ink   headings, solid buttons, footer
     --navy-light  secondary ink   links, lighter buttons
     --navy-dark   deepest         kept as an alias of --navy              */
:root{
  /* ── INK ──
     True black, not #0a0a0a. The old ramp was three near-identical
     charcoals that read as a smudge once they sat next to each other. */
  --navy:       #000000;
  --navy-dark:  #000000;
  --navy-light: #1b1a1a;
  --accent:     #4a4a4a;
  --accent-lt:  #8a8a8a;

  --white:      #ffffff;
  --off-white:  #ffffff;

  /* ── STONE ──
     One warm neutral, so light surfaces stop being four barely-different
     whites. Everything below --gray-300 is a tint of black; these two are
     the only warm greys and they carry the section bands. */
  --stone:      #d9d8d7;
  --stone-lt:   #f2efec;

  --gray-50:    #fafafa;
  --gray-100:   #f5f5f5;
  --gray-200:   #e8e8e8;
  --gray-300:   #d4d4d4;
  --gray-400:   #999999;
  --gray-500:   #6b6b6b;
  --gray-600:   #555555;
  --gray-700:   #444444;
  --gray-800:   #262626;
  --gray-900:   #000000;

  /* ── COLOUR ──
     Four hues, and deliberately only four. The site had been flattened to
     pure monochrome, which made every icon tile, avatar and progress bar
     read as the same disabled grey. These bring the difference back without
     turning it into a paintbox.

     Rule: the tint is the background, the deep value is the mark on it.
     A saturated hue is never a large fill and never sits behind body text.
     --c-orange is also the data colour: scores, meters, trend figures. */
  --c-orange:      #fb6900;
  --c-orange-deep: #c2410c;
  --c-orange-tint: #fff1e6;
  --c-teal:        #0f766e;
  --c-teal-tint:   #e6f4f2;
  --c-indigo:      #3730a3;
  --c-indigo-tint: #eef0fb;
  --c-plum:        #86198f;
  --c-plum-tint:   #faebfb;

  /* Semantic. Separate from the four above and never used decoratively. */
  --success:      #15803d;
  --success-tint: #e9f5ed;
  --error:        #b91c1c;
  --error-tint:   #fdecec;
  --warning:      #c2410c;

  --footer-bg:  #1b1a1a;
  --font:       'Segoe UI', system-ui, -apple-system, sans-serif;
  --r:          4px;
  --r-lg:       8px;
  --shadow:     0 0 0 1px #e8e8e8;
  --shadow-lg:  0 0 0 1px #d4d4d4;
  --nav-h:      64px;
  --trans:      .2s ease;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font);color:var(--gray-700);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
/* Colour alone no longer separates a link from its paragraph: the old link
   blue sat on #444 body text at a glance-obvious distance, every grey does
   not. Prose links are therefore underlined. Nav items, buttons and cards
   are excluded — they are identifiable by position and shape, and
   underlining them turns the navbar into a list of hyperlinks. */
a{color:var(--navy);text-decoration:none;transition:color var(--trans);}
a:hover{color:var(--accent);}
/* .footer excluded: its links are unclassed <li><a>, so the prose rule caught
   every one of them and turned five tidy columns into a wall of underlines. */
p a, li a:not([class]), td a:not([class]), .prose a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.footer a, .footer li a, .footer-links a, .footer-legal a{ text-decoration:none; }
.footer a:hover, .footer-links a:hover{ color:#ffffff; }
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
h1,h2,h3,h4,h5{color:var(--gray-900);line-height:1.2;font-weight:700;}

/* ── LAYOUT ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.bg-light-section{background:var(--gray-50);}

/* ── LOGO FLAG ── */
.logo-flag{
  display:inline-flex;
  flex-direction:column;
  width:18px;height:18px;
  border-radius:3px;
  overflow:hidden;
  gap:0;
  flex-shrink:0;
}
/* The logo keeps its brand colour deliberately — it is the one element on
   the site exempt from the monochrome palette. Revisit if the mark is ever
   redrawn; the ink-ramp version is in the history of this file. */
.flag-s1{flex:1;background:#e53e3e;}
.flag-s2{flex:1;background:#f6ad55;}
.flag-s3{flex:1;background:#48bb78;}
.flag-s4{flex:1;background:#4299e1;}
.logo-wordmark{font-size:.95rem;font-weight:800;letter-spacing:.08em;color:var(--gray-900);}

/* ── NAVBAR ── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  transition:box-shadow var(--trans);
}
.navbar.scrolled{box-shadow:var(--shadow);}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
  height:100%;display:flex;align-items:center;gap:8px;
}
.nav-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;}
.nav-link{
  padding:7px 12px;border-radius:var(--r);
  font-size:.85rem;font-weight:500;color:var(--gray-600);
  transition:all var(--trans);white-space:nowrap;
}
.nav-link:hover,.nav-active{color:var(--navy);}
/* The desktop bar is measured to the pixel (trap 14), so the Resume link
   wears the short label here and the full one inside the hamburger sheet,
   which has room for words. responsive.css swaps them at 900px. */
.nav-full{display:none;}
.nav-tab-placeholder{color:var(--gray-400);font-size:.8rem;}
.nav-auth{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}

.btn-nav-login{
  padding:7px 18px;border-radius:var(--r);
  font-size:.85rem;font-weight:600;color:var(--gray-700);
  border:1.5px solid var(--gray-300);transition:all var(--trans);
}
.btn-nav-login:hover{border-color:var(--navy);color:var(--navy);}

.btn-nav-signup{
  padding:7px 18px;border-radius:var(--r);
  font-size:.85rem;font-weight:600;
  background:var(--navy-light);color:var(--white);
  transition:all var(--trans);
}
.btn-nav-signup:hover{background:var(--navy);color:var(--white);}

.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--r);}
.hamburger span{display:block;width:20px;height:2px;background:var(--gray-700);border-radius:2px;transition:all var(--trans);}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ── FLASH MESSAGES ── */
.flash-stack{
  position:fixed;top:calc(var(--nav-h) + 12px);right:20px;
  z-index:999;display:flex;flex-direction:column;gap:8px;max-width:380px;
}
.flash{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:14px 18px;border-radius:var(--r);font-size:.875rem;font-weight:500;
  box-shadow:var(--shadow-lg);animation:slideIn .3s ease;
}
/* White card, hairline border, a tinted square carrying the icon -- the same
   "tint behind, deep hue as the mark" rule the icon tiles use. The old version
   was a pastel block with a 4px bar down its left edge, which read as a browser
   default rather than part of this site. */
.flash{ background:#ffffff; border:1px solid var(--gray-200); color:var(--gray-700); }
.flash-ic{
  flex-shrink:0; width:22px; height:22px; display:inline-flex;
  align-items:center; justify-content:center;
}
.flash-ic svg{ width:14px; height:14px; }
.flash-body{ flex:1; min-width:0; }
.flash-success{ border-color:rgba(21,128,61,.28); }
.flash-success .flash-ic{ background:var(--success-tint); color:var(--success); }
.flash-error{ border-color:rgba(185,28,28,.28); }
.flash-error .flash-ic{ background:var(--error-tint); color:var(--error); }
.flash-info{ border-color:rgba(55,48,163,.24); }
.flash-info .flash-ic{ background:var(--c-indigo-tint); color:var(--c-indigo); }
.flash-warning{ border-color:rgba(194,65,12,.28); }
.flash-warning .flash-ic{ background:var(--c-orange-tint); color:var(--c-orange-deep); }
.flash-close{font-size:1.1rem;opacity:.6;cursor:pointer;flex-shrink:0;}
.flash-close:hover{opacity:1;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ── BUTTONS (reusable) ── */
.btn-primary-sm{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 28px;border-radius:var(--r);
  background:var(--navy);color:var(--white);
  font-size:.9rem;font-weight:600;border:2px solid var(--navy);
  transition:all var(--trans);
}
.btn-primary-sm:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:var(--white);transform:translateY(-1px);}
.btn-outline-dark{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 28px;border-radius:var(--r);
  background:transparent;color:var(--navy);
  font-size:.9rem;font-weight:600;border:2px solid var(--navy);
  transition:all var(--trans);
}
.btn-outline-dark:hover{background:var(--navy);color:var(--white);transform:translateY(-1px);}
.btn-full{width:100%;justify-content:center;}
.btn-lg-form{padding:13px 28px;font-size:.95rem;}
.mt16{margin-top:16px;}
.mb8{margin-bottom:8px;}
.mb20{margin-bottom:20px;}

/* ── SECTION HEADINGS ── */
.section-head{margin-bottom:56px;}
.section-head.center{text-align:center;max-width:600px;margin-left:auto;margin-right:auto;}
.section-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:12px;}
.section-head p{font-size:1rem;color:var(--gray-500);line-height:1.7;}

/* ── HERO ── */
.hero{
  min-height:100vh;
  padding-top:var(--nav-h);
  background:var(--navy);
  display:flex;align-items:center;
  overflow:hidden;position:relative;
}
.hero-inner{
  max-width:1200px;margin:0 auto;padding:60px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.hero-text{color:var(--white);}
.hero-heading{
  font-size:clamp(2rem,4.5vw,3.2rem);
  color:var(--white);line-height:1.15;margin-bottom:20px;
}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.75);line-height:1.75;margin-bottom:36px;max-width:480px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary-hero{
  padding:13px 32px;border-radius:var(--r);
  background:var(--white);color:var(--navy);
  font-size:.95rem;font-weight:700;border:2px solid var(--white);
  transition:all var(--trans);
}
.btn-primary-hero:hover{background:transparent;color:var(--white);transform:translateY(-1px);}
.btn-outline-hero{
  padding:13px 32px;border-radius:var(--r);
  background:transparent;color:var(--white);
  font-size:.95rem;font-weight:600;border:2px solid rgba(255,255,255,.5);
  transition:all var(--trans);
}
.btn-outline-hero:hover{border-color:var(--white);background:rgba(255,255,255,.08);}

/* Hero Device Mockup */
.hero-visual{display:flex;justify-content:center;align-items:center;position:relative;}
.hero-device{
  width:280px;height:380px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:24px;
  backdrop-filter:blur(12px);
  position:relative;
  box-shadow:0 0 0 1px #e8e8e8;
}
.device-screen{padding:0;height:100%;border-radius:24px;overflow:hidden;}
.device-topbar{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px;background:rgba(0,0,0,.2);
}
.device-dot{width:8px;height:8px;border-radius:50%;}
.d1{background:#999999;} .d2{background:#c4c4c4;} .d3{background:#b0b0b0;}
.device-body{padding:16px;display:flex;flex-direction:column;gap:12px;}
.device-card{
  background:rgba(255,255,255,.1);border-radius:12px;padding:16px;
}
.dc-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.dc-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-lt);flex-shrink:0;}
.dc-line{height:8px;border-radius:4px;background:rgba(255,255,255,.3);}
.w80{width:80%;} .w50{width:50%;} .mt4{margin-top:4px;}
.dc-score-ring{position:relative;width:80px;height:80px;margin:0 auto 8px;}
.dc-score-ring svg{width:80px;height:80px;}
.dc-score-val{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.3rem;font-weight:800;color:var(--white);
}
.dc-score-label{text-align:center;font-size:.7rem;color:rgba(255,255,255,.6);margin-bottom:10px;}
.dc-bars{display:flex;flex-direction:column;gap:6px;}
.dc-bar-row{display:flex;align-items:center;gap:8px;font-size:.65rem;color:rgba(255,255,255,.6);}
.dc-bar{flex:1;height:4px;background:rgba(255,255,255,.15);border-radius:2px;}
.dc-fill{height:100%;background:var(--accent-lt);border-radius:2px;}
.device-badge{
  position:absolute;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:20px;font-size:.72rem;font-weight:700;
  box-shadow:0 0 0 1px #e8e8e8;
}
.badge-green{background:#ffffff;color:var(--c-teal);top:24px;right:-28px;}
.badge-blue{background:#ffffff;color:var(--c-orange-deep);bottom:24px;right:-20px;}
.badge-green svg,.badge-blue svg{width:14px;height:14px;}

/* ── QUICK TABS ── */
.quick-tabs{
  background:var(--navy);padding:0;
  position:relative;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.quick-tabs::-webkit-scrollbar{display:none;}
.qt-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;min-width:max-content;
  width:100%;
}
.qt-tab{
  padding:14px 22px;
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.65);
  border-bottom:3px solid transparent;
  transition:all var(--trans);white-space:nowrap;
}
.qt-tab:hover,.qt-active{color:var(--white);border-bottom-color:var(--white);}

/* ── FEATURES GRID ── */
.features-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.feature-card{
  padding:36px 28px;border-radius:var(--r-lg);
  border:1px solid var(--gray-200);
  transition:all var(--trans);
}
.feature-card:hover{border-color:rgba(10,10,10,.3);box-shadow:var(--shadow);transform:translateY(-3px);}
.feat-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.feat-icon svg{width:24px;height:24px;}
.feat-blue{background:var(--c-indigo-tint);color:var(--c-indigo);}
.feat-green{background:var(--c-teal-tint);color:var(--c-teal);}
.feat-purple{background:var(--c-plum-tint);color:var(--c-plum);}
.feature-card h3{font-size:1.05rem;margin-bottom:10px;}
.feature-card p{font-size:.88rem;color:var(--gray-500);line-height:1.7;}

/* ── TWO-COL GRID ── */
.two-col-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.reverse-grid{direction:rtl;}
.reverse-grid > *{direction:ltr;}
.two-col-text h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:16px;}
.two-col-text p{font-size:.93rem;color:var(--gray-500);line-height:1.8;margin-bottom:14px;}
.image-card-placeholder{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.image-card-placeholder svg{width:100%;height:auto;}

.check-list{margin:20px 0 28px;display:flex;flex-direction:column;gap:8px;}
.check-list li{
  display:flex;align-items:center;gap:10px;
  font-size:.9rem;color:var(--gray-600);
}
.check-list li::before{content:'✓';color:var(--gray-600);font-weight:700;flex-shrink:0;}

/* ── STATS BANNER ── */
.stats-banner{background:var(--navy);padding:80px 0;}
.stats-banner-top{text-align:center;margin-bottom:56px;}
.stats-banner-top h2{color:var(--white);font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:12px;}
.stats-banner-top p{color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 28px;}
.stats-banner-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-outline-white{
  padding:11px 28px;border-radius:var(--r);
  background:transparent;color:var(--white);
  font-size:.9rem;font-weight:600;border:2px solid rgba(255,255,255,.5);
  transition:all var(--trans);
}
.btn-outline-white:hover{border-color:var(--white);background:rgba(255,255,255,.08);color:var(--white);}
.btn-primary-banner{
  padding:11px 28px;border-radius:var(--r);
  background:var(--accent);color:var(--white);
  font-size:.9rem;font-weight:600;border:2px solid var(--accent);
  transition:all var(--trans);
}
.btn-primary-banner:hover{background:var(--navy-light);border-color:var(--navy-light);color:var(--white);}

.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:48px;
}
.stat-item strong{display:block;font-size:clamp(1.8rem,3.5vw,2.6rem);color:var(--white);font-weight:800;margin-bottom:6px;}
.stat-item span{font-size:.85rem;color:rgba(255,255,255,.55);}

/* ── RESOURCES ── */
.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.resource-card{border:1px solid var(--gray-200);border-radius:var(--r-lg);overflow:hidden;transition:all var(--trans);}
.resource-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.resource-img{height:160px;}
/* One tint each, so three cards in a row read as three things rather than
   three identical grey blocks. The icon on top takes the matching deep hue. */
.rc-blue{background:var(--c-indigo-tint);}
.rc-green{background:var(--c-teal-tint);}
.rc-purple{background:var(--c-plum-tint);}
.resource-body{padding:20px;}
.rc-tag{
  display:inline-block;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--navy);background:rgba(10,10,10,.08);
  padding:3px 10px;border-radius:100px;margin-bottom:10px;
}
.resource-body h4{font-size:.95rem;margin-bottom:8px;line-height:1.4;}
.resource-body h4 a{color:var(--gray-900);}
.resource-body h4 a:hover{color:var(--navy);}
.resource-body p{font-size:.83rem;color:var(--gray-500);line-height:1.6;margin-bottom:14px;}
.rc-read{font-size:.82rem;font-weight:600;color:var(--navy-light);}
.section-cta-center{text-align:center;margin-top:40px;}

/* ── PAGE HERO (inner pages) ── */
.page-hero{
  padding:calc(var(--nav-h) + 64px) 0 64px;
  background:var(--navy);
  text-align:center;position:relative;overflow:hidden;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero-label{
  display:inline-block;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:12px;
}
.page-hero h1{font-size:clamp(1.9rem,4.5vw,3rem);color:var(--white);margin-bottom:14px;}
.page-hero-sub{font-size:1rem;color:rgba(255,255,255,.7);max-width:540px;margin:0 auto;line-height:1.7;}

/* ── ABOUT PAGE ── */
.timeline-col{padding:8px 0;}
.timeline{position:relative;padding-left:28px;}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--gray-200);}
.tl-item{position:relative;margin-bottom:28px;}
.tl-dot{
  position:absolute;left:-28px;top:4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--navy);z-index:1;
}
.tl-content strong{display:block;font-size:.95rem;color:var(--navy);margin-bottom:4px;}
.tl-content p{font-size:.85rem;color:var(--gray-500);line-height:1.6;}

.mission-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mission-card{padding:36px 28px;border-radius:var(--r-lg);text-align:center;}
.mc-blue{background:var(--c-indigo-tint);border:1px solid rgba(55,48,163,.18);}
.mc-green{background:var(--c-teal-tint);border:1px solid rgba(15,118,110,.18);}
.mc-purple{background:var(--c-plum-tint);border:1px solid rgba(134,25,143,.18);}
.mc-blue .mc-icon{color:var(--c-indigo);}
.mc-green .mc-icon{color:var(--c-teal);}
.mc-purple .mc-icon{color:var(--c-plum);}
.mc-icon{width:52px;height:52px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.mc-icon svg{width:26px;height:26px;}
.mc-blue .mc-icon{background:rgba(10,10,10,.1);color:var(--navy);}
.mc-green .mc-icon{background:rgba(176,176,176,.1);color:#999999;}
.mc-purple .mc-icon{background:rgba(128,128,128,.1);color:#6b6b6b;}
.mission-card h3{margin-bottom:10px;}
.mission-card p{font-size:.88rem;color:var(--gray-500);line-height:1.7;}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.team-card{
  text-align:center;padding:28px 20px;border-radius:var(--r-lg);
  border:1px solid var(--gray-200);transition:all var(--trans);
}
.team-card:hover{border-color:rgba(10,10,10,.3);box-shadow:var(--shadow);transform:translateY(-3px);}
.team-avatar{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:700;color:var(--white);
  margin:0 auto 14px;
}
/* .team-avatar sets color:#fff, so these must stay dark enough to carry a
   white letter. Tints belong on the icon tiles, not here. */
.ta-blue{background:var(--c-indigo);}
.ta-orange{background:var(--c-orange-deep);}
.ta-green{background:var(--c-teal);}
.ta-purple{background:var(--c-plum);}
.team-card h4{margin-bottom:4px;}
.team-role{display:block;font-size:.78rem;color:var(--navy-light);font-weight:600;margin-bottom:10px;}
.team-card p{font-size:.82rem;color:var(--gray-500);line-height:1.6;}

/* ── SERVICES PAGE ── */
.service-detail{
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;
  padding:44px;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  margin-bottom:24px;transition:all var(--trans);
}
.service-detail:hover{border-color:rgba(10,10,10,.25);box-shadow:var(--shadow);}
.sd-reverse{direction:rtl;}
.sd-reverse > *{direction:ltr;}
.sd-icon{
  width:72px;height:72px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sd-icon svg{width:32px;height:32px;}
.si-blue{background:var(--c-indigo-tint);color:var(--c-indigo);}
.si-green{background:var(--c-teal-tint);color:var(--c-teal);}
.si-purple{background:var(--c-plum-tint);color:var(--c-plum);}
.sd-badge{
  display:inline-block;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:3px 12px;border-radius:100px;margin-bottom:10px;
  background:rgba(10,10,10,.08);color:var(--navy);
}
.sd-badge-org{background:rgba(153,153,153,.1);color:#999999;}
.sd-body h2{font-size:1.5rem;margin-bottom:12px;}
.sd-body > p{font-size:.9rem;color:var(--gray-500);line-height:1.8;margin-bottom:20px;}
.sd-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px;}
.sd-list li{display:flex;align-items:center;gap:8px;font-size:.87rem;color:var(--gray-600);}
.sd-list li::before{content:'✓';color:var(--gray-600);font-weight:700;flex-shrink:0;}

.why-bravos-banner{background:var(--navy);padding:80px 0;text-align:center;}
.why-bravos-banner h2{color:var(--white);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:40px;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px;}
.why-item{display:flex;flex-direction:column;align-items:center;gap:12px;}
.why-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
}
.why-icon svg{width:24px;height:24px;}
.why-item h4{color:var(--white);font-size:.95rem;}
.why-item p{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.6;text-align:center;}
.why-btns{display:flex;gap:14px;justify-content:center;}

/* ── PRICING PAGE ── */
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.pricing-card{
  padding:36px 28px;border-radius:var(--r-lg);
  border:1.5px solid var(--gray-200);position:relative;
  transition:all var(--trans);
}
.pricing-card:hover{border-color:rgba(10,10,10,.3);box-shadow:var(--shadow);}
.pc-featured{border-color:var(--navy-light);box-shadow:0 0 0 1px #e8e8e8;}
.pc-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:var(--white);
  font-size:.72rem;font-weight:700;padding:4px 16px;border-radius:100px;white-space:nowrap;
}
.pc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.pc-name{font-size:1.15rem;color:var(--navy);}
.pc-icon{font-size:1.6rem;}
.pc-price{display:flex;align-items:baseline;gap:2px;margin-bottom:4px;}
.pc-currency{font-size:1.1rem;font-weight:700;color:var(--gray-800);align-self:flex-start;margin-top:8px;}
.pc-amount{font-size:2.4rem;font-weight:800;color:var(--gray-900);}
.pc-period{font-size:.82rem;color:var(--gray-400);}
.pc-billing{font-size:.78rem;color:var(--gray-400);margin-bottom:16px;}
.pc-divider{border:none;border-top:1px solid var(--gray-100);margin:16px 0;}
.pc-section-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-400);margin-bottom:10px;display:block;}
.pc-features{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.pc-features li{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--gray-600);}
.pc-features li::before{content:'✓';color:var(--gray-600);font-weight:700;flex-shrink:0;margin-top:1px;}
.btn-pc{
  display:block;width:100%;text-align:center;margin-top:24px;
  padding:12px;border-radius:var(--r);font-size:.9rem;font-weight:600;
  background:var(--navy);color:var(--white);border:2px solid var(--navy);
  transition:all var(--trans);
}
.btn-pc:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:var(--white);}
.btn-pc-featured{background:var(--navy-light);border-color:var(--navy-light);}
.btn-pc-featured:hover{background:var(--navy);border-color:var(--navy);color:var(--white);}

/* Quick Account Section */
.quick-account-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start;}
.qa-form-wrap h2{margin-bottom:8px;}
.qa-sub{font-size:.9rem;color:var(--gray-500);margin-bottom:28px;}
.radio-group{display:flex;gap:20px;flex-wrap:wrap;}
.radio-label{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--gray-600);cursor:pointer;}
.check-inline{display:flex;align-items:flex-start;gap:8px;font-size:.84rem;color:var(--gray-600);}
.check-inline input{margin-top:2px;accent-color:var(--navy);}

.qa-info-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:32px;}
.qa-info-card h3{margin-bottom:10px;}
.qa-info-card > p{font-size:.88rem;color:var(--gray-500);line-height:1.7;margin-bottom:24px;}
.qa-steps{display:flex;flex-direction:column;gap:16px;}
.qa-step{display:flex;align-items:flex-start;gap:14px;}
.qs-icon{
  width:40px;height:40px;flex-shrink:0;border-radius:10px;
  background:rgba(10,10,10,.08);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.qs-icon svg{width:20px;height:20px;}
.qa-step strong{display:block;font-size:.88rem;color:var(--gray-800);margin-bottom:2px;}
.qa-step p{font-size:.8rem;color:var(--gray-400);line-height:1.5;}

/* ── CONTACT PAGE ── */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start;}
.contact-form-col h2{margin-bottom:8px;}
.contact-intro{font-size:.9rem;color:var(--gray-500);margin-bottom:28px;}
.ci-card{display:flex;align-items:flex-start;gap:14px;padding:20px;background:var(--gray-50);border-radius:var(--r);border:1px solid var(--gray-200);margin-bottom:12px;}
.ci-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ci-icon svg{width:20px;height:20px;}
/* Tint behind, the matching deep hue as the mark. Previously three
   indistinguishable greys, which made the contact panel read as disabled. */
.ci-blue{background:var(--c-indigo-tint);color:var(--c-indigo);}
.ci-green{background:var(--c-teal-tint);color:var(--c-teal);}
.ci-purple{background:var(--c-plum-tint);color:var(--c-plum);}
.ci-card h4{font-size:.9rem;margin-bottom:4px;}
.ci-card p{font-size:.84rem;color:var(--gray-500);line-height:1.6;}
.ci-card small{color:var(--gray-400);}
.map-placeholder{
  height:160px;background:var(--gray-100);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;border:1.5px dashed var(--gray-300);color:var(--gray-400);
  margin-top:12px;
}
.map-placeholder p{font-weight:600;color:var(--gray-600);font-size:.88rem;}
.map-placeholder small{font-size:.78rem;}

/* ── FORM ELEMENTS ── */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:.84rem;font-weight:600;color:var(--gray-700);margin-bottom:6px;}
.req{color:var(--error);}
/* Paired with .req so a label reads as required or optional at a glance;
   an unmarked field is neither, which is how the phone box got asked about. */
.opt{color:var(--gray-500);font-weight:500;}
.form-input{
  width:100%;padding:11px 14px;
  border:1.5px solid var(--gray-200);border-radius:var(--r);
  font-size:.9rem;font-family:var(--font);color:var(--gray-800);
  background:var(--white);transition:border-color var(--trans),box-shadow var(--trans);
}
.form-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 1px #e8e8e8;}
.form-input::placeholder{color:var(--gray-400);}
.form-select{cursor:pointer;}
.form-textarea{resize:vertical;min-height:120px;line-height:1.6;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.label-row-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.label-row-flex .form-label{margin-bottom:0;}
.forgot-link{font-size:.82rem;font-weight:600;color:var(--navy-light);}
.input-icon-wrap{position:relative;}
.ii-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gray-400);pointer-events:none;}
.has-icon{padding-left:40px;}
.has-toggle{padding-right:40px;}
.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--gray-400);transition:color var(--trans);}
.toggle-pass:hover{color:var(--gray-600);}
.toggle-pass svg{width:16px;height:16px;}
.strength-wrap{display:flex;align-items:center;gap:10px;margin-top:6px;}
.strength-bar{flex:1;height:4px;background:var(--gray-200);border-radius:2px;overflow:hidden;}
.strength-fill{height:100%;width:0;border-radius:2px;transition:width .3s ease,background .3s ease;}
.strength-label{font-size:.72rem;font-weight:600;min-width:36px;}

/* ── AUTH PAGES ── */
.auth-page{background:var(--gray-50);}
.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.auth-panel-left{
  background:var(--navy);
  padding:60px 52px;display:flex;align-items:center;position:relative;overflow:hidden;
}
.auth-panel-content{position:relative;z-index:1;}
.auth-logo-link{display:flex;align-items:center;gap:8px;margin-bottom:48px;}
.auth-logo-link .logo-wordmark{color:var(--white);}
.auth-panel-heading{font-size:1.7rem;color:var(--white);margin-bottom:14px;line-height:1.2;}
.auth-panel-sub{font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:36px;}
.auth-panel-stats{display:flex;gap:28px;}
.ap-stat strong{display:block;font-size:1.4rem;color:var(--white);margin-bottom:2px;}
.ap-stat span{font-size:.75rem;color:rgba(255,255,255,.55);}
.auth-feature-list{display:flex;flex-direction:column;gap:12px;}
.af-item{display:flex;align-items:center;gap:10px;font-size:.88rem;color:rgba(255,255,255,.8);}
.af-item svg{width:16px;height:16px;flex-shrink:0;}
.auth-panel-shape1,.auth-panel-shape2{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none;
}
.auth-panel-shape1{width:360px;height:360px;top:-100px;right:-100px;}
.auth-panel-shape2{width:220px;height:220px;bottom:-60px;left:-60px;}

.auth-panel-right{
  display:flex;align-items:center;justify-content:center;
  padding:60px 52px;background:var(--white);overflow-y:auto;
}
.auth-form-wrap{width:100%;max-width:400px;}
.auth-form-title{font-size:1.7rem;margin-bottom:6px;}
.auth-form-sub{font-size:.85rem;color:var(--gray-400);margin-bottom:28px;}
.auth-form-sub a{font-weight:600;color:var(--navy-light);}
.auth-divider{text-align:center;position:relative;margin:20px 0;}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gray-200);}
.auth-divider span{position:relative;background:var(--white);padding:0 14px;font-size:.78rem;color:var(--gray-400);}
.social-auth-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.social-auth-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px;border:1.5px solid var(--gray-200);border-radius:var(--r);
  font-size:.85rem;font-weight:600;color:var(--gray-700);background:var(--white);
  transition:all var(--trans);cursor:pointer;font-family:var(--font);
}
.social-auth-btn:hover{border-color:var(--gray-400);background:var(--gray-50);}
.auth-back-links{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:.84rem;}
.back-link{display:flex;align-items:center;gap:4px;color:var(--navy-light);font-weight:600;}
.back-link svg{width:14px;height:14px;}
.auth-sep{color:var(--gray-300);}
.forgot-icon{display:flex;justify-content:center;margin-bottom:20px;}

/* ── FOOTER ── */
.footer{background:var(--footer-bg);color:rgba(255,255,255,.6);padding-top:64px;}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-logo{display:flex;align-items:center;gap:8px;}
.footer-logo .logo-wordmark{color:var(--white);}
.footer-tagline{margin:14px 0 20px;font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.45);}
.footer-social{display:flex;gap:10px;}
.social-icon{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);transition:all var(--trans);
}
.social-icon svg{width:16px;height:16px;}
.social-icon:hover{background:var(--navy-light);color:var(--white);}
.footer-heading{color:var(--white);font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:18px;}
.footer-links li{margin-bottom:9px;}
.footer-links a{font-size:.84rem;color:rgba(255,255,255,.45);transition:color var(--trans);}
.footer-links a:hover{color:var(--white);}
.footer-contact-list{display:flex;flex-direction:column;gap:12px;}
.footer-contact-list li{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:rgba(255,255,255,.45);}
.footer-contact-list svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;}
.footer-contact-list small{color:rgba(255,255,255,.3);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:.78rem;color:rgba(255,255,255,.3);flex-wrap:wrap;gap:10px;}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{font-size:.78rem;color:rgba(255,255,255,.3);}
.footer-legal a:hover{color:rgba(255,255,255,.6);}

/* Mobile-only nav elements (hidden by default, shown via media query) */
.mobile-auth-sep,.mobile-auth-btns{display:none;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-visual{display:none;}
  .hero-btns{justify-content:center;}
  .features-grid,.stats-row{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .mission-cards{grid-template-columns:1fr;}
  .resources-grid{grid-template-columns:1fr 1fr;}
  .two-col-grid{grid-template-columns:1fr;gap:40px;}
  .reverse-grid{direction:ltr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-brand{grid-column:1/-1;}
  .contact-grid,.quick-account-grid{grid-template-columns:1fr;}
  .service-detail{grid-template-columns:1fr;}
  .sd-reverse{direction:ltr;}
  .sd-list{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .pricing-cards{grid-template-columns:1fr;max-width:100%;margin:0 auto;}
  .auth-layout{grid-template-columns:1fr;}
  .auth-panel-left{display:none;}
  .auth-panel-right{padding:calc(var(--nav-h) + 40px) 32px 60px;}
  .quick-account-grid{gap:40px;}
}
@media(max-width:768px){
  .section{padding:52px 0;}
  .container{padding:0 16px;}
  /* Mobile nav */
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:var(--white);flex-direction:column;
    padding:16px;gap:4px;border-top:1px solid var(--gray-100);
    box-shadow:var(--shadow-lg);
    transform:translateY(-110%);transition:transform var(--trans);
    z-index:999;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-link{width:100%;text-align:left;padding:10px 14px;}
  .hamburger{display:flex;}
  /* Hide desktop auth — shown in hamburger menu */
  .nav-auth{display:none;}
  .mobile-auth-sep{display:block;height:1px;background:var(--gray-100);margin:8px 0;}
  .mobile-auth-btns{display:flex;flex-direction:column;gap:8px;padding:4px 0 2px;}
  .mobile-auth-btns .btn-nav-login,.mobile-auth-btns .btn-nav-signup{
    display:block;text-align:center;padding:10px 18px;border-radius:var(--r);font-size:.9rem;
  }
  /* Grids */
  .features-grid,.why-grid,.stats-row{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .resources-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .form-row-2{grid-template-columns:1fr;}
  .social-auth-row{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .footer-legal{justify-content:center;flex-wrap:wrap;gap:12px;}
  .stats-banner-btns{flex-direction:column;align-items:center;}
  .sd-list{grid-template-columns:1fr;}
  /* Hero */
  .hero-heading{font-size:clamp(1.7rem,8vw,2.4rem);}
  .hero-sub{font-size:.95rem;}
  .hero-btns{flex-direction:column;gap:10px;align-items:stretch;}
  .btn-primary-hero,.btn-outline-hero{text-align:center;justify-content:center;}
  /* Stats */
  .stats-row{grid-template-columns:1fr 1fr;gap:20px;}
  /* Section heads */
  .section-head h2{font-size:clamp(1.4rem,5vw,1.8rem);}
  .two-col-text h2{font-size:clamp(1.3rem,5vw,1.7rem);}
  /* Service */
  .service-detail{padding:28px 20px;}
  /* Auth */
  .auth-panel-right{padding:calc(var(--nav-h) + 24px) 20px 40px;}
  .auth-form-wrap{max-width:100%;}
  /* Footer */
  .footer{padding-top:48px;}
  .footer-inner{padding:0 16px;}
  .footer-grid{gap:28px;}
  /* Contact */
  .contact-grid,.quick-account-grid{gap:32px;}
  /* Page hero */
  .page-hero{padding:calc(var(--nav-h) + 40px) 0 48px;}
}
@media(max-width:480px){
  .section{padding:40px 0;}
  .container{padding:0 12px;}
  .team-grid{grid-template-columns:1fr;}
  .service-detail{padding:20px 16px;}
  .mission-cards{gap:12px;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .stat-item strong{font-size:1.6rem;}
  .hero{min-height:auto;padding:calc(var(--nav-h) + 48px) 0 60px;}
  .hero-inner{padding:0 12px;}
  .hero-heading{font-size:clamp(1.5rem,8vw,2rem);}
  .footer-social{gap:8px;}
  .social-icon{width:30px;height:30px;}
  .qt-tab{padding:12px 14px;font-size:.78rem;}
  .btn-primary-sm,.btn-outline-dark{padding:10px 18px;font-size:.85rem;}
  .page-hero{padding:calc(var(--nav-h) + 32px) 0 40px;}
  .page-hero h1{font-size:clamp(1.4rem,7vw,1.9rem);}
  .feature-card{padding:24px 18px;}
  .features-grid{gap:14px;}
  .resource-img{height:120px;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .why-bravos-banner{padding:56px 0;}
  .why-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .pricing-card{padding:28px 20px;}
  .auth-panel-right{padding:calc(var(--nav-h) + 12px) 14px 32px;}
  /* Form improvements */
  .form-input{font-size:16px;}
}