/* style.css — cards: NO default halo/shadow, only on hover/focus */

/* ===== Design tokens – black-to-charcoal scale ===== */
:root{
  /* page background = real black */
  --bg:#000000;

  /* cards / panels = very dark charcoal */
  --panel:rgba(22,22,22,0.78);   /* #161616 + slight transparency */

  /* text colours – keep the same contrast */
  --muted:#a8aeb3;
  --muted-2:#939ca3;
  --text:#f2f2f2;

  /* accent stays orange */
  --accent:#ff6b00;
  --accent-strong:#ff4500;

  /* rest untouched */
  --radius:8px;
  --container:1100px;
  --focus:3px rgba(255,107,0,0.15);
}

/* ---------- Reset & base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--muted);text-decoration:none}
a:hover{color:var(--accent)}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#111;padding:.5rem .75rem;border-radius:6px;z-index:9999;color:var(--text)}

/* ---------- Background blobs + noise ---------- */
.animated-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.animated-bg::before,.animated-bg::after{
  content:"";position:absolute;inset:-80%;width:260%;height:260%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,107,0,0.14) 0%, transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(0,150,255,0.10) 0%, transparent 35%);
  filter:blur(80px);animation:move 28s linear infinite;will-change:transform}
.animated-bg::after{animation-delay:-14s}
.noise{position:absolute;inset:0;opacity:.03;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg '%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
@keyframes move{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-3%,4%) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}

/* ---------- Header ---------- */
header.site-header{position:fixed;top:0;width:100%;background:rgba(12,12,12,0.68);backdrop-filter:blur(8px);z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem}

.hamburger{display:none;background:transparent;border:0;color:var(--text);font-size:1.3rem}
nav.nav a:hover{color:var(--accent)}

/* ---------- HERO ---------- */
.hero{min-height:72vh;padding:85px 0 3.5rem;position:relative}
.hero-inner{width:100%;max-width:960px;margin:0;padding:0 4rem;position:relative;z-index:1;text-align:left}
h1{font-size:3rem;font-weight:800;margin:.25rem 0;line-height:1.1}
.highlight{color:var(--text)}
.tagline{color:var(--muted);margin:0 0 1rem;font-size:1.1rem}
.chess-chip{background: rgba(255,255,255,0.04);backdrop-filter: blur(6px);padding:10px;border-radius:10px;display: flex;align-items:center;justify-content:center;box-shadow: 0 6px 18px rgba(0,0,0,0.45);transform: translateY(0);}
.chess-icon{color:var(--accent);font-size:20px}
.hero-cta{display:flex;gap:12px;margin-top:1.5rem;justify-items:stretch}

/* ===== TERMINAL COMMAND BUTTON (unified section CTA) ===== */
.btn-terminal{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:13px 28px;border-radius:6px;
  font-family:'SF Mono','Cascadia Code','JetBrains Mono',Consolas,monospace;
  font-size:.88rem;font-weight:500;letter-spacing:.02em;
  background:#0a0c10;color:#e6edf3;
  border:1px solid rgba(255,255,255,0.08);
  text-decoration:none;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  min-height:48px;position:relative;
}
.btn-terminal .btn-prompt{color:var(--accent);font-weight:700;margin-right:2px}
.btn-terminal:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-2px);
}
.btn-terminal:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,107,0,0.15);
}
.btn-terminal:active{transform:translateY(0);transition-duration:.1s}
.btn-terminal i,.btn-terminal svg{font-size:.9rem;flex-shrink:0}

/* preserve old classes for non-section buttons (modal, etc.) */
.btn-hero{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border-radius:28px;font-weight:700;min-height:52px}
.btn-primary{background:linear-gradient(135deg,var(--accent-strong),var(--accent));color:#fff;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 26px rgba(255,107,0,0.07)}
.btn-secondary{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.15);box-shadow:none;min-height:52px;padding:.6rem 1rem;text-decoration:none}
.btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05)}
.btn-hero:focus{outline:none;box-shadow:var(--focus)}
.btn-hero:hover{transform:translateY(-2px)}

/* ---------- SECTIONS & CARDS ---------- */
.section{padding:40px 0}
.section-title{text-align:left;margin-bottom:40px;font-size:1.6rem;font-weight:400;color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.card{background:var(--panel);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;min-height:140px;transition:transform .18s,border-color .18s,box-shadow .22s;position:relative;overflow:visible;border:2px solid transparent}
.card:hover{transform:translateY(-6px)}
.card-icon{font-size:1.3rem;color:var(--accent);text-align:center;padding-top:.6rem}
.card-body{flex:1;padding:.6rem 0;text-align:center;color:var(--muted-2)}
#services .card-body h3, #portfolio .card-body h3, #articles .card-body h3 {text-decoration:none;font-size:1.05rem;font-weight:600;color:#fff;margin:.2rem 0}
.card-body p{font-size:.95rem;color:#dbe7ef}
.card-actions{text-align:center;padding-top:.6rem}
.cta-secondary{display:inline-block;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,0.04);color:var(--muted-2);background:transparent}
.cta-secondary:hover{border-color:var(--accent);color:var(--accent)}
#portfolio .cta-secondary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,0.48);background:linear-gradient(180deg,#383838 0%,#2a2a2a 100%);border-color:var(--accent);color:var(--accent)}
.card-actions .service-btn, .card-actions a.service-btn, button.service-btn{background:#2f2f2f;color:var(--accent);border:1px solid rgba(255,255,255,0.04);padding:.5rem 1rem;border-radius:999px;font-weight:700}
.card-actions .service-btn:hover, .card-actions a.service-btn:hover, button.service-btn:hover{background:#444;color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* ---------- Halo: invisible until hover/focus ---------- */
.card::before{
  content:"";position:absolute;inset:-8px;border-radius:calc(var(--radius) + 8px);
  background: conic-gradient(from 0deg, #ff6b00, #ff0000, #00bfff, #007bff, #ff6b00);
  opacity:0;filter: blur(12px);z-index:-1;transition:opacity .35s cubic-bezier(.2,.9,.2,1), transform .35s ease;
  transform: scale(.98);pointer-events:none}
.card:hover::before,.card:focus-within::before{opacity:0.7;transform:scale(1)}
.card:active::before{opacity:0.98;transform:scale(1.02);filter:blur(8px)}
.card.appear{} /* keeps JS timing intact – no visual effect */

/* ---------- CONTACT / SOCIALS ---------- */
.socials{display:flex;gap:1.2rem;justify-content:center;align-items:center;padding-top:.5rem}
.socials a{color:var(--muted);font-size:1.2rem}
.socials a:hover{color:var(--accent)}

/* ---------- MODALS ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.65);z-index:9998;padding:1rem}
.modal[aria-hidden="false"]{display:flex}
.modal-card{width:min(760px,96%);background:#0f1114;color:#eaf2fb;padding:1rem;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center}
.close{background:transparent;border:0;color:#9aa4b2;font-size:1.2rem}
.modal-row{display:flex;gap:.75rem}
.modal-row input,.modal-row select,.modal-card input,.modal-card textarea{width:100%;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:var(--text)}
.modal-foot{display:flex;gap:.75rem;justify-content:flex-end;margin-top:0.75rem}
.form-msg{color:var(--muted);margin-top:.5rem}
.chat-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.85);z-index:10000}
.chat-modal[aria-hidden="false"]{display:flex}
.chat-modal-content{width:min(95vw,900px);height:min(95vh,720px);background:#0f1114;border-radius:12px;overflow:hidden;position:relative}
#chatFrame{width:100%;height:100%;border:0}
.chat-close{position:absolute;top:8px;right:12px;z-index:10;background:none;border:none;color:#cfd8e3;font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px}
.chat-close:hover{color:#fff}
.thinking-bubble{position:absolute;top:12px;left:12px;padding:.5rem .75rem;background:#111;border-radius:8px;color:#cfd8e3;display:none}
.thinking-bubble[aria-hidden="false"]{display:block}

/* ---------- Responsiveness ---------- */
@media (max-width:900px){
  .hero-cta{flex-direction:column;gap:10px}
  .hamburger{display:block}
  nav
  nav.nav ul.active{right:0}
}

/* ---------- Accessibility helpers ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
:focus{outline:none}
button:focus,a:focus{box-shadow:var(--focus);border-radius:6px}

/* ---------------------------------------------------
   1.  KILL THE BLOBS
---------------------------------------------------- */
.animated-bg,
.animated-bg::before,
.animated-bg::after,
.noise {
  display: none;          /* removes blobs + noise */
}

/* ---------------------------------------------------
   2.  GREY-SCALE STRIPES FOR SECTIONS
---------------------------------------------------- */
/* base page = real black */
body {
  background: #000;
}

/* every section gets its own grey */
.section:nth-of-type(odd)  { background: #0a0a0a; }   /* almost black */
.section:nth-of-type(even) { background: #111111; }   /* 1 step lighter */

/* if you need finer control, target the IDs explicitly */
#home,
#portfolio,
#services            { background: #080808; }

#about,
#articles,
#contact             { background: #121212; }

/* keep cards dark but slightly transparent so the section
   colour shows through a little */
.card {
  background: rgba(25,25,25,.82);
}

/* ---------------------------------------------------
   3.  (optional) tiny separator between sections
---------------------------------------------------- */
.section + .section {
  box-shadow: inset 0  1px 0 0 rgba(255,255,255,.04);
}

/* ----------------------------------------------------------
   Knight chess icon – flat, stroked, mouse-tracking
----------------------------------------------------------- */
.chess-chip {
  background: none;          /* 1. kill the rectangle */
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;                /* keep the wrapper for positioning */
}

.chess-icon {
  display: block;
  font-size: 20px;
  color: transparent;        /* 2. fill = transparent */
  -webkit-text-stroke: 1px var(--accent); /* thin orange border */
  text-stroke: 1px var(--accent);
  transform-origin: 50% 50%;
  transition: transform .15s ease-out;
}

/* 3. rotate on mouse-move (JS will add the --angle custom prop) */
.chess-icon {
  transform: rotate(var(--angle, 0deg));
}

/* final, subtle checkerboard */
#home::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;                /* push one layer further back */
  pointer-events:none;
  --line: rgba(160,160,160,.15);
  --size: 24px;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 calc(var(--size) - 1px),
      var(--line) calc(var(--size) - 1px) var(--size)),
    repeating-linear-gradient(0deg,
      transparent 0 calc(var(--size) - 1px),
      var(--line) calc(var(--size) - 1px) var(--size));
}
/* ---------- HERO GRID + NEON NODES (Option 2) — robust version ---------- */
/* Place this at the end of style.css and hard-refresh the page */

/* ensure hero creates a stacking context and the grid sits *behind* hero content */
#home.hero { position: relative; z-index: 0; }

/* container for the svg grid */
#home.hero .hero-grid {
  position: absolute;
  inset: 0;
  bottom: 10%;
  z-index: 1;
  pointer-events: none;
  display: block;
}

#home.hero .hero-grid-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Grid lines: ensure visible but subtle */
#home.hero .grid-lines { opacity: 0.95; mix-blend-mode: screen; stroke-linecap: round; }

/* Nodes: make sure SVG transforms behave consistently across browsers */
#home.hero .node {
  transform-origin: center center;       /* center of the element */
  transform-box: fill-box;               /* necessary for SVG transforms */
  will-change: transform, opacity, filter;
  opacity: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  mix-blend-mode: screen;
  transition: opacity .24s ease, transform .24s ease;
}

/* Stronger visibility for nodes so they are clearly visible across themes */
#home.hero .node { stroke: none; }

/* Staggered pulsing — GPU-friendly (scale only) */
#home.hero .node-a { animation: hero-node-pulse 3.6s cubic-bezier(.2,.9,.3,.95) infinite; }
#home.hero .node-b { animation: hero-node-pulse 4.2s cubic-bezier(.2,.9,.3,.95) infinite; animation-delay: .35s; }
#home.hero .node-c { animation: hero-node-pulse 3.2s cubic-bezier(.2,.9,.3,.95) infinite; animation-delay: .75s; }
#home.hero .node-d { animation: hero-node-pulse 4.0s cubic-bezier(.2,.9,.3,.95) infinite; animation-delay: 1.05s; }
#home.hero .node-e { animation: hero-node-pulse 3.9s cubic-bezier(.2,.9,.3,.95) infinite; animation-delay: 1.45s; }

@keyframes hero-node-pulse {
  0%   { transform: scale(.92); opacity:.82; filter: blur(0px) brightness(1); }
  50%  { transform: scale(1.18); opacity:1;    filter: blur(.6px) brightness(1.05); }
  100% { transform: scale(.92); opacity:.82; filter: blur(0px) brightness(1); }
}

/* connectors: keep extremely subtle */
#home.hero .connectors { opacity: 0.08; mix-blend-mode: screen; }

/* reduce density & intensity on small screens */
@media (max-width: 720px) {
  #home.hero .grid-lines { opacity: 0.26; }
  #home.hero .connectors { opacity: 0.05; }
  #home.hero .node { opacity: 0.95; }
}

/* accessibility: stop animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  #home.hero .node,
  #home.hero .node-a,
  #home.hero .node-b,
  #home.hero .node-c,
  #home.hero .node-d,
  #home.hero .node-e {
    animation: none !important;
    transform: none !important;
    opacity: .95 !important;
  }
}

#home.hero .grid-lines {
  stroke: url(#gridGradient); /* uses the gradient defined in index.html */
  stroke-width: 1;
  opacity: 0.85;              /* stronger visibility */
  mix-blend-mode: screen;
}
/* Fade the CSS checkerboard / subtle lines under #home so they disappear earlier */
#home::before {
  /* keep existing visuals but fade them vertically via mask */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 55%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 55%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  /* safety: ensure pseudo stays behind SVG grid */
  z-index: -3;
  pointer-events: none;
}

.hero img,
.profile-pic {
  border: none !important;
  box-shadow: none !important;
  border-radius: 50%; /* keeps circular crop */
}

/* MOBILE — scale font instead of breaking lines */
@media (max-width: 420px) {
  #typewrite {
    width: auto;
  }
  #typewrite .tw-inner {
    font-size: 14px; /* smaller font for mobile */
  }
}
.logo-img {
  background: transparent !important;
}
.logo-img {
  position: relative;
}
.logo-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(130deg, rgba(255,255,255,.25) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
}
.logo-img:hover::after {
  opacity: 1;
}
.logo-img {
  display: block;
  height: 34px;              /* adjust size */
  width: auto;               /* keep aspect ratio */
  border-radius: 6px;        /* slightly rounded */
  object-fit: contain;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.logo-img:hover {
  filter: drop-shadow(0 0 6px var(--accent));
  transform: scale(1.08);
}

/* ---------- Portfolio re-grid ---------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.big-cards,
.small-cards {
  display: grid;
  gap: 1.25rem;
}

.big-cards { grid-template-rows: 1fr 1fr; }   /* 2 equal rows */
.small-cards { grid-template-columns: 1fr; }  /* single column, 4 rows */

/* mobile: single column */
@media (max-width: 720px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---- 1. button below subtitle (already done by markup) ---- */

/* ---- 2. image fills empty card space ---- */
.card-fill-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: .75rem;
  object-fit: cover;
  flex-grow: 1;          /* eat remaining vertical space */
}

/* ---- 3. kill mouse-move colour effect on ALL cards ---- */
.card::before,
.card:hover::before,
.card:focus-within::before,
.card:active::before {
  display: none !important;
}

/* widen big cards, shrink small cards */
.portfolio-grid {
  grid-template-columns: 1.5fr 1fr;   /* 2 : 1 ratio */
  gap: 1rem;                      /* slightly wider gutter */
}

/* optional fine-tuning */
.big-cards   .card { padding: 1rem; }
.small-cards .card { padding: .8rem;   }

/* mobile: back to even columns */
@media (max-width: 720px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---- Insight split layout ---- */
.about-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* text wider, image narrower */
  gap: 2.5rem;
  align-items: center;
}

.about-text { padding-right: 1rem; }

.about-image {
  text-align: right;          /* keep image on its own line */
}
.about-image img {
  width: 70%;                 /* smaller */
  max-width: 280px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 15px 24px rgba(0,0,0,.4);
}

/* mobile: stack */
@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; }
  .about-image { text-align: center; margin-top: 1.5rem; }
  .about-image img { width: 60%; }
}

/* openChatBtn inherits .btn-terminal — no overrides needed */

/* --------------------------------------------------
   Masonry Grid – Featured Articles
-------------------------------------------------- */
.masonry-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  grid-auto-flow: dense;
}

/* 2 × 2 hero card */
.masonry-hero{
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}
.masonry-hero .masonry-thumb{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.masonry-hero .card-icon{
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: 1.2rem;
}
.masonry-hero .card-body{
  padding: 1.2rem 1.5rem 0;
  flex: 1;
}
.masonry-hero h3{
  font-size: 1.35rem;
  margin: .25rem 0 .5rem;
}
.masonry-hero p{
  font-size: 1rem;
  margin-bottom: .75rem;
}
.masonry-hero .card-actions{
  padding: 0 1.5rem 1.5rem;
}

/* smaller cards */
.masonry-small{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.masonry-small h3{
  font-size: 1rem;
  margin: .2rem 0 .4rem;
}
.masonry-small p{
  font-size: .9rem;
}

/* editorial hover accent */
.masonry-grid > .card{
  transition: transform .22s, box-shadow .22s, border-color .22s;
  border: 2px solid transparent;
}
.masonry-grid > .card:hover{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 18px 34px rgba(255,107,0,.12);
}

/* centre the “Explore Blog” button */
.articles-cta{
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* ---------- mobile: collapse to single column ---------- */
@media (max-width: 720px){
  .masonry-hero{
    grid-column: span 1;
    grid-row: span 1;
  }
  .masonry-grid{
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------
   1.  Whole card is clickable
-------------------------------------------------- */
a.card-link{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color .22s, transform .22s;
}
a.card-link:hover{
  border-color: var(--accent);
  transform: translateY(-4px);
}

/* --------------------------------------------------
   2.  Hero card – smaller title + subtitle + bottom-left
-------------------------------------------------- */
.masonry-hero{
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;   /* push content to bottom */
}
.masonry-hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.masonry-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 50%, transparent 100%);
}
.masonry-hero-bottom{
  position: relative;
  z-index: 2;
  padding: 2rem;
  text-align: left;
}
.masonry-hero-title{
  font-size: 1.25rem;              /* smaller than before */
  margin: 0 0 .25rem;
}
.masonry-hero-sub{
  font-size: .95rem;
  opacity: .9;
  margin: 0;
}

/* --------------------------------------------------
   3.  Small cards – image below text + no reading time
-------------------------------------------------- */
.masonry-small{
  padding: 0;
  overflow: hidden;
}
.masonry-small-top{
  padding: 1rem;
  flex: 1;
}
.masonry-small-img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

/* random heights & widths (same prime patterns) */
.masonry-small:nth-child(3n)   { grid-row: span 2; }
.masonry-small:nth-child(5n+2) { grid-row: span 1; }
.masonry-small:nth-child(7n+4) { grid-row: span 2; }

@media (min-width: 721px){
  .masonry-small:nth-child(11n)  { grid-column: span 2; }
  .masonry-small:nth-child(13n+6){ grid-column: span 1; }
  .masonry-small:nth-child(17n+9){ grid-column: span 2; }
}

/* mobile: single column */
@media (max-width: 720px){
  .masonry-hero{ grid-column: span 1; grid-row: span 1; }
  .masonry-grid{ grid-template-columns: 1fr; }
}

/* dark-grey small cards */
.masonry-small{ background: #1c1c1c; }

/* ---------- Featured Solutions – 25 % shorter, layout untouched ---------- */
#portfolio .card{
  padding: .55rem;                    /* was 1 rem */
  font-size: .85rem;                  /* was ~.95 rem */
}
#portfolio .card-body{
  padding: .4rem 0;                   /* tighter vertical spacing */
}
#portfolio .card-actions{
  padding-top: .4rem;                 /* bring button closer */
}
#portfolio .card-body h3{
  font-size: .95rem;                  /* slightly smaller title */
}
#portfolio .card-fill-img{            /* optional thumb inside card */
  max-height: 90px;                   /* keep image visible */
  object-fit: cover;
}

/* ---------- Big cards (left column) – show full image ---------- */
#portfolio .big-cards .card-fill-img{
  max-height: 190px;     /* was 140 px → now fits 25 % shorter card */
  object-fit: cover;
  width: 100%;
  border-radius: 6px;
}

/* Services grid: responsive columns + card sizing */
.services-grid {
  display: grid;
  gap: 1.25rem; /* space between cards */
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

/* responsive breakpoints */
@media (max-width: 1050px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ensure cards occupy same height and don't shrink */
.services-grid .card {
  display: block;
  height: 320px;          /* consistent card height — adjust as needed */
  min-height: 280px;
  box-sizing: border-box;
  position: relative;
}

/* small visual tuning so icons & text don't wrap oddly */
.services-grid .card-front .card-icon { font-size: 1.4rem; margin-bottom: 0.45rem; }
.services-grid .card-front .card-body h3 { margin: 0 0 .35rem; line-height: 1.1; }

/* ================= Services: equal-height cards, centered pill buttons, denser faded grid ================= */

/* 1) Ensure the services cards area stretches so actions align horizontally across each row */
#services .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  #services .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #services .cards { grid-template-columns: 1fr; }
}

/* Make each card fill its grid cell so bottom actions align */
#services .cards .card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;    /* critical so every card has same height in row */
  min-height: 280px !important; /* reduced from 320px to minimize empty space */
  padding: 1.05rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

/* let the body grow so actions remain at the bottom of the card */
#services .cards .card .card-body {
  flex: 1 1 auto !important;
  display: block !important;
  margin-bottom: 0.6rem !important;
  overflow-wrap: break-word !important;
}

/* center actions horizontally and allow wrap on small screens */
#services .cards .card .card-actions {
  display: flex !important;
  justify-content: center !important;  /* center horizontally */
  gap: .75rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  z-index: 4 !important; /* above overlay */
  padding-top: .45rem !important;
}

/* Keep both buttons the same pill width/shape and avoid overflow */
#services .cards .card .card-actions > * {
  flex: 0 1 46% !important;    /* two buttons side-by-side on desktop */
  min-width: 120px !important;
  max-width: 46% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* small screens: stack and take full width */
@media (max-width: 560px) {
  #services .cards .card .card-actions > * {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #services .cards .card { min-height: unset !important; }
}

/* 2) Unified pill button visual (shape like "View Case Study") but dark background + hero orange text */
/* Hero orange: #ff6b00 (used for stronger consistency with head) */
#services .cards .card .card-actions .cta-secondary,
#services .cards .card .card-actions .service-btn,
#services .cards .card .card-actions a.service-learn,
#services .cards .card .card-actions button.service-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;          /* exact pill shape as .cta-secondary */
  border: 1px solid rgba(255,255,255,0.04) !important;
  background: linear-gradient(180deg, #2f2f2f 0%, #232323 100%) !important; /* dark grey pill */
  color: #ff6b00 !important;                /* hero orange */
  font-weight: 700 !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.38) !important;
  z-index: 5 !important; /* ensure it sits above the grid overlay */
  transition: transform .18s ease, box-shadow .18s ease, opacity .12s ease !important;
}

/* hover / active */
#services .cards .card .card-actions .cta-secondary:hover,
#services .cards .card .card-actions .service-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.48) !important;
  background: linear-gradient(180deg, #383838 0%, #2a2a2a 100%) !important;
  opacity: 1 !important;
}

/* focus outline for accessibility */
#services .cards .card .card-actions .cta-secondary:focus,
#services .cards .card .card-actions .service-btn:focus {
  outline: 3px solid rgba(255,107,0,0.14);
  outline-offset: 2px;
}

/* 3) Denser, brighter grid overlay — fade top→bottom to match hero visuals */
/* overlay pseudo placed underneath content (content z-index is > overlay) */
#services .cards .card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;    /* below content (content is z-index 4/5 above) */
  pointer-events: none !important;
  border-radius: inherit !important;
  background-repeat: repeat !important;
  mix-blend-mode: screen !important;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.25,1) !important;
  opacity: 0.48 !important;
  /* denser orange + faint blue cross-grid + subtle darker tiles */
  background-image:
    /* orange vertical lines (dense) */
    repeating-linear-gradient(90deg, rgba(255,107,0,0.26) 0 1px, transparent 1px calc(16px)),
    /* orange horizontal lines */
    repeating-linear-gradient(0deg,  rgba(255,107,0,0.22) 0 1px, transparent 1px calc(16px)),
    /* blue accent grid (subtle) */
    repeating-linear-gradient(90deg, rgba(95,211,255,0.035) 0 1px, transparent 1px calc(8px)),
    repeating-linear-gradient(0deg,  rgba(95,211,255,0.03) 0 1px, transparent 1px calc(8px)),
    /* subtle soft tile fill to darken some cells a bit (very soft) */
    linear-gradient(45deg, rgba(0,0,0,0.18) 0 12.5%, transparent 12.5% 37.5%, rgba(0,0,0,0.18) 37.5% 50%, transparent 50% 87.5%, rgba(0,0,0,0.18) 87.5% 100%);
  background-size: auto, auto, auto, auto, 32px 32px !important;
  /* Fade mask: stronger at top, softer at bottom */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.12) 75%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.12) 75%, rgba(0,0,0,0) 100%);
}

/* keep small-dot texture subtle (before pseudo) */
#services .cards .card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle at 6px 6px, rgba(255,255,255,0.03) 0 1px, transparent 1px);
  background-size: 16px 16px !important;
  opacity: 0.08 !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
}

/* hover/focus: slightly stronger grid */
#services .cards .card:hover::after,
#services .cards .card:focus-within::after {
  opacity: 0.72 !important;
  transform: translateY(-6px) !important;
}
#services .cards .card:hover::before,
#services .cards .card:focus-within::before {
  opacity: 0.14 !important;
}

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  #services .cards .card::after,
  #services .cards .card::before,
  #services .cards .card .card-actions .cta-secondary,
  #services .cards .card .card-actions .service-btn {
    transition: none !important;
    transform: none !important;
  }
}

/* -------------------- Pull buttons up slightly -------------------- */
/* Reduce spacing below the text and pull the actions up a bit */
#services .cards .card .card-body {
  margin-bottom: 0.25rem !important;   /* closer to actions */
}
#services .cards .card .card-actions {
  padding-top: 0.12rem !important;
  margin-top: -6px !important;         /* pulls buttons up toward the text */
}

/* If you prefer a subtler lift, use margin-top: -3px instead */

/* -------------------- Make blue grid lines bolder & thicker -------------------- */
/* Override the ::after background to increase blue line opacity/thickness and overall contrast */
#services .cards .card::after {
  /* keep orange lines as before, but make blue layers thicker/stronger */
  background-image:
    /* orange vertical (dense) */
    repeating-linear-gradient(90deg, rgba(255,107,0,0.26) 0 1px, transparent 1px calc(16px)),
    /* orange horizontal */
    repeating-linear-gradient(0deg,  rgba(255,107,0,0.22) 0 1px, transparent 1px calc(16px)),
    /* stronger blue vertical — thicker 2px strokes, closer spacing for more presence */
    repeating-linear-gradient(90deg, rgba(95,211,255,0.14) 0 2px, transparent 2px calc(10px)),
    /* stronger blue horizontal */
    repeating-linear-gradient(0deg,  rgba(95,211,255,0.12) 0 2px, transparent 2px calc(10px)),
    /* subtle tile fill (unchanged) */
    linear-gradient(45deg, rgba(0,0,0,0.18) 0 12.5%, transparent 12.5% 37.5%, rgba(0,0,0,0.18) 37.5% 50%, transparent 50% 87.5%, rgba(0,0,0,0.18) 87.5% 100%);
  /* sizes — keep tile fairly small */
  background-size: auto, auto, auto, auto, 32px 32px !important;
  /* raise overall overlay contrast a touch so lines show well on the card bg */
  opacity: 0.60 !important;
  /* keep the top->bottom fade mask */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.12) 75%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.12) 75%, rgba(0,0,0,0) 100%);
}

/* Slightly emphasize the blue dot texture as well (optional) */
#services .cards .card::before {
  background-image: radial-gradient(circle at 6px 6px, rgba(255,255,255,0.035) 0 1px, transparent 1px);
  opacity: 0.10 !important;
}

/* ====== Services: taller cards, slightly smaller body text, buttons pulled up ====== */

/* Make cards taller on desktop/tablet for more breathing room */
#services .cards {
  /* keep auto-fit responsive columns, only change row sizing via min-height on card */
  grid-auto-rows: 1fr !important;
}

/* Increase the minimum card height (desktop/tablet) */
#services .cards .card {
  min-height: 420px !important;    /* ↑ increase this to 440px if you want even taller cards */
  padding: 1.1rem !important;
  height: 100% !important;         /* ensures equal row height behavior */
  box-sizing: border-box !important;
}

/* Slightly reduce the paragraph/body text inside cards (not titles) */
#services .cards .card .card-body p,
#services .cards .card .card-body > p {
  font-size: 0.92rem !important;    /* slightly smaller; change to 0.88rem if you want smaller */
  line-height: 1.45 !important;
  margin-bottom: 0.12rem !important; /* less space below text so buttons are closer */
  color: inherit !important;
}

/* Reduce bottom gap from body to actions so buttons move up */
#services .cards .card .card-body {
  margin-bottom: 0.12rem !important;  /* was 0.25 / 0.6 previously — now much closer */
  padding-bottom: 0 !important;
}

/* Pull the action row further up (closer to the body) */
#services .cards .card .card-actions {
  margin-top: -12px !important;      /* pulls buttons up; adjust -8px / -16px to taste */
  padding-top: 0 !important;
}

/* Keep button sizing consistent after moving them */
#services .cards .card .card-actions > * {
  min-width: 120px !important;
  max-width: 46% !important;
  box-sizing: border-box !important;
}

/* Mobile: keep cards comfortable but not too tall; buttons stack */
@media (max-width: 720px) {
  #services .cards .card {
    min-height: 300px !important;    /* mobile friendly */
    padding: 0.9rem !important;
  }
  #services .cards .card .card-actions {
    margin-top: 6px !important;      /* undo heavy negative margin for stacked layout */
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }
  #services .cards .card .card-actions > * {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }
  #services .cards .card .card-body p {
    font-size: 0.95rem !important;   /* slightly larger on small screens for readability */
  }
}

/* reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
  #services .cards .card,
  #services .cards .card .card-actions,
  #services .cards .card .card-body {
    transition: none !important;
  }
}

/* ====== Services : move buttons UP without absolute ====== */
#services .cards .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 280px;
    padding: 1.05rem;
}

/* 1.  remove the “spring” that pushes actions down */
#services .cards .card .card-body {
    flex: 0 0 auto;          /* ← kill flex:1 */
    margin-bottom: 0.4rem;   /* small gap → buttons */
    padding-bottom: 0;
}

