:root {
  --navy: #061426;
  --navy-2: #0a1d35;
  --blue: #0a8ef5;
  --cyan: #35a9ff;
  --teal: #14b8a6;
  --ink: #0b1730;
  --muted: #53627a;
  --line: #dfe7f1;
  --paper: #f6f9fc;
}

body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header { width: 100%; max-width: none; height: 82px; margin: 0; padding: 0 max(24px, calc((100vw - 1200px)/2)); position: absolute; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(4,17,32,.55); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--cyan); flex-shrink: 0; }
.brand-mark { width: 48px; height: 52px; overflow: visible; background: none; clip-path: none; }
.brand-word { display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; font-size: 23px; letter-spacing: .13em; white-space: nowrap; }
.brand-limited { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 6px; font-size: 7px; letter-spacing: .28em; opacity: .82; white-space: nowrap; }
.brand-limited::before, .brand-limited::after { content: ""; flex: 1; min-width: 12px; border-top: 2px solid currentColor; }
.blog-label { margin-left: 7px; padding-left: 15px; border-left: 1px solid rgba(255,255,255,.25); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .15em; }
nav { color: rgba(255,255,255,.88); font-size: 14px; font-weight: 500; }
nav a:hover { color: #fff; }
.nav-cta { padding: 13px 20px; border: 0; border-radius: 9px; background: linear-gradient(135deg, var(--blue), #0874df); color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgba(10,142,245,.22); }
.menu-toggle { color: #fff; border-color: rgba(255,255,255,.2); background: transparent; }
.hero { min-height: 640px; padding-top: 150px; padding-bottom: 88px; background: linear-gradient(110deg,#03101f 0%,#06182d 52%,#03101f 100%); }
.hero h1, .section h2, .article-card h3, .bank-card h3, .about-label, .card-number { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.primary, .button.white { border-radius: 9px; background: linear-gradient(135deg,var(--blue),#0874df); box-shadow: 0 10px 30px rgba(10,142,245,.22); }
.bank-card .text-link { display: inline-block; margin-top: 2px; }
.bank-card small { margin-top: 14px; }
.footer-brand { color: #16a8f4; }

@media (max-width: 850px) {
  .site-header { min-height: 74px; height: auto; }
  .site-header nav { background: #061426; }
  .hero { padding-top: 120px; }
  .blog-label { display: none; }
}

/* Interview Prep hero refinement */
.confidence-highlight {
  position: relative;
  display: inline-block;
  color: #1597ff;
  text-shadow: 0 0 28px rgba(21,151,255,.28);
}
.confidence-highlight::after {
  content: "";
  position: absolute;
  left: 48%;
  right: 4%;
  bottom: -10px;
  height: 9px;
  border-bottom: 3px solid #1597ff;
  border-radius: 0 0 55% 55%;
  transform: rotate(-1deg);
  filter: drop-shadow(0 0 4px rgba(21,151,255,.35));
}
.hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(3,16,31,.94) 0%, rgba(4,25,48,.84) 48%, rgba(3,16,31,.72) 100%),
    radial-gradient(circle at 78% 35%, rgba(10,142,245,.24), transparent 38%),
    linear-gradient(110deg,#03101f 0%,#06182d 52%,#03101f 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 88%, rgba(23,121,196,.22), transparent 36%),
    linear-gradient(to top, rgba(4,17,32,.15), rgba(4,17,32,0));
}


/* Final Sranga Interview Prep header + subject navigation */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.blog-label { display:flex; flex-direction:column; gap:4px; line-height:1.05; }
.blog-label strong { font-size:.78rem; letter-spacing:.16em; }
.blog-label small { font-size:.68rem; font-weight:500; letter-spacing:0; color:#c8d7e7; white-space:nowrap; }
.header-fern { color:#f5f8fc; display:flex; align-items:center; gap:4px; margin-left:4px; flex:0 0 auto; }
.header-fern svg { width:72px; height:48px; display:block; }
.header-fern small { font-size:7px; line-height:1.45; letter-spacing:.2em; font-weight:700; color:#fff; }
.interview-subjects { max-width:calc(100% - 56px); margin:-25px auto 0; padding:14px 16px; gap:8px; border-radius:12px; overflow:visible; flex-wrap:wrap; justify-content:center; }
.interview-subjects .topic { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#294463; font-size:.78rem; font-weight:600; white-space:nowrap; transition:.18s ease; flex:1 1 auto; }
.interview-subjects .topic:hover, .interview-subjects .topic:focus-visible { color:#fff; background:linear-gradient(135deg,var(--blue),#0874df); border-color:transparent; }
.interview-subjects .topic.active { color:#fff; background:linear-gradient(135deg,var(--blue),#0874df); border-color:transparent; box-shadow:0 8px 20px rgba(10,142,245,.2); }
.coming-soon { color:#0874ce; font-weight:700; }

@media (max-width:1100px) {
  .header-fern { display:none; }
  .site-header { gap:14px; }
  .interview-subjects { max-width:calc(100% - 30px); }
}
@media (max-width:850px) {
  .site-header { align-items:center; }
  .blog-label small { display:none; }
  .interview-subjects { overflow:visible; flex-wrap:wrap; justify-content:center; }
}

/* Interactive technical guide cards: exactly one selected card uses the dark treatment. */
.article-card { cursor:pointer; }
.article-card.featured {
  color:#fff;
  background:linear-gradient(145deg,#0b355f,#0878d3);
}
.article-card.featured .card-number { color:#fff; }
.article-card.featured .tag { color:#8fe7ff; }
.article-card.featured p { color:#d8e8f4; }
.article-card.featured .card-meta { border-color:#ffffff24; }
.article-card.featured .card-meta a { color:#fff; }


/* === Reference-layout lock: logo, typography, terminal dots and 3-card behaviour === */
body { font-family:"DM Sans",sans-serif; }
.hero h1,.section h2,.article-card h3,.bank-card h3,.about-label,.card-number { font-family:"Space Grotesk",sans-serif; }

/* Compact official Sranga treatment: blue triangle/S + SRANGA + LIMITED + underline */
.brand { gap:10px; }
.brand-mark { width:54px; height:58px; }
.brand-word { position:relative; min-width:126px; align-items:flex-start; padding-bottom:9px; color:#2da7f4; font-family:"Space Grotesk",sans-serif; }
.brand-word::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#2da7f4; }
.brand-name { font-size:23px; font-weight:700; line-height:1; letter-spacing:.13em; }
.brand-limited { width:auto; margin:5px 0 0 38px; display:block; font-size:6px; font-weight:700; letter-spacing:.18em; color:#2da7f4; opacity:1; }
.brand-limited::before,.brand-limited::after { display:none; }
.blog-label { margin-left:14px; padding-left:22px; }

/* Exact traffic-light order shown in the sranga.dev terminal reference */
.terminal-top i { width:12px; height:12px; }
.terminal-top i:nth-child(1) { background:#ff6b63; }
.terminal-top i:nth-child(2) { background:#ffd35a; }
.terminal-top i:nth-child(3) { background:#75d66b; }
.terminal-top span { margin-left:12px; padding-left:18px; border-left:1px solid rgba(255,255,255,.16); color:#c4d2e1; }

/* Reference screenshot uses three equal guide cards; only selected card is dark blue. */
.article-grid { grid-template-columns:repeat(3,1fr); }
.article-card.featured { grid-column:auto; }
.article-card.featured h3 { font-size:1.35rem; }

@media(max-width:850px){
  .brand-mark{width:46px;height:50px}
  .brand-word{min-width:108px}
  .brand-name{font-size:20px}
  .blog-label{margin-left:8px;padding-left:12px}
  .article-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .article-grid{grid-template-columns:1fr}
}

/* === V4: Sranga typography + approved scenic hero + detailed Silver Fern === */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
.hero h1,.section h2,.article-card h3,.bank-card h3,.about-label,.card-number,.brand-word {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.header-fern svg { width:86px; height:58px; }
.header-fern { gap:8px; }
.header-fern small { font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:7px; letter-spacing:.22em; line-height:1.55; }
.hero {
  background:
    linear-gradient(90deg,rgba(3,16,31,.90) 0%,rgba(4,25,48,.76) 50%,rgba(3,16,31,.56) 100%),
    radial-gradient(ellipse at 72% 82%,rgba(29,139,218,.34) 0 12%,transparent 34%),
    linear-gradient(155deg,transparent 0 49%,rgba(12,64,104,.72) 50% 58%,transparent 59%) 76% 24%/54% 62% no-repeat,
    linear-gradient(145deg,transparent 0 47%,rgba(17,83,132,.78) 48% 60%,transparent 61%) 52% 35%/58% 58% no-repeat,
    linear-gradient(to bottom,#0c4473 0%,#0b3155 48%,#08243f 67%,#06192c 100%);
}
.hero::after {
  content:""; position:absolute; inset:auto 0 0; width:auto; height:30%; transform:none; right:0; top:auto;
  border:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(16,105,169,.12),rgba(5,36,62,.58)),repeating-linear-gradient(175deg,rgba(69,164,220,.12) 0 1px,transparent 1px 9px);
}

/* === V7 final approved refinements === */
.sranga-logo-img{
  display:block;
  width:205px;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
}
.brand{gap:24px}
.blog-label{margin-left:0}

/* Real scenic hero. Remote photo is bundled by URL so VS Code/Netlify render the same image. */
.hero{
  background-image:
    linear-gradient(90deg,rgba(3,16,31,.82) 0%,rgba(4,25,48,.60) 50%,rgba(3,16,31,.52) 100%),
    url("https://images.unsplash.com/photo-1768160864911-90f7837453a2?auto=format&fit=crop&fm=jpg&q=82&w=2400") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.hero::after{background:linear-gradient(to bottom,transparent 40%,rgba(2,25,45,.20) 100%) !important;}

/* All interview topics use the approved light-blue treatment. */
.interview-subjects .topic,
.interview-subjects .topic.active{
  color:#0769bf !important;
  background:#e8f4ff !important;
  border-color:#c8e4fb !important;
  box-shadow:none !important;
}
.interview-subjects .topic:hover,
.interview-subjects .topic:focus-visible{
  color:#075da9 !important;
  background:#d8edff !important;
  border-color:#9fd2f8 !important;
}

@media(max-width:760px){
  .sranga-logo-img{width:168px}
  .brand{gap:12px}
}

/* === V8 approved header/logo/above-the-fold refinements === */
.site-header{
  background:#041122 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
/* Exact user-approved Sranga artwork; its background is the same #041122 as the header. */
.sranga-logo-img{
  width:205px !important;
  height:auto !important;
  object-fit:contain !important;
  background:transparent !important;
}
.brand{gap:22px !important;}

/* Pull the interview subjects into the first desktop viewport. */
.hero{
  min-height:600px !important;
  padding-top:118px !important;
  padding-bottom:52px !important;
}
.hero-lead{margin-top:20px !important;margin-bottom:24px !important;}
.interview-subjects{
  margin:-18px auto 0 !important;
  padding:12px 14px !important;
}
.interview-subjects .topic,
.interview-subjects .topic.active{
  min-height:44px !important;
  background:#e8f4ff !important;
  color:#0769bf !important;
  border-color:#c8e4fb !important;
}
@media(max-width:850px){
  .site-header{background:#041122 !important;}
  .hero{min-height:auto !important;padding-top:110px !important;padding-bottom:55px !important;}
  .sranga-logo-img{width:168px !important;}
}