/* 2.  actions now sit directly under the text */
#services .cards .card .card-actions {
    margin-top: 0;           /* ← remove previous -20px hack */
    padding-top: 0;
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* 3.  slimmer, shorter buttons */
#services .cards .card-actions .cta-secondary,
#services .cards .card-actions .service-btn {
    font-weight: 500;                /* lighter text */
    font-size: .9rem;
    padding: 7px 12px;               /* smaller pill */
    border-radius: 999px;
    background: #0d0d0d;
    color: #ff6b00;
    border: 1px solid rgba(255,255,255,.04);
    transition: transform .18s, box-shadow .18s;
    flex: 0 1 auto;
    min-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 560px) {
    #services .cards .card-actions > * { min-width: 100%; }
}

/* ===== Services : whole card is the link ===== */
#services .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

#services .card.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  padding: 1.1rem;
  background: rgba(25,25,25,.82);
  border: 2px solid transparent;
  border-radius: 12px;
  text-decoration: none;   /* kill link underline */
  color: inherit;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}

#services .card.service-card:hover,
#services .card.service-card:focus-within {
  transform: translateY(-4px);
  border-color: #ff6b00;
  box-shadow: 0 18px 34px rgba(255,107,0,.12);
}

#services .card.service-card .card-icon {
  font-size: 1.3rem;
  color: #ff6b00;
  margin-bottom: .6rem;
}

#services .card.service-card .card-body {
  flex: 1 1 auto;
}

#services .card.service-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: .2rem 0 .4rem;
  color: #fff;
}

#services .card.service-card p {
  font-size: .92rem;
  line-height: 1.45;
  color: #dbe7ef;
  margin: 0;
}

/* accessibility focus outline */
#services .card.service-card:focus {
  outline: 3px solid rgba(255,107,0,.15);
  outline-offset: 2px;
}

/* mobile safety */
@media (max-width: 720px) {
  #services .card.service-card {
    min-height: 280px;
  }
}
/* ===== Services : fade starts higher (under text) ===== */
#services .cards .card::after {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1)  0%,
    rgba(0,0,0,1)  10%,   /* ← fully visible until mid-card */
    rgba(0,0,0,.6) 20%,   /* ← fade STARTS here (under text) */
    rgba(0,0,0,0)  90%    /* ← fully gone well before bottom */
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1)  0%,
    rgba(0,0,0,1)  10%,
    rgba(0,0,0,.6) 20%,
    rgba(0,0,0,0)  90%
  );
}

/* ===== Services : hide top icons ===== */
#services .cards .card .card-icon {
  display: none;
}
/* ===== Services : bigger & white text ===== */
#services .cards .service-card .card-body h3 {
  font-size: 1.35rem !important;   /* title */
  line-height: 1.2 !important;
  color: #fff !important;
}

#services .cards .service-card .card-body p {
  font-size: 1.05rem !important;   /* paragraph */
  line-height: 1.55 !important;
  color: #fff !important;          /* pure white */
  margin-top: .6rem !important;
}

/* mobile */
@media (max-width: 720px) {
  #services .cards .service-card .card-body h3 { font-size: 1.2rem !important; }
  #services .cards .service-card .card-body p  { font-size: .98rem !important; }
}

/* ===== Services : final gap tweak ===== */
#services .cards .service-card .card-body h3 {
  margin-bottom: 3rem !important;   /* even bigger gap – tweak px */
}

#services .cards .service-card .card-body p {
  margin-top: 0 !important;           /* ensure no browser default */
}

/* ===== Services : bottom “Learn more” pill ===== */
#services .cards .service-card .card-actions {
  margin-top: auto;          /* push to bottom */
  padding-top: .8rem;
  text-align: center;
}

#services .cards .service-card .cta-secondary {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.04);
  background: transparent;
  color: var(--muted-2);
  font-size: .9rem;
  font-weight: 500;
  transition: all .22s;
}

#services .cards .service-card:hover .cta-secondary {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ===== Services : pull “Learn more” buttons UP ===== */
#services .cards .service-card .card-actions {
  margin-top: -12px !important;   /* ↑ tweak -8px … -20px to taste */
  padding-top: 0 !important;
}

/* ===== Services : body text → light grey ===== */
#services .cards .service-card .card-body p {
  color: #b8b8b8 !important;   /* soft light grey – tweak to taste */
}

/* ===== Services : button font & colour override ===== */
#services .cards .service-card .card-actions .cta-secondary {
  font-weight: 400 !important;
  color: #b8b8b8 !important;
}

/* ==========  TECH STACK  ========== */
#tech-stack {
  padding: 4rem 0 3rem;
}

#tech-stack .section-title {
  text-align: center;
  margin-bottom: 2.5rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .5px;
}

/* ===== Tech-Stack : force small grid ===== */
.logo-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
  gap: .8rem !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.logo-grid img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  max-width: 48px !important;   /* lock icon size */
  margin: 0 auto;               /* centre in cell */
}

/* ===== Services : tighten bottom spacing ===== */
#services {
  padding-bottom: 2rem !important;   /* default was ~4rem – lower as needed */
}

/* 1.  kill the placeholder spacer completely */
#services .placeholder {
  display: none !important;
}

/* 2.  if logo-wall lives inside services, clamp its bottom margin */
#services .logo-wall {
  margin-bottom: 0 !important;
  padding-bottom: 1rem !important;   /* keep a small air-gap only */
}

/* 3.  final bottom padding of the section itself */
#services.section {
  padding-bottom: 3rem !important;   /* tweak 1–2 rem to taste */
}

/* --- SOTA 2026 SERVICES LAYOUT --- */
.services-asymmetric-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: stretch;
}

.services-index-track {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}

.pipeline-group {
  display: flex;
  flex-direction: column;
}

.service-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.service-row:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.service-row:hover {
  padding-left: 1.2rem;
  border-bottom-color: #5fd3ff;
}

.sr-num {
  font-family: monospace;
  font-size: 0.9rem;
  color: #ff6b00;
  font-weight: 600;
  margin-top: 0.3rem;
}

.sr-content h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.3rem 0;
  transition: color 0.3s ease;
}

.service-row:hover .sr-content h3 {
  color: #5fd3ff;
}

.sr-subtitle {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a1a1aa;
  margin-bottom: 0.8rem;
}

.sr-content p {
  font-size: 0.95rem;
  color: #b0b8c4;
  line-height: 1.6;
  margin: 0;
}

.sr-arrow {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.2);
  font-size: 1.1rem;
  transition: color 0.3s ease, transform 0.3s ease;
  margin-top: 0.3rem;
}

.service-row:hover .sr-arrow {
  color: #5fd3ff;
  transform: translateX(4px);
}

/* Foundational Substrate Styling */
.foundational-substrate-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.foundational-substrate-block:hover {
  border-color: var(--border-glow);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 15px rgba(255, 107, 0, 0.4);
}

.substrate-badge {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--border-glow);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.substrate-content-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.foundational-substrate-block h3 {
  font-size: 1.3rem;
  color: var(--text-main);
  margin: 0 0 0.7rem 0;
  font-weight: 600;
  transition: color 0.3s ease;
}

.foundational-substrate-block:hover h3 {
  color: var(--border-glow);
}

.foundational-substrate-block p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.2rem 0;
}

.substrate-cta {
  font-size: 0.9rem;
  color: var(--border-glow);
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.foundational-substrate-block:hover .substrate-cta {
  text-decoration: underline;
}

/* Right Track: Featured Monolith */
.services-featured-track {
  position: sticky;
  top: 100px;
}

.featured-service-block {
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.5rem;
  border-radius: 6px;
}

.fs-header h3 {
  font-size: 1.55rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.3rem 0;
}

.fs-subtitle {
  display: block;
  font-size: 0.85rem;
  color: #ff6b00;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.fs-detail {
  font-size: 1rem;
  color: #a1a1aa;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 968px) {
  .services-asymmetric-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .services-featured-track {
    position: relative;
    top: 0;
  }
}

/* ===== Contact : bigger social icons ===== */
#contact .socials a {
  font-size: 1.6rem !important;   /* default was ~1.2rem – adjust px/rem */
  width: 44px;                    /* optional hit-area enlargement */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Tech-Stack : lighter idle + white hover ===== */
.logo-grid img {
  background: rgba(255, 255, 255, .08) !important; /* ← lighter idle */
  transition: background .22s, transform .22s, filter .22s;
}

.logo-grid img:hover {
  background: #ffffff !important; /* clean white on hover */
  filter: brightness(1.05) drop-shadow(0 0 6px rgba(255, 107, 0, .35));
  transform: translateY(-3px);
}

/* ===== Tech-Stack : centre last row ===== */
.logo-grid {
  justify-content: center;   /* centres incomplete row */
}

/* ===== Featured Solutions : tight grey grid ===== */
#portfolio .cards .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(45,45,45,.30) 0 1px, transparent 5px 1px),
    repeating-linear-gradient(0deg,  rgba(45,45,45,.30) 0 1px, transparent 5px 1px);
}

/* --- force grid to stay visible --- */
#portfolio .cards .card {
  position: relative;          /* ensure stacking context */
  z-index: 0;                  /* card itself */
  background: rgba(25,25,25,.82);
}

#portfolio .cards .card::after {
  z-index: -1;                 /* grid sits *between* page and card */
}

/* ===== Featured Solutions : small / normal-weight / grey text ===== */
#portfolio .cards .card-actions .cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.04);
  background: #0d0d0d;
  color: #b8b8b8;          /* muted grey */
  font-weight: 400;         /* normal weight */
  font-size: .8rem;         /* slightly smaller */
  transition: transform .18s, box-shadow .18s, background .18s;
}

#portfolio .cards .card-actions .cta-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.48);
  background: linear-gradient(180deg,#383838 0%,#2a2a2a 100%);
  color: #b8b8b8;           /* keep grey on hover */
}

/* ===== Featured Solutions : lift button row ===== */
#portfolio .cards .card-actions {
  margin-top: -10px;   /* ← tweak -8px … -14px to taste */
  padding-top: 0;
}

/* ===== Featured Solutions : tighter title → subtitle ===== */
#portfolio .cards .card-body h3 {
  margin-bottom: .2rem;   /* was ~0.5 rem – now snug */
}

#portfolio .cards .card-body p {
  margin-top: 0;          /* remove any browser default top margin */
}

/* ===== Featured Solutions : smaller body text ===== */
#portfolio .cards .card-body p {
  font-size: .8rem;      /* was ~.95 rem – adjust if you need even smaller */
  line-height: 1.4;      /* optional: keep it readable */
}

/* === Fix: nicer spacing for big (left) portfolio cards === */
.portfolio-grid .big-cards .card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;            /* space between title/paras, actions and image */
  align-items: stretch;
}

/* undo the negative pull and ensure comfortable spacing */
.portfolio-grid .big-cards .card .card-actions {
  margin-top: 0 !important;   /* override the earlier negative margin (was -10px). */
  padding-top: 0 !important;
  margin-bottom: 0.25rem;     /* small breathing room above the image */
  justify-content: center;    /* keep button centered */
}

/* slightly increase space between actions and the image */
.portfolio-grid .big-cards .card .card-fill-img {
  margin-top: 1rem !important;
  max-height: 180px;          /* keep image size controlled */
  object-fit: cover;
}

/* === Align & "pull up" View Case Study buttons on small (right) cards ===
   - Makes .card-body a vertical flex container with consistent gaps
   - Forces .card-actions to appear before the image (visual reorder)
   - Keeps consistent spacing across big and small cards
*/
.portfolio-grid .card .card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;              /* space between title/desc, actions, image */
}

/* visually place actions before the image so buttons sit higher */
.portfolio-grid .card .card-actions {
  order: 2;                 /* appear before image */
  margin-top: 0 !important; /* override any negative pulls */
  margin-bottom: 0.25rem;
  justify-content: center;  /* keep button centered */
  align-self: center;       /* center horizontally on small cards */
}

/* image goes after actions visually, keeping it a bit separated */
.portfolio-grid .card .card-fill-img {
  order: 3;
  margin-top: 0.5rem !important;
  max-height: 160px;
  object-fit: cover;
}

/* ensure each card stretches equally so rows look aligned */
.portfolio-grid { 
  display: grid; 
  grid-auto-rows: 1fr;
}

/* card as column so footer/actions positioning is stable */
.portfolio-grid .card {
  display: flex;
  flex-direction: column;
}

/* keep card body flexible so actions sit where we want */
.portfolio-grid .card .card-body {
  flex: 1 1 auto;
}

/* small-card specific tweaks (right column) to make buttons slightly more compact */
.portfolio-grid .small-cards .card .card-actions a,
.portfolio-grid .card .card-actions a {
  padding: 0.45rem 0.8rem;
  font-size: 0.95rem;
  border-radius: 999px; /* pill look */
}

/* >>> PATCH: Uniform card layout for #portfolio — put at END of style.css <<< */
#portfolio .cards {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

/* make each card a column so we can align actions consistently */
#portfolio .cards .card {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}

/* make card-body expand so actions sit consistently */
#portfolio .cards .card .card-body {
  display: flex !important;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

/* >>> PATCH: pull up "Learn more" buttons for Services & Packages (place at EOF) <<< */

/* make each service/package card a vertical flex column so spacing is predictable */
#services .cards,
#packages .cards {
  display: grid;         /* keep your grid layout */
  gap: 1.0rem;
  /* keep layout as-is — we only change internal card flow below */
}

/* make each card a column so body and actions stack predictably */
#services .cards .card,
#packages .cards .card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

/* tighten the card-body spacing so actions sit closer to the content */
#services .cards .card .card-body,
#packages .cards .card .card-body {
  padding-top: 0.45rem;
  padding-bottom: 0.25rem;
  line-height: 1.25;
  text-align: center;
}

/* pull up the Learn more / CTA so it sits nearer the body (not too close) */
#services .cards .card .card-actions,
#packages .cards .card .card-actions {
  margin-top: -6px !important;     /* visually lifts the button */
  padding-top: 0 !important;       /* cancel any extra top padding */
  align-self: center;
  order: 2;
}

/* make sure the CTA pill stays compact and consistent */
#services .cards .card .card-actions .cta-secondary,
#packages .cards .card .card-actions .cta-secondary {
  padding: 0.4rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 999px;
}

/* small screens: remove the negative lift so nothing overlaps on mobile */
@media (max-width: 720px) {
  #services .cards .card .card-actions,
  #packages .cards .card .card-actions {
    margin-top: 0 !important;
    padding-top: .45rem !important;
  }
}
/* make the services/packages grid use equal-height rows so vertical alignment works */
#services .cards,
#packages .cards {
  display: grid !important;
  grid-auto-rows: 1fr !important;
  gap: 1rem !important;
}

/* treat each card as a vertical flex container */
#services .cards .card,
#packages .cards .card,
#services .cards a.card,
#packages .cards a.card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* make the card body take available space so actions can sit where we want */
#services .cards .card .card-body,
#packages .cards .card .card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  flex: 1 1 auto !important;
  align-items: stretch !important;
  text-align: center !important;
}

/* STRONG override: pull actions visually up, keep them centered */
#services .cards .card .card-actions,
#packages .cards .card .card-actions {
  order: 2 !important;                   /* show before any image ordered later */
  margin-top: 0 !important;             /* cancel earlier negative margins */
  padding-top: 0 !important;
  align-self: center !important;
  z-index: 3 !important;
  transform: translateY(-8px) !important; /* modest visual pull-up */
  transition: transform .18s !important;
}

/* Make CTAs compact and consistent */
#services .cards .card .card-actions .cta-secondary,
#packages .cards .card .card-actions .cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.38rem 0.9rem !important;
  font-size: 0.95rem !important;
  border-radius: 999px !important;
}

/* Ensure any images in the card body come after the actions visually */
#services .cards .card .card-fill-img,
#packages .cards .card .card-fill-img,
#services .cards .card img,
#packages .cards .card img {
  order: 3 !important;
  margin-top: 0.6rem !important;
  max-height: 160px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* safeguard older generic .card-actions negative rule */
.card-actions { margin-top: 0 !important; }

/* MOBILE: remove transform so nothing overlaps on small screens */
@media (max-width: 720px) {
  #services .cards,
  #packages .cards {
    grid-auto-rows: auto !important;
  }
  #services .cards .card .card-actions,
  #packages .cards .card .card-actions {
    transform: none !important;
    margin-top: 0.4rem !important;
  }
}

/* ====== FIX: prevent Learn more buttons from overlapping text ======
   Paste this at the VERY END of style.css (after any previous overrides)
*/

/* 1) Reserve space inside each card so pulled-up CTA doesn't cover text */
#services .cards .card .card-body,
#packages .cards .card .card-body {
  padding-bottom: 1.15rem !important; /* space for the pulled-up button */
  min-height: 5.25rem !important;     /* prevents very-short cards from collapsing */
  box-sizing: border-box !important;
}

/* 2) Make the pull-up milder so it doesn't intrude */
#services .cards .card .card-actions,
#packages .cards .card .card-actions {
  transform: translateY(-6px) !important;  /* milder lift */
  margin-top: 0 !important;
  z-index: 3 !important;
}

/* 3) If a card has image or extra content below, ensure the image remains after actions */
#services .cards .card .card-fill-img,
#packages .cards .card .card-fill-img {
  order: 3 !important;
  margin-top: 0.55rem !important;
}

/* MOBILE: remove the lift and relax spacing to avoid overlap on small screens */
@media (max-width: 720px) {
  #services .cards .card .card-body,
  #packages .cards .card .card-body {
    padding-bottom: 0.9rem !important;
    min-height: 0 !important;
  }
  #services .cards .card .card-actions,
  #packages .cards .card .card-actions {
    transform: none !important;
    margin-top: 0.4rem !important;
  }
}

/* ===== FEATURED SOLUTIONS (small cards) — pull-up Learn/View buttons safely ===== */
/* Add this at the very end of style.css so it wins over older rules */

/* make portfolio rows equal height so vertical alignment works */
#portfolio .cards,
#portfolio .portfolio-grid {
  display: grid !important;
  grid-auto-rows: 1fr !important;
  gap: 1rem !important;
}

/* treat small cards as vertical flex containers so flow is predictable */
#portfolio .cards .small-cards .card,
#portfolio .cards .small-cards a.card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Let card-body expand and reserve space at bottom for pulled button */
#portfolio .cards .small-cards .card .card-body,
#portfolio .cards .small-cards a.card .card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  flex: 1 1 auto !important;
  padding-bottom: 1.05rem !important;   /* reserve space so button won't overlap text */
  min-height: 4.5rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Pull up the action button modestly and center it (won't overlap due to padding) */
#portfolio .cards .small-cards .card .card-actions,
#portfolio .cards .small-cards a.card .card-actions,
#portfolio .cards .small-cards .card-body > .card-actions {
  order: 2 !important;                   /* ensure actions appear before image visually */
  margin-top: 0 !important;              /* cancel older negative margins */
  padding-top: 0 !important;
  align-self: center !important;
  z-index: 3 !important;
  transform: translateY(-6px) !important; /* gentle lift */
  transition: transform .18s !important;
}

/* Keep images below actions and controlled size */
#portfolio .cards .small-cards .card .card-fill-img,
#portfolio .cards .small-cards .card img,
#portfolio .cards .small-cards a.card .card-fill-img {
  order: 3 !important;
  margin-top: 0.5rem !important;
  max-height: 140px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Safety fallback for older global selector */
#portfolio .cards .card-actions { margin-top: 0 !important; }

/* MOBILE: remove visual lift to avoid any risk of overlap on small screens */
@media (max-width: 720px) {
  #portfolio .cards,
  #portfolio .portfolio-grid { grid-auto-rows: auto !important; }
  #portfolio .cards .small-cards .card .card-body { padding-bottom: 0.9rem !important; min-height: 0 !important; }
  #portfolio .cards .small-cards .card .card-actions,
  #portfolio .cards .small-cards a.card .card-actions { transform: none !important; margin-top: 0.4rem !important; }
}

/* =========================
   UX PATCH: hero border + button hover behavior
   Paste this at the very END of style.css
   ========================= */

/* 1) Remove orange border on hover for the Featured Article hero card only.
   Keep keyboard focus ring intact (only target mouse hover/active). */
a.card-link.masonry-hero:hover,
a.card-link.masonry-hero:active {
  border-color: transparent !important;   /* don't show orange border on hover */
}

/* If you want to also remove when pointer device is used (modern browsers),
   use the pointer media query (optional) */
/*
@media (pointer: fine) {
  a.card-link.masonry-hero:hover { border-color: transparent !important; }
}
*/

/* 2) Make portfolio (featured solutions) + services/packages CTAs
      - change only border color and inner text color on hover -> var(--accent)
      - keep the existing button background unchanged
      - remove any hover background/box-shadow unwanted by earlier rules
   High-specificity selectors + !important to override previous rules placed earlier. */

/* Targets: CTA buttons inside portfolio / services / packages card-actions */
#portfolio .cards .card .card-actions .cta-secondary,
#portfolio .cards .card .card-actions a.cta-secondary,
#portfolio .cards .card .card-actions a.service-btn,
#portfolio .cards .card .card-actions button.service-btn,
#services .cards .card .card-actions .cta-secondary,
#services .cards .card .card-actions a.cta-secondary,
#services .cards .card .card-actions a.service-btn,
#services .cards .card .card-actions button.service-btn,
#packages .cards .card .card-actions .cta-secondary,
#packages .cards .card .card-actions a.cta-secondary,
#packages .cards .card .card-actions a.service-btn,
#packages .cards .card .card-actions button.service-btn {
  /* ensure border exists so it can change color on hover */
  border: 1px solid rgba(255,255,255,0.04) !important;
  /* keep whatever normal background you have (don't let hover change it) */
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  /* smooth color/border transition */
  transition: color .18s ease, border-color .18s ease !important;
}

/* Hover + keyboard focus: border + text color -> accent; background unchanged */
#portfolio .cards .card .card-actions .cta-secondary:hover,
#portfolio .cards .card .card-actions a.cta-secondary:hover,
#portfolio .cards .card .card-actions a.service-btn:hover,
#portfolio .cards .card .card-actions button.service-btn:hover,
#services .cards .card .card-actions .cta-secondary:hover,
#services .cards .card .card-actions a.cta-secondary:hover,
#services .cards .card .card-actions a.service-btn:hover,
#services .cards .card .card-actions button.service-btn:hover,
#packages .cards .card .card-actions .cta-secondary:hover,
#packages .cards .card .card-actions a.cta-secondary:hover,
#packages .cards .card .card-actions a.service-btn:hover,
#packages .cards .card .card-actions button.service-btn:hover,
#portfolio .cards .card .card-actions .cta-secondary:focus,
#portfolio .cards .card .card-actions a.cta-secondary:focus,
#services .cards .card .card-actions .cta-secondary:focus,
#services .cards .card .card-actions a.cta-secondary:focus,
#packages .cards .card .card-actions .cta-secondary:focus,
#packages .cards .card .card-actions a.cta-secondary:focus {
  color: var(--accent) !important;         /* inside text turns orange */
  border-color: var(--accent) !important;  /* border turns orange */
  /* explicitly neutralize any hover bg/box-shadow injected earlier in your file */
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  /* preserve any transform/translate if you prefer the lift effect */
  /* If you *do not* want the button to lift, uncomment the next line:
     transform: none !important;
  */
}

/* 3) Extra safety: remove hover background from generic .cta-secondary hover rules later in file
   (neutralize other conflicting definitions that may appear after this block) */
.cta-secondary:hover,
.card-actions .service-btn:hover,
.card-actions a.service-btn:hover,
button.service-btn:hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 4) Small-screen safety: keep mobile spacing & no overlap */
@media (max-width: 720px) {
  /* ensure we don't remove focus styles for keyboard users */
  #portfolio .cards .card .card-actions .cta-secondary:focus,
  #services .cards .card .card-actions .cta-secondary:focus {
    outline: 2px solid rgba(255,107,0,0.12);
    outline-offset: 3px;
  }
}

/* Hero supporting text (non-intrusive) */
.hero-tagline {
  margin-top: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0.95;
}

.hero-subtitle {
  max-width: 760px;
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.85;
}

/* HERO TYPOGRAPHY FIXES */
.typewriter, .typewriter-orange { font-family: "Courier New", Courier, monospace; }

p.hero-tagline.typewriter { 
  font-size: 1.1rem; 
  color: #b0b0b0; 
  margin: 0.5rem 0; 
}

p.hero-range.typewriter-orange { 
  font-size: 0.9rem; 
  color: #ff6b00 !important; 
  margin: 0.3rem 0; 
}

p.tagline.typewriter { 
  font-size: 1rem; 
  color: #b0b0b0; 
  margin: 0.5rem 0 1rem; 
}

/* Restore orange lines above button */
.hero-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  width: 100%;
}
.hero-divider .line {
  flex: 1;
  max-width: 180px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff6b00, transparent);
}
/* Hide logo if present */
.hero-divider .chess-chip,
.hero-divider i {
  display: none !important;
}

/* terminal button hover glow (reserved) */

@keyframes logo-float {
  0%, 100% { 
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 5px 10px rgba(255, 107, 0, 0.3));
  }
  50% { 
    transform: translateY(-10px) scale(1.05);
    filter: drop-shadow(0 15px 25px rgba(255, 107, 0, 0.6));
  }
}

/* 3D Rotating Logo - NO GLOW */
@keyframes logo-3d-rotate {
  0% { transform: perspective(1000px) rotateY(0deg) rotateX(10deg); }
  25% { transform: perspective(1000px) rotateY(90deg) rotateX(10deg); }
  50% { transform: perspective(1000px) rotateY(180deg) rotateX(10deg); }
  75% { transform: perspective(1000px) rotateY(270deg) rotateX(10deg); }
  100% { transform: perspective(1000px) rotateY(360deg) rotateX(10deg); }
}

/* Header logo - circular with orange border, no glow */
header .logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #ff6b00;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
  padding: 2px;
  box-sizing: border-box;
  /* NO glow effects */
}

header .logo img:hover {
  border-color: #ff8533;
  /* NO glow on hover */
}

/* Menu bar style - dark pill shape */
.main-nav {
  background: rgba(30, 30, 30, 0.95);
  border-radius: 50px;
  padding: 8px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.main-nav ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav li a {
  color: #e0e0e0;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.main-nav li a:hover {
  background: rgba(255, 107, 0, 0.15);
  color: #ff6b00;
}

.main-nav li a.active {
  background: rgba(255, 107, 0, 0.25);
  color: #ff6b00;
}

/* Mobile menu button style */
.menu-toggle {
  background: rgba(255, 107, 0, 0.2);
  border: 1px solid rgba(255, 107, 0, 0.4);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #ff6b00;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background: rgba(255, 107, 0, 0.3);
}

/* Centered pill menu style */
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
}

#hamburger {
  display: none;
}

/* The pill container */

#navbar li {
  margin: 0;
  padding: 0;
}

/* Smaller bold font */

#navbar a:hover {
  background: rgba(255, 107, 0, 0.15);
  color: #ff6b00;
}

/* Centered pill menu style */
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
}

#hamburger {
  display: none;
}

/* The pill container */

#navbar li {
  margin: 0;
  padding: 0;
}

/* Smaller bold font */

#navbar a:hover {
  background: rgba(255, 107, 0, 0.15);
  color: #ff6b00;
}

/* Centered pill menu style */
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
}

#hamburger {
  display: none;
}

.nav {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* The pill container */
#navbar {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  background: rgba(30, 30, 30, 0.95);
  border-radius: 50px;
  /* NO border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

#navbar li {
  margin: 0;
  padding: 0;
}

/* Smaller bold font */
#navbar a {
  display: block;
  color: #a0a0a0;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.25s ease;
  white-space: nowrap;
}

#navbar a:hover {
  background: rgba(255, 107, 0, 0.15);
  color: #ff6b00;
}

/* Push hero content down */

/* Add extra margin to avatar */

/* Push hero content down - reduced */
.hero-inner {
  padding-top: 50px !important;
  padding-bottom: 30px !important;
  text-align: left !important;
  max-width: 960px !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Insight card styling */
.insight-card {
  background: rgba(30, 30, 30, 0.95);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 20px;
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.insight-list li {
  color: #c0c0c0;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 16px;
  padding-left: 24px;
  position: relative;
}

.insight-list li:last-child {
  margin-bottom: 0;
}

.insight-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ff6b00;
  font-weight: bold;
}

#about-title {
  font-size: 1.25rem;
  line-height: 1.4;
  color: #f0f0f0;
  margin-bottom: 12px;
}

/* Insight section new layout */

/* Combined card - both text and image inside, NO border */
.insight-card-combined {
  background: rgba(22, 22, 22, 0.98);
  border-radius: 16px;
  padding: 35px 45px;
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
  max-width: 1150px;
  margin: 0 auto;
}

/* Text side - smaller font */
.insight-text {
  flex: 1;
  min-width: 0;
}

.insight-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.insight-bullets li {
  color: #a8a8a8;
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 16px;
  padding-left: 22px;
  position: relative;
}

.insight-bullets li:last-child {
  margin-bottom: 0;
}

.insight-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ff6b00;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Image side - larger */
.insight-visual {
  flex: 0 0 48%;
  max-width: 520px;
}

.insight-visual img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .insight-card-combined {
    flex-direction: column;
    padding: 25px;
    gap: 30px;
  }
  
  .insight-visual {
    flex: 1;
    max-width: 100%;
    order: -1;
  }
  
  
}

/* ===== INSIGHT SECTION - FINAL STYLES ===== */

/* Headline centered above the card */

/* Combined card - text and image together, NO border */
.insight-card-combined {
  background: rgba(22, 22, 22, 0.98);
  border-radius: 16px;
  padding: 35px 45px;
  display: flex;
  gap: 50px;
  align-items: center;
  justify-content: space-between;
  max-width: 1150px;
  margin: 0 auto;
  border: none;
}

/* Text side */
.insight-text {
  flex: 1;
  min-width: 0;
}

/* Bullet list styling - smaller text */
.insight-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.insight-bullets li {
  color: #a8a8a8;
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 16px;
  padding-left: 22px;
  position: relative;
}

.insight-bullets li:last-child {
  margin-bottom: 0;
}

.insight-bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ff6b00;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Image side - larger (48% width) */
.insight-visual {
  flex: 0 0 48%;
  max-width: 520px;
}

.insight-visual img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .insight-card-combined {
    flex-direction: column;
    padding: 25px;
    gap: 30px;
  }
  
  .insight-visual {
    flex: 1;
    max-width: 100%;
    order: -1;
  }
  
  
}

/* ===== INSIGHT SECTION - STYLISH BULLETS ===== */

.insight-bullets li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #ff6b00;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
}

/* Alternative stylish options (uncomment your preference): */
/* Diamond: content: "◆"; font-size: 0.7rem; top: 0.3rem; */
/* Arrow: content: "→"; font-size: 0.9rem; */
/* Chevron: content: "›"; font-size: 1.2rem; */
/* Double arrow: content: "»"; font-size: 0.9rem; */

/* ===== HERO TEXT - WHITER/BRIGHTER ===== */

/* Agentic AI Architect - main tagline */
.hero-tagline.typewriter {
  color: #ffffff !important;
  font-weight: 500;
  opacity: 0.95;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* AI Engineering Services & Consulting - subtitle */
.tagline.typewriter {
  color: #e0e0e0 !important;
  font-weight: 400;
  opacity: 0.9;
}

/* Deterministic Core · Stochastic Range · Multi-Agent Scale - orange line */
.hero-range.typewriter-orange {
  color: #ff8533 !important;
  font-weight: 500;
  opacity: 1;
}

/* Ensure all hero text has better contrast */
.hero-inner p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ===== HERO ORANGE TEXT - LIGHTER/BRIGHTER ===== */

/* Deterministic Core · Stochastic Range · Multi-Agent Scale - lighter orange */
.hero-range.typewriter-orange {
  color: #ffaa66 !important;  /* lighter, peachy orange */
  font-weight: 500;
  opacity: 1;
  text-shadow: 0 0 15px rgba(255, 170, 102, 0.4);  /* soft glow */
}

/* Alternative: even lighter */
/* color: #ffbb88 !important; */  /* very light apricot */
/* color: #ff9966 !important; */  /* coral orange */
/* color: #ffb366 !important; */  /* light salmon */

/* ===== HERO ORANGE TEXT - LIGHTER & LARGER (STRONG OVERRIDE) ===== */

p.hero-range.typewriter-orange,
.hero-range,
.typewriter-orange,
.hero-inner .hero-range.typewriter-orange,
.hero-inner p.hero-range {
  color: #ffb366 !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  letter-spacing: 0.03em;
  text-shadow: 0 0 20px rgba(255, 179, 102, 0.5), 0 0 40px rgba(255, 107, 0, 0.2);
  margin: 0.6rem 0;
}

/* Even lighter alternative: #ffcc88 - pale gold */
/* Brighter alternative: #ffaa55 - bright amber */

/* ===== HERO ORANGE TEXT - TUNED (darker & smaller) ===== */

p.hero-range.typewriter-orange,
.hero-range,
.typewriter-orange,
.hero-inner .hero-range.typewriter-orange,
.hero-inner p.hero-range {
  color: #ff8533 !important;  /* darker orange - more saturated */
  font-size: 1.05rem !important;  /* smaller - closer to original */
  font-weight: 500 !important;  /* slightly lighter weight */
  opacity: 1 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 0 15px rgba(255, 133, 51, 0.4);
  margin: 0.5rem 0;
}

/* ===== NEW IMAGES STYLING ===== */

/* Insight section image */
.insight-visual img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  max-height: 350px;
}

/* Ensure images don't break layout */
img {
  max-width: 100%;
  height: auto;
}

/* ===== INSIGHT SECTION - TUNED STYLING ===== */

/* Smaller headline */

/* Lighter/more white bullet text */
.insight-bullets li {
  color: #e0e0e0 !important;  /* was #a8a8a8 - now much lighter */
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Bullet point color remains orange for contrast */
.insight-bullets li::before {
  color: #ff8533;
}

/* Mobile adjustment */
@media (max-width: 900px) {
  
  .insight-bullets li {
    font-size: 0.85rem;
  }
}

/* ===== INSIGHT SECTION - ARTICLE CARDS ===== */

.insight-articles {
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.insight-articles-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.article-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.article-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 107, 0, 0.1);
}

.article-card:hover::before {
  opacity: 1;
}

.article-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.article-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.3));
}

.article-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Courier New', monospace;
}

.article-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.article-summary {
  font-size: 0.85rem;
  color: #b0b0b0;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.article-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffaa66;
  background: rgba(255, 107, 0, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
}

.article-read {
  font-size: 0.8rem;
  color: #888;
  transition: all 0.3s ease;
}

.article-card:hover .article-read {
  color: #ffaa66;
  transform: translateX(4px);
}

/* Mobile responsive */
@media (max-width: 900px) {
  .article-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .article-card {
    padding: 20px;
  }
  
  .insight-articles-title {
    font-size: 0.9rem;
  }
}

/* ===== ARTICLE CARDS - UPDATED STYLING ===== */

.article-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.article-image {
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-card:hover .article-image img {
  transform: scale(1.05);
}

.article-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.article-number {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  font-family: 'Courier New', monospace;
}

.article-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}

.article-summary {
  font-size: 0.85rem;
  color: #b0b0b0;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dark gray tag background */
.article-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d0d0d0;
  background: rgba(60, 60, 60, 0.6);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.article-read {
  font-size: 0.8rem;
  color: #888;
  transition: all 0.3s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.article-card:hover .article-read {
  color: #ffaa66;
  transform: translateX(4px);
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .article-image {
    height: 120px;
  }
  
  .article-card-content {
    padding: 16px;
  }
}

/* ===== INSIGHT SECTION - FINAL TUNING ===== */

/* Pure white, smaller insight bullets */
.insight-bullets-white li {
  color: #ffffff !important;
  font-size: 0.88rem;
  line-height: 1.65;
}

/* Section title - white, sentence case */
.insight-articles-title {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff !important;
  margin-bottom: 30px;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Article cards - smaller text, no numbers */
.article-card-content {
  padding: 16px;
}

.article-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}

.article-summary {
  font-size: 0.8rem;
  color: #b0b0b0;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* Remove header with numbers */
.article-card-header {
  display: none;
}

.article-meta {
  padding-top: 12px;
}

.article-read {
  font-size: 0.75rem;
}

/* Image height slightly smaller */
.article-image {
  height: 120px;
}

/* ===== INSIGHT BULLETS - EXTRA SMALL ===== */

.insight-bullets li,
.insight-bullets-white li,
ul.insight-bullets li {
  color: #ffffff !important;
  font-size: 0.75rem !important;  /* 2 degrees smaller (was 0.88rem) */
  line-height: 1.6 !important;
  font-weight: 400;
}

/* Bullet point size adjustment */
.insight-bullets li::before {
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ===== SECTION TITLE - ARCHITECTURE PHILOSOPHY ===== */

.insight-articles-title {
  text-align: center;
  font-size: 1.4rem !important;  /* larger */
  font-weight: 700 !important;   /* bold */
  color: #ffffff !important;
  margin-bottom: 35px;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ===== INSIGHT SECTION - NUMBERED PILLARS ===== */

.insight-pillars {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 10px;
}

.insight-pillar {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.pillar-number {
  font-family: 'Courier New', 'Monaco', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ff8533;
  opacity: 0.8;
  min-width: 28px;
  padding-top: 2px;
  letter-spacing: 0.05em;
}

.pillar-content {
  flex: 1;
}

.pillar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.pillar-desc {
  font-size: 0.75rem;
  color: #c0c0c0;
  line-height: 1.6;
  font-weight: 400;
}

/* Mobile */
@media (max-width: 600px) {
  .insight-pillar {
    gap: 16px;
  }
  
  .pillar-number {
    font-size: 0.85rem;
    min-width: 24px;
  }
  
  .pillar-title {
    font-size: 0.8rem;
  }
  
  .pillar-desc {
    font-size: 0.72rem;
  }
}

/* ===== INSIGHT PILLARS - ALIGNED & CORRECTED ===== */

.insight-pillars {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 10px;
}

.insight-pillar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pillar-number {
  font-family: 'Courier New', 'Monaco', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ff8533;
  opacity: 0.9;
  min-width: 32px;
  text-align: left;
  padding-top: 0;
  line-height: 1.4;
}

.pillar-content {
  flex: 1;
  padding-top: 0;
}

.pillar-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.pillar-subtitle {
  font-weight: 400;
  color: #a0a0a0;
  margin-left: 4px;
}

.pillar-desc {
  font-size: 0.78rem;
  color: #b0b0b0;
  line-height: 1.65;
  font-weight: 400;
}

/* Larger image */
.insight-visual-large {
  flex: 0 0 55% !important;
  max-width: 600px !important;
}

.insight-visual-large img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .insight-pillar {
    gap: 12px;
  }
  
  .pillar-number {
    font-size: 0.8rem;
    min-width: 28px;
  }
  
  .pillar-title {
    font-size: 0.85rem;
  }
  
  .pillar-desc {
    font-size: 0.75rem;
  }
  
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
  }
}

/* ===== INSIGHT PILLARS - NO NUMBERS, VERTICAL LINES ===== */

.insight-card-combined {
  position: relative;
  padding: 35px 45px;
}

/* Vertical orange lines on both sides */
.insight-card-combined::before,
.insight-card-combined::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: linear-gradient(180deg, 
    transparent 0%,
    #ff6b00 20%,
    #ff8533 50%,
    #ff6b00 80%,
    transparent 100%
  );
  opacity: 0.6;
}

.insight-card-combined::before {
  left: 15px;
}

.insight-card-combined::after {
  right: 15px;
}

.insight-pillars {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 10px;
}

.insight-pillar {
  display: flex;
  align-items: flex-start;
}

.pillar-content {
  flex: 1;
}

/* Title and subtitle same style */
.pillar-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Subtitle same color and weight as title */
.pillar-subtitle {
  font-weight: 700;
  color: #ffffff;
  margin-left: 6px;
  opacity: 0.9;
}

.pillar-desc {
  font-size: 0.78rem;
  color: #b0b0b0;
  line-height: 1.65;
  font-weight: 400;
  padding-left: 0;
}

/* Mobile - hide vertical lines on small screens */
@media (max-width: 900px) {
  .insight-card-combined::before,
  .insight-card-combined::after {
    display: none;
  }
  
  .insight-card-combined {
    padding: 25px 20px;
  }
  
  .pillar-title {
    font-size: 0.9rem;
  }
  
  .pillar-desc {
    font-size: 0.75rem;
  }
}

/* ===== INSIGHT SECTION - REDUCED SPACING ===== */

/* Reduce gap between pillars */
.insight-pillars {
  gap: 18px !important;  /* was 32px */
  margin-top: 5px !important;
}

/* Reduce margin between title and desc */
.pillar-title {
  margin-bottom: 6px !important;  /* was 10px */
}

/* Reduce line height for tighter text */
.pillar-desc {
  line-height: 1.5 !important;  /* was 1.65 */
  margin-bottom: 0;
}

/* Reduce padding inside card */
.insight-card-combined {
  padding: 25px 35px !important;  /* was 35px 45px */
}

/* Reduce vertical lines position */
.insight-card-combined::before,
.insight-card-combined::after {
  top: 15% !important;  /* was 20% */
  bottom: 15% !important;
}

/* Reduce gap between text and image columns */
.insight-card-combined {
  gap: 30px !important;  /* was 50px */
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .insight-pillars {
    gap: 14px !important;
  }
  
  .insight-card-combined {
    padding: 20px 15px !important;
    gap: 20px !important;
  }
}

/* ===== INSIGHT SECTION - TIGHTER + TWO LINE HEADLINE ===== */

/* Two line headline styling */

/* Much tighter pillar spacing */
.insight-pillars {
  gap: 10px !important;
  margin-top: 0 !important;
}

.insight-pillar {
  margin-bottom: 0;
}

.pillar-title {
  margin-bottom: 4px !important;
  font-size: 0.9rem;
}

.pillar-subtitle {
  margin-left: 4px;
}

.pillar-desc {
  line-height: 1.4 !important;
  font-size: 0.76rem;
}

/* Tighter card */
.insight-card-combined {
  padding: 20px 30px !important;
  gap: 20px !important;
}

/* Section title closer to cards */
.insight-articles-title {
  margin-bottom: 20px !important;
  margin-top: 25px !important;
}

/* Article cards closer */
.article-cards-grid {
  gap: 12px !important;
}

.article-image {
  height: 100px !important;
}

.article-card-content {
  padding: 12px !important;
}

.article-title {
  margin-bottom: 4px !important;
}

.article-summary {
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
}

.article-meta {
  padding-top: 8px !important;
}

/* Mobile */
@media (max-width: 900px) {
  
  
  
  
  .insight-pillars {
    gap: 8px !important;
  }
  
  .insight-card-combined {
    padding: 15px !important;
  }
}

/* ===== VERTICAL ORANGE LINES - TALLER ===== */

.insight-card-combined::before,
.insight-card-combined::after {
  top: 8% !important;    /* was 15% - higher start */
  bottom: 8% !important; /* was 15% - lower end */
  width: 2px;
  opacity: 0.7;
}

/* Alternative: even taller lines */
/* top: 5% !important; */
/* bottom: 5% !important; */

/* Maximum height option - nearly full height */
/* top: 3% !important; */
/* bottom: 3% !important; */

/* ===== HEADLINE - MATCH ARCHITECTURE PHILOSOPHY STYLE ===== */

/* Mobile adjustment */
@media (max-width: 900px) {
  .headline-line1,
  
}

/* ===== REMOVE BLANK LINE, SHIFT TEXT UP ===== */

/* Tighten card padding at top */
.insight-card-combined {
  padding: 12px 30px 20px 30px !important;  /* reduce top padding */
}

/* Remove any top margin from pillars */
.insight-pillars {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* First pillar no top margin */
.insight-pillar:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pillar-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce vertical lines to match new height */
.insight-card-combined::before,
.insight-card-combined::after {
  top: 5% !important;
  bottom: 5% !important;
}

/* ===== AGGRESSIVE SPACE REMOVAL - SHIFT UP ===== */

/* Remove ALL space from headline */

/* Tighten card - minimal top padding */
.insight-card-combined {
  padding: 5px 30px 20px 30px !important;  /* 5px top only */
  margin-top: 0 !important;
}

/* Remove ALL space from pillars container */
.insight-pillars {
  margin: 0 !important;
  padding: 0 !important;
  gap: 10px !important;
}

/* First pillar - absolutely no top space */
.insight-pillar:first-child {
  margin-top: -5px !important;  /* negative margin to pull up */
  padding-top: 0 !important;
}

/* All pillars - no margins */
.insight-pillar {
  margin: 0 !important;
  padding: 0 !important;
}

/* Content - no top space */
.pillar-content {
  margin-top: -2px !important;
  padding-top: 0 !important;
}

/* Title - tight */
.pillar-title {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Description - tight */
.pillar-desc {
  margin: 0 !important;
  padding: 0 !important;
}

/* Vertical lines - adjust for new height */
.insight-card-combined::before,
.insight-card-combined::after {
  top: 2% !important;
  bottom: 5% !important;
}

/* ===== FIX: PROPER SPACING BETWEEN HEADLINE AND CARD ===== */

/* Add margin-bottom to headline to create space before the card */

/* Ensure card has proper top padding */
.insight-card-combined {
  padding: 30px 35px 25px 35px !important;  /* 30px top padding */
  margin-top: 0 !important;
}

/* Reset any negative margins that might be causing issues */
.insight-pillars {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 16px !important;  /* comfortable gap between pillars */
}

/* First pillar should have normal spacing */
.insight-pillar:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure content inside pillars has proper spacing */
.pillar-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pillar-title {
  margin: 0 0 6px 0 !important;  /* small gap between title and description */
  padding: 0 !important;
  font-size: 0.95rem !important;
}

.pillar-desc {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;
}

/* Vertical lines positioning */
.insight-card-combined::before,
.insight-card-combined::after {
  top: 12% !important;
  bottom: 12% !important;
}

/* ===== FIX: PROPER SPACING BETWEEN HEADLINE AND CARD ===== */

/* Add margin-bottom to headline to create space before the card */

/* Ensure card has proper top padding */
.insight-card-combined {
  padding: 30px 35px 25px 35px !important;  /* 30px top padding */
  margin-top: 0 !important;
}

/* Reset any negative margins that might be causing issues */
.insight-pillars {
  margin-top: 0 !important;
  padding-top: 0 !important;
  gap: 16px !important;  /* comfortable gap between pillars */
}

/* First pillar should have normal spacing */
.insight-pillar:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure content inside pillars has proper spacing */
.pillar-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pillar-title {
  margin: 0 0 6px 0 !important;  /* small gap between title and description */
  padding: 0 !important;
  font-size: 0.95rem !important;
}

.pillar-desc {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;
}

/* Vertical lines positioning */
.insight-card-combined::before,
.insight-card-combined::after {
  top: 12% !important;
  bottom: 12% !important;
}

/* ===== CLEAN: INSIGHT SECTION SPACING ===== */

/* Headline with proper spacing below */
.insight-headline {
  text-align: left;
  margin-bottom: 30px !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

.headline-line1 {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ff8533;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.headline-line2 {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Card with proper internal spacing */
.insight-card-combined {
  background: rgba(22, 22, 22, 0.98);
  border-radius: 16px;
  padding: 30px 40px !important;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1150px;
  margin: 0 auto;
  position: relative;
}

/* Vertical orange lines */
.insight-card-combined::before,
.insight-card-combined::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: linear-gradient(180deg, 
    transparent 0%,
    #ff6b00 20%,
    #ff8533 50%,
    #ff6b00 80%,
    transparent 100%
  );
  opacity: 0.6;
}

.insight-card-combined::before {
  left: 15px;
}

.insight-card-combined::after {
  right: 15px;
}

/* Pillars spacing */
.insight-pillars {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 !important;
  padding: 0 !important;
}

.insight-pillar {
  margin: 0 !important;
  padding: 0 !important;
}

.pillar-content {
  margin: 0 !important;
  padding: 0 !important;
}

.pillar-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.3;
}

.pillar-subtitle {
  font-weight: 700;
  color: #ffffff;
  margin-left: 6px;
  opacity: 0.9;
}

.pillar-desc {
  font-size: 0.78rem;
  color: #b0b0b0;
  line-height: 1.6;
  margin: 0 !important;
  padding: 0 !important;
}

/* Image sizing */
.insight-visual {
  flex: 0 0 52%;
  max-width: 550px;
}

.insight-visual img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Mobile */
@media (max-width: 900px) {
  .insight-headline {
    margin-bottom: 20px !important;
  }
  
  .headline-line1,
  .headline-line2 {
    font-size: 1.2rem;
  }
  
  .insight-card-combined {
    flex-direction: column;
    padding: 25px 20px !important;
    gap: 25px;
  }
  
  .insight-visual {
    flex: 1;
    max-width: 100%;
    order: -1;
  }
  
  .insight-card-combined::before,
  .insight-card-combined::after {
    display: none;
  }
}

/* ===== FINAL FIX: SPACE BETWEEN HEADLINE AND CARD ===== */

/* Add margin to create space between headline and the card below */
#about .container > h2.insight-headline {
  margin-bottom: 35px !important;
  margin-top: 10px !important;
}

/* Ensure the card has breathing room at top */
.insight-card-combined {
  margin-top: 0 !important;
  padding-top: 35px !important;
}

/* ===== FIX VERTICAL ORANGE LINES - TALLER ===== */

.insight-card-combined::before,
.insight-card-combined::after {
  top: 5% !important;      /* Start higher (was 10-12%) */
  bottom: 5% !important;   /* End lower (was 10-12%) */
  opacity: 0.75;
}

/* Alternative: Even taller - 3% from edges */
/* 
.insight-card-combined::before,
.insight-card-combined::after {
  top: 3% !important;
  bottom: 3% !important;
  opacity: 0.8;
}
*/

/* ===== SECTION TITLES - MATCH ARCHITECTURE PHILOSOPHY ===== */

/* Case Studies section title */
#portfolio .section-title,
#case-studies .section-title,
.section-title:contains("Case Studies") {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: left;
  letter-spacing: 0.01em;
}

/* Knowledge Base section title */
#articles .section-title,
#knowledge-base .section-title,
.section-title:contains("Knowledge Base") {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Generic section title styling to match Architecture Philosophy */
.section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* ===== FIX: Restore Hero Layout - Prevent Overlap ===== */

/* Reset any broken positioning */
.hero-tagline,
.hero-tagline.typewriter {
  position: relative !important;
  display: block !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #e0e0e0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

/* Space between name and tagline */
.hero-inner h1 {
  margin-bottom: 8px !important;
  font-size: 3rem !important;
}

/* The subtitle below */
.hero-inner .tw-wrapper,
.hero-inner p {
  margin-top: 5px !important;
}

/* ===== FIX: Insight Image Sizing - Full Image Visible ===== */

/* Image container - allow it to grow */
.insight-visual,
.insight-visual-large {
  flex: 0 0 48% !important;
  max-width: 520px !important;
  display: flex !important;
  align-items: flex-start !important; /* Align to top */
  justify-content: center !important;
}

/* Image - ensure full height is visible */
.insight-visual img,
.insight-visual-large img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important; /* Remove height limit */
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Card - allow natural height */
.insight-card-combined {
  padding: 25px 35px !important;
  align-items: flex-start !important; /* Align columns to top */
  height: auto !important;
  min-height: auto !important;
}

/* Text column - align with image top */
.insight-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
}

/* Pillars - compact spacing */
.insight-pillars {
  gap: 12px !important;
  margin-top: 0 !important;
}

/* Mobile - stack properly */
@media (max-width: 900px) {
  .insight-visual,
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
    order: -1 !important;
  }
  
  .insight-card-combined {
    flex-direction: column !important;
    padding: 20px !important;
  }
}

/* ===== FIX: Insight Image Size Constraint ===== */

/* Constrain the insight image to fit within the card */
.insight-visual,
.insight-visual-large {
  flex: 0 0 45% !important;
  max-width: 480px !important;
  max-height: 320px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.insight-visual img,
.insight-visual-large img {
  width: 100% !important;
  height: 100% !important;
  max-height: 320px !important;
  object-fit: contain !important;  /* or 'cover' if you want it cropped */
  border-radius: 8px !important;
}

/* Reduce card padding to give more room */
.insight-card-combined {
  padding: 25px 35px !important;
  gap: 30px !important;
  align-items: flex-start !important;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .insight-visual,
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
    max-height: 280px !important;
  }
  
  .insight-visual img,
  .insight-visual-large img {
    max-height: 280px !important;
  }
}

/* ===== FIX: Enlarge Insight Image ===== */

/* Make image container larger (55% instead of 45%) */
.insight-visual,
.insight-visual-large {
  flex: 0 0 55% !important;        /* Increased from 45% */
  max-width: 580px !important;      /* Increased from 480px */
  max-height: 400px !important;     /* Increased from 320px */
}

.insight-visual img,
.insight-visual-large img {
  width: 100% !important;
  height: 100% !important;
  max-height: 400px !important;     /* Match container */
  object-fit: contain !important;
}

/* Reduce text column to give more space to image */
.insight-text {
  flex: 0 0 40% !important;         /* Fixed width instead of flex: 1 */
  min-width: 0 !important;
}

/* Compress text to fit in smaller space */
.insight-pillars {
  gap: 12px !important;             /* Tighter gap between pillars */
}

.pillar-title {
  font-size: 0.88rem !important;    /* Slightly smaller title */
  margin-bottom: 4px !important;
  line-height: 1.25 !important;
}

.pillar-desc {
  font-size: 0.72rem !important;    /* Smaller description text */
  line-height: 1.4 !important;      /* Tighter line height */
}

/* Adjust card layout for better proportions */
.insight-card-combined {
  padding: 22px 30px !important;    /* Slightly reduced padding */
  gap: 25px !important;             /* Gap between text and image */
  align-items: center !important;   /* Vertically center both columns */
}

/* Mobile: stack normally */
@media (max-width: 900px) {
  .insight-visual,
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
    max-height: 350px !important;
  }
  
  .insight-text {
    flex: 1 !important;             /* Full width on mobile */
  }
  
  .insight-visual img,
  .insight-visual-large img {
    max-height: 350px !important;
  }
}

/* ===== FIX: Enlarge Insight Image ===== */

/* Make image container larger (55% instead of 45%) */
.insight-visual,
.insight-visual-large {
  flex: 0 0 55% !important;        /* Increased from 45% */
  max-width: 580px !important;      /* Increased from 480px */
  max-height: 400px !important;     /* Increased from 320px */
}

.insight-visual img,
.insight-visual-large img {
  width: 100% !important;
  height: 100% !important;
  max-height: 400px !important;     /* Match container */
  object-fit: contain !important;
}

/* Reduce text column to give more space to image */
.insight-text {
  flex: 0 0 40% !important;         /* Fixed width instead of flex: 1 */
  min-width: 0 !important;
}

/* Compress text to fit in smaller space */
.insight-pillars {
  gap: 12px !important;             /* Tighter gap between pillars */
}

.pillar-title {
  font-size: 0.88rem !important;    /* Slightly smaller title */
  margin-bottom: 4px !important;
  line-height: 1.25 !important;
}

.pillar-desc {
  font-size: 0.72rem !important;    /* Smaller description text */
  line-height: 1.4 !important;      /* Tighter line height */
}

/* Adjust card layout for better proportions */
.insight-card-combined {
  padding: 22px 30px !important;    /* Slightly reduced padding */
  gap: 25px !important;             /* Gap between text and image */
  align-items: center !important;   /* Vertically center both columns */
}

/* Mobile: stack normally */
@media (max-width: 900px) {
  .insight-visual,
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
    max-height: 350px !important;
  }
  
  .insight-text {
    flex: 1 !important;             /* Full width on mobile */
  }
  
  .insight-visual img,
  .insight-visual-large img {
    max-height: 350px !important;
  }
}

/* ===== FIX: Narrower card + larger image with 888.jpg ===== */

/* Reduce overall card max-width to bring columns closer */
.insight-card-combined {
  max-width: 900px !important;      /* Reduced from 1150px */
  padding: 20px 25px !important;    /* Reduced horizontal padding */
  gap: 20px !important;             /* Smaller gap between text/image */
  margin: 0 auto !important;
}

/* Make image column much larger (62%) */
.insight-visual,
.insight-visual-large {
  flex: 0 0 62% !important;         /* Increased from 55% */
  max-width: 560px !important;
  max-height: 420px !important;     /* Taller */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.insight-visual img,
.insight-visual-large img {
  width: 100% !important;
  height: 100% !important;
  max-height: 420px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* Shrink text column to minimum (35%) */
.insight-text {
  flex: 0 0 35% !important;
  min-width: 0 !important;
}

/* Compress text further to fit narrow column */
.insight-pillars {
  gap: 10px !important;
}

.pillar-title {
  font-size: 0.82rem !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
}

.pillar-desc {
  font-size: 0.68rem !important;    /* Very small but readable */
  line-height: 1.35 !important;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .insight-card-combined {
    max-width: 100% !important;
    padding: 20px !important;
  }
  
  .insight-visual,
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
    max-height: 380px !important;
  }
  
  .insight-text {
    flex: 1 !important;
  }
  
  .pillar-title {
    font-size: 0.9rem !important;
  }
  
  .pillar-desc {
    font-size: 0.8rem !important;
  }
}

/* ===== FIX: Black card background, closer columns, larger text ===== */

/* Make card background pure black */
.insight-card-combined {
  background: #000000 !important;   /* Pure black instead of rgba(22,22,22,0.98) */
  border: 1px solid rgba(255, 107, 0, 0.15) !important; /* Subtle orange border for definition */
  max-width: 900px !important;
  padding: 25px 20px !important;    /* Reduced horizontal padding */
  gap: 15px !important;             /* Smaller gap between text and image (was 20px) */
}

/* Image column slightly smaller to allow more text room */
.insight-visual,
.insight-visual-large {
  flex: 0 0 58% !important;         /* Slightly reduced from 62% */
  max-width: 540px !important;
  max-height: 420px !important;
}

/* Text column slightly larger for bigger fonts */
.insight-text {
  flex: 0 0 38% !important;         /* Increased from 35% */
  min-width: 0 !important;
}

/* Larger text with more line spacing */
.insight-pillars {
  gap: 14px !important;             /* Slightly more space between pillars */
}

.pillar-title {
  font-size: 0.95rem !important;    /* Larger title (was 0.82rem) */
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;      /* More line height */
  color: #ffffff !important;
}

.pillar-desc {
  font-size: 0.78rem !important;    /* Larger description (was 0.68rem) */
  line-height: 1.6 !important;      /* More line spacing for readability */
  color: #c0c0c0 !important;
}

/* Keep vertical orange lines subtle on black background */
.insight-card-combined::before,
.insight-card-combined::after {
  opacity: 0.4 !important;          /* Slightly more visible on black */
  width: 1px !important;            /* Thinner lines */
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .insight-card-combined {
    gap: 20px !important;           /* More gap on mobile when stacked */
    padding: 20px !important;
  }
  
  .insight-visual,
  .insight-visual-large {
    flex: 1 !important;
    max-width: 100% !important;
  }
  
  .insight-text {
    flex: 1 !important;
  }
  
  .pillar-title {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }
  
  .pillar-desc {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
}

/* ===== FIX: Restore both vertical orange lines ===== */

/* Ensure card has relative positioning for absolute pseudo-elements */
.insight-card-combined {
  position: relative !important;
}

/* Strong override for both vertical lines */
.insight-card-combined::before,
.insight-card-combined::after {
  content: '' !important;
  position: absolute !important;
  top: 8% !important;
  bottom: 8% !important;
  width: 2px !important;
  background: linear-gradient(180deg, 
    transparent 0%,
    #ff6b00 15%,
    #ff8533 50%,
    #ff6b00 85%,
    transparent 100%
  ) !important;
  opacity: 0.8 !important;
  display: block !important;
  z-index: 10 !important;
}

/* LEFT line - positioned at left edge */
.insight-card-combined::before {
  left: 12px !important;
  right: auto !important;
}

/* RIGHT line - positioned at right edge */
.insight-card-combined::after {
  right: 12px !important;
  left: auto !important;
}

/* Mobile: keep lines visible but thinner */
@media (max-width: 900px) {
  .insight-card-combined::before,
  .insight-card-combined::after {
    width: 1px !important;
    opacity: 0.6 !important;
    top: 5% !important;
    bottom: 5% !important;
  }
  
  .insight-card-combined::before {
    left: 8px !important;
  }
  
  .insight-card-combined::after {
    right: 8px !important;
  }
}

/* ===== FIX: Shift text right, away from left orange line ===== */

/* Add left padding to text column to shift it right */
.insight-text {
  padding-left: 25px !important;    /* Shift text right by 25px */
  box-sizing: border-box !important;
}

/* Also adjust the card padding to balance the layout */
.insight-card-combined {
  padding: 25px 15px 25px 20px !important;  /* Reduced left padding since text has its own */
}

/* Ensure pillars don't get too cramped with the new padding */
.insight-pillars {
  padding-left: 5px !important;     /* Small additional indent for visual hierarchy */
}

/* Mobile: reduce padding on small screens */
@media (max-width: 900px) {
  .insight-text {
    padding-left: 15px !important;  /* Less padding on mobile */
  }
  
  .insight-card-combined {
    padding: 20px 15px !important;
  }
}

/* ===== FIX: Increase space between left orange line and text ===== */

/* Increase left padding to shift text further right */
.insight-text {
  padding-left: 35px !important;    /* Increased from 25px to 35px */
}

/* Ensure card has enough left padding to accommodate */
.insight-card-combined {
  padding: 25px 15px 25px 15px !important;  /* Reduced left padding since text has more */
}

/* ===== FIX: Stronger override for left padding ===== */

/* Target the text container inside the card with high specificity */
#about .insight-card-combined .insight-text {
  padding-left: 40px !important;    /* Increased to 40px */
  padding-right: 10px !important;   /* Balance right side */
}

/* Also ensure the card itself doesn't have conflicting padding */
#about .insight-card-combined {
  padding-left: 10px !important;    /* Minimal left padding on card */
}

/* ===== FIX: Move vertical orange lines closer to center ===== */

/* Move LEFT orange line to the right (from 12px to 35px) */
.insight-card-combined::before {
  left: 35px !important;            /* Was 12px, now 35px from left edge */
}

/* Move RIGHT orange line to the left (from 12px to 35px) */
.insight-card-combined::after {
  right: 35px !important;           /* Was 12px, now 35px from right edge */
}

/* Shift text right with the left line */
.insight-text {
  padding-left: 55px !important;    /* Increased from 40px to match new line position + spacing */
  padding-right: 10px !important;
}

/* Shift image left with the right line */
.insight-visual,
.insight-visual-large {
  padding-right: 25px !important;   /* Add right padding to shift image left */
  padding-left: 5px !important;
}

/* Adjust card padding to accommodate */
.insight-card-combined {
  padding: 25px 20px !important;    /* Balanced padding */
}

/* ===== FIX: Reduce gap between text and image, wider text column ===== */

/* Reduce gap between columns */
.insight-card-combined {
  gap: 15px !important;             /* Reduced from ~30px to 15px */
  padding: 25px 35px !important;    /* Adjusted padding */
}

/* Make text column wider (42% instead of 38%) */
.insight-text {
  flex: 0 0 42% !important;         /* Wider text column */
  padding-left: 50px !important;    /* Keep space from left orange line */
  padding-right: 5px !important;
}

/* Make image column slightly narrower (52% instead of 58%) */
.insight-visual,
.insight-visual-large {
  flex: 0 0 52% !important;         /* Narrower image column */
  padding-right: 20px !important;   /* Less right padding */
  padding-left: 0 !important;
}

/* Compress text slightly to fit more per line */
.pillar-title {
  font-size: 0.92rem !important;    /* Slightly smaller to fit more text */
  line-height: 1.35 !important;     /* Tighter line height */
  margin-bottom: 5px !important;
}

.pillar-desc {
  font-size: 0.76rem !important;    /* Slightly smaller description */
  line-height: 1.5 !important;      /* Comfortable line spacing */
  max-width: 95% !important;        /* Use more of the available width */
}

/* Reduce space between pillars to compensate for wider text */
.insight-pillars {
  gap: 12px !important;
}

/* ===== 3D TILT + SPOTLIGHT EFFECT ON INSIGHT CARD ===== */

/* Container for 3D perspective */
#about {
  perspective: 1000px;
}

/* The card with 3D transform capability */
.insight-card-combined {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Spotlight effect layer */
.insight-card-combined::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 107, 0, 0.15) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 100;
  border-radius: inherit;
}

/* Show spotlight on hover */
.insight-card-combined:hover::before {
  opacity: 1;
}

/* Floating animation for text elements */
.insight-text {
  transform: translateZ(20px);
  transition: transform 0.1s ease-out;
}

.insight-visual {
  transform: translateZ(30px);
  transition: transform 0.1s ease-out;
}

/* Enhanced shadow on hover */
.insight-card-combined:hover {
  box-shadow: 
    0 25px 50px -12px rgba(255, 107, 0, 0.25),
    0 0 0 1px rgba(255, 107, 0, 0.1) !important;
}

/* Mobile: disable effects for performance */
@media (max-width: 900px) {
  .insight-card-combined {
    transform: none !important;
  }
  .insight-card-combined::before {
    display: none;
  }
}

/* ===== FIX: Portfolio View Case Study button background to pure black ===== */

/* Target portfolio section specifically with high specificity */
#portfolio .cards .card .card-actions .cta-secondary,
#portfolio .portfolio-grid .card .card-actions .cta-secondary,
#portfolio .big-cards .card .card-actions .cta-secondary,
#portfolio .small-cards .card .card-actions .cta-secondary {
  background: #0d0d0d !important;   /* Pure black - matches Chat button */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #b8b8b8 !important;
  transition: all 0.2s ease !important;
}

/* Hover state - subtle orange border and text */
#portfolio .cards .card .card-actions .cta-secondary:hover,
#portfolio .portfolio-grid .card .card-actions .cta-secondary:hover {
  background: #0d0d0d !important;   /* Keep black on hover */
  border-color: #ff6b00 !important; /* Orange border on hover */
  color: #ff6b00 !important;        /* Orange text on hover */
  transform: translateY(-2px) !important;
}

/* ===== DEFINITIVE FIX: Portfolio View Case Study Button Background ===== */

/* Override ALL previous rules with maximum specificity and !important */
#portfolio .cards .card .card-actions a.cta-secondary,
#portfolio .portfolio-grid .card .card-actions a.cta-secondary,
#portfolio .big-cards .card .card-actions a.cta-secondary,
#portfolio .small-cards .card .card-actions a.cta-secondary,
#portfolio .cards .card-actions .cta-secondary {
  background: #0d0d0d !important;           /* Pure black - matches Chat button */
  background-color: #0d0d0d !important;     /* Double declaration for safety */
  background-image: none !important;        /* Remove any gradients */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #b8b8b8 !important;
}

/* Hover state - keep black background, only change border/text color */
#portfolio .cards .card .card-actions a.cta-secondary:hover,
#portfolio .portfolio-grid .card .card-actions a.cta-secondary:hover {
  background: #0d0d0d !important;           /* Keep black on hover */
  background-color: #0d0d0d !important;
  background-image: none !important;
  border-color: #ff6b00 !important;         /* Orange border on hover */
  color: #ff6b00 !important;                /* Orange text on hover */
  transform: translateY(-2px) !important;
}

/* Focus state - MUST override the transparent rule at line ~1819 */
#portfolio .cards .card .card-actions a.cta-secondary:focus {
  background: #0d0d0d !important;           /* Keep black on focus */
  background-color: #0d0d0d !important;
  background-image: none !important;
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
  outline: 2px solid rgba(255, 107, 0, 0.3) !important;
  outline-offset: 2px !important;
}

/* Active/Click state */
#portfolio .cards .card .card-actions a.cta-secondary:active {
  background: #0d0d0d !important;
  background-color: #0d0d0d !important;
  transform: translateY(0) !important;
}

/* ===== 3D TILT + SPOTLIGHT EFFECT FOR PORTFOLIO CASE STUDY CARDS ===== */

/* Container for 3D perspective */
#portfolio {
  perspective: 1200px;
}

/* Portfolio cards with 3D transform capability */
#portfolio .cards .card,
#portfolio .portfolio-grid .card,
#portfolio .big-cards .card,
#portfolio .small-cards .card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Bright grey spotlight effect layer */
#portfolio .cards .card::before,
#portfolio .portfolio-grid .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(235, 236, 240, 0.12) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
}

/* Show spotlight on hover */
#portfolio .cards .card:hover::before,
#portfolio .portfolio-grid .card:hover::before {
  opacity: 1;
}

/* Floating animation for card content */
#portfolio .cards .card .card-body,
#portfolio .cards .card .card-icon,
#portfolio .cards .card .card-actions {
  transform: translateZ(15px);
  transition: transform 0.15s ease-out;
}

/* Enhanced bright grey shadow on hover */
#portfolio .cards .card:hover {
  box-shadow: 
    0 25px 50px -12px rgba(235, 236, 240, 0.15),
    0 0 0 1px rgba(235, 236, 240, 0.08) !important;
}

/* Mobile: disable effects for performance */
@media (max-width: 900px) {
  #portfolio .cards .card,
  #portfolio .portfolio-grid .card {
    transform: none !important;
  }
  #portfolio .cards .card::before,
  #portfolio .portfolio-grid .card::before {
    display: none;
  }
  #portfolio .cards .card .card-body,
  #portfolio .cards .card .card-icon,
  #portfolio .cards .card .card-actions {
    transform: none !important;
  }
}

/* ===== FIX 1: Services Cards - Lighter Button Borders ===== */
#services .cards .card .card-actions .cta-secondary,
#services .cards .card .card-actions .service-btn,
#services .cards .card .card-actions a.service-learn,
#services .cards .card .card-actions button.service-btn {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#services .cards .card .card-actions .cta-secondary:hover,
#services .cards .card .card-actions .service-btn:hover {
  border-color: rgba(255, 107, 0, 0.5) !important;
}

#services .cards .card .card-actions .cta-secondary:focus,
#services .cards .card .card-actions .service-btn:focus {
  border: 1px solid rgba(255, 107, 0, 0.6) !important;
  outline: 2px solid rgba(255, 107, 0, 0.2) !important;
  outline-offset: 2px !important;
}

/* ===== FIX 2: Services Cards - Distinct Icons ===== */
#services .cards .card .card-icon { display: block !important; }
#services .card.service-card .card-icon {
  font-size: 1.6rem; color: #ff6b00;
  width: 50px; height: 50px; margin: 0 auto 0.8rem auto;
  background: rgba(255, 107, 0, 0.1); border-radius: 50%;
  border: 1px solid rgba(255, 107, 0, 0.2);
  display: flex; justify-content: center; align-items: center;
  transition: all 0.3s ease;
}
#services .card.service-card:hover .card-icon {
  background: rgba(255, 107, 0, 0.2);
  border-color: rgba(255, 107, 0, 0.4);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.2);
}

/* ===== FIX 2: Services Cards - Inline Icons (CORRECTED) ===== */
#services .card.service-card .card-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  color: #ff6b00;
  font-size: 1.1rem;
  vertical-align: middle;
}
#services .card.service-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#services .card.service-card:hover .card-icon {
  transform: scale(1.1);
  color: #ff8533;
}

/* ===== SERVICES CARDS - CENTERED SMALLER TITLES ===== */
#services .cards .service-card .card-body {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
#services .cards .service-card .card-body h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 auto 0.5rem auto !important;
  line-height: 1.3 !important;
  width: 100% !important;
}
#services .cards .service-card .card-body p {
  font-size: 0.85rem !important;
  text-align: center !important;
  margin: 0 auto !important;
  line-height: 1.4 !important;
  color: #b0b0b0 !important;
  max-width: 90% !important;
}
#services .cards .service-card .card-actions {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}
@media (max-width: 720px) {
  #services .cards .service-card .card-body h3 { font-size: 1rem !important; }
  #services .cards .service-card .card-body p { font-size: 0.8rem !important; }
}

/* ===== SERVICES CARDS - CENTERED TITLES FIX ===== */
#services .cards .card.service-card .card-body { text-align: center !important; align-items: center !important; }
#services .cards .card.service-card .card-body h3 { font-size: 1.15rem !important; text-align: center !important; margin: 0 auto 0.6rem auto !important; width: 100% !important; }
#services .cards .card.service-card .card-body p { font-size: 0.9rem !important; text-align: center !important; }
#services .cards .card.service-card .card-body p strong { color: #ff8533 !important; display: block !important; margin-bottom: 0.4rem !important; }
#services .cards .card.service-card .card-actions { justify-content: center !important; }

/* ===== SERVICES CARDS - CENTERED TITLES ===== */
#services .cards .service-card .card-body {
  text-align: center !important;
  align-items: center !important;
}
#services .cards .service-card .card-body h3 {
  font-size: 1.1rem !important;
  text-align: center !important;
  margin: 0 auto 0.5rem auto !important;
  width: 100% !important;
}
#services .cards .service-card .card-body p {
  font-size: 0.9rem !important;
  text-align: center !important;
  margin: 0 auto !important;
}
#services .cards .service-card .card-body p strong {
  color: #ff6b00 !important;
  display: block !important;
  margin-bottom: 0.3rem !important;
  font-size: 0.95rem !important;
}
#services .cards .service-card .card-actions {
  justify-content: center !important;
}

/* ===== SERVICES CARDS - CLEAN FIX (Auto-applied) ===== */

/* Remove conflicting icon hide rule */
#services .cards .card .card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 0.8rem auto !important;
  background: rgba(255, 107, 0, 0.12) !important;
  border: 1px solid rgba(255, 107, 0, 0.25) !important;
  border-radius: 50% !important;
  color: #ff6b00 !important;
  font-size: 1.2rem !important;
}

/* Card grid layout */
#services .cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

#services .card.service-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 1.4rem !important;
  background: rgba(20, 20, 20, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  min-height: 260px !important;
}

#services .card.service-card:hover {
  border-color: rgba(255, 107, 0, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

/* Card body text */
#services .card.service-card .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

#services .card.service-card .card-body h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 0.4rem 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

#services .card.service-card .card-body p {
  font-size: 0.88rem !important;
  color: #a8a8a8 !important;
  line-height: 1.5 !important;
  margin: 0 0 0.3rem 0 !important;
  text-align: center !important;
}

#services .card.service-card .card-body p strong {
  color: #ff8533 !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
  font-size: 0.9rem !important;
}

/* Button at bottom */
#services .card.service-card .card-actions {
  margin-top: auto !important;
  padding-top: 0.8rem !important;
  width: 100% !important;
  text-align: center !important;
}

#services .card.service-card .cta-secondary {
  display: inline-block !important;
  padding: 0.45rem 1.1rem !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: #a8a8a8 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#services .card.service-card:hover .cta-secondary {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
}

/* Responsive */
@media (max-width: 900px) {
  #services .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  #services .cards {
    grid-template-columns: 1fr !important;
  }
  #services .card.service-card {
    min-height: auto !important;
    padding: 1.2rem !important;
  }
}

/* ===== FIX: Blueprint Card Title Alignment ===== */

/* Ensure all service cards have consistent structure */
#services .card.service-card {
  min-height: 280px !important;
  justify-content: flex-start !important;
  padding-top: 1.5rem !important;
}

/* Card icon spacing */
#services .card.service-card .card-icon {
  margin-bottom: 0.8rem !important;
  flex-shrink: 0 !important;
}

/* Card body should fill available space */
#services .card.service-card .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

/* Ensure title is always visible and properly styled */
#services .card.service-card .card-body h3 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 1.3 !important;
  min-height: 1.5rem !important;
}

/* First card (Blueprint) specific fix if needed */
#services .cards .card.service-card:first-child .card-body h3 {
  color: #ffffff !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Push actions to bottom */
#services .card.service-card .card-actions {
  margin-top: auto !important;
  padding-top: 1rem !important;
  width: 100% !important;
  text-align: center !important;
}

/* ===== STANDARDIZE ALL SERVICE CARDS TO BLUEPRINT LAYOUT ===== */

/* All service cards - identical structure */
#services .cards .card.service-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: 1.8rem 1.2rem !important;
  background: rgba(20, 20, 20, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  min-height: 240px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* Icon styling - all identical */
#services .cards .card.service-card .card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 1rem auto !important;
  background: rgba(255, 107, 0, 0.12) !important;
  border: 1px solid rgba(255, 107, 0, 0.25) !important;
  border-radius: 50% !important;
  color: #ff6b00 !important;
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

/* Card body - flex to push button down */
#services .cards .card.service-card .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

/* Title - all identical styling */
#services .cards .card.service-card .card-body h3 {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Subtitle - short, clean like Blueprint */
#services .cards .card.service-card .card-body p {
  font-size: 0.9rem !important;
  color: #b0b0b0 !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* NO strong tags in subtitles - remove orange labels */
#services .cards .card.service-card .card-body p strong {
  color: inherit !important;
  font-weight: inherit !important;
  display: inline !important;
}

/* Button at bottom - consistent */
#services .cards .card.service-card .card-actions {
  margin-top: auto !important;
  padding-top: 1rem !important;
  width: 100% !important;
  text-align: center !important;
}

#services .cards .card.service-card .card-actions .cta-secondary {
  display: inline-block !important;
  padding: 0.5rem 1.2rem !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: #a0a0a0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#services .cards .card.service-card:hover .card-actions .cta-secondary {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
}

/* Hover effect */
#services .cards .card.service-card:hover {
  border-color: rgba(255, 107, 0, 0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Grid layout */
#services .cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Responsive */
@media (max-width: 900px) {
  #services .cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  #services .cards {
    grid-template-columns: 1fr !important;
  }
  #services .cards .card.service-card {
    min-height: auto !important;
    padding: 1.5rem 1rem !important;
  }
}

/* ===== FIX: FORCE ALL SERVICE CARD TITLES TO CENTER ===== */

/* Override the display:flex that breaks text-align */
#services .card.service-card h3,
#services .cards .card.service-card .card-body h3,
#services .cards .service-card .card-body h3 {
  display: block !important;           /* Change from flex to block */
  text-align: center !important;       /* Center the text */
  justify-content: center !important;  /* For flex fallback */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}

/* Ensure card body centers its children */
#services .cards .card.service-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;      /* Center children horizontally */
  justify-content: flex-start !important;
  text-align: center !important;
  width: 100% !important;
}

/* Override the huge margin-bottom rule */
#services .cards .service-card .card-body h3 {
  margin-bottom: 0.5rem !important;    /* Override the 3rem !important */
}

/* Multi-line title fix - ensure text stays centered when wrapping */
#services .cards .card.service-card .card-body h3 {
  text-align: center !important;
  align-self: center !important;
}

/* ===== SERVICE ICONS - MATCH CASE STUDY STYLE (NO CIRCLE) ===== */

/* Remove circle background from service card icons */
#services .cards .card.service-card .card-icon,
#services .card.service-card .card-icon {
  background: transparent !important;        /* Remove orange circle bg */
  border: none !important;                   /* Remove border */
  width: auto !important;                    /* Auto width */
  height: auto !important;                   /* Auto height */
  margin: 0 auto 0.8rem auto !important;     /* Keep centering */
  padding: 0 !important;                     /* Remove padding */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Style the icon itself - larger and orange like case studies */
#services .cards .card.service-card .card-icon i,
#services .card.service-card .card-icon i {
  font-size: 2rem !important;                /* Larger icon */
  color: #ff6b00 !important;                 /* Orange color */
  filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.3)) !important; /* Subtle glow */
  transition: all 0.3s ease !important;
}

/* Hover effect - brighten icon */
#services .cards .card.service-card:hover .card-icon i {
  color: #ff8533 !important;                 /* Lighter orange on hover */
  filter: drop-shadow(0 0 12px rgba(255, 107, 0, 0.5)) !important; /* Stronger glow */
  transform: scale(1.1) !important;
}

/* Ensure card structure still works without circle */
#services .cards .card.service-card {
  padding-top: 1.5rem !important;            /* Space for icon at top */
}

/* Blueprint chess knight - special styling if needed */
#services .cards .card.service-card:first-child .card-icon i,
#services .cards .card.service-card[href*="quick-audit"] .card-icon i {
  /* Could add specific styling for knight icon here */
  font-size: 2.2rem !important;              /* Slightly larger for knight */
}

/* ===== SERVICE ICONS - REDUCE SIZE TO MATCH CASE STUDIES ===== */

/* Reduce icon size to match case study cards */
#services .cards .card.service-card .card-icon i,
#services .card.service-card .card-icon i {
  font-size: 1.4rem !important;                /* Reduced from 2rem to match case studies */
  color: #ff6b00 !important;                   /* Orange color */
  filter: drop-shadow(0 0 6px rgba(255, 107, 0, 0.25)) !important; /* Subtle glow */
  transition: all 0.3s ease !important;
}

/* Blueprint chess knight - slightly larger for emphasis */
#services .cards .card.service-card:first-child .card-icon i,
#services .cards .card.service-card[href*="quick-audit"] .card-icon i {
  font-size: 1.5rem !important;                /* Slightly larger knight */
}

/* The Nexus project-diagram icon */
#services .cards .card.service-card[href*="deploy-scale"] .card-icon i,
#services .cards .card.service-card:nth-child(3) .card-icon i {
  font-size: 1.4rem !important;                /* Same size as others */
}

/* Hover effect */
#services .cards .card.service-card:hover .card-icon i {
  color: #ff8533 !important;                   /* Lighter orange */
  filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.4)) !important;
  transform: scale(1.08) !important;
}

/* ===== CHANGE ORANGE HEADLINE TO WHITE ===== */

/* Target the insight headline - change from orange to white */
.insight-headline,
.headline-line1,
.headline-line2,
#about .insight-headline,
#about .headline-line1,
#about .headline-line2,
.section#about .insight-headline,
.section#about .headline-line1 {
  color: #ffffff !important;
}

/* Specifically target the first line if it's orange */
.headline-line1 {
  color: #ffffff !important;           /* Change from #ff8533/orange to white */
}

/* Second line stays white (was already white) */
.headline-line2 {
  color: #ffffff !important;
}

/* Ensure both lines are white */
#about h2.insight-headline span {
  color: #ffffff !important;
}

/* ===== SECTION SUBTITLES ===== */

/* Architecture Philosophy subtitle */
.insight-articles-title::after,
#about .insight-articles-title::after {
  content: "Architectures that Learn, not Rules that Break";
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #a0a0a0;
  margin-top: 0.4rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Case Studies subtitle */
#portfolio .section-title::after,
#portfolio-title::after {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #a0a0a0;
  margin-top: 0.4rem;
  text-transform: none;
  letter-spacing: 0.01em;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* Knowledge Base subtitle */
#articles .section-title::after,
#articles-title::after {
  content: "Foundation Theory Speeds Iteration. Understand Once, Move Faster Forever";
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #a0a0a0;
  margin-top: 0.4rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ===== SECTION SUBTITLE STYLING ===== */
.section-subtitle {
  text-align: left;
  font-size: 0.9rem;
  font-weight: 400;
  color: #a0a0a0;
  margin-top: 0.3rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* Specific adjustments */
#portfolio .section-subtitle {
  max-width: 600px;
}

/* ===== SUBTITLES ===== */

.section-subtitle {
  font-size: 1.1rem;
  font-weight: 400;
  font-style: normal;
  color: #8b949e;
  text-align: left;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: none;
}

/* Specific targeting for each subtitle */
#about .section-subtitle,
#about .insight-articles-title + .section-subtitle {
  max-width: 600px;
}

#portfolio .section-subtitle {
  max-width: 700px;
}

#articles .section-subtitle {
  max-width: 600px;
}

/* If using ::after pseudo-elements */
.insight-articles-title::after {
  content: "Architectures that Learn, not Rules that Break" !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

#portfolio .section-title::after {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

#articles .section-title::after {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* ===== TITLE SENTENCES - ONE DEGREE LARGER ===== */

/* Main headline: Real Agentic Systems Reason and Learn within Adaptive Architecture */
.headline-line2,
.insight-headline .headline-line2,
#about .headline-line2,
.section#about .headline-line2 {
  font-size: 1.55rem !important;        /* One degree larger (was ~1.4rem) */
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
}

/* ===== AGGRESSIVE: LARGER TITLE SENTENCES ===== */

/* Headline line 2 - larger */
.headline-line2 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
}

/* Services section subtitle - target various structures */
/* ===== SERVICES TITLE - MAKE SECOND LINE LARGER ===== */

/* Target the h2 and make all text larger */
#services-title.section-title {
  font-size: 1.4rem !important;        /* Base size larger */
  line-height: 1.4 !important;
}

/* The second line (after <br>) - make it larger */
#services-title.section-title br {
  display: block !important;
  content: "" !important;
  margin-bottom: 0.3rem !important;
}

/* Target text nodes - make second line stand out */
#services-title {
  font-size: 1.3rem !important;
}

/* Use ::first-line for first part, then target rest */
#services-title.section-title::first-line {
  font-size: 1.2rem !important;
  font-weight: 500 !important;
}

/* Alternative: wrap second line in span via CSS content */
#services-title.section-title {
  position: relative !important;
}

/* Force both lines to be larger */
#services-title.section-title {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
}

/* Services subtitle span - larger and bold */
#services-title .services-subtitle,
.services-subtitle {
  font-size: 1.3rem !important;        /* One degree larger */
  font-weight: 600 !important;         /* Bold */
  color: #ffffff !important;
  display: block !important;
  margin-top: 0.2rem !important;
}

/* ===== REMOVE TILT/ROTATE AND SHADOW FROM CASE STUDY CARDS ===== */

/* Remove transform/tilt effects from case study cards */
#portfolio .small-cards .card,
#portfolio .cards .card,
#portfolio .portfolio-grid .card {
  transform: none !important;           /* Remove any rotation/tilt */
  transform-style: flat !important;     /* Disable 3D transforms */
  transition: box-shadow 0.3s ease !important; /* Keep only subtle shadow transition */
}

/* Remove hover transform effects */
#portfolio .small-cards .card:hover,
#portfolio .cards .card:hover,
#portfolio .portfolio-grid .card:hover {
  transform: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; /* Subtle shadow only */
}

/* Remove card actions transform */
#portfolio .cards .card .card-actions,
#portfolio .portfolio-grid .card .card-actions {
  transform: none !important;
  transform: translateZ(0) !important;
}

/* Remove any rotate/skew effects */
#portfolio .cards .card *,
#portfolio .portfolio-grid .card * {
  transform: none !important;
}

/* Override any JavaScript-added transforms */
#portfolio .card[style*="transform"],
#portfolio .card[style*="rotate"] {
  transform: none !important;
}

/* ===== REMOVE ALL 3D EFFECTS FROM CASE STUDY CARDS ===== */

/* Force flat cards - no transform */
#portfolio .cards .card,
#portfolio .portfolio-grid .card,
#portfolio .big-cards .card,
#portfolio .small-cards .card,
#portfolio a.card {
  transform: none !important;
  transform-style: flat !important;
  perspective: none !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Remove hover transform */
#portfolio .cards .card:hover,
#portfolio .portfolio-grid .card:hover,
#portfolio .big-cards .card:hover,
#portfolio .small-cards .card:hover,
#portfolio a.card:hover {
  transform: none !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important; /* Subtle shadow only */
}

/* Remove any inline transforms added by JS */
#portfolio .card[style*="transform"],
#portfolio .card[style*="rotate"] {
  transform: none !important;
}

/* Ensure card actions don't have 3D transforms */
#portfolio .cards .card .card-actions,
#portfolio .portfolio-grid .card .card-actions {
  transform: none !important;
  transform: translateZ(0) !important;
}

/* Remove spotlight effect variables */
#portfolio .cards .card,
#portfolio .portfolio-grid .card {
  --mouse-x: 50% !important;
  --mouse-y: 50% !important;
}

/* ===== CASE STUDIES - NEW AGENTIC DESIGN ===== */

#portfolio {
  padding: 40px 0;
}

/* Solutions: reuses .arch-layout / .arch-left / .arch-right from Architecture Philosophy */
.arch-right .domain-tabs {
  margin-bottom: 32px;
}

.arch-right .domain-panels {
  position: relative;
}

#portfolio .section-title {
  text-align: left;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

#portfolio .section-subtitle {
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 30px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  max-width: 750px;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-card {
  background: rgba(25, 25, 25, 0.95);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}

.cs-card--clinical {
  border-left: 3px solid rgba(45, 212, 191, 0.4);
}

.cs-card--biomedical {
  border-left: 3px solid rgba(251, 146, 60, 0.4);
}

.cs-card--business {
  border-left: 3px solid rgba(96, 165, 250, 0.4);
}

.cs-card--flagship {
  border: 1px solid rgba(255, 107, 0, 0.3);
  box-shadow: 0 8px 32px rgba(255, 107, 0, 0.15);
}

.cs-card--flagship::before {
  content: "FLAGSHIP";
  position: absolute;
  top: 12px;
  right: -28px;
  background: linear-gradient(135deg, #ff6b00, #ff8533);
  color: #000;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 30px;
  transform: rotate(45deg);
  letter-spacing: 0.05em;
}

.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 107, 0, 0.4);
}

.cs-card--clinical:hover {
  border-color: rgba(45, 212, 191, 0.6);
}

.cs-card--biomedical:hover {
  border-color: rgba(251, 146, 60, 0.6);
}

.cs-card--business:hover {
  border-color: rgba(96, 165, 250, 0.6);
}

.cs-card--flagship:hover {
  border-color: rgba(255, 107, 0, 0.6);
  box-shadow: 0 20px 40px rgba(255, 107, 0, 0.25);
}

.cs-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cs-card-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cs-icon {
  font-size: 1.6rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  flex-shrink: 0;
}

.cs-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
  line-height: 1.3;
}

.cs-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.cs-tags span {
  font-size: 0.68rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.cs-oneline {
  color: #c0c0c0;
  margin: 8px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cs-loop {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px;
  display: grid;
  gap: 5px;
}

.cs-loop li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: #b0b0b0;
  line-height: 1.4;
}

.cs-loop li strong {
  width: 70px;
  color: #f0f0f0;
  font-weight: 600;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.cs-loop li span {
  flex: 1;
}

.cs-impact {
  margin: 8px 0;
  color: #e0e0e0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.cs-impact strong {
  color: #ff8533;
  font-weight: 600;
}

.cs-cta-row {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
}

.btn-primary {
  background: #0d0d0d;
  color: #e6f3ff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-primary:hover {
  border-color: #ff6b00;
  color: #ff6b00;
  transform: translateY(-2px);
}

.btn-ghost {
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.12);
  color: #c0c0c0;
}

.cs-note {
  font-size: 0.7rem;
  color: #888;
  margin-top: 10px;
  line-height: 1.4;
  font-style: italic;
}

@media (max-width: 980px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }
  .cs-card--flagship::before {
    right: -24px;
    padding: 3px 24px;
    font-size: 0.6rem;
  }
}

@media (min-width: 1280px) {
  .cs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card {
    transition: none;
  }
  .cs-card:hover {
    transform: none;
  }
}

/* ===== CASE STUDIES FIXES ===== */

/* Fix 1: Equal card heights */
.cs-grid {
  align-items: stretch !important;
}

.cs-card {
  display: flex !important;
  flex-direction: column !important;
}

.cs-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Fix 2: Centered tags */
.cs-tags {
  justify-content: center !important;
  width: 100% !important;
}

.cs-header-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.cs-card h3 {
  text-align: center !important;
  width: 100% !important;
}

/* Fix 3: Consistent flagship styling */
.cs-card--flagship {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 3px solid rgba(255, 107, 0, 0.6) !important;
}

.cs-card--flagship:hover {
  border-color: rgba(255, 107, 0, 0.6) !important;
  border-left-color: rgba(255, 107, 0, 0.9) !important;
}

/* Fix 4: Push CTA to bottom */
.cs-cta-row {
  margin-top: auto !important;
}

.cs-note {
  text-align: center !important;
}

/* ===== FIX: Align CTA buttons across all cards ===== */

/* Ensure card body fills height and pushes CTA to bottom */
.cs-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Agentic loop should grow but not push CTA beyond bounds */
.cs-loop {
  flex: 0 1 auto !important;
  margin-bottom: auto !important;
}

/* Impact statement - compact spacing */
.cs-impact {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* CTA row - always at bottom with fixed spacing */
.cs-cta-row {
  margin-top: auto !important;
  margin-bottom: 8px !important;
  flex: 0 0 auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Safety note - fixed at bottom */
.cs-note {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 2em !important;
}

/* One-line description - consistent height */
.cs-oneline {
  flex: 0 0 auto !important;
  min-height: 2.7em !important;
  margin-bottom: 8px !important;
}

/* Card header - consistent height */
.cs-card-header {
  flex: 0 0 auto !important;
  margin-bottom: 12px !important;
}

/* Ensure all cards have same internal spacing */
.cs-card {
  display: flex !important;
  flex-direction: column !important;
}

/* ===== FIX: Pull up CTA buttons by one line ===== */

/* Reduce spacing in agentic loop */
.cs-loop {
  gap: 3px !important;
  margin: 4px 0 8px !important;
}

.cs-loop li {
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

/* Compact impact statement */
.cs-impact {
  margin: 6px 0 !important;
  font-size: 0.83rem !important;
}

/* Pull up CTA row */
.cs-cta-row {
  padding-top: 8px !important;
  margin-bottom: 6px !important;
}

/* Compact safety note */
.cs-note {
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
  min-height: 1.8em !important;
}

/* Reduce card padding */
.cs-card {
  padding: 15px !important;
}

/* Compact header */
.cs-card-header {
  margin-bottom: 8px !important;
}

/* Reduce one-line spacing */
.cs-oneline {
  margin: 6px 0 !important;
  min-height: 2.4em !important;
}

/* ===== AGGRESSIVE FIX: Pull up CTA buttons by one line ===== */

/* Dramatically reduce agentic loop spacing */
.cs-loop {
  gap: 2px !important;
  margin: 2px 0 6px !important;
}

.cs-loop li {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  margin-bottom: 1px !important;
}

.cs-loop li strong {
  width: 65px !important;
  font-size: 0.77rem !important;
}

/* Very compact impact */
.cs-impact {
  margin: 4px 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}

/* Pull CTA up significantly */
.cs-cta-row {
  padding-top: 6px !important;
  margin-bottom: 4px !important;
  margin-top: auto !important;
}

/* Compact buttons */
.cs-btn {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

/* Very compact safety note */
.cs-note {
  font-size: 0.65rem !important;
  line-height: 1.25 !important;
  min-height: 1.5em !important;
  margin-top: 0 !important;
}

/* Reduce card padding more */
.cs-card {
  padding: 12px !important;
}

/* Compact header */
.cs-card-header {
  margin-bottom: 6px !important;
}

.cs-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 1.4rem !important;
}

.cs-card h3 {
  font-size: 1rem !important;
  margin-bottom: 4px !important;
}

/* Compact one-line */
.cs-oneline {
  margin: 4px 0 !important;
  font-size: 0.87rem !important;
  min-height: 2.2em !important;
  line-height: 1.4 !important;
}

/* Compact tags */
.cs-tags {
  gap: 4px !important;
}

.cs-tags span {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
}

/* ===== AGGRESSIVE FIX: Pull up CTA buttons by one line ===== */

/* Dramatically reduce agentic loop spacing */
.cs-loop {
  gap: 2px !important;
  margin: 2px 0 6px !important;
}

.cs-loop li {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  margin-bottom: 1px !important;
}

.cs-loop li strong {
  width: 65px !important;
  font-size: 0.77rem !important;
}

/* Very compact impact */
.cs-impact {
  margin: 4px 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}

/* Pull CTA up significantly */
.cs-cta-row {
  padding-top: 6px !important;
  margin-bottom: 4px !important;
  margin-top: auto !important;
}

/* Compact buttons */
.cs-btn {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

/* Very compact safety note */
.cs-note {
  font-size: 0.65rem !important;
  line-height: 1.25 !important;
  min-height: 1.5em !important;
  margin-top: 0 !important;
}

/* Reduce card padding more */
.cs-card {
  padding: 12px !important;
}

/* Compact header */
.cs-card-header {
  margin-bottom: 6px !important;
}

.cs-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 1.4rem !important;
}

.cs-card h3 {
  font-size: 1rem !important;
  margin-bottom: 4px !important;
}

/* Compact one-line */
.cs-oneline {
  margin: 4px 0 !important;
  font-size: 0.87rem !important;
  min-height: 2.2em !important;
  line-height: 1.4 !important;
}

/* Compact tags */
.cs-tags {
  gap: 4px !important;
}

.cs-tags span {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
}

/* ===== RESTORE PREVIOUS CARD STYLING - REMOVE ICONS ===== */

/* Hide all card icons in portfolio */
#portfolio .cards .card-icon,
#portfolio .portfolio-grid .card-icon,
#portfolio .big-cards .card-icon,
#portfolio .small-cards .card-icon,
#portfolio .card .card-icon {
  display: none !important;
}

/* Restore previous card background styling */
#portfolio .cards .card,
#portfolio .portfolio-grid .card,
#portfolio .big-cards .card,
#portfolio .small-cards .card {
  background: rgba(25, 25, 25, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 1.2rem !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
  transform: none !important;
  transform-style: flat !important;
  perspective: none !important;
}

/* Hover effect - subtle lift only */
#portfolio .cards .card:hover,
#portfolio .portfolio-grid .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

/* Remove any pseudo-element effects */
#portfolio .cards .card::before,
#portfolio .portfolio-grid .card::before,
#portfolio .cards .card::after,
#portfolio .portfolio-grid .card::after {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Card body styling */
#portfolio .cards .card .card-body,
#portfolio .portfolio-grid .card .card-body {
  padding: 0.6rem 0 !important;
  text-align: center !important;
}

/* Title styling */
#portfolio .cards .card .card-body h3,
#portfolio .portfolio-grid .card .card-body h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0.2rem 0 !important;
  text-align: center !important;
}

/* Description text */
#portfolio .cards .card .card-body p,
#portfolio .portfolio-grid .card .card-body p {
  font-size: 0.9rem !important;
  color: #b0b0b0 !important;
  line-height: 1.5 !important;
  margin: 0.5rem 0 !important;
}

/* CTA buttons - centered at bottom */
#portfolio .cards .card .card-actions,
#portfolio .portfolio-grid .card .card-actions {
  text-align: center !important;
  padding-top: 0.8rem !important;
  margin-top: auto !important;
}

/* Button styling - dark with orange hover */
#portfolio .cards .card .card-actions .cta-secondary,
#portfolio .portfolio-grid .card .card-actions .cta-secondary {
  display: inline-block !important;
  padding: 0.5rem 1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #0d0d0d !important;
  color: #b8b8b8 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#portfolio .cards .card .card-actions .cta-secondary:hover,
#portfolio .portfolio-grid .card .card-actions .cta-secondary:hover {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
  transform: translateY(-2px) !important;
}

/* Image styling */
#portfolio .cards .card .card-fill-img,
#portfolio .portfolio-grid .card .card-fill-img {
  width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  margin-top: 0.75rem !important;
  object-fit: cover !important;
}

/* Big cards specific */
#portfolio .big-cards .card {
  padding: 1.2rem !important;
}

/* Small cards specific */
#portfolio .small-cards .card {
  padding: 1rem !important;
}

/* ===== FIX: REMOVE ICONS AND RESTORE CARD STYLING ===== */

/* 1. Hide ALL card icons in portfolio section */
#portfolio .card .card-icon,
#portfolio .portfolio-grid .card .card-icon,
#portfolio .big-cards .card .card-icon,
#portfolio .small-cards .card .card-icon,
#portfolio .cards .card-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Restore previous card background styling */
#portfolio .card,
#portfolio .portfolio-grid .card,
#portfolio .big-cards .card,
#portfolio .small-cards .card {
  background: rgba(25, 25, 25, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
  transform: none !important;
  transform-style: flat !important;
  perspective: none !important;
}

/* 3. Hover effect - subtle lift */
#portfolio .card:hover,
#portfolio .portfolio-grid .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
}

/* 4. Remove any pseudo-element effects */
#portfolio .card::before,
#portfolio .card::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* 5. Card body styling */
#portfolio .card .card-body {
  text-align: center !important;
}

#portfolio .card .card-body h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-align: center !important;
}

/* 6. Button styling */
#portfolio .card .card-actions .cta-secondary {
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #b8b8b8 !important;
}

#portfolio .card .card-actions .cta-secondary:hover {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
}

/* ===== REMOVE ICONS FROM CASE STUDY CARDS ===== */

/* Hide cs-icon elements */
.cs-icon {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Adjust card header layout without icons */
.cs-card-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

.cs-card h3 {
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.cs-tags {
  justify-content: center !important;
  width: 100% !important;
  margin-top: 4px !important;
}

/* Remove any other icon-related elements in portfolio */
#portfolio .card-icon,
#portfolio .cs-icon,
#portfolio .cards .card-icon,
#portfolio .portfolio-grid .card-icon {
  display: none !important;
  visibility: hidden !important;
}

/* ===== AGENTIC BENTO GRID ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.bento-item {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.bento-item:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.card-featured {
  grid-column: span 3;
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(255,107,0,0.05) 100%);
}

.card-featured h3 { font-size: 2rem; color: #fff; margin-bottom: 1rem; }
.card-featured p { font-size: 1.1rem; color: var(--muted); max-width: 90%; }

.card-logs {
  background: #000 !important;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  border: 1px solid #222;
}

.terminal-header { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid #222; padding-bottom: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.log-line { color: #00ff00 !important; font-size: 0.85rem; margin: 4px 0; opacity: 1.0; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.blink { animation: bento-blink 1s infinite; }

.card-stack { grid-column: span 3; padding: 1.2rem; background: rgba(255,107,0,0.02); }
.stack-flex { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.stack-tag {
  background: rgba(255, 107, 0, 0.08);
  color: var(--accent);
  padding: 4px 14px;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(255, 107, 0, 0.15);
}

.badge {
  background: var(--accent);
  color: #000;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 1rem;
}

.link-arrow { color: #FF8C00; font-weight: 600; margin-top: 1rem; display: block; }

@keyframes bento-blink { 50% { opacity: 0; } }

@media (max-width: 992px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .card-featured {
  grid-column: span 3;
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(255,107,0,0.05) 100%);
}
  .card-stack { grid-column: span 2; }
}

@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; }
  .card-featured, .card-stack { grid-column: span 1; }
}

/* Agentic Loop Styling */
.agent-loop {
  margin: 1.2rem 0;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}
.loop-step {
  font-size: 0.85rem;
  margin-bottom: 6px;
  line-height: 1.4;
}
.loop-step strong {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

/* Safety & Tech Tags */
.safety-note {
  font-size: 0.7rem;
  color: #777;
  font-style: italic;
  margin-top: 10px;
  display: block;
  line-height: 1.2;
}
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tag {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Bento Item Height Adjustments */
.bento-item h3 { margin-bottom: 0.5rem; color: #fff; }
.tagline { font-size: 0.95rem; color: var(--accent); font-weight: 500; margin-bottom: 1rem; display: block; }

/* ===== COMPLETE AGENTIC BENTO & TERMINAL UI ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.bento-item {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.card-featured {
  grid-column: span 3;
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(255,107,0,0.05) 100%);
}

.featured-flex {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.featured-info { flex: 0.8; }
.featured-terminal {
  flex: 1.2;
  background: #000;
  border-radius: 8px;
  padding: 15px;
  font-family: "Courier New", monospace;
  border: 1px solid #333;
  min-height: 220px;
  margin-top: 65px;
}

.agent-loop { margin: 1rem 0; border-left: 2px solid var(--accent); padding-left: 12px; }
.loop-step { font-size: 0.85rem; margin-bottom: 5px; color: var(--muted); }
.loop-step strong { color: #FF8C00; font-size: 0.75rem; text-transform: uppercase; }

.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tag { font-size: 0.7rem; background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 4px; color: #fff; border: 1px solid rgba(255,255,255,0.1); }

.log-line { color: #00ff00 !important; font-size: 0.85rem; margin: 4px 0; opacity: 1.0; line-height: 1.4; font-weight: 500; white-space: nowrap; }
.blink { animation: bento-blink 1s infinite; }
@keyframes bento-blink { 50% { opacity: 0; } }

.safety-note { font-size: 0.7rem; color: #666; font-style: italic; display: block; margin-top: 10px; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .card-featured {
  grid-column: span 3;
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(255,107,0,0.05) 100%);
}
  .featured-flex {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; }
  .card-featured {
  grid-column: span 3;
  background: linear-gradient(135deg, rgba(22,22,22,1) 0%, rgba(255,107,0,0.05) 100%);
}
}

/* ===== KNOWLEDGE BASE CARDS - ARCHITECTURE PHILOSOPHY STYLE ===== */

/* Grid layout - keep masonry but style cards like article-cards */
#articles .masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero card spans 2 columns on desktop */
#articles .masonry-hero {
  grid-column: span 2;
  grid-row: span 1;
}

/* Card styling - matches Architecture Philosophy */
#articles .article-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#articles .article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Top border accent on hover */
#articles .article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#articles .article-card:hover::before {
  opacity: 1;
}

/* Image container */
#articles .article-image {
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
}

#articles .article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#articles .article-card:hover .article-image img {
  transform: scale(1.05);
}

/* Card content */
#articles .article-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title */
#articles .article-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Summary */
#articles .article-summary {
  font-size: 0.85rem;
  color: #b0b0b0;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

/* Meta section */
#articles .article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Tag */
#articles .article-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d0d0d0;
  background: rgba(60, 60, 60, 0.6);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Read time */
#articles .article-read {
  font-size: 0.8rem;
  color: #888;
  transition: all 0.3s ease;
}

#articles .article-card:hover .article-read {
  color: #ffaa66;
  transform: translateX(4px);
}

/* Hero card specific adjustments */
#articles .masonry-hero .article-image {
  height: 180px;
}

#articles .masonry-hero .article-title {
  font-size: 1.15rem;
}

/* Mobile responsive */
@media (max-width: 900px) {
  #articles .masonry-hero {
    grid-column: span 1;
  }
  
  #articles .article-image {
    height: 120px;
  }
  
  #articles .masonry-hero .article-image {
    height: 150px;
  }
  
  #articles .article-card-content {
    padding: 16px;
  }
}

/* Remove old masonry styles that conflict */
#articles .masonry-small-top,
#articles .masonry-hero-bottom,
#articles .masonry-hero-overlay,
#articles .masonry-hero-bg,
#articles .masonry-small-img {
  display: none;
}

/* Ensure proper positioning for pseudo-elements */
#articles .article-card {
  position: relative;
}

/* ===== KNOWLEDGE BASE CARDS - ARCHITECTURE PHILOSOPHY STYLE ===== */

#articles .masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  #articles .masonry-hero {
    grid-column: span 2;
  }
}

#articles .article-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

#articles .article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

#articles .article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#articles .article-card:hover::before {
  opacity: 1;
}

#articles .article-image {
  width: 100%;
  height: 140px;
  overflow: hidden;
  position: relative;
}

#articles .masonry-hero .article-image {
  height: 180px;
}

#articles .article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#articles .article-card:hover .article-image img {
  transform: scale(1.05);
}

#articles .article-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#articles .article-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

#articles .article-summary {
  font-size: 0.85rem;
  color: #b0b0b0;
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
}

#articles .article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: auto;
}

#articles .article-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d0d0d0;
  background: rgba(60, 60, 60, 0.6);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#articles .article-read {
  font-size: 0.8rem;
  color: #888;
  transition: all 0.3s ease;
}

#articles .article-card:hover .article-read {
  color: #ffaa66;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  #articles .masonry-hero {
    grid-column: span 1;
  }
  #articles .article-image {
    height: 120px;
  }
  #articles .masonry-hero .article-image {
    height: 150px;
  }
  #articles .article-card-content {
    padding: 16px;
  }
}

/* Hide old masonry elements */
#articles .masonry-small-top,
#articles .masonry-hero-bottom,
#articles .masonry-hero-overlay,
#articles .masonry-hero-bg,
#articles .masonry-small-img {
  display: none !important;
}

/* ===== BIOMEDICAL HYPOTHESES ARCHITECTURE DIAGRAM ===== */
.card-arch-diagram {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  margin: 12px 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-item:hover .card-arch-diagram {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .card-arch-diagram {
    max-height: 100px;
    padding: 6px;
    margin: 8px 0;
  }
}

/* ===== BIOMEDICAL HYPOTHESES CARD - TALL VERSION ===== */

/* Make the Biomedical card taller to align with bottom of second row */
.bento-item.biomed-tall {
  grid-row: span 2;  /* Span 2 rows in the grid */
  min-height: 380px; /* Ensure minimum height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Ensure the card content fills the space */
.bento-item.biomed-tall .loop-step {
  flex: 1;
}

/* ===== ENLARGE CASE STUDY CARDS - ALIGN BOTTOMS ===== */

/* Make the portfolio grid use equal height rows */
.portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}

/* Ensure all case study cards stretch to fill grid cell */
.cs-card,
.portfolio-grid .cs-card,
#portfolio .cs-card {
  height: 100% !important;
  min-height: 520px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Card content area grows to fill space */
.cs-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Image container takes available space */
.cs-image {
  flex: 1 !important;
  min-height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.cs-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Push link to bottom */
.cs-link {
  margin-top: auto !important;
  padding-top: 16px !important;
}

/* Card header styling */
.cs-card-header {
  padding-bottom: 16px !important;
}

/* Tags styling */
.cs-tags {
  margin-bottom: 16px !important;
}

/* ===== CASE STUDY CARDS - NO IMAGES ===== */

/* Fixed compact card height */
.cs-card,
#portfolio .cs-card,
.portfolio-grid .cs-card {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Content fills space */
.cs-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Push link to bottom */
.cs-link {
  margin-top: auto !important;
}

/* Ensure images are hidden if any remain */
.cs-image,
.cs-card .cs-image {
  display: none !important;
}

/* ===== AGGRESSIVE CARD FIX ===== */

/* Hide ALL images in portfolio cards */
#portfolio .cs-image,
#portfolio .cs-card .cs-image,
.portfolio-grid .cs-image,
.cs-card .cs-image,
.cs-image {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Force fixed card height */
#portfolio .cs-card,
.portfolio-grid .cs-card,
.cs-card {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Content layout */
#portfolio .cs-card-content,
.cs-card-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Push link to bottom */
#portfolio .cs-link,
.cs-link {
  margin-top: auto !important;
}



  
  /* All cards span single column */
  .bento-item,
  .card-featured,
  .card-stack {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  
  /* Featured card - stack vertically */
  .featured-flex {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .featured-info {
    flex: 1 !important;
    width: 100% !important;
  }
  
  .featured-terminal {
    flex: 1 !important;
    width: 100% !important;
    margin-top: 1rem !important;
    min-height: auto !important;
    max-height: 200px !important;
    overflow: auto !important;
  }
  
  /* Terminal text smaller */
  .featured-terminal .log-line {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Reduce padding on mobile */
  .bento-item {
    padding: 1rem !important;
  }
  
  /* Card titles smaller */
  .bento-item h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Agent loop compact */
  .agent-loop {
    margin: 0.5rem 0 !important;
    padding-left: 8px !important;
  }
  
  .loop-step {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }
  
  /* Tech tags wrap better */
  .tech-tags {
    margin-top: 8px !important;
    gap: 4px !important;
  }
  
  .tag {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
  
  /* Safety note smaller */
  .safety-note {
    font-size: 0.65rem !important;
    margin-top: 8px !important;
  }
  
  /* Link arrow smaller */
  .link-arrow {
    margin-top: 0.8rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Badge smaller */
  .badge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
    margin-bottom: 0.5rem !important;
  }
}

/* Extra small screens */
@media (max-width: 600px) {
  .bento-grid {
    gap: 0.75rem !important;
  }
  
  .bento-item {
    padding: 0.875rem !important;
    border-radius: 8px !important;
  }
  
  .featured-terminal {
    max-height: 160px !important;
    padding: 10px !important;
  }
  
  .featured-terminal .log-line {
    font-size: 0.7rem !important;
    margin: 2px 0 !important;
  }
  
  .terminal-header {
    margin-bottom: 8px !important;
  }
  
  .terminal-header .dot {
    width: 6px !important;
    height: 6px !important;
  }
  
  /* Hide some terminal lines on very small screens */
  .featured-terminal .log-line:nth-child(n+8) {
    display: none !important;
  }
}

#portfolio {
  width: 100% !important;
}

#portfolio .container {
  max-width: 1400px !important;
  padding: 0 2rem !important;
  box-sizing: border-box !important;
}

/* Ensure cards don't overflow */
.bento-item {
  max-width: 100% !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Fix for long text in terminal */
.log-line {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ===== PROPER MOBILE FIXES FOR AGENTIC SOLUTIONS ===== */

/* Desktop: Keep 3-column grid (default, no media query needed) */
/* Only apply mobile styles below 900px */

@media (max-width: 900px) {
  /* Mobile: Single column, but NOT full width stretched */
  #portfolio .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 600px !important; /* Limit max width on mobile */
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* All cards single column */
  #portfolio .bento-item,
  #portfolio .card-featured {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Featured card: stack vertically */
  #portfolio .featured-flex {
    flex-direction: column !important;
  }
  
  #portfolio .featured-terminal {
    margin-top: 1rem !important;
    margin-top: 65px !important; /* Reset from desktop */
    min-height: 180px !important;
    max-height: 220px !important;
  }
  
  /* Terminal font size */
  #portfolio .featured-terminal .log-line {
    font-size: 0.8rem !important;
  }
}

/* Extra small screens */
@media (max-width: 600px) {
  #portfolio .bento-grid {
    max-width: 100% !important; /* Full width on very small screens */
    padding: 0 0.5rem !important;
  }
  
  #portfolio .featured-terminal {
    min-height: 160px !important;
    max-height: 200px !important;
  }
  
  #portfolio .featured-terminal .log-line {
    font-size: 0.75rem !important;
  }
}

/* Desktop restore: Ensure proper grid at 901px and above */
@media (min-width: 901px) {
  #portfolio .bento-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  #portfolio .card-featured {
    grid-column: span 3 !important;
  }
  
  #portfolio .featured-flex {
    flex-direction: row !important;
    gap: 30px !important;
  }
  
  #portfolio .featured-info {
    flex: 0.8 !important;
  }
  
  #portfolio .featured-terminal {
    flex: 1.2 !important;
    margin-top: 65px !important;
    min-height: 220px !important;
    max-height: none !important;
  }
  
  /* Other cards stay in grid */
  #portfolio .bento-item:not(.card-featured) {
    grid-column: span 1 !important;
  }
}

/* ===== FIX DESKTOP CARD WIDTH - PREVENT STRETCHING ===== */

/* Constrain the entire bento grid width on desktop */
@media (min-width: 901px) {
  #portfolio .bento-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 360px)) !important; /* Fixed column widths */
    gap: 1.25rem !important;
    justify-content: center !important; /* Center the grid */
    max-width: 1150px !important; /* Total max width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
  }
  
  /* Featured card spans all columns but content is constrained */
  #portfolio .card-featured {
    grid-column: span 3 !important;
    max-width: 100% !important;
  }
  
  /* Ensure featured card content doesn't stretch too wide */
  #portfolio .featured-flex {
    max-width: 1100px !important;
    margin: 0 auto !important;
  }
  
  /* Regular cards - fixed width */
  #portfolio .bento-item:not(.card-featured) {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 360px !important; /* Max card width */
    min-width: 280px !important; /* Min card width */
  }
  
  /* Terminal in featured card - constrain width */
  #portfolio .featured-terminal {
    max-width: 500px !important;
  }
}

/* Large screens - keep cards from getting too wide */
@media (min-width: 1400px) {
  #portfolio .bento-grid {
    grid-template-columns: repeat(3, 340px) !important; /* Fixed width columns */
    gap: 1.5rem !important;
    max-width: 1200px !important;
  }
}

/* Medium desktop - slightly smaller cards */
@media (min-width: 901px) and (max-width: 1200px) {
  #portfolio .bento-grid {
    grid-template-columns: repeat(3, minmax(260px, 320px)) !important;
    gap: 1rem !important;
    max-width: 1000px !important;
  }
  
  #portfolio .bento-item:not(.card-featured) {
    max-width: 320px !important;
    min-width: 260px !important;
  }
}

/* ===== FIX MEDICAL TRIAGE CARD TEXT ALIGNMENT ===== */

/* Ensure featured card content aligns to top */
#portfolio .card-featured .featured-flex {
  align-items: flex-start !important; /* Align to top, not center */
}

#portfolio .featured-info {
  align-self: flex-start !important; /* Align to top */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* Content at top */
  height: 100% !important;
}

/* Ensure all text content starts at top */
#portfolio .featured-info .badge,
#portfolio .featured-info h3,
#portfolio .featured-info p,
#portfolio .featured-info .agent-loop,
#portfolio .featured-info .tech-tags,
#portfolio .featured-info .link-arrow,
#portfolio .featured-info .safety-note {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* Remove any centering that might be applied */
#portfolio .featured-info > * {
  align-self: flex-start !important;
}

/* Ensure the h3 is at the top */
#portfolio .featured-info h3 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

/* Featured terminal also aligns to top */
#portfolio .featured-terminal {
  align-self: flex-start !important;
  margin-top: 0 !important; /* Remove the 65px margin that pushes it down */
}

/* If you want to keep some spacing at top, use padding instead of margin */
#portfolio .featured-terminal {
  margin-top: 20px !important; /* Reduced from 65px */
}

/* ===== FIX MEDICAL TRIAGE CARD LAYOUT - TEXT TO LEFT ===== */

/* Desktop: Text on left, terminal on right with proper spacing */
@media (min-width: 901px) {
  #portfolio .card-featured .featured-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* Align to left */
    align-items: flex-start !important;
    gap: 40px !important; /* Space between text and terminal */
    width: 100% !important;
  }
  
  /* Text content container - fixed width on left */
  #portfolio .featured-info {
    flex: 0 0 45% !important; /* Fixed 45% width, no grow/shrink */
    max-width: 450px !important;
    min-width: 350px !important;
    align-self: flex-start !important;
    text-align: left !important;
    margin-right: auto !important; /* Push to left */
  }
  
  /* Ensure all text aligns left */
  #portfolio .featured-info .badge,
  #portfolio .featured-info h3,
  #portfolio .featured-info p,
  #portfolio .featured-info .agent-loop,
  #portfolio .featured-info .tech-tags,
  #portfolio .featured-info .link-arrow,
  #portfolio .featured-info .safety-note {
    text-align: left !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Terminal on right side */
  #portfolio .featured-terminal {
    flex: 0 0 50% !important; /* Fixed 50% width */
    max-width: 500px !important;
    margin-left: auto !important; /* Push to right */
    margin-top: 20px !important; /* Align with text top */
    align-self: flex-start !important;
  }
  
  /* Ensure tags align left */
  #portfolio .featured-info .tech-tags {
    justify-content: flex-start !important;
  }
}

/* Large screens - more spacing */
@media (min-width: 1400px) {
  #portfolio .card-featured .featured-flex {
    gap: 60px !important;
  }
  
  #portfolio .featured-info {
    flex: 0 0 40% !important;
    max-width: 400px !important;
  }
  
  #portfolio .featured-terminal {
    flex: 0 0 55% !important;
    max-width: 550px !important;
  }
}

/* Medium screens - tighter layout */
@media (min-width: 901px) and (max-width: 1100px) {
  #portfolio .card-featured .featured-flex {
    gap: 30px !important;
  }
  
  #portfolio .featured-info {
    flex: 0 0 48% !important;
    min-width: 300px !important;
  }
  
  #portfolio .featured-terminal {
    flex: 0 0 48% !important;
  }
}

/* ===== FIX TERMINAL ALIGNMENT & GRID SPACING ===== */

/* Desktop: Proper spacing and alignment */
@media (min-width: 901px) {
  /* Featured card container - add internal padding */
  #portfolio .card-featured {
    padding: 2rem !important; /* Consistent padding inside card */
    box-sizing: border-box !important;
  }
  
  #portfolio .card-featured .featured-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* Align tops */
    justify-content: space-between !important;
    gap: 40px !important; /* Space between text and terminal */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Left text content - add left padding for grid alignment */
  #portfolio .featured-info {
    flex: 0 0 42% !important;
    max-width: 420px !important;
    padding-left: 0.5rem !important; /* Small left padding for visual alignment */
    margin: 0 !important;
    align-self: flex-start !important;
  }
  
  /* Terminal - align top with h3 title, add right padding */
  #portfolio .featured-terminal {
    flex: 0 0 52% !important;
    max-width: 520px !important;
    margin: 0 !important; /* Remove all margins */
    padding-right: 0.5rem !important; /* Right padding for grid alignment */
    align-self: flex-start !important;
    /* Align with the h3 title - approximate based on typical line height */
    margin-top: 0 !important; /* Start at same level as title */
  }
  
  /* Ensure h3 has no extra top margin */
  #portfolio .featured-info h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.3 !important;
  }
  
  /* Badge alignment */
  #portfolio .featured-info .badge {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }
}

/* Large screens - more generous spacing */
@media (min-width: 1400px) {
  #portfolio .card-featured {
    padding: 2.5rem !important;
  }
  
  #portfolio .card-featured .featured-flex {
    gap: 60px !important;
  }
  
  #portfolio .featured-info {
    flex: 0 0 40% !important;
    padding-left: 1rem !important;
  }
  
  #portfolio .featured-terminal {
    flex: 0 0 55% !important;
    padding-right: 1rem !important;
  }
}

/* Medium screens - balanced spacing */
@media (min-width: 901px) and (max-width: 1200px) {
  #portfolio .card-featured {
    padding: 1.5rem !important;
  }
  
  #portfolio .card-featured .featured-flex {
    gap: 30px !important;
  }
  
  #portfolio .featured-info {
    flex: 0 0 45% !important;
    padding-left: 0.25rem !important;
  }
  
  #portfolio .featured-terminal {
    flex: 0 0 50% !important;
    padding-right: 0.25rem !important;
  }
}

/* ===== PRECISE TERMINAL ALIGNMENT WITH TITLE ===== */

/* Desktop: Exact alignment */
@media (min-width: 901px) {
  #portfolio .card-featured {
    padding: 2rem 2.5rem !important; /* More horizontal padding */
  }
  
  #portfolio .featured-flex {
    align-items: flex-start !important;
  }
  
  /* Text side - consistent left padding */
  #portfolio .featured-info {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Terminal - align with h3 title */
  #portfolio .featured-terminal {
    /* Adjust margin-top to align with h3 title baseline */
    margin-top: 2.5rem !important; /* Approximate h3 line height + badge */
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fine-tune based on actual layout */
  #portfolio .featured-info .badge {
    margin-bottom: 0.5rem !important;
  }
  
  #portfolio .featured-info h3 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    font-size: 1.5rem !important; /* Ensure consistent size */
    line-height: 1.2 !important;
  }
}

/* Alternative: If terminal needs to align exactly with title top */
@media (min-width: 901px) {
  #portfolio .featured-terminal {
    padding-top: 0 !important;
    /* The terminal header (colored dots) should align with h3 */
    position: relative !important;
    top: 0 !important;
  }
  
  /* Add padding to terminal to push content down to match text flow */
  #portfolio .featured-terminal .terminal-header {
    margin-bottom: 1rem !important;
  }
}

/* ===== ALIGN TERMINAL WITH MEDICAL TRIAGE AGENT TITLE ===== */

/* Desktop: Push terminal down to align with h3 title */
@media (min-width: 901px) {
  #portfolio .featured-terminal {
    /* Push down by approximate height of badge + margin */
    margin-top: 2.5rem !important; /* Adjust this value as needed */
    align-self: flex-start !important;
  }
  
  /* Fine-tune the spacing */
  #portfolio .featured-info .badge {
    margin-bottom: 0.75rem !important;
    display: inline-block !important;
  }
  
  #portfolio .featured-info h3 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
  }
}

/* Large screens - slightly more space */
@media (min-width: 1400px) {
  #portfolio .featured-terminal {
    margin-top: 2.75rem !important;
  }
}

/* Medium screens - slightly less space */
@media (min-width: 901px) and (max-width: 1200px) {
  #portfolio .featured-terminal {
    margin-top: 2.25rem !important;
  }
}

/* ===== FIX TERMINAL HEADER OVERLAP ===== */

/* Ensure terminal has proper internal spacing */
#portfolio .featured-terminal {
  position: relative !important;
  padding-top: 2.5rem !important; /* Add space at top for header */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 1rem !important;
  box-sizing: border-box !important;
}

/* Position the header (colored circles) at top with proper spacing */
#portfolio .featured-terminal .terminal-header {
  position: absolute !important;
  top: 0.75rem !important; /* Position from top */
  left: 1rem !important;
  right: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  z-index: 2 !important; /* Above content */
}

/* Ensure terminal content starts below header */
#portfolio .featured-terminal .log-line {
  margin: 0.25rem 0 !important;
  line-height: 1.4 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* First log line needs extra top margin */
#portfolio .featured-terminal .log-line:first-child {
  margin-top: 0.5rem !important;
}

/* Terminal dots sizing */
#portfolio .featured-terminal .terminal-header .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ===== AGGRESSIVE FIX FOR TERMINAL OVERLAP ===== */

/* Reset terminal box model */
#portfolio .featured-terminal {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Terminal header as block element with proper height */
#portfolio .featured-terminal .terminal-header {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 2rem !important; /* Fixed height for header */
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* Optional separator */
}

/* Terminal content area */
#portfolio .featured-terminal .terminal-content,
#portfolio .featured-terminal > div:not(.terminal-header) {
  display: block !important;
  padding: 1rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  max-height: calc(100% - 2rem) !important; /* Subtract header height */
}

/* Ensure log lines have proper spacing */
#portfolio .featured-terminal .log-line {
  margin: 0.3rem 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  display: block !important;
}

/* First log line */
#portfolio .featured-terminal .log-line:first-of-type {
  margin-top: 0 !important;
}

/* Last log line */
#portfolio .featured-terminal .log-line:last-of-type {
  margin-bottom: 0 !important;
}

/* ===== FIX TERMINAL HEADER OVERLAP ===== */

/* Ensure terminal has proper internal spacing */
#portfolio .featured-terminal {
  position: relative !important;
  padding-top: 2.5rem !important; /* Add space at top for header */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-bottom: 1rem !important;
  box-sizing: border-box !important;
}

/* Position the header (colored circles) at top with proper spacing */
#portfolio .featured-terminal .terminal-header {
  position: absolute !important;
  top: 0.75rem !important; /* Position from top */
  left: 1rem !important;
  right: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  z-index: 2 !important; /* Above content */
}

/* Ensure terminal content starts below header */
#portfolio .featured-terminal .log-line {
  margin: 0.25rem 0 !important;
  line-height: 1.4 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* First log line needs extra top margin */
#portfolio .featured-terminal .log-line:first-child {
  margin-top: 0.5rem !important;
}

/* Terminal dots sizing */
#portfolio .featured-terminal .terminal-header .dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* ===== DEFINITIVE MOBILE INSIGHT IMAGE FIX ===== */

/* Mobile breakpoint - fix image overlapping left line */
@media (max-width: 900px) {
  /* Hide vertical lines on mobile to prevent overlap issues */
  .insight-card-combined::before,
  .insight-card-combined::after {
    display: none !important;
  }
  
  /* Stack layout vertically */
  .insight-card-combined {
    flex-direction: column !important;
    padding: 20px !important;
    gap: 20px !important;
  }
  
  /* Image container - full width, proper spacing */
  .insight-visual,
  .insight-visual-large {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    order: -1 !important; /* Move image above text */
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
  }
  
  /* The actual image */
  .insight-visual img,
  .insight-visual-large img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
  }
  
  /* Text container - full width, no left padding */
  .insight-text {
    flex: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Adjust pillars spacing for mobile */
  .insight-pillars {
    gap: 15px !important;
  }
}

/* Extra small screens */
@media (max-width: 600px) {
  .insight-card-combined {
    padding: 15px !important;
  }
  
  .insight-visual img,
  .insight-visual-large img {
    max-height: 250px !important;
  }
}

/* ===== DEFINITIVE TERMINAL ALIGNMENT FIX ===== */

/* Desktop: Terminal aligns with "Medical Triage Agent" title */
@media (min-width: 901px) {
  #portfolio .card-featured {
    padding: 2rem 2.5rem !important;
    position: relative !important;
  }
  
  #portfolio .featured-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 40px !important;
    width: 100% !important;
  }
  
  /* Left side: Text content */
  #portfolio .featured-info {
    flex: 0 0 42% !important;
    max-width: 420px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
  
  /* Badge styling */
  #portfolio .featured-info .badge {
    display: inline-block !important;
    margin-bottom: 0.75rem !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Title styling - no extra margins */
  #portfolio .featured-info h3 {
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  /* Right side: Terminal - align with title */
  #portfolio .featured-terminal {
    flex: 0 0 52% !important;
    max-width: 520px !important;
    margin: 2.25rem 0 0 0 !important; /* Push down to align with h3 title */
    padding: 0 !important;
    align-self: flex-start !important;
    position: relative !important;
  }
  
  /* Terminal header with 3 colored circles */
  #portfolio .featured-terminal .terminal-header {
    position: absolute !important;
    top: 0.75rem !important;
    left: 1rem !important;
    right: 1rem !important;
    height: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 10 !important;
  }
  
  /* The 3 colored dots */
  #portfolio .featured-terminal .terminal-header .dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  
  /* Terminal content area - push below header */
  #portfolio .featured-terminal .terminal-content {
    padding: 2.5rem 1rem 1rem 1rem !important; /* Top padding for header */
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Individual log lines */
  #portfolio .featured-terminal .log-line {
    margin: 0.25rem 0 !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* First log line spacing */
  #portfolio .featured-terminal .log-line:first-child {
    margin-top: 0 !important;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  #portfolio .featured-terminal {
    margin-top: 2.5rem !important; /* Slightly more for larger title */
  }
}

/* Medium screens */
@media (min-width: 901px) and (max-width: 1200px) {
  #portfolio .featured-terminal {
    margin-top: 2.1rem !important;
  }
  
  #portfolio .featured-info h3 {
    font-size: 1.4rem !important;
  }
}

/* ===== FIX TERMINAL HEADER OVERLAP & TEXT PADDING ===== */

@media (min-width: 901px) {
  /* Terminal container - ensure proper internal spacing */
  #portfolio .featured-terminal {
    position: relative !important;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem !important; /* Top padding for header */
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  /* Terminal header - position at very top with proper spacing */
  #portfolio .featured-terminal .terminal-header {
    position: absolute !important;
    top: 0.5rem !important; /* Move up to avoid overlap */
    left: 1.5rem !important;
    right: 1.5rem !important;
    height: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 100 !important;
    background: transparent !important;
  }
  
  /* The 3 colored dots - proper sizing */
  #portfolio .featured-terminal .terminal-header .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  
  /* Terminal content - ensure text starts below header with left padding */
  #portfolio .featured-terminal .terminal-content,
  #portfolio .featured-terminal > div:not(.terminal-header) {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Log lines - proper left padding and spacing */
  #portfolio .featured-terminal .log-line {
    margin: 0.3rem 0 !important;
    padding-left: 0.5rem !important; /* Add left padding */
    line-height: 1.6 !important;
    font-size: 0.85rem !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* First log line extra top margin to clear header */
  #portfolio .featured-terminal .log-line:first-of-type {
    margin-top: 0.5rem !important;
  }
}

/* ===== ARCHITECTURE PHILOSOPHY: COMMAND CENTER ===== */
.command-center {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 3rem;
}

/* Manifesto Text */
.manifesto-box {
  border-left: 4px solid var(--accent);
  padding: 1rem 0 1rem 2rem;
  background: linear-gradient(90deg, rgba(255,107,0,0.05) 0%, transparent 100%);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.manifesto-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #d0d0d0;
  max-width: 95%;
  margin: 0;
}

.manifesto-text em {
  font-style: italic;
  color: #fff;
  font-weight: 600;
}

.manifesto-highlight {
  color: var(--accent);
  font-weight: 600;
}

/* Architecture Figure - The "Body" */
.arch-figure-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  background: #050505;
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.arch-figure-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

.arch-figure-wrapper:hover .arch-figure-img {
  opacity: 1;
}

/* Pillars Row */
.pillars-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .pillars-row { grid-template-columns: 1fr; }
  .manifesto-box { padding-left: 1rem; border-left-width: 3px; }
}

.specialized-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Ensure all cards in this section maintain the left-alignment for the lifecycle look */
#services .service-card {
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

@media (max-width: 900px) {
  .specialized-services-grid { grid-template-columns: 1fr; }
}

/* Ensure original card sizing is respected */
#services .service-card {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 280px;
}

/* ===== BLUEPRINT CARD ENHANCEMENTS ===== */

/* All service cards - consistent height */
#services .cards .card.service-card {
  min-height: 340px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 1.6rem 1.3rem !important;
}

/* Card body - flex to push button down */
#services .cards .service-card .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  padding-bottom: 0.5rem !important;
}

/* Title styling */
#services .cards .service-card .card-body h3 {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 0 0.3rem 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Subtitle (original) */
/* Card actions always at bottom */
#services .cards .service-card .card-actions {
  margin-top: auto !important;
  padding-top: 0.8rem !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Button styling */
#services .card.service-card .card-actions .cta-secondary {
  display: inline-block !important;
  padding: 0.5rem 1.2rem !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  color: #a0a0a0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

#services .card.service-card .card-actions .cta-secondary:hover {
  border-color: #ff6b00 !important;
  color: #ff6b00 !important;
  transform: translateY(-2px) !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  #services .cards .card.service-card {
    min-height: 320px !important;
    padding: 1.4rem 1.2rem !important;
  }
  
  }

@media (max-width: 600px) {
  #services .cards .card.service-card {
    min-height: auto !important;
    padding: 1.2rem !important;
  }
  
  }

/* Service subtitle - make it bold */
.service-subtitle {
  font-weight: 700 !important;
  font-size: .92rem !important;
  color: #dbe7ef !important;
  margin: 0 !important;
}

/* Service detail - pulled down with more top margin */
.service-detail {
  font-size: 0.82rem !important;
  color: #a0a0a0 !important;
  line-height: 1.5 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 400 !important;
  max-width: 95% !important;
  text-align: center !important;
}\n
/* Service subtitle - BOLD with high specificity to override existing rules */
#services .card.service-card p.service-subtitle {
  font-weight: 700 !important;
  font-size: .92rem !important;
  color: #dbe7ef !important;
  margin: 0 !important;
}
\n
/* BOLD subtitle for Blueprint */
#services .card.service-card p.service-subtitle {
  font-weight: 700 !important;
}

/* Services Architecture Diagram */
.services-diagram {
  width: 100%;
  margin: 2.5rem 0;
  text-align: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(25,25,25,0.5);
  border: 1px solid rgba(255,255,255,0.05);
}

.services-diagram img {
  width: 100%;
  height: auto;
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .services-diagram {
    margin: 1.5rem 0;
    border-radius: 8px;
  }
  .services-diagram img {
    border-radius: 4px;
  }
}

/* ===== DEFINITIVE FIX: Bold subtitles for ALL service cards ===== */
#services .cards .service-card .card-body p.service-subtitle,
#services .card.service-card .card-body p.service-subtitle,
#services .service-card .card-body p.service-subtitle {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
  text-align: center !important;
}

/* Ensure description text is not bold */
#services .cards .service-card .card-body p.service-detail {
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  color: #a0a0a0 !important;
  margin-top: 1rem !important;
}


/* ===== READY TO SHIP CARD ONLY - NO BORDER, SECTION BACKGROUND ===== */
#services .card.service-card-cta {
  background: #080808 !important;
  border: none !important;
  box-shadow: none !important;
}

#services .card.service-card-cta::before,
#services .card.service-card-cta::after {
  display: none !important;
}

#services .card.service-card-cta .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
  justify-content: center !important;
}

#services .card.service-card-cta .link-arrow {
  color: #ff6b00;
  font-weight: 600;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

#services .card.service-card-cta:hover .link-arrow {
  color: #ff8533;
  transform: translateX(4px);
}

#services .card.service-card-cta .card-actions {
  display: none !important;
}

/* ===== SPECIALIZED AGENTIC AI SOLUTIONS - WIDE CARD ===== */
#services .cards .card.card-wide {
  grid-column: span 2 !important;
}

#services .cards .card.card-wide .card-body-left {
  align-items: flex-start !important;
  text-align: left !important;
  padding-left: 1.5rem !important;
}

#services .cards .card.card-wide .card-body-left h3,
#services .cards .card.card-wide .card-body-left p {
  text-align: left !important;
  width: 100% !important;
}

/* Keep button centered at bottom */
#services .cards .card.card-wide .card-actions {
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}


/* ===== SPECIALIZED AGENTIC AI - WIDE CARD LAYOUT (FIXED) ===== */

/* 1. Double Width (Desktop) */
@media (min-width: 900px) {
  div#services .cards .card.card-wide {
    grid-column: span 2 !important;
  }
}

/* 2. Force Left Alignment (Overrides "text-align: center" on service-card) */
div#services .cards .card.card-wide .card-body,
div#services .cards .card.card-wide .card-body-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Forces items left */
  text-align: left !important;        /* Forces text left */
  padding-left: 2.5rem !important;    /* Visual balance */
  padding-right: 2rem !important;
}

/* 3. Force Title and Subtitle Left */
div#services .cards .card.card-wide h3,
div#services .cards .card.card-wide .card-body h3,
div#services .cards .card.card-wide .card-body p {
  text-align: left !important;
  align-self: flex-start !important;
  width: 100% !important;
  margin-left: 0 !important;
}

/* 4. Keep Button Centered (Resetting alignment for actions) */
div#services .cards .card.card-wide .card-actions {
  align-self: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin-top: auto !important;
  padding-top: 1rem !important;
}

/* ===== DASHBOARD LAYOUT & TERMINAL FIX ===== */

/* 1. Terminal Visuals (The "VS Code" Look) */
.terminal-box {
  background: #090909; /* Deep black to contrast with card bg */
  border-radius: 6px;
  border: 1px solid #333;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden;
  text-align: left;
}

.terminal-header {
  background: #1a1a1a;
  padding: 6px 10px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #252525;
  align-items: center;
}

.terminal-title {
  margin-left: auto; 
  margin-right: auto;
  color: #666;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.dot { width: 8px; height: 8px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

.terminal-body {
  padding: 12px;
  color: #cccccc;
  white-space: pre-wrap; /* Wrap long lines */
}

/* Syntax Highlighting */
.cmd { color: #f2f2f2; }
.cmt { color: #6a9955; }
.kwd { color: #c586c0; }
.str { color: #ce9178; }
.num { color: #b5cea8; }
.pass { color: #4ade80; font-weight: bold; }
.fail { color: #f87171; font-weight: bold; }
.warn { color: #facc15; font-weight: bold; }
.blink { animation: blinker 1.5s linear infinite; color: #fbbf24; }
@keyframes blinker { 50% { opacity: 0; } }

/* 2. The Dashboard Layout (Horizontal Split) */
/* Only active on desktop/tablet to prevent squishing */
@media (min-width: 900px) {
  
  /* Make this specific card span 2 columns */
  #services .cards .card.card-dashboard {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: row !important; /* Horizontal Split */
    align-items: stretch !important;
    padding: 0 !important; /* Remove padding to let children fill */
    min-height: 340px !important; /* Reasonable height */
    height: auto !important;
  }

  /* Left Side: Text & Controls */
  .dashboard-content {
    flex: 0 0 40%;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    border-right: 1px solid rgba(255,255,255,0.05);
  }

  /* Right Side: The Terminal Visual */
  .dashboard-visual {
    flex: 0 0 60%;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2); /* Subtle darkening for the "screen" area */
  }

  /* Text Alignments */
  .card.card-dashboard h3, 
  .card.card-dashboard p {
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  /* Button Position */
  .card.card-dashboard .card-actions {
    margin-top: 1.5rem !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }
}

/* Mobile Fallback (Vertical Stack) */
@media (max-width: 899px) {
  .dashboard-content { padding: 1.5rem; }
  .dashboard-visual { padding: 1rem; }
  .card.card-dashboard .card-actions { margin-top: 1rem !important; }
}

/* ===== FIXES FOR LAYOUT & TERMINAL ===== */

/* 1. Uncouple row heights so Top Row is compact and Bottom Row is tall */
#services .cards {
  grid-auto-rows: auto !important; /* Key fix: rows size independently */
  align-items: stretch !important; /* Cards in the SAME row match height */
}

/* 2. Pure Black Terminal Background */
.terminal-box {
  background-color: #000000 !important;
  border: 1px solid #333 !important; /* Subtle border for visibility */
}

/* 3. Force Title Left Alignment for Wide Card */
.card.card-dashboard h3,
.card.card-dashboard .dashboard-content h3 {
  text-align: left !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* 4. Ensure subtitle stays left too */
.card.card-dashboard .service-subtitle {
  text-align: left !important;
  align-self: flex-start !important;
}

/* ===== FIX: FORCE LEFT ALIGNMENT FOR DASHBOARD CARD (Override Global Center) ===== */
#services .cards .card.card-dashboard .dashboard-content,
#services .cards .card.card-dashboard .dashboard-content h3,
#services .cards .card.card-dashboard .dashboard-content p {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: center !important; /* Vertically center the text block */
}

#services .cards .card.card-dashboard .dashboard-content h3 {
  width: 100% !important;
  margin-left: 0 !important;
}

/* Ensure the button is centered within text area */
#services .cards .card.card-dashboard .card-actions {
  align-self: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
}

/* ===== FIX: VERTICAL CENTER FOR DASHBOARD CONTENT ===== */
#services .cards .card.card-dashboard .dashboard-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Forces vertical centering */
  align-items: flex-start !important; /* Keeps text left-aligned */
  height: 100% !important;
}

/* ===== FIX: TERMINAL VISUALS (Pure Black & Readable Header) ===== */

/* 1. Force Pure Black Background (Opaque) */
#services .cards .card.card-dashboard .terminal-box,
.terminal-box {
  background-color: #000000 !important;
  background: #000000 !important;
  opacity: 1 !important;
  border: 1px solid #333 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important; /* Stronger shadow for depth */
}

/* 2. Fix Header Visibility */
#services .cards .card.card-dashboard .terminal-header,
.terminal-header {
  background-color: #1a1a1a !important; /* Solid Dark Gray (not transparent) */
  background: #1a1a1a !important;
  border-bottom: 1px solid #333 !important;
  padding: 8px 12px !important;
  opacity: 1 !important;
}

/* 3. Fix Header Text Readability */
#services .cards .card.card-dashboard .terminal-title,
.terminal-title {
  color: #e0e0e0 !important; /* Bright Gray/White */
  font-weight: 600 !important;
  text-shadow: none !important;
  font-family: 'Courier New', monospace !important;
  font-size: 0.75rem !important;
}

/* 4. Ensure Terminal Text is Crisp */
.terminal-body {
  color: #cccccc !important;
}

/* ===== CRITICAL FIX: TERMINAL LAYERING & COLORS ===== */

/* 1. Lift Terminal ABOVE the Card's Grid Overlay */
#services .cards .card.card-dashboard .dashboard-visual,
#services .cards .card.card-dashboard .terminal-box {
  position: relative !important;
  z-index: 20 !important; /* Higher than card::after (which is z-index 2) */
  opacity: 1 !important;
  isolation: isolate !important; /* Creates a new stacking context */
}

/* 2. Pure Black Body */
.terminal-box {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #333 !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.9) !important; /* Deep shadow to separate from card */
}

/* 3. Solid Header with Readable Text */
.terminal-header {
  background-color: #1a1a1a !important; /* Solid Dark Grey - No transparency */
  background: #1a1a1a !important;
  border-bottom: 1px solid #333 !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  position: relative !important;
  z-index: 21 !important; /* Sit on top of terminal body */
}

/* 4. Fix Header Text Color */
.terminal-title {
  color: #eeeeee !important; /* Bright White/Grey */
  font-weight: 600 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* 5. Ensure Dots are Visible */
.terminal-header .dot {
  opacity: 1 !important;
  box-shadow: none !important;
}

/* ===== NEW: TECH STACK BADGES (Fill Empty Space) ===== */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto; /* Pushes to bottom */
  padding-top: 1.5rem;
}

.tech-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #888;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.card:hover .tech-badge {
  border-color: rgba(255, 107, 0, 0.3);
  color: #ccc;
}

/* ===== FIX: SUBTITLE ALIGNMENT & COLOR ===== */
/* Force Dashboard Subtitle to match Standard Card Subtitle exactly */
#services .cards .card.card-dashboard .service-subtitle {
  font-size: 0.85rem !important; /* Match standard card */
  font-weight: 500 !important;
  color: #ff6b00 !important; /* Match standard orange accent */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  opacity: 1 !important; /* Fix any transparency issues */
}

/* Ensure Title has same spacing */
#services .cards .card.card-dashboard h3 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1.25rem !important; /* Ensure consistency */
}

/* ===== FIX: SUBTITLE & BADGE ALIGNMENT ===== */

/* 1. Force Subtitle to Match "Generative AI" Style (White & Bold) */
#services .cards .card.card-dashboard .service-subtitle {
  color: #ffffff !important;       /* Pure White */
  font-size: 0.95rem !important;   /* Larger to match neighbor */
  font-weight: 700 !important;     /* Bold */
  text-transform: none !important; /* Optional: Keep formatting clean */
  opacity: 1 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* 2. Badge Alignment - Force to Bottom of Content Area */
.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto !important;     /* Critical: Pushes badges down to align */
  padding-top: 1.5rem;
  padding-bottom: 1rem;            /* Space before button */
  width: 100%;
}

/* Ensure the card body allows the stack to grow/push */
#services .cards .card .card-body,
#services .cards .card.card-dashboard .dashboard-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Make badges look cleaner */
.tech-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #a0a0a0;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

/* ===== FINAL FIX: BADGE ALIGNMENT & SUBTITLE COLOR ===== */

/* 1. Force Badges to Bottom of Content Area */
.tech-stack {
  margin-top: auto !important;     /* Pushes badges down to the button */
  padding-top: 1.5rem !important;
  padding-bottom: 0.5rem !important; /* Space before button */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  width: 100% !important;
}

/* 2. Force Specialized Agentic AI Subtitle to White */
#services .cards .card.card-dashboard .service-subtitle {
  color: #ffffff !important;       /* Pure White */
  font-size: 0.9rem !important;    /* Match standard card */
  font-weight: 700 !important;     /* Bold */
  opacity: 1 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* 3. Ensure Badge Styling is Clean */
.tech-badge {
  font-size: 0.65rem !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ccc !important;
}

/* ===== PORTFOLIO: AGENTIC THEME (Medical Triage & Others) ===== */

/* 1. Green Grid Overlay */
#portfolio .cards .card.card-agentic::after,
.portfolio-grid .card.card-agentic::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: 0.65 !important;
  mix-blend-mode: screen !important;
  
  background-image:
    /* ORANGE LINES (Standard Brand) */
    repeating-linear-gradient(90deg, rgba(255,107,0,0.26) 0 1px, transparent 1px calc(16px)),
    repeating-linear-gradient(0deg,  rgba(255,107,0,0.22) 0 1px, transparent 1px calc(16px)),

    /* GREEN LINES (Cyber/Agentic Override) */
    repeating-linear-gradient(90deg, rgba(0, 255, 136, 0.18) 0 2px, transparent 2px calc(10px)),
    repeating-linear-gradient(0deg,  rgba(0, 255, 136, 0.16) 0 2px, transparent 2px calc(10px)),
    
    /* Tile Fill */
    linear-gradient(45deg, rgba(0,0,0,0.18) 0 12.5%, transparent 12.5% 37.5%, rgba(0,0,0,0.18) 37.5% 50%, transparent 50% 87.5%, rgba(0,0,0,0.18) 87.5% 100%) !important;
    
  background-size: auto, auto, auto, auto, 32px 32px !important;
  
  /* Fade Mask */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
}

/* 2. Hover Glow (Green) */
#portfolio .cards .card.card-agentic:hover,
.portfolio-grid .card.card-agentic:hover {
  border-color: rgba(0, 255, 136, 0.5) !important;
  box-shadow: 0 20px 40px rgba(0, 255, 136, 0.15) !important;
}

/* 3. Ensure Tags/Text Stand Out */
.card.card-agentic .cs-tags span {
  background: rgba(0, 255, 136, 0.1) !important;
  color: #00ff88 !important;
  border-color: rgba(0, 255, 136, 0.2) !important;
}

/* ===== FIX: TRIPTYCH LINKS (Normal Text) ===== */
  display: inline !important;
}

/* 3. Service Cards: Uniform Layout & Subtitles */
#services .card.service-card {
  align-items: center !important;
  text-align: center !important;
  justify-content: space-between !important;
  padding: 2rem 1.5rem !important;
}

#services .card.service-card .card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#services .card.service-card .card-body p.service-subtitle {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* 4. Medical Triage / Featured Card Alignment */
/* Fixes the split layout on desktop */
#portfolio .card-featured .featured-flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 40px !important;
}

#portfolio .featured-info {
  flex: 0 0 45% !important;
  text-align: left !important;
  align-self: flex-start !important;
}

#portfolio .featured-terminal {
  flex: 0 0 50% !important;
  margin-top: 2.5rem !important; /* Aligns with Title */
  background: #000 !important;
  border: 1px solid #333 !important;
}

/* 5. Typography Fixes (Orange -> White Headlines) */
.insight-headline, 
.headline-line1, 
.headline-line2 {
  color: #ffffff !important;
}

/* 6. Mobile Tweaks */
@media (max-width: 900px) {
  #portfolio .card-featured .featured-flex { flex-direction: column !important; }
  .architecture-tagline { 
    display: block !important; 
    width: 90% !important; 
    white-space: normal !important; 
  }
}

/* ===== FIX: TRIPTYCH LINKS (Normal Text) ===== */
  border-right: none !important;
  border-bottom: none !important;
}

/* Ensure prompt stays inline */
.architecture-tagline::before {
  content: ">_ " !important;
  color: #e0e0e0 !important;
  font-weight: 700 !important;
  display: inline !important;
}

/* Ensure cursor stays inline */
.architecture-tagline::after {
  content: " █" !important;
  color: #ff6b00 !important;
  display: inline !important;
  animation: terminal-blink 1s step-end infinite !important;
}

/* ===== ARCHITECTURAL TRIPTYCH STYLES ===== */

/* ===== ARCHITECTURE PHILOSOPHY: 2-COLUMN ASYMMETRIC LAYOUT ===== */
.arch-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

.arch-left {
  position: sticky;
  top: 6rem;
}

.arch-left h2 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  margin-bottom: 1.2rem !important;
}

.arch-left p {
  color: #a1a1aa;
  font-size: 0.95rem;
  line-height: 1.7;
}

.arch-right {
  display: flex;
  flex-direction: column;
}

.arch-pillar {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.arch-pillar:last-child {
  border-bottom: none;
}

.arch-tag {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: #ff6b00;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.75rem;
}

.arch-pillar h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.75rem 0;
}

.arch-pillar p {
  color: #a1a1aa;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.sota-link {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.sota-link:hover {
  color: #5fd3ff;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .arch-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .arch-left {
    position: static;
  }
}

/* ===== QUICK TWEAK: LARGER ARCHITECTURE IMAGE ===== */
.arch-diagram-img {
  max-width: 900px !important; /* Increased from 600px to 900px */
}

/* ===== FINE TUNE: REDUCE ARCHITECTURE IMAGE SIZE ===== */
.arch-diagram-img {
  max-width: 750px !important; /* Adjusted down from 900px */
}

/* ===== THE LIVING BLUEPRINT: DASHBOARD LAYOUT ===== */

/* 1. The Container Grid */
.arch-dashboard {
  display: grid;
  grid-template-columns: 1fr 1.1fr; /* Text left, Image slightly wider */
  gap: 60px;
  margin: 3rem 0 5rem 0;
  align-items: start;
  position: relative;
}

/* 2. Left Column: Manifesto (Text) */
.arch-manifesto {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 10px 0;
}

.manifesto-item {
  display: flex;
  gap: 20px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 12px 12px 0;
  transition: all 0.3s ease;
}

.manifesto-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: #ff6b00;
  transform: translateX(10px);
}

.manifesto-num {
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  line-height: 1;
}

.manifesto-item:hover .manifesto-num {
  color: #ff6b00;
}

.manifesto-content h4 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.manifesto-content p {
  color: #a0a0a0;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.text-accent {
  color: #ff6b00;
  font-weight: 500;
}

/* 3. Right Column: Visual (Sticky) */
.arch-visual {
  position: relative;
  height: 100%; /* Full height of grid to allow sticky to work */
}

.sticky-wrapper {
  position: sticky;
  top: 100px; /* offset from top of viewport */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.arch-image-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Ensure the image fits the container */
.arch-diagram-img {
  width: 100% !important;
  max-width: 100% !important; /* Override previous 750px limit */
  height: auto !important;
  display: block;
}

/* Optional: Cyberpunk Scanline Effect over the image */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 50%, rgba(255, 107, 0, 0.05) 51%, transparent 51%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.5;
}

/* 4. Fix Tagline inside Sticky Wrapper */
.sticky-wrapper .architecture-tagline {
  margin: 0 auto !important; /* Center it relative to the image */
  width: fit-content !important;
}

/* 5. Mobile Responsiveness */
@media (max-width: 900px) {
  .arch-dashboard {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 40px;
  }

  /* On mobile, put image FIRST, then text */
  .arch-visual {
    order: -1; 
  }

  .sticky-wrapper {
    position: static; /* Disable sticky on mobile */
  }

  .manifesto-item:hover {
    transform: none; /* No hover shift on touch */
  }
}

/* ===== THE SYNAPTIC DASHBOARD (Wider & Interactive) ===== */

/* 1. Force this specific section container to be WIDER */
#about .container {
  max-width: 1100px !important;
  padding: 0 1rem;
}

/* 2. Grid Ratio: More space for Image (0.7 vs 1.3) */
.arch-dashboard {
  grid-template-columns: 0.7fr 1.3fr !important;
  gap: 60px !important;
}

/* 3. The Docked Terminal (Attached to Image) */
.docked-terminal {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: -6px !important; /* Pull up to touch image */
  border-top: none !important;
  border-radius: 0 0 12px 12px !important; /* Rounded bottom only */
  background: #080808 !important; /* Match image border darkness */
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-top: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
  position: relative;
  z-index: 2;
}

/* 4. Image Wrapper Enhancements */
.arch-image-wrapper {
  border: 1px solid rgba(255,255,255,0.15); /* Default border */
  border-bottom: none; /* Open bottom for docking */
  border-radius: 12px 12px 0 0; /* Rounded top only */
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* 5. Status Overlay (Tech Text on Image) */
.status-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ff6b00;
  background: rgba(0,0,0,0.8);
  padding: 4px 10px;
  border-left: 3px solid #ff6b00;
  z-index: 10;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* 6. Active State for Manifesto Items */
.manifesto-item {
  opacity: 0.5; /* Dim inactive items */
  transform: translateX(0);
  border-left: 2px solid rgba(255,255,255,0.1);
}

.manifesto-item.active {
  opacity: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 100%);
  border-left-width: 4px;
  /* Border color is handled via JS for dynamic colors */
  padding-left: 28px; /* Slight shift */
}

/* Mobile Adjustments */
@media (max-width: 1100px) {
  #about .container { max-width: 100% !important; padding: 0 1.5rem; }
  .arch-dashboard { grid-template-columns: 1fr !important; gap: 40px !important; }
  .docked-terminal { font-size: 0.8rem !important; padding: 10px !important; }
}



/* ===== FIX: Remove Orange Border/Glow on Scale Card Hover ===== */
.scale-card:hover {
  /* Reset border to standard base color (removes the flashing orange border) */
  border-color: rgba(255, 255, 255, 0.06) !important;
  
  /* Preserve the static Orange Top Border so it doesn't disappear */
  border-top-color: rgba(255, 107, 0, 0.5) !important;
  
  /* Remove the orange glow shadow */
  box-shadow: none !important;
}

/* =========================================
   6 CORE AGENTIC PRINCIPLES GRID
   ========================================= */
.principles-strip {
  margin: 4rem 0;
  padding: 3rem 1.5rem;
  background: rgba(10, 10, 10, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.principles-header {
  text-align: center;
  margin-bottom: 3rem;
}
.principles-strip-title {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.principles-strip-subtitle {
  color: #ff6b00;
  font-family: 'Fira Code', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.principle-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 2rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.principle-card:hover {
  border-color: rgba(255, 107, 0, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.08);
  background: #141414;
}
.principle-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: #ff6b00;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.principle-card:hover::before {
  opacity: 1;
}
.principle-icon {
  font-size: 2.2rem;
  color: #ff6b00;
  margin-bottom: 1rem;
  display: inline-block;
}
.principle-card h4 {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  font-family: 'Fira Code', monospace;
}
.principle-card p {
  color: #a0a0a0;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .principles-grid { grid-template-columns: 1fr; }
  .principle-card { padding: 1.5rem; }
  .principles-strip { padding: 2rem 1rem; }
}

/* =========================================
   TERMINAL TAGLINE OVERRIDES
   ========================================= */
.architecture-tagline {
  border-left: none !important;
  padding-left: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  background: linear-gradient(
    90deg,
    #ff6b00,
    #ff9a56,
    #ffcc00,
    #4af626,
    #00d4ff,
    #7b61ff,
    #ff6b00
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: wave-color 6s ease-in-out infinite !important;
  text-shadow: none !important;
}

@keyframes wave-color {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.architecture-tagline .prompt-sign {
  display: none !important;
}

.architecture-tagline .cursor-blink {
  display: none !important;
}

/* Forcefully remove any old CSS-injected prompts or cursors */
.architecture-tagline::before,
.architecture-tagline::after {
  content: none !important;
  display: none !important;
}

/* =========================================
   7TH PRINCIPLE CAPSTONE LAYOUT
   ========================================= */
.principle-capstone {
  /* Spans all available columns (3 on desktop, 2 on tablet, 1 on mobile) */
  grid-column: 1 / -1; 
  background: linear-gradient(145deg, rgba(255, 107, 0, 0.05) 0%, rgba(17, 17, 17, 1) 40%);
  border-color: rgba(255, 107, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Add a subtle glow to emphasize it's the final/foundational step */
.principle-capstone:hover {
  box-shadow: 0 10px 40px rgba(255, 107, 0, 0.15);
}

/* Desktop & Tablet Layout for Capstone (Horizontal) */
@media (min-width: 768px) {
  .principle-capstone {
    flex-direction: row;
    text-align: left;
    padding: 2.5rem 3rem;
  }
  
  .principle-capstone .principle-icon {
    margin-bottom: 0;
    margin-right: 2.5rem;
    font-size: 3rem; /* Make the DNA icon slightly larger */
  }
  
  .principle-capstone .capstone-text {
    flex: 1;
  }
}

/* =========================================
   TERMINAL TAGLINE SPECIFIC STYLES
   ========================================= */
.term-green-text {
  color: #4af626 !important; /* Pure terminal green */
  font-family: 'Fira Code', 'Courier New', monospace !important;
  font-weight: 500 !important;
  text-shadow: 0 0 8px rgba(74, 246, 38, 0.3) !important; /* CRT glow effect */
}



/* =========================================
   7TH PRINCIPLE CAPSTONE LAYOUT
   ========================================= */
.principle-capstone {
  /* Forces the card to span all columns in the grid */
  grid-column: 1 / -1 !important; 
  background: linear-gradient(145deg, rgba(255, 107, 0, 0.08) 0%, rgba(17, 17, 17, 1) 40%) !important;
  border-color: rgba(255, 107, 0, 0.4) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem !important;
}

.principle-capstone:hover {
  box-shadow: 0 10px 40px rgba(255, 107, 0, 0.15) !important;
  transform: translateY(-5px);
}

/* Desktop & Tablet Layout (Horizontal split for the wide card) */
@media (min-width: 768px) {
  .principle-capstone {
    flex-direction: row;
    text-align: left;
    padding: 2.5rem 4rem !important;
    gap: 3rem;
  }
  
  .principle-capstone .principle-icon {
    margin-bottom: 0 !important;
    font-size: 3.5rem !important; /* Make the DNA icon larger to anchor the section */
  }
  
  .principle-capstone .capstone-text {
    flex: 1;
  }
}

/* =========================================
   BENTO BOX GRID LAYOUT (Principles 01-06)
   ========================================= */
.principles-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  align-items: stretch !important;
}

@media (min-width: 992px) {
  /* The Magic 'VIP' Pass for wide cards */
  .principle-wide {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: row !important; /* Puts icon on left, text on right */
    align-items: center !important;
    gap: 2.5rem !important;
    padding: 2.5rem 3rem !important;
    text-align: left !important;
  }
  
  .principle-wide .principle-icon {
    margin-bottom: 0 !important;
    font-size: 3.5rem !important;
    flex-shrink: 0 !important;
  }
  
  .principle-wide .card-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  .principle-wide h4 {
    margin-top: 0 !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.8rem !important;
  }
}

/* Mobile Fallback: Stack everything vertically */
@media (max-width: 991px) {
  .principles-grid {
    grid-template-columns: 1fr !important;
  }
  .principle-wide {
    grid-column: span 1 !important;
  }
}

/* =========================================
   7TH PRINCIPLE CAPSTONE (BENTO EDITION)
   ========================================= */
.principle-capstone {
  grid-column: 1 / -1 !important; /* Forces it to span all columns */
  display: flex !important;
  flex-direction: column !important;
  gap: 2.5rem !important;
  padding: 3rem !important;
  background: linear-gradient(145deg, rgba(255, 107, 0, 0.08) 0%, rgba(17, 17, 17, 1) 40%) !important;
  border: 1px solid rgba(255, 107, 0, 0.3) !important;
  border-radius: 12px !important;
  text-align: left !important;
  align-items: flex-start !important;
  margin-top: 1.5rem !important;
  transition: all 0.3s ease !important;
}

.principle-capstone:hover {
  box-shadow: 0 15px 40px rgba(255, 107, 0, 0.2) !important;
  border-color: rgba(255, 107, 0, 0.6) !important;
  transform: translateY(-5px) !important;
}

.principle-capstone .capstone-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.principle-capstone .capstone-text h4 {
  font-size: 1.4rem !important;
  color: #fff !important;
  margin-bottom: 1rem !important;
  font-family: 'Fira Code', monospace !important;
}

.principle-capstone .capstone-text p {
  font-size: 1rem !important;
  color: #a0a0a0 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.principle-capstone .principle-icon {
  font-size: 3rem !important;
  color: #ff6b00 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
}

/* The Image Frame */
.capstone-image {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 168, 255, 0.2) !important; 
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Desktop Side-by-Side Capstone */
@media (min-width: 1024px) {
  .principle-capstone {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4rem !important;
    padding: 4rem !important;
  }
  
  .capstone-visual {
    flex: 1.2 !important; 
    display: flex !important;
    justify-content: center !important;
  }
  
  .principle-capstone .principle-icon {
    margin-bottom: 0 !important;
  }
}

/* =========================================
   CUSTOM ADJUSTMENTS FOR PRINCIPLES CARDS 
   ========================================= */

/* 1. Decrease the overall height of the first 6 cards by reducing padding */
.principles-grid .principle-card {
  padding: 1.25rem 1.5rem !important; 
}

/* 2. Decrease title and icon size for exactly 01, 04, and 06 */

/* Target the Icons */
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  font-size: 1.4rem !important; /* Scaled down from 2.2rem */
  margin-bottom: 0.5rem !important;
}

/* Target the Titles (h4) */
.principles-grid .principle-card:nth-child(1) h4,
.principles-grid .principle-card:nth-child(4) h4,
.principles-grid .principle-card:nth-child(6) h4 {
  font-size: 0.95rem !important; /* Scaled down from 1.1rem */
  margin-bottom: 0.4rem !important;
}

/* =========================================
   FIX: EQUALIZE PRINCIPLE ICON SIZES
   ========================================= */

/* Restore the icons for 01, 04, and 06 to match 02, 03, and 05 */
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  font-size: 2.2rem !important;   /* Matches default card icon size */
  margin-bottom: 1rem !important; /* Matches default card spacing */
}

/* =========================================
   FIX: STANDARDIZE ALL 6 PRINCIPLE CARDS TO TOP-LEFT
   ========================================= */

/* Force all standard cards to stack vertically and align left */
.principles-grid .principle-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Force the icon to sit alone at the top-left */
.principles-grid .principle-card .principle-icon {
  display: block !important;
  text-align: left !important;
  margin-bottom: 1rem !important;
  margin-right: 0 !important;
}

/* Ensure all titles and paragraphs strictly shift to the left */
.principles-grid .principle-card h4,
.principles-grid .principle-card p {
  text-align: left !important;
  margin-left: 0 !important;
  width: 100% !important;
}

/* =========================================
   FIX: EQUALIZE ALL 6 CARD TITLES & ALIGNMENT
   ========================================= */

/* 1. Override previous shrinking and force all 6 titles to be identical */
.principles-grid .principle-card h4,
.principles-grid .principle-card:nth-child(1) h4,
.principles-grid .principle-card:nth-child(4) h4,
.principles-grid .principle-card:nth-child(6) h4 {
  font-size: 1.1rem !important; /* Restores identical size across all cards */
  margin-top: 0 !important;
  margin-bottom: 0.8rem !important; /* Exact same spacing below the title */
  line-height: 1.4 !important;
  align-self: flex-start !important;
}

/* 2. Ensure icons push the titles down by the exact same amount */
.principles-grid .principle-card .principle-icon,
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  font-size: 2.2rem !important;
  margin-bottom: 1rem !important; /* Exact same spacing above the title */
  align-self: flex-start !important;
  display: block !important;
}

/* =========================================
   FIX: ALIGN TITLES BY DECREASING ICON MARGIN
   ========================================= */

/* Target exactly 01, 04, and 06 to decrease the distance between icon and title */
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  margin-bottom: 0.15rem !important; /* Decreased from 1rem to absorb the tall icons and pull the titles up */
}

/* =========================================
   ULTIMATE ALIGNMENT FIX FOR PRINCIPLE TITLES
   ========================================= */

/* Give all icon containers a fixed 55px height. 
   This absorbs the height differences of the icons and forces every 
   title to start at the exact same horizontal coordinate. */
.principles-grid .principle-card .principle-icon {
  height: 55px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* Forces icons to sit flush at the bottom */
  align-items: flex-start !important;   /* Keeps icons aligned to the left */
  margin-bottom: 1rem !important;       /* Uniform space between icon and title */
}

/* Reset any previous hacky margins we applied to specific cards */
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  margin-bottom: 1rem !important; 
}

/* =========================================
   DEFINITIVE FIX: UNIFORM ICON SPACING & TITLE ALIGNMENT
   ========================================= */

/* 1. Standardize the icon wrapper for all 6 cards */
.principles-grid .principle-card .principle-icon {
  height: 45px !important;              /* Fixed height ensures titles below start at the same pixel */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* Anchors all icons to the TOP */
  align-items: flex-start !important;     /* Anchors all icons to the LEFT */
  margin-bottom: 1rem !important;         /* Exact, uniform gap between wrapper and title */
}

/* 2. Neutralize ALL previous specific card hacks */
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(2) .principle-icon,
.principles-grid .principle-card:nth-child(3) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(5) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  margin-bottom: 1rem !important; /* Forces total parity across all cards */
  padding: 0 !important;
}

/* 3. Ensure the icons themselves don't push margins */
.principles-grid .principle-card .principle-icon i {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================
   THE OPTICAL SIZING FIX (TRUE ALIGNMENT)
   ========================================= */

/* 1. Strip away the hacky fixed-height boxes */
.principles-grid .principle-card .principle-icon {
  height: auto !important;
  display: block !important;
  margin-bottom: 1.2rem !important; /* The ONE uniform gap for every card */
  padding: 0 !important;
}

/* 2. Set the baseline font-size for standard icons (02, 03, 05) */
.principles-grid .principle-card .principle-icon i {
  font-size: 2.2rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* 3. OPTICAL SIZING: Shrink the intrinsically tall icons 
      so their physical pixel height matches the standard icons */
.principles-grid .principle-card:nth-child(1) .principle-icon i,
.principles-grid .principle-card:nth-child(4) .principle-icon i,
.principles-grid .principle-card:nth-child(6) .principle-icon i {
  font-size: 1.75rem !important; /* Scaled down to match height of the others */
}

/* =========================================
   MANUAL MARGIN OFFSET (PER DIRECTIVE)
   ========================================= */

/* 1. Reset all previous height/size hacks. Keep all icons at the standard 2.2rem size */
.principles-grid .principle-card .principle-icon {
  height: auto !important;
  display: block !important;
}
.principles-grid .principle-card .principle-icon i {
  font-size: 2.2rem !important;
}

/* 2. INCREASE the distance for 02, 03, and 05 (the physically shorter icons) */
.principles-grid .principle-card:nth-child(2) .principle-icon,
.principles-grid .principle-card:nth-child(3) .principle-icon,
.principles-grid .principle-card:nth-child(5) .principle-icon {
  margin-bottom: 1.6rem !important; 
}

/* 3. DECREASE the distance for 01, 04, and 06 (the physically taller icons) */
.principles-grid .principle-card:nth-child(1) .principle-icon,
.principles-grid .principle-card:nth-child(4) .principle-icon,
.principles-grid .principle-card:nth-child(6) .principle-icon {
  margin-bottom: 0.1rem !important; 
}

/* =========================================
   MANUAL MARGIN OFFSET (FINE-TUNING)
   ========================================= */

/* Increase the gap for 02, 03, and 05 a bit more to achieve perfect alignment */
.principles-grid .principle-card:nth-child(2) .principle-icon,
.principles-grid .principle-card:nth-child(3) .principle-icon,
.principles-grid .principle-card:nth-child(5) .principle-icon {
  margin-bottom: 1.95rem !important; /* Increased from 1.6rem */
}

/* =========================================
   INDIVIDUAL ROW ALIGNMENT (PERFECT PARITY)
   ========================================= */

/* ROW 1: Locked in and perfect per your feedback */
.principles-grid .principle-card:nth-child(1) .principle-icon { margin-bottom: 0.1rem !important; } 
.principles-grid .principle-card:nth-child(2) .principle-icon { margin-bottom: 1.95rem !important; }

/* ROW 2: Fine-Tuned */
/* Shield is taller than Microchip, so we use 1.4rem instead of 1.95rem */
.principles-grid .principle-card:nth-child(3) .principle-icon { margin-bottom: 1.4rem !important; } 
/* File-Signature is shorter than Route, so we use 0.6rem instead of 0.1rem */
.principles-grid .principle-card:nth-child(4) .principle-icon { margin-bottom: 0.6rem !important; } 

/* ROW 3: Fine-Tuned */
/* Arrows (Circle) is taller than Microchip, so we use 1.3rem */
.principles-grid .principle-card:nth-child(5) .principle-icon { margin-bottom: 1.3rem !important; } 
/* Scale is shorter than Route, so we use 0.7rem */
.principles-grid .principle-card:nth-child(6) .principle-icon { margin-bottom: 0.7rem !important; } 

/* Section Subtitle Styling */
.section-subtitle {
    text-align: left;
    font-size: 1.1rem;
    color: #8b949e;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* Specific subtitle polish */
.principles-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: #a1a1aa; 
    margin-top: -1.5rem;
    margin-bottom: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ULTIMATE OVERRIDE: Targets only this subtitle and beats global !important rules */
#core-principles .principles-header .agentic-subtitle-final {
    display: block !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-top: -1.5rem !important; /* Pulls it up tight to the title */
    margin-bottom: 3rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-transform: none !important;
}

/* ===== VALUE EVOLUTION STAIRCASE ===== */
.value-prop-bridge {
  background: linear-gradient(180deg, #080808 0%, #0a0a0a 100%);
  padding: 4rem 0 3rem 0;
  position: relative;
  overflow: hidden;
}

.value-prop-bridge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,0,0.3), transparent);
}

.vprop-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.vprop-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.vprop-subtitle {
  font-size: 1.1rem;
  color: #ff6b00;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.vprop-why {
  font-size: 0.95rem;
  color: #a0a0a0;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

.vprop-why strong {
  color: #ff6b00;
}

/* Evolution Staircase Grid */
.evolution-staircase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* Connecting orange line */
.evolution-staircase::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(255,107,0,0.3) 0%, 
    rgba(255,107,0,0.8) 20%, 
    rgba(255,107,0,0.8) 80%, 
    rgba(255,107,0,0.3) 100%
  );
  z-index: 0;
  transform: translateY(-50%);
}

.evo-step {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  margin: 0 0.5rem;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.evo-step:hover {
  border-color: rgba(255, 107, 0, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Height progression - staircase effect */
.step-low {
  margin-top: 60px;
  min-height: 280px;
}

.step-mid {
  margin-top: 30px;
  min-height: 310px;
}

.step-high {
  margin-top: 0;
  min-height: 340px;
  border-color: rgba(255, 107, 0, 0.2);
  background: linear-gradient(180deg, rgba(255,107,0,0.05) 0%, rgba(20,20,20,0.98) 100%);
}

.step-high:hover {
  border-color: rgba(255, 107, 0, 0.6);
  box-shadow: 0 25px 50px rgba(255, 107, 0, 0.15);
}

/* Level badges */
.evo-badge {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #666;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  width: fit-content;
  letter-spacing: 0.05em;
}

.accent-badge {
  color: #ff6b00;
  background: rgba(255, 107, 0, 0.1);
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.evo-step h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.evo-step ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.evo-step li {
  font-size: 0.85rem;
  color: #a0a0a0;
  padding: 0.4rem 0;
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.5;
}

.evo-step li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: #ff6b00;
  font-weight: 700;
  font-size: 1rem;
}

.evo-step.step-high li::before {
  color: #00ff88;
}

/* Value labels at bottom */
.evo-label {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666;
}

.accent-label {
  color: #00ff88;
  border-top-color: rgba(0, 255, 136, 0.3);
}

/* Mobile responsive */
@media (max-width: 900px) {
  .evolution-staircase {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .evolution-staircase::before {
    display: none;
  }
  
  .step-low,
  .step-mid,
  .step-high {
    margin-top: 0;
    min-height: auto;
  }
  
  .vprop-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 600px) {
  .value-prop-bridge {
    padding: 2.5rem 0;
  }
  
  .evo-step {
    padding: 1.5rem;
    margin: 0;
  }
  
  .vprop-why {
    font-size: 0.9rem;
  }
}

/* --- PROGRESSION LONG CARD --- */
.evolution-progression-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, rgba(220, 20, 60, 0.06), rgba(138, 43, 226, 0.06), rgba(0, 190, 200, 0.06)), var(--panel);
  border-radius: var(--radius);
  margin: 1rem auto 4rem;
  max-width: 840px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

@media(min-width: 768px) {
  .evolution-progression-card {
    flex-direction: row;
    background: linear-gradient(to right, rgba(220, 20, 60, 0.06), rgba(138, 43, 226, 0.06), rgba(0, 190, 200, 0.06)), var(--panel);
  }
}

.progression-col {
  flex: 1;
  padding: 1.2rem 0.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Gradient Shadow Dividers */
.progression-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
}

@media(min-width: 768px) {
  .progression-divider {
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1), transparent);
  }
}

/* Typography Base */
.progression-level {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.progression-title {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  line-height: 1.3;
}

.progression-text {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Progressive Visual Weight */
.col-trap {
  }

.col-shift {
  }

/* The Premium Goal */
.col-asset {
    position: relative;
}





.col-asset .progression-title {
  color: #ffffff;
}

.col-asset .progression-text {
  color: #e2e2e2;
}

/* ====================================================
   ENLARGE INSIGHT SECTION (Proportional Scale Up)
   ==================================================== */

/* 1. Scale up the main container width and padding */
.insight-card-combined {
  max-width: 1100px !important;     /* Scaled up from 900px */
  padding: 35px 45px !important;    /* Proportionally scaled padding */
  gap: 30px !important;             /* Proportionally scaled gap */
}

/* 2. Scale up the image dimensions */
.insight-visual,
.insight-visual-large {
  max-width: 650px !important;      /* Scaled up */
  max-height: 520px !important;     /* Scaled up */
}

.insight-visual img,
.insight-visual-large img {
  max-height: 520px !important;     /* Scaled up to match */
}

/* 3. Scale up the typography to fit the larger space beautifully */
.pillar-title {
  font-size: 1.1rem !important;     /* Scaled up from 0.95rem */
  margin-bottom: 8px !important;    /* Proportionally scaled */
}

.pillar-subtitle {
  font-size: 1.1rem !important;     /* Keep subtitle in sync */
}

.pillar-desc {
  font-size: 0.9rem !important;     /* Scaled up from 0.78rem */
  line-height: 1.65 !important;
}

/* 4. Increase breathing room between text blocks */
.insight-pillars {
  gap: 22px !important;             /* Scaled up from 14px */
}

/* Mobile Adjustments (Keep it manageable on small screens) */
@media (max-width: 900px) {
  .insight-card-combined {
    padding: 25px 20px !important;
    gap: 25px !important;
  }
  .insight-visual,
  .insight-visual-large {
    max-height: 400px !important;
  }
  .insight-visual img,
  .insight-visual-large img {
    max-height: 400px !important;
  }
}

/* ====================================================
   FIX: SMALLER INSIGHT SUBTITLE
   ==================================================== */
.headline-line2,
.insight-headline .headline-line2,
#about .headline-line2,
.section#about .headline-line2 {
  font-size: 1.25rem !important;    /* Reduced from 1.6rem */
  font-weight: 500 !important;      /* Slightly lighter weight to look like a subtitle */
  color: #e0e0e0 !important;        /* Softened from pure white to contrast with main title */
  margin-top: 5px !important;       /* Add a tiny bit of breathing room */
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .headline-line2,
  .insight-headline .headline-line2,
  #about .headline-line2 {
    font-size: 1.05rem !important;  /* Scale down nicely on phones */
  }
}

/* ====================================================
   FIX: SWAP SERVICES TITLE & SUBTITLE FONT SIZES
   ==================================================== */

/* Main Title: "Consulting Services" (Make it LARGER) */
#services-title.section-title {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Ensure the first line doesn't get shrunk by previous hacky rules */
#services-title.section-title::first-line {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
}

/* Subtitle: "Build and Operate..." (Make it SMALLER) */
#services-title .services-subtitle,
#services-title.section-title .services-subtitle {
  font-size: 1.15rem !important;        /* Swapped to be smaller */
  font-weight: 500 !important;          /* Lighter weight */
  color: #e0e0e0 !important;            /* Slightly softened white */
  margin-top: 0.5rem !important;
  display: block !important;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  #services-title.section-title,
  #services-title.section-title::first-line {
    font-size: 1.35rem !important;
  }
  #services-title .services-subtitle,
  #services-title.section-title .services-subtitle {
    font-size: 1rem !important;
  }
}

/* ===== KNOWLEDGE BASE: WIDE CARD OVERRIDE ===== */
#articles .masonry-wide {
  grid-column: span 2 !important;
}

@media (max-width: 900px) {
  #articles .masonry-wide {
    grid-column: span 1 !important;
  }
}


/* --- Domain Tags Grid --- */
.domain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 48px 0;
  width: 100%;
}

.domain-tag {
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5px;
  flex-grow: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.domain-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== CANONICAL HERO + SAFETY OVERRIDES (appended) ===== */
/* Stacking context: keep hero visuals strictly behind content */
#home.hero { position: relative; z-index: 0; }
#home::before { z-index: -3; pointer-events: none; }
#home .hero-grid, #home .hero-grid-svg { z-index: -1; pointer-events: none; }

/* Definitive hero-divider rule (scoped) */
#home.hero .hero-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Scoped hero-inner padding so hero adjustments don't bleed into next sections */
#home.hero .hero-inner {
  padding-top: 50px;
  padding-bottom: 30px;
  text-align: left !important;
  margin: 0 !important;
  width: 100% !important;
}

/* openChatBtn inherits .btn-terminal — no overrides needed */

/* Scoped safety: avoid global !important bleed for service cards (example) */
#services .cards .card {
  min-height: auto !important;
  box-sizing: border-box;
}

/* small helpers */
@media (max-width: 900px) {
  #home .hero-avatar { width: 108px; height: 108px; }
  #typewrite { min-height: 2.2rem; max-width: 520px; }
}

/* ===== Credential Typewriter Styling ===== */
.credential-wrapper {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #cbd5e1;
  min-height: 28px;
}


/* ===== FIX: Center Typewriter Alignment ===== */
.role-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

#typewrite {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  color: #c0c0c0 !important;
  font-size: 0.95rem;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  min-height: 2.8rem !important;
}

#typewrite .tw-inner {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: pre !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: #d0d0d0 !important;
}

/* The >_ Prompt */
#typewrite .tw-inner::before {
  content: ">_";
  position: absolute;
  left: 0;
  color: var(--accent, #ff6b00);
  font-weight: 700;
  font-family: "Courier New", Courier, monospace;
}

/* The Blinking Block Cursor */
#typewrite .tw-inner::after {
  content: "█";
  margin-left: 6px;
  color: var(--accent, #ff6b00);
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* ===== MOBILE FIX: Shrink Typewriter (Desktop Unchanged) ===== */
@media (max-width: 768px) {
  #typewrite {
    min-height: 1.8rem !important; /* Reduce vertical height on mobile */
  }
  #typewrite .tw-inner {
    font-size: 0.75rem !important;
    padding-left: 1.4rem !important; /* Bring prompt closer to text */
    letter-spacing: -0.01em !important; 
  }
}

/* For standard and small phones (iPhone SE, standard Androids) */
@media (max-width: 480px) {
  #typewrite {
    min-height: 1.5rem !important;
  }
  #typewrite .tw-inner {
    font-size: 0.55rem !important; /* Shrink enough to fit 75 chars on one line */
    padding-left: 1.1rem !important;
    letter-spacing: -0.02em !important;
  }
  #typewrite .tw-inner::before {
    /* Shrink the >_ prompt to match */
    font-size: 0.55rem !important;
  }
  #typewrite .tw-inner::after {
    /* Shrink the block cursor to match */
    font-size: 0.55rem !important;
    margin-left: 3px !important;
  }
}


/* Put the prompt back into normal flow */
#typewrite .tw-inner::before {
  position: relative !important;
  left: auto !important;
  margin-right: 8px !important; /* Natural gap instead of padding */
}

/* Scale the gap down slightly on mobile */
@media (max-width: 480px) {
  #typewrite .tw-inner::before {
    margin-right: 4px !important;
  }
}


/* ===== MOBILE HAMBURGER MENU ===== */
/* Desktop Base Rules */
.site-header {
  position: relative !important; /* Anchors the mobile dropdown */
  z-index: 9999; /* Keeps header above other elements */
}

.hamburger {
  display: none; /* Hidden on desktop */
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobile Rules */
@media (max-width: 768px) {
  .hamburger {
    display: block; /* Show hamburger button */
  }

  /* The Dropdown Container */
  #primary-nav {
    position: absolute;
    top: 100%; /* Drops exactly below the header */
    left: 0;
    width: 100%;
    background: rgba(15, 17, 20, 0.96); /* Dark premium background */
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 107, 0, 0.2);
    
    /* Hidden by default with smooth height transition */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
  }

  /* When the menu is toggled open via JS */
  #primary-nav.is-open {
    max-height: 400px; /* Expands to fit links */
  }

  /* Stack the links vertically */
  #navbar {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    margin: 0;
    align-items: center;
  }

  #navbar li {
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }

  #navbar li a {
    display: block;
    padding: 0.75rem;
    font-size: 1.15rem;
    font-weight: 500;
  }
}


/* ===== FIX: RESCUE THE MISSING HAMBURGER ===== */
@media (max-width: 768px) {
  /* Give the header physical height since the nav is absolute */
  .site-header .header-inner {
    display: flex !important;
    justify-content: flex-end !important; /* Push burger to the right */
    align-items: center !important;
    min-height: 60px !important; 
    padding: 0.5rem 1rem !important;
  }

  /* Force the hamburger into existence */
  .hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 10005 !important; /* Must be higher than the dropdown (9999) */
    font-size: 1.8rem !important;
    color: var(--accent, #ff6b00) !important; /* Make it orange! */
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
}


/* ===== FIX: MOBILE MENU OVERFLOW (CONTACT LINK) ===== */
@media (max-width: 768px) {
  /* 1. Allow the container to grow naturally to fit all content */
  #primary-nav {
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding-bottom: 1rem !important; /* Breathing room above the border */
  }
  
  /* 2. Strip the margin from the very last item so it doesn't poke out */
  #navbar li:last-child {
    margin-bottom: 0 !important; 
  }
}


/* ===== UNIFIED PERFECT MOBILE MENU ===== */
.hamburger {
  display: none !important;
}

@media (max-width: 768px) {
  .site-header {
    position: relative !important;
    z-index: 9999 !important;
  }
  .site-header .header-inner {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 70px !important;
    padding: 0 1.5rem !important;
  }
  .hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--accent, #ff6b00) !important;
    font-size: 2rem !important;
    cursor: pointer !important;
    z-index: 10001 !important;
  }
  
  #primary-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: #0f1114 !important;
    border-bottom: 2px solid var(--accent, #ff6b00) !important;
    
    /* Hiding Mechanics */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease-in-out !important;
    
    /* Sizing (includes the Contact link overflow fix) */
    height: auto !important;
    max-height: none !important;
    padding-bottom: 1rem !important;
    box-sizing: border-box !important;
  }
  
  #primary-nav.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
  
  #navbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 2rem 0 0 0 !important;
    margin: 0 !important;
  }
  #navbar li {
    width: 100% !important;
    text-align: center !important;
    margin: 0.75rem 0 !important;
  }
  #navbar li:last-child {
    margin-bottom: 0 !important; /* Fixes bottom border overlap */
  }
  #navbar li a {
    font-size: 1.25rem !important;
    color: #ffffff !important;
    display: block !important;
    padding: 0.5rem !important;
    text-decoration: none !important;
  }
  #navbar li a:hover {
    color: var(--accent, #ff6b00) !important;
  }
}


/* ===== MANIFESTO GRID BOX ===== */
.manifesto-grid {
  display: grid;
  place-items: center;
  background: #16181c; /* Dark grey background */
  border: 1px solid transparent; /* Transparent border */
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 1.5rem auto 2.5rem auto;
  max-width: 850px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.manifesto-text {
  color: #ffffff !important; /* Pure white text */
  font-weight: 400 !important; /* No bold */
  font-style: normal !important; /* No italic */
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .manifesto-grid {
    padding: 1.2rem;
    margin: 1.5rem 1rem 2rem 1rem;
  }
  .manifesto-text {
    font-size: 0.95rem;
    text-align: left; /* Better readability on mobile */
  }
}

/* =========================================
   AGENTIC SOLUTIONS (BENTO) CYBER-CYAN THEME
   ========================================= */

/* 1. Apply the Deep Dark Cyan Gradient to ALL Bento Cards */
#portfolio .bento-grid .bento-item,
#portfolio .bento-grid .card-featured {
    background: linear-gradient(145deg, rgba(14, 18, 26, 0.95) 0%, rgba(5, 5, 8, 1) 100%) !important;
    border: 1px solid rgba(6, 182, 212, 0.15) !important;
}

/* 2. Strip inner solid backgrounds so the dark glass shows through */
#portfolio .bento-grid .bento-item > div,
#portfolio .bento-grid .bento-item .featured-flex,
#portfolio .bento-grid .bento-item .featured-info {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. The Animated Cyan Top Line */
#portfolio .bento-grid .bento-item::after {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3px !important; 
    background: linear-gradient(90deg, transparent, #06b6d4, transparent) !important;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease !important;
    z-index: 50 !important; 
    pointer-events: none;
}

/* 4. Hover State: Show line, elevate, subtle cyan outer glow */
#portfolio .bento-grid .bento-item:hover::after {
    transform: scaleX(1) !important;
}

#portfolio .bento-grid .bento-item:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    /* Keeps the inside dark, adds a cyan glow to the outside */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(6, 182, 212, 0.15) !important;
}

/* 5. Text highlights on hover */
#portfolio .bento-grid .bento-item:hover h3 {
    color: #06b6d4 !important;
    transition: color 0.3s ease !important;
}

/* 6. Keep the terminal box pure black */
#portfolio .bento-grid .bento-item .featured-terminal {
    background: #000000 !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* =========================================
   HYBRID TERMINAL-GLASS FOOTER
   ========================================= */
.site-footer {
    position: relative;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 107, 0, 0.2);
    padding: 80px 0 30px;
    overflow: hidden;
    color: #e0e0e0;
}

.footer-grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(255, 107, 0, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 107, 0, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

/* Footer Headers Alignment Fix */
.footer-logo,
.footer-nav h4,
.footer-contact h4 {
    font-size: 1.15rem !important;      
    font-weight: 700 !important;        
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;     
    text-transform: none !important;    
    letter-spacing: normal !important;  
    display: flex !important;           
    align-items: center !important;     
    height: 35px !important;            
}

.footer-logo {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.3px;
}
.footer-motto { color: #9ca3af; max-width: 300px; margin-bottom: 25px; }
.footer-socials { display: flex; gap: 15px; }
.footer-socials a { color: #9ca3af; font-size: 1.2rem; transition: 0.3s ease; }
.footer-socials a:hover { color: var(--accent); transform: translateY(-3px); }

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #9ca3af; text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: var(--accent); padding-left: 5px; }

/* Cyber CTA Styling */
.cyber-cta {
    display: inline-block; background: #0a0a0a; color: #10b981; 
    font-family: 'JetBrains Mono', monospace; font-size: 0.85rem;
    padding: 12px 20px; border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px; text-decoration: none; transition: all 0.3s ease;
    box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.05); margin-top: 10px; cursor: pointer;
}
.cyber-cta:hover {
    background: rgba(16, 185, 129, 0.1); border-color: #10b981;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2), inset 0 0 15px rgba(16, 185, 129, 0.1);
    color: #fff; transform: translateY(-2px);
}
.cyber-cta .prompt-arrow { color: var(--accent); margin-right: 8px; font-weight: bold; }
.cyber-cta .blink-cursor { color: #10b981; animation: terminalBlink 1s step-end infinite; margin-left: 5px; }
@keyframes terminalBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Terminal Bar Styling */
.footer-terminal-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 30px;
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #6b7280;
}
.terminal-status { display: flex; align-items: center; gap: 8px; }
.status-indicator {
    width: 8px; height: 8px; background: #10b981; border-radius: 50%;
    box-shadow: 0 0 8px #10b981; animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

.terminal-logs {
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--accent);
    opacity: 0.6; min-width: 250px; text-align: right; white-space: nowrap; overflow: hidden;
    animation: textFlicker 3s infinite;
}
@keyframes textFlicker { 0% { opacity: 0.6; } 50% { opacity: 0.5; } 100% { opacity: 0.6; } }

@media (max-width: 768px) {
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .footer-logo, .footer-nav h4, .footer-contact h4 { justify-content: center !important; }
    .footer-motto { margin: 0 auto 25px auto; }
    .footer-socials { justify-content: center; }
    .footer-terminal-bar { flex-direction: column; gap: 15px; }
    .terminal-logs { text-align: center; }
}


/* ========================================= */
/* ========================================================= */
/* --- 1. THE DICHOTOMY ENGINE (GLASS VS BLACK BOX) --- */
/* ========================================================= */

.dichotomy-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 50px; }
@media(max-width: 850px) { .dichotomy-container { grid-template-columns: 1fr; } }

.dichotomy-card { background: rgba(20,20,20,0.6); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 32px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden;}

/* Cinematic Hover Effects */
.black-box:hover { border-color: rgba(231, 76, 60, 0.4); box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(231, 76, 60, 0.05); transform: translateY(-5px); }
.glass-box:hover { border-color: rgba(39, 201, 63, 0.4); box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(39, 201, 63, 0.05); transform: translateY(-5px); }
.black-box:hover .dicho-terminal { border-color: rgba(231, 76, 60, 0.5); }
.glass-box:hover .dicho-terminal { border-color: rgba(39, 201, 63, 0.5); }

.dicho-header { display: flex; align-items: center; gap: 16px; }
.dicho-header i { font-size: 2rem; background: rgba(0,0,0,0.3); padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); }
.dicho-header h3 { font-size: 1.4rem; color: #fff; margin-bottom: 2px; }
.dicho-header span { font-size: 0.85rem; color: var(--gray); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 1px; }

.dicho-desc { color: #a8aeb3; font-size: 0.95rem; line-height: 1.6; }

/* Nested Terminal Windows */
.dicho-terminal { background: #1e1e1e; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.5); transition: border-color 0.3s; }
.dicho-terminal pre { padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.6; color: #d4d4d4; overflow-x: auto; margin: 0; }

/* Mac Window Header Styles (Shared by Dichotomy and Blueprint) */
.mac-header { background: #2d2d2d; padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
.mac-dot.red { background: #ff5f56; } 
.mac-dot.yellow { background: #ffbd2e; } 
.mac-dot.green { background: #27c93f; }
.mac-title { margin-left: auto; color: #858585; font-size: 0.8rem; font-family: 'JetBrains Mono', monospace; }

/* Micro-Glitch Animation for the Black Box */
@keyframes textGlitch {
  0% { transform: translate(0) }
  20% { transform: translate(-1px, 1px) }
  40% { transform: translate(-1px, -1px) }
  60% { transform: translate(1px, 1px) }
  80% { transform: translate(1px, -1px) }
  100% { transform: translate(0) }
}
.black-box:hover .dicho-terminal pre { animation: textGlitch 0.2s ease-in-out; }

/* Feature List (Overrides default bullet points) */
.dicho-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 15px; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.05);}
.dicho-list li { color: #cbd6df; font-size: 0.95rem; display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
.dicho-list i { font-size: 1rem; width: 16px; text-align: center; }
.dicho-list li::before { display: none !important; }

/* Blinking Cursors */
@keyframes blinkRed { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.blink-cursor-red { display: inline-block; width: 8px; height: 14px; background-color: #e74c3c; vertical-align: middle; margin-left: 5px; animation: blinkRed 1s step-end infinite; }

@keyframes blinkGreen { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.blink-cursor-green { display: inline-block; width: 8px; height: 14px; background-color: #27c93f; vertical-align: middle; margin-left: 5px; animation: blinkGreen 1s step-end infinite; }


/* --- ANIMATIONS & UTILITIES --- */
.blink {
  animation: soft-pulse 1.5s infinite;
  font-weight: bold;
  color: var(--accent);
}

@keyframes soft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- MEDIA QUERIES (Keep these at the bottom) --- */
@media (max-width: 768px) { ... }

/* Terminal Blink/Pulse Effect */
.blink {
  animation: soft-pulse 1.5s infinite;
  font-weight: bold;
  color: var(--accent);
}

@keyframes soft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Ensure the bento grid handles the layout correctly */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Optional: Button hover state for the GitHub link */
.btn:hover {
  background: rgba(255,255,255,0.2) !important;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* --- TYPEWRITER CENTERING FIX FOR MOBILE --- */

/* 1. Make the parent container a flexbox that forces absolute centering */
.role-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  min-height: 3rem; /* Optional: prevents the hero section from jumping up/down when text wraps on small screens */
}

/* 3. Ensure the dynamically injected span grows from the center */
.tw-inner {
  display: inline-block;
  text-align: center;
}

/* =========================================
   HERO — CLEAN BUILD (replaces all old hero overrides)
   Uses new class names: hero-split, hero-left, hero-right,
   hero-cards-stack, stack-card. Old .hero-inner, .hero-text,
   .hero-image, .hero-avatar rules are intentionally dead.
   ========================================= */
#home.hero {
  display: block !important;
  min-height: auto !important;
  padding: 85px 0 3.5rem !important;
  position: relative !important;
  z-index: 0 !important;
}

/* Two-column grid layout — aligned with .container */
#home.hero .hero-split {
  display: grid !important;
  grid-template-columns: 50% 50% !important;
  align-items: center !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 60px 1rem 50px 1rem !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Left column: text */
#home.hero .hero-left {
  text-align: left !important;
}

#home.hero .hero-left h1 {
  font-size: 3rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 0 8px 0 !important;
  text-align: left !important;
}

#home.hero .hero-left .highlight {
  color: var(--text) !important;
}

#home.hero .hero-left .hero-tagline {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

#home.hero .hero-left .hero-sub {
  font-size: 1.1rem !important;
  color: var(--muted) !important;
  margin: 0 0 1rem 0 !important;
  text-align: left !important;
}

#home.hero .hero-left .hero-cta {
  display: flex !important;
  gap: 12px !important;
  margin-top: 1.5rem !important;
  justify-items: stretch !important;
}

/* Right column: card stack */
#home.hero .hero-right {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

#home.hero .hero-cards-stack {
  position: relative !important;
  width: 100% !important;
  max-width: 420px !important;
  height: 340px !important;
  margin: 0 auto !important;
}

#home.hero .stack-card {
  position: absolute !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #141414 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

#home.hero .stack-card.card-1 {
  top: 0 !important;
  left: 40px !important;
  z-index: 4 !important;
  padding: 14px 20px !important;
  animation: floatCard1 6s ease-in-out infinite !important;
}

#home.hero .stack-card.card-2 {
  top: 55px !important;
  left: 70px !important;
  z-index: 3 !important;
  width: 85% !important;
  padding: 20px 22px !important;
  animation: floatCard2 6.5s ease-in-out infinite !important;
  animation-delay: 1s !important;
}

#home.hero .stack-card.card-3 {
  top: 125px !important;
  left: 5px !important;
  z-index: 2 !important;
  padding: 24px 22px !important;
  animation: floatCard3 7s ease-in-out infinite !important;
  animation-delay: 2s !important;
}

#home.hero .stack-card.card-4 {
  top: 185px !important;
  left: 210px !important;
  z-index: 3 !important;
  width: 55% !important;
  padding: 14px 18px !important;
  animation: floatCard4 7.5s ease-in-out infinite !important;
  animation-delay: 0.5s !important;
}

/* Card 5: Core Capabilities — always on top */
#home.hero .stack-card.card-5 {
  top: -10px !important;
  left: 200px !important;
  z-index: 20 !important;
  width: 240px !important;
  padding: 18px 16px !important;
  animation: floatCard5 8s ease-in-out infinite !important;
  animation-delay: 1.5s !important;
  border-color: rgba(255, 107, 0, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 107, 0, 0.1) !important;
}

#home.hero .card-cap-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#home.hero .card-cap-item {
  font-size: 0.8rem !important;
  color: #a0b0c0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}

#home.hero .card-cap-item i {
  color: #58a6ff !important;
  font-size: 0.7rem !important;
  width: 14px !important;
  min-width: 14px !important;
  text-align: center !important;
  margin-top: 2px !important;
}

#home.hero .stack-card:hover {
  border-color: rgba(255, 107, 0, 0.35) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 107, 0, 0.12) !important;
  z-index: 20 !important;
}

#home.hero .stack-card:hover .card-label {
  color: #b8c8d8 !important;
}

#home.hero .stack-card:hover .card-title {
  color: #e0e8f0 !important;
}

#home.hero .stack-card:hover .card-tag {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #e0e8f0 !important;
}

#home.hero .stack-card:hover .card-cap-item {
  color: #d8e4f0 !important;
}

#home.hero .card-icon {
  font-size: 1.35rem !important;
  color: #cbd6df !important;
  background: rgba(255, 255, 255, 0.04) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

#home.hero .card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#home.hero .card-label {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #a0b0c0 !important;
  font-weight: 600 !important;
}

#home.hero .card-content .card-title {
  margin: 0 !important;
  font-size: 0.75rem !important;
  color: #b0bcc8 !important;
  font-weight: 400 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.4 !important;
}

/* Card 4: vertical tag list */
#home.hero .card-content-vert {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#home.hero .card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}

#home.hero .card-tag {
  font-size: 0.65rem !important;
  color: #b0bec5 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px !important;
}

#topology-container {
  position: relative;
  width: 380px;
  height: 380px;
  overflow: hidden;
  background-color: transparent;
}

#topology-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================
   AGENTIC SOLUTIONS — Two-Level Tab System
   ============================================ */

.domain-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.domain-tabs::-webkit-scrollbar { display: none; }

.domain-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: transparent;
  color: #a0a0a0;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
  will-change: border-color, color;
}

.domain-tab:hover {
  background: rgba(255,255,255,0.03);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

.domain-tab.active {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.domain-panels {
  position: relative;
}

.domain-panel {
  display: none;
}

.domain-panel.active {
  display: block;
}

.solution-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  min-height: 320px;
  max-width: 900px;
  margin: 0;
}

.usecase-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.08);
  padding-right: 16px;
}

.usecase-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  position: relative;
}

.usecase-tab::before {
  content: '';
  position: absolute;
  right: -21px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--accent);
  border-radius: 1px;
  transition: height 0.25s ease;
}

.usecase-tab:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.usecase-tab.active {
  background: rgba(255,107,0,0.08);
  color: #fff;
}

.usecase-tab.active::before {
  height: 60%;
}

.usecase-tab-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.6;
  min-width: 20px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.usecase-tab.active .usecase-tab-num {
  opacity: 1;
}

.usecase-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.usecase-panels {
  position: relative;
  overflow: hidden;
}

.usecase-panel {
  display: none;
}

.usecase-panel.active {
  display: block;
}

.usecase-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: start;
}

.usecase-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usecase-info h3 {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
  margin: 0;
}

.usecase-subtitle {
  color: var(--text);
  font-weight: 500;
  font-size: 0.85rem;
  margin: 0;
}

.usecase-desc {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

.usecase-info .tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.usecase-info .link-arrow {
  margin-top: 8px;
}

.usecase-visual {
  min-width: 0;
  margin-top: 32px;
}

.usecase-visual .terminal-box {
  width: 100%;
}

.usecase-visual .terminal-body {
  line-height: 1.3;
  font-size: 0.68rem;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {
  #topology-container {
    display: none;
  }

  .solution-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 100%;
  }

  .usecase-tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-right: 0;
    padding-bottom: 12px;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .usecase-tab::before {
    display: none;
  }

  .usecase-tab {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 0.82rem;
  }

  .usecase-content {
    grid-template-columns: 1fr;
  }

  .usecase-visual {
    max-width: 100%;
  }

  .domain-tabs {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .domain-tab {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .domain-tab {
    padding: 7px 12px;
    font-size: 0.75rem;
  }

  .usecase-tab-num {
    display: none;
  }
}

/* ============================================
   HERO CARDS STACK — Animations & Mobile
   ============================================ */
@keyframes floatCard1 { 0%, 100% { transform: translateY(0) rotate(0.5deg); } 50% { transform: translateY(-10px) rotate(-0.5deg); } }
@keyframes floatCard2 { 0%, 100% { transform: translateY(0) rotate(-0.5deg); } 50% { transform: translateY(-14px) rotate(0.5deg); } }
@keyframes floatCard3 { 0%, 100% { transform: translateY(0) rotate(0.2deg); } 50% { transform: translateY(-8px) rotate(-0.8deg); } }
@keyframes floatCard4 { 0%, 100% { transform: translateY(0) rotate(-0.3deg); } 50% { transform: translateY(-12px) rotate(0.4deg); } }
@keyframes floatCard5 { 0%, 100% { transform: translateY(0) rotate(0.3deg); } 50% { transform: translateY(-6px) rotate(-0.3deg); } }

@media (max-width: 768px) {
  /* empty — replaced by final block at EOF */
}

/* ============================================================
   SOTA COMMAND CENTER BENTO-GRID (portfolio refactor)
   ============================================================ */

/* Color Variables - Dark SOTA Theme */
:root {
  --bg-main: #06080d;
  --bg-surface: #0d1117;
  --bg-terminal: #0a0c10;
  --border-muted: rgba(255, 255, 255, 0.08);
  --border-glow: #ff6b00;
  --accent-primary: #ff6b00;
  --text-main: #e6edf3;
  --text-muted: #8b949e;

  /* Terminal Colors */
  --term-cmd: #79c0ff;
  --term-comment: #8b949e;
  --term-kwd: #d2a8ff;
  --term-pass: #3fb950;
  --term-string: #a5d6ff;
  --term-status: #ffa657;
}

.sota-section {
  background-color: var(--bg-main);
  color: var(--text-main);
  padding: 5rem 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.sota-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header & Glow Effects */
.sota-header {
  margin-bottom: 4rem;
}

.sota-title-wrapper {
  position: relative;
  display: inline-block;
}

.sota-title-wrapper h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #ffffff, #8b949e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
}

.title-glow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,107,0,0.15) 0%, rgba(0,0,0,0) 70%);
  filter: blur(20px);
  z-index: 1;
}

/* Shared gradient-title + glow for all sections */
.section-title-gradient {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #ffffff, #8b949e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
}

.section-subtitle {
  color: #8b949e;
  font-size: 1.1rem;
  max-width: 600px;
  line-height: 1.6;
}

.section-left-header {
  margin-bottom: 4rem;
}

.section-left-header .section-subtitle {
  margin: 0;
}

.sota-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 0 2rem;
  line-height: 1.6;
}

.sota-btn-github {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 107, 0, 0.1);
  color: var(--accent-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 107, 0, 0.3);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sota-btn-github:hover {
  background: rgba(255, 107, 0, 0.2);
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.4);
  transform: translateY(-2px);
}

/* Dashboard Matrix Layout */
.sota-matrix-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Domain Navigation */
.sota-domain-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid var(--border-muted);
  padding-bottom: 1.5rem;
}

.sota-domain-tab {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.sota-domain-tab:hover {
  color: var(--text-main);
}

.sota-domain-tab.active {
  color: var(--border-glow);
}

.sota-domain-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--border-glow);
  box-shadow: 0 -2px 10px rgba(255, 107, 0, 0.5);
}

.sota-domain-panel {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.sota-domain-panel.active {
    display: block;
}

/* Use Case Navigation */
.sota-usecase-nav {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.sota-usecase-pill {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  padding: 0.5rem 1.2rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.sota-usecase-pill.active {
  background: rgba(255, 107, 0, 0.1);
  border-color: var(--border-glow);
  color: var(--border-glow);
}

/* Bento Grid (Info + Terminal) */
.sota-usecase-card {
  display: none;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  animation: fadeIn 0.4s ease forwards;
}

.sota-usecase-card.active {
  display: grid;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Info Pane */
.sota-info-pane {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.sota-badge {
  align-self: flex-start;
  background: rgba(255,255,255,0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.sota-info-pane h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.sota-subtitle {
  color: var(--text-main);
  font-weight: 500;
  margin-bottom: 1rem;
}

.sota-desc {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.sota-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.sota-tech-stack span {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  background: #161b22;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
}

.sota-link-arrow {
  color: var(--border-glow);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s ease;
}

.sota-link-arrow:hover {
  gap: 0.8rem;
}

/* SOTA Terminal Pane */
.sota-terminal-pane {
  background: var(--bg-terminal);
  border: 1px solid var(--border-muted);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
}

.sota-term-header {
  background: #161b22;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-muted);
}

.term-traffic-lights {
  display: flex;
  gap: 6px;
}

.term-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.term-dot.close { background: #ff5f56; }
.term-dot.min { background: #ffbd2e; }
.term-dot.max { background: #27c93f; }

.term-title {
  flex: 1;
  text-align: center;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  margin-right: 42px; /* Balance traffic lights */
}

.sota-term-body {
  padding: 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
  flex: 1;
  overflow-x: auto;
}

.term-line {
    white-space: pre-wrap;
    word-break: break-all;
}

/* Terminal Syntax Highlighting */
.term-prompt { color: var(--term-pass); }
.term-cmd { color: var(--term-cmd); font-weight: 600; }
.term-comment { color: var(--term-comment); }
.term-kwd { color: var(--term-kwd); }
.term-pass { color: var(--term-pass); }
.term-string { color: var(--term-string); }
.term-status { color: var(--term-status); font-weight: 600; }
.term-blink { animation: blinker 1.5s linear infinite; }
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--text-main);
  vertical-align: middle;
  margin-left: 4px;
  animation: blinker 1s step-end infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .sota-usecase-card {
    grid-template-columns: 1fr;
  }
  .sota-terminal-pane {
    min-height: 350px;
  }
}

/* force deploy */

/* trigger deploy */

/* ============================================================
   MOBILE LAYOUT — SINGLE SOURCE OF TRUTH (EOF)
   ============================================================ */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* ── Hero ── */
  #home.hero .hero-split {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 5rem 1.25rem 2rem !important;
  }
  .hero-right { display: none !important; }
  .hero-cards-stack { display: none !important; }
  #home.hero .hero-left {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #home.hero .hero-left h1 {
    text-align: center !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  #home.hero .hero-left .hero-tagline {
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  #home.hero .hero-left .hero-sub {
    text-align: center !important;
  }
  #home.hero .hero-left .hero-cta {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* ── Architecture ── */
  .arch-layout {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  .arch-left {
    text-align: center !important;
    position: static !important;
  }
  .arch-left h2 { text-align: center !important; }
  .arch-left p { text-align: center !important; }
  .arch-left .arch-cta { display: flex !important; justify-content: center !important; }
  .arch-pillar { text-align: center !important; padding: 1.5rem 0 !important; }
  .arch-pillar h3 { text-align: center !important; }
  .arch-pillar p { text-align: center !important; }
  .arch-pillar .sota-link { justify-content: center !important; }

  /* ── SOTA / Solutions ── */
  .sota-section { padding: 3rem 1rem !important; }
  .sota-header { text-align: center !important; margin-bottom: 2rem !important; }
  .sota-header p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  .sota-title-wrapper { display: block !important; text-align: center !important; }
  .sota-title-wrapper h2 { text-align: center !important; }
  .sota-matrix-dashboard { padding: 1rem !important; }
  .sota-domain-nav {
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  .sota-domain-tab { font-size: 0.85rem !important; padding: 0.4rem 0.6rem !important; }
  .sota-usecase-nav {
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  .sota-usecase-pill { font-size: 0.8rem !important; padding: 0.4rem 0.8rem !important; }
  .sota-info-pane { text-align: center !important; align-items: center !important; }
  .sota-badge { align-self: center !important; }
  .sota-link-arrow { justify-content: center !important; }
  .sota-terminal-pane { min-height: auto !important; }

  /* ── Section titles ── */
  .section-title-gradient { text-align: center !important; }
  .section-title { text-align: center !important; }
  .section-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }

  /* ── Services ── */
  .section-left-header { text-align: center !important; }
  .services-asymmetric-layout { text-align: center !important; }
  .services-index-track,
  .services-featured-track { width: 100% !important; }

  /* ── Manifesto ── */
  .manifesto-text { text-align: center !important; }

  /* ── Terminal / code blocks — prevent overflow ── */
  .terminal-body,
  .sota-term-body,
  .terminal-box { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ── SOTA domain tabs — fix underline overlap ── */
  .sota-domain-nav {
    padding-bottom: 0.5rem !important;
    gap: 0.25rem !important;
  }
  .sota-domain-tab.active::after {
    bottom: -0.5rem !important;
    height: 2px !important;
  }
  .sota-domain-tab {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.5rem !important;
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════════
   AETHRON NATIVE CHAT WIDGET
   ═══════════════════════════════════════════════════════ */

/* ── Overlay ── */
.chat-widget-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.chat-widget-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* ── Modal ── */
.chat-widget-modal {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: min(420px, calc(100vw - 2rem));
  height: min(600px, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  z-index: 9999;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 107, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.chat-widget-modal[aria-hidden="false"] {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* ── Header ── */
.chat-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.12) 0%, rgba(13, 17, 23, 0.95) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.chat-widget-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-widget-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent, #ff6b00), #ff4500);
  color: #fff;
  flex-shrink: 0;
}
.chat-widget-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #f2f2f2);
  margin: 0;
  line-height: 1.2;
}
.chat-widget-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #8b949e;
}
.chat-widget-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ea043;
  display: inline-block;
}
.chat-widget-close {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.chat-widget-close:hover {
  color: var(--text, #f2f2f2);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Messages ── */
.chat-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.chat-widget-messages::-webkit-scrollbar {
  width: 5px;
}
.chat-widget-messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat-widget-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

/* Welcome */
.chat-widget-welcome {
  text-align: center;
  padding: 30px 10px 10px;
}
.chat-widget-welcome-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text, #f2f2f2);
  margin: 0 0 6px;
}
.chat-widget-welcome-sub {
  font-size: 0.8rem;
  color: #8b949e;
  margin: 0 0 18px;
}
.chat-widget-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.chat-widget-suggestion {
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 107, 0, 0.25);
  background: rgba(255, 107, 0, 0.06);
  color: var(--accent, #ff6b00);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chat-widget-suggestion:hover {
  background: rgba(255, 107, 0, 0.14);
  border-color: var(--accent, #ff6b00);
}

/* Chat bubbles */
.chat-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.55;
  word-wrap: break-word;
  animation: chatBubbleIn 0.2s ease-out;
}
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent, #ff6b00), #e05500);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble-assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text, #f2f2f2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 4px;
}
.chat-bubble-assistant strong {
  color: var(--accent, #ff6b00);
}
.chat-bubble-assistant em {
  color: #8b949e;
  font-size: 0.78rem;
}
.chat-bubble-assistant ul,
.chat-bubble-assistant ol {
  margin: 6px 0;
  padding-left: 18px;
}
.chat-bubble-assistant li {
  margin-bottom: 3px;
}
.chat-bubble-sources {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: #8b949e;
}
.chat-bubble-sources strong {
  color: var(--accent, #ff6b00);
  font-weight: 500;
}

/* ── Typing indicator ── */
.chat-widget-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #ff6b00);
  animation: chatTypingBounce 1.2s ease-in-out infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.chat-typing-label {
  font-size: 0.72rem;
  color: #8b949e;
  margin-left: 4px;
}

/* ── Form ── */
.chat-widget-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(13, 17, 23, 0.6);
  flex-shrink: 0;
}
.chat-widget-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #f2f2f2);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}
.chat-widget-input::placeholder {
  color: #8b949e;
}
.chat-widget-input:focus {
  border-color: rgba(255, 107, 0, 0.4);
}
.chat-widget-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent, #ff6b00), #e05500);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, box-shadow 0.15s;
}
.chat-widget-send:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
}
.chat-widget-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .chat-widget-modal {
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}