/* Minimal custom styles for TrueArc site */
/* NOTE: Reverting the global 'black end-to-end' overrides so the hero image and panel styles behave as expected. */

/* Remove forced full-page black — allow pages/hero to control backgrounds */
/* html { background-color: #000; } */
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* background removed to allow hero/image to show */ color: #fff; }

/* Restore Bootstrap utility backgrounds to their defaults (don't force transparency) */
/* .bg-light, .bg-white, .bg-body { background-color: transparent !important; color: inherit !important; } */

/* Ensure container-like sections that used bg classes stay dark */
.panel-hero, .terminal, .card, footer, .footer-terminal { background-color: var(--ta-bg-panel) !important; }

/* Toolbar / Navbar: keep transparent but ensure contrast */
.navbar, .navbar-terminal { background: transparent !important; }
.navbar .nav-link, .navbar .navbar-brand { color: var(--ta-text) !important; }

/* Make images that might have white backgrounds blend better */
img { background: transparent; }

/* Ensure any small elements with default light backgrounds are darkened */
.badge, .alert { background-color: rgba(255,255,255,0.04) !important; color: var(--ta-text) !important; border-color: rgba(255,255,255,0.04) !important; }

/* Keep form controls dark */
.form-control, .form-select { background-color: rgba(255,255,255,0.02) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.06) !important; }

.site-container, .container { background: transparent; }

/* Make Bootstrap cards white again with green accents (revert from dark panels) */
.card {
  background-color: #ffffff !important; /* white card background */
  color: #041028 !important;            /* dark text for readability */
  border: 1px solid rgba(4,16,32,0.08) !important;
}
.card .card-body { color: #041028; }

/* Ensure links inside cards use the theme green */
.card a { color: var(--ta-green); }
.card a:hover { color: #1fdc7f; }

/* Slightly stronger shadow for white cards to lift from dark page background */
.service-card { box-shadow: 0 10px 30px rgba(2,8,14,0.06); }
.service-card:hover {
  transform: translateY(-8px);
  /* Dark lift plus a stronger green ambient glow */
  box-shadow:
    0 30px 80px rgba(2,8,14,0.18), /* main dark drop shadow */
    0 16px 60px rgba(41,208,122,0.14), /* larger green ambient */
    0 4px 26px rgba(41,208,122,0.12) inset; /* subtle inner green tint */
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.28);
  /* slightly stronger outer outline to reinforce the hover */
  outline: 2px solid rgba(41,208,122,0.10);
}

/* Keyboard accessibility: focus states should mirror hover (slightly reduced intensity) */
.service-card:focus-within, .service-card:focus {
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(2,8,14,0.16),
    0 12px 48px rgba(41,208,122,0.16),
    0 3px 18px rgba(41,208,122,0.10) inset;
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.30);
  outline: 3px solid rgba(41,208,122,0.12);
}

/* Make lists and text inside cards use the dark color */
.service-card .card-text, .service-card ul, .service-card .card-body li { color: #041028; }

/* Ensure links remain visible on black background */
a { color: var(--ta-green); }
a:hover, a:focus { color: #1fdc7f; text-decoration: underline; }

/* Footer and other small elements */
footer, .footer-terminal { background: transparent !important; color: rgba(255,255,255,0.9); }
.footer-terminal a { color: rgba(255,255,255,0.9); }

/* Make forms and inputs inherit the dark panel look where not already covered */
.form-control, .form-select { background-color: rgba(255,255,255,0.02); color: #fff; border: 1px solid rgba(255,255,255,0.06); }
.form-control::placeholder { color: rgba(255,255,255,0.5); }

.hero {
  /* restore hero background image from Unsplash (use source.unsplash for a stable photo URL) */
  background-image: url('https://source.unsplash.com/LozNVrK-dJU/1920x1080');
  background-color: #000; /* fallback while image loads */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
  min-height: 100vh; /* full viewport */
  display: flex;
  align-items: center; /* vertical center */
}
.hero::before{
  /* subtle dark overlay so text remains legible over the image */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.45));
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero .display-5 { color: #fff; }
.hero .lead { color: rgba(255,255,255,0.9); }
.navbar-brand { font-weight:700; color:#0b3d91 !important; }
footer small { color: #6c757d; }
.container { max-width: 960px; }

/* Reveal on scroll */
.reveal-hidden { opacity: 0; transform: translateY(18px) scale(0.995); transition: opacity 600ms ease, transform 600ms ease; }
.reveal-visible { opacity: 1; transform: translateY(0) scale(1); }

/* simple hero visual */
.hero-visual svg { filter: drop-shadow(0 6px 12px rgba(11,61,145,0.08)); }

/* Typewriter */
.typewriter { color: var(--ta-green); font-weight:700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; }
.typewriter .cursor { display:inline-block; width:10px; height:1.1em; margin-left:6px; background: var(--ta-green); border-radius:2px; vertical-align:middle; animation: ta-blink 1s steps(2, start) infinite; }
@keyframes ta-blink { 50% { opacity: 0; } }

/* TrueArc terminal colours & animated terminal component */
:root{
  --ta-bg-dark: #041028; /* deep navy */
  --ta-bg-panel: #071433; /* panel base */
  --ta-blue: #0b3d91; /* brand blue */
  --ta-cyan: #00d1ff;
  --ta-green: #29d07a;
  --ta-amber: #f5a623;
  --ta-magenta: #ff6aa3;
  --ta-text: #cfe8ff;
  --ta-muted: #8faed8;
}

/* animated gradient used by terminal background */
@keyframes ta-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ta-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.94; }
}

/* Terminal wrapper */
.terminal {
  background: linear-gradient(90deg, rgba(11,61,145,0.12) 0%, rgba(0,209,255,0.06) 35%, rgba(255,106,163,0.04) 70%);
  background-color: var(--ta-bg-panel);
  background-size: 300% 300%;
  animation: ta-pan 8s ease-in-out infinite, ta-flicker 3s linear infinite;
  color: var(--ta-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  padding: 1.15rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(4,20,40,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  tab-size: 4;
  overflow: auto;
}

/* Individual lines */
.terminal .line { display:block; white-space:pre-wrap; word-break:break-word; }

/* Prompt and command styles */
.terminal .prompt { color: var(--ta-blue); font-weight:600; margin-right:6px; }
.terminal .cmd { color: var(--ta-text); }

/* ANSI-like colours for inline spans */
.terminal .ansi-black { color: #0b1220; }
.terminal .ansi-red { color: #ff6b6b; }
.terminal .ansi-green { color: var(--ta-green); }
.terminal .ansi-yellow { color: var(--ta-amber); }
.terminal .ansi-blue { color: var(--ta-blue); }
.terminal .ansi-magenta { color: var(--ta-magenta); }
.terminal .ansi-cyan { color: var(--ta-cyan); }
.terminal .ansi-white { color: #e6f6ff; }

/* Badges and highlights */
.terminal .badge { display:inline-block; padding:0.08rem 0.38rem; border-radius:6px; font-size:0.78em; background:rgba(255,255,255,0.04); color:var(--ta-text); margin-left:0.4rem; }

/* Animated cursor — use at end of a typed line */
.terminal .cursor {
  display:inline-block; width:10px; height:1.05em; vertical-align:middle; margin-left:6px;
  background: linear-gradient(180deg, var(--ta-text), rgba(255,255,255,0.6));
  border-radius:2px;
  box-shadow: 0 0 12px rgba(12,84,196,0.35);
  animation: ta-cursor 1s steps(2, end) infinite;
}
@keyframes ta-cursor { 0% { opacity:1; transform:scaleX(1); } 50% { opacity:0; transform:scaleX(0.85); } 100% { opacity:1; transform:scaleX(1); } }

/* small glow effect for highlighted tokens */
.terminal .glow { box-shadow: 0 6px 20px rgba(11,61,145,0.12); }

/* compact utility to show a 'window top bar' */
.terminal .window-bar { display:flex; gap:8px; align-items:center; margin-bottom:0.6rem; }
.terminal .window-dot { width:10px; height:10px; border-radius:50%; background:#ff5f56; box-shadow: 0 0 0 6px rgba(255,95,86,0.04); }
.terminal .window-dot.yellow { background:#ffbd2e; box-shadow: 0 0 0 6px rgba(255,189,46,0.03); }
.terminal .window-dot.green { background:#27c93f; box-shadow: 0 0 0 6px rgba(39,201,63,0.03); }

/* small responsive tweaks */
@media (max-width:576px){ .terminal { padding:0.9rem; border-radius:10px; } }

/* Terminal-style navbar & button overrides */
.navbar-terminal, .navbar-terminal .navbar-brand { color: #fff !important; }
.navbar-terminal { background: transparent !important; box-shadow: none; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-dark .navbar-nav .nav-link.active { color: var(--ta-green); font-weight:600; }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.08); }
.navbar-dark .navbar-toggler-icon { filter: invert(1) opacity(0.85); }

/* Make navbar links use the terminal green color for better theme consistency */
.navbar-terminal .nav-link,
.navbar-terminal .navbar-nav .nav-link {
  color: var(--ta-green) !important;
  font-weight: 600;
}
.navbar-terminal .nav-link:hover,
.navbar-terminal .nav-link:focus {
  color: #1fdc7f !important; /* slightly brighter on hover */
  text-decoration: none;
}
.navbar-terminal .nav-link.active {
  color: #1fdc7f !important;
  text-decoration: underline;
}

.navbar-terminal .navbar-brand { color: var(--ta-green) !important; }

/* Solid dark navbar for inner pages (about) matching terminal */
.navbar-terminal-dark { background-color: #0b0b0b !important; }
.navbar-terminal-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-terminal-dark .navbar-nav .nav-link.active { color: var(--ta-green); font-weight:600; }

/* Buttons — primary becomes terminal green */
.btn-primary {
  background-color: var(--ta-green) !important;
  border-color: var(--ta-green) !important;
  color: #021;
  box-shadow: 0 6px 18px rgba(41,208,122,0.12);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #1fdc7f !important;
  border-color: #1fdc7f !important;
  color: #021;
}

/* Outline secondary uses green border on dark hero */
.btn-outline-secondary {
  color: var(--ta-green) !important;
  border-color: rgba(41,208,122,0.18) !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: rgba(41,208,122,0.06) !important;
}

/* Ensure hero buttons are visible on pure black hero */
.hero .btn { box-shadow: none; }

/* Small responsive tweak: make navbar overlay content gracefully */
.navbar.position-absolute { z-index: 4; }

/* Make icons a bit smaller so cards look cleaner */
.service-icon { width:36px; height:36px; margin-bottom:10px; }

/* Force service card SVG icons to use the theme green for fill and stroke
   Use !important so this overrides inline attributes in the SVG markup. */
.service-icon, .service-card .service-icon * {
  fill: var(--ta-green) !important;
  stroke: var(--ta-green) !important;
  color: var(--ta-green) !important;
}

/* subtle green glow under icons to match card hover theme */
.service-icon { filter: drop-shadow(0 6px 10px rgba(41,208,122,0.10)); }

/* Make cards heavier: stronger shadow, subtle lift on hover and green left accent
   Add a height transition so equalization changes animate smoothly. */
.service-card {
  transition: height 360ms ease, transform 220ms ease, box-shadow 220ms ease, border-left-color 220ms ease;
  /* stronger visible green outline by default */
  border-left: 4px solid rgba(41,208,122,0.18) !important; /* visible green stripe */
  border: 1px solid rgba(41,208,122,0.14) !important; /* subtle green border around the card */
  /* faint green ambient shadow so cards read against dark background */
  box-shadow: 0 10px 30px rgba(2,8,14,0.06), 0 10px 24px rgba(41,208,122,0.04);
}
.service-card:hover {
  transform: translateY(-8px);
  /* Dark lift plus a stronger green ambient glow */
  box-shadow:
    0 30px 80px rgba(2,8,14,0.18), /* main dark drop shadow */
    0 16px 60px rgba(41,208,122,0.14), /* larger green ambient */
    0 4px 26px rgba(41,208,122,0.12) inset; /* subtle inner green tint */
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.28);
  /* slightly stronger outer outline to reinforce the hover */
  outline: 2px solid rgba(41,208,122,0.10);
}

/* Keyboard accessibility: focus states should mirror hover (slightly reduced intensity) */
.service-card:focus-within, .service-card:focus {
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(2,8,14,0.16),
    0 12px 48px rgba(41,208,122,0.16),
    0 3px 18px rgba(41,208,122,0.10) inset;
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.30);
  outline: 3px solid rgba(41,208,122,0.12);
}

/* Make lists and text inside cards use the dark color */
.service-card .card-text, .service-card ul, .service-card .card-body li { color: #041028; }

/* Ensure links remain visible on black background */
a { color: var(--ta-green); }
a:hover, a:focus { color: #1fdc7f; text-decoration: underline; }

/* Footer and other small elements */
footer, .footer-terminal { background: transparent !important; color: rgba(255,255,255,0.9); }
.footer-terminal a { color: rgba(255,255,255,0.9); }

/* Make forms and inputs inherit the dark panel look where not already covered */
.form-control, .form-select { background-color: rgba(255,255,255,0.02); color: #fff; border: 1px solid rgba(255,255,255,0.06); }
.form-control::placeholder { color: rgba(255,255,255,0.5); }

.hero {
  /* restore hero background image from Unsplash (use source.unsplash for a stable photo URL) */
  background-image: url('https://source.unsplash.com/LozNVrK-dJU/1920x1080');
  background-color: #000; /* fallback while image loads */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
  min-height: 100vh; /* full viewport */
  display: flex;
  align-items: center; /* vertical center */
}
.hero::before{
  /* subtle dark overlay so text remains legible over the image */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.45));
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero .display-5 { color: #fff; }
.hero .lead { color: rgba(255,255,255,0.9); }
.navbar-brand { font-weight:700; color:#0b3d91 !important; }
footer small { color: #6c757d; }
.container { max-width: 960px; }

/* Reveal on scroll */
.reveal-hidden { opacity: 0; transform: translateY(18px) scale(0.995); transition: opacity 600ms ease, transform 600ms ease; }
.reveal-visible { opacity: 1; transform: translateY(0) scale(1); }

/* simple hero visual */
.hero-visual svg { filter: drop-shadow(0 6px 12px rgba(11,61,145,0.08)); }

/* Typewriter */
.typewriter { color: var(--ta-green); font-weight:700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; }
.typewriter .cursor { display:inline-block; width:10px; height:1.1em; margin-left:6px; background: var(--ta-green); border-radius:2px; vertical-align:middle; animation: ta-blink 1s steps(2, start) infinite; }
@keyframes ta-blink { 50% { opacity: 0; } }

/* TrueArc terminal colours & animated terminal component */
:root{
  --ta-bg-dark: #041028; /* deep navy */
  --ta-bg-panel: #071433; /* panel base */
  --ta-blue: #0b3d91; /* brand blue */
  --ta-cyan: #00d1ff;
  --ta-green: #29d07a;
  --ta-amber: #f5a623;
  --ta-magenta: #ff6aa3;
  --ta-text: #cfe8ff;
  --ta-muted: #8faed8;
}

/* animated gradient used by terminal background */
@keyframes ta-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ta-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.94; }
}

/* Terminal wrapper */
.terminal {
  background: linear-gradient(90deg, rgba(11,61,145,0.12) 0%, rgba(0,209,255,0.06) 35%, rgba(255,106,163,0.04) 70%);
  background-color: var(--ta-bg-panel);
  background-size: 300% 300%;
  animation: ta-pan 8s ease-in-out infinite, ta-flicker 3s linear infinite;
  color: var(--ta-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  padding: 1.15rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(4,20,40,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  tab-size: 4;
  overflow: auto;
}

/* Individual lines */
.terminal .line { display:block; white-space:pre-wrap; word-break:break-word; }

/* Prompt and command styles */
.terminal .prompt { color: var(--ta-blue); font-weight:600; margin-right:6px; }
.terminal .cmd { color: var(--ta-text); }

/* ANSI-like colours for inline spans */
.terminal .ansi-black { color: #0b1220; }
.terminal .ansi-red { color: #ff6b6b; }
.terminal .ansi-green { color: var(--ta-green); }
.terminal .ansi-yellow { color: var(--ta-amber); }
.terminal .ansi-blue { color: var(--ta-blue); }
.terminal .ansi-magenta { color: var(--ta-magenta); }
.terminal .ansi-cyan { color: var(--ta-cyan); }
.terminal .ansi-white { color: #e6f6ff; }

/* Badges and highlights */
.terminal .badge { display:inline-block; padding:0.08rem 0.38rem; border-radius:6px; font-size:0.78em; background:rgba(255,255,255,0.04); color:var(--ta-text); margin-left:0.4rem; }

/* Animated cursor — use at end of a typed line */
.terminal .cursor {
  display:inline-block; width:10px; height:1.05em; vertical-align:middle; margin-left:6px;
  background: linear-gradient(180deg, var(--ta-text), rgba(255,255,255,0.6));
  border-radius:2px;
  box-shadow: 0 0 12px rgba(12,84,196,0.35);
  animation: ta-cursor 1s steps(2, end) infinite;
}
@keyframes ta-cursor { 0% { opacity:1; transform:scaleX(1); } 50% { opacity:0; transform:scaleX(0.85); } 100% { opacity:1; transform:scaleX(1); } }

/* small glow effect for highlighted tokens */
.terminal .glow { box-shadow: 0 6px 20px rgba(11,61,145,0.12); }

/* compact utility to show a 'window top bar' */
.terminal .window-bar { display:flex; gap:8px; align-items:center; margin-bottom:0.6rem; }
.terminal .window-dot { width:10px; height:10px; border-radius:50%; background:#ff5f56; box-shadow: 0 0 0 6px rgba(255,95,86,0.04); }
.terminal .window-dot.yellow { background:#ffbd2e; box-shadow: 0 0 0 6px rgba(255,189,46,0.03); }
.terminal .window-dot.green { background:#27c93f; box-shadow: 0 0 0 6px rgba(39,201,63,0.03); }

/* small responsive tweaks */
@media (max-width:576px){ .terminal { padding:0.9rem; border-radius:10px; } }

/* Terminal-style navbar & button overrides */
.navbar-terminal, .navbar-terminal .navbar-brand { color: #fff !important; }
.navbar-terminal { background: transparent !important; box-shadow: none; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-dark .navbar-nav .nav-link.active { color: var(--ta-green); font-weight:600; }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.08); }
.navbar-dark .navbar-toggler-icon { filter: invert(1) opacity(0.85); }

/* Make navbar links use the terminal green color for better theme consistency */
.navbar-terminal .nav-link,
.navbar-terminal .navbar-nav .nav-link {
  color: var(--ta-green) !important;
  font-weight: 600;
}
.navbar-terminal .nav-link:hover,
.navbar-terminal .nav-link:focus {
  color: #1fdc7f !important; /* slightly brighter on hover */
  text-decoration: none;
}
.navbar-terminal .nav-link.active {
  color: #1fdc7f !important;
  text-decoration: underline;
}

.navbar-terminal .navbar-brand { color: var(--ta-green) !important; }

/* Solid dark navbar for inner pages (about) matching terminal */
.navbar-terminal-dark { background-color: #0b0b0b !important; }
.navbar-terminal-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-terminal-dark .navbar-nav .nav-link.active { color: var(--ta-green); font-weight:600; }

/* Buttons — primary becomes terminal green */
.btn-primary {
  background-color: var(--ta-green) !important;
  border-color: var(--ta-green) !important;
  color: #021;
  box-shadow: 0 6px 18px rgba(41,208,122,0.12);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #1fdc7f !important;
  border-color: #1fdc7f !important;
  color: #021;
}

/* Outline secondary uses green border on dark hero */
.btn-outline-secondary {
  color: var(--ta-green) !important;
  border-color: rgba(41,208,122,0.18) !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: rgba(41,208,122,0.06) !important;
}

/* Ensure hero buttons are visible on pure black hero */
.hero .btn { box-shadow: none; }

/* Small responsive tweak: make navbar overlay content gracefully */
.navbar.position-absolute { z-index: 4; }

/* Make icons a bit smaller so cards look cleaner */
.service-icon { width:36px; height:36px; margin-bottom:10px; }

/* Force service card SVG icons to use the theme green for fill and stroke
   Use !important so this overrides inline attributes in the SVG markup. */
.service-icon, .service-card .service-icon * {
  fill: var(--ta-green) !important;
  stroke: var(--ta-green) !important;
  color: var(--ta-green) !important;
}

/* subtle green glow under icons to match card hover theme */
.service-icon { filter: drop-shadow(0 6px 10px rgba(41,208,122,0.10)); }

/* Make cards heavier: stronger shadow, subtle lift on hover and green left accent
   Add a height transition so equalization changes animate smoothly. */
.service-card {
  transition: height 360ms ease, transform 220ms ease, box-shadow 220ms ease, border-left-color 220ms ease;
  /* stronger visible green outline by default */
  border-left: 4px solid rgba(41,208,122,0.18) !important; /* visible green stripe */
  border: 1px solid rgba(41,208,122,0.14) !important; /* subtle green border around the card */
  /* faint green ambient shadow so cards read against dark background */
  box-shadow: 0 10px 30px rgba(2,8,14,0.06), 0 10px 24px rgba(41,208,122,0.04);
}
.service-card:hover {
  transform: translateY(-8px);
  /* Dark lift plus a stronger green ambient glow */
  box-shadow:
    0 30px 80px rgba(2,8,14,0.18), /* main dark drop shadow */
    0 16px 60px rgba(41,208,122,0.14), /* larger green ambient */
    0 4px 26px rgba(41,208,122,0.12) inset; /* subtle inner green tint */
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.28);
  /* slightly stronger outer outline to reinforce the hover */
  outline: 2px solid rgba(41,208,122,0.10);
}

/* Keyboard accessibility: focus states should mirror hover (slightly reduced intensity) */
.service-card:focus-within, .service-card:focus {
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(2,8,14,0.16),
    0 12px 48px rgba(41,208,122,0.16),
    0 3px 18px rgba(41,208,122,0.10) inset;
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.30);
  outline: 3px solid rgba(41,208,122,0.12);
}

/* Make lists and text inside cards use the dark color */
.service-card .card-text, .service-card ul, .service-card .card-body li { color: #041028; }

/* Ensure links remain visible on black background */
a { color: var(--ta-green); }
a:hover, a:focus { color: #1fdc7f; text-decoration: underline; }

/* Footer and other small elements */
footer, .footer-terminal { background: transparent !important; color: rgba(255,255,255,0.9); }
.footer-terminal a { color: rgba(255,255,255,0.9); }

/* Make forms and inputs inherit the dark panel look where not already covered */
.form-control, .form-select { background-color: rgba(255,255,255,0.02); color: #fff; border: 1px solid rgba(255,255,255,0.06); }
.form-control::placeholder { color: rgba(255,255,255,0.5); }

.hero {
  /* restore hero background image from Unsplash (use source.unsplash for a stable photo URL) */
  background-image: url('https://source.unsplash.com/LozNVrK-dJU/1920x1080');
  background-color: #000; /* fallback while image loads */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
  min-height: 100vh; /* full viewport */
  display: flex;
  align-items: center; /* vertical center */
}
.hero::before{
  /* subtle dark overlay so text remains legible over the image */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.45));
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero .display-5 { color: #fff; }
.hero .lead { color: rgba(255,255,255,0.9); }
.navbar-brand { font-weight:700; color:#0b3d91 !important; }
footer small { color: #6c757d; }
.container { max-width: 960px; }

/* Reveal on scroll */
.reveal-hidden { opacity: 0; transform: translateY(18px) scale(0.995); transition: opacity 600ms ease, transform 600ms ease; }
.reveal-visible { opacity: 1; transform: translateY(0) scale(1); }

/* simple hero visual */
.hero-visual svg { filter: drop-shadow(0 6px 12px rgba(11,61,145,0.08)); }

/* Typewriter */
.typewriter { color: var(--ta-green); font-weight:700; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; }
.typewriter .cursor { display:inline-block; width:10px; height:1.1em; margin-left:6px; background: var(--ta-green); border-radius:2px; vertical-align:middle; animation: ta-blink 1s steps(2, start) infinite; }
@keyframes ta-blink { 50% { opacity: 0; } }

/* TrueArc terminal colours & animated terminal component */
:root{
  --ta-bg-dark: #041028; /* deep navy */
  --ta-bg-panel: #071433; /* panel base */
  --ta-blue: #0b3d91; /* brand blue */
  --ta-cyan: #00d1ff;
  --ta-green: #29d07a;
  --ta-amber: #f5a623;
  --ta-magenta: #ff6aa3;
  --ta-text: #cfe8ff;
  --ta-muted: #8faed8;
}

/* animated gradient used by terminal background */
@keyframes ta-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ta-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.94; }
}

/* Terminal wrapper */
.terminal {
  background: linear-gradient(90deg, rgba(11,61,145,0.12) 0%, rgba(0,209,255,0.06) 35%, rgba(255,106,163,0.04) 70%);
  background-color: var(--ta-bg-panel);
  background-size: 300% 300%;
  animation: ta-pan 8s ease-in-out infinite, ta-flicker 3s linear infinite;
  color: var(--ta-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
  padding: 1.15rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(4,20,40,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  tab-size: 4;
  overflow: auto;
}

/* Individual lines */
.terminal .line { display:block; white-space:pre-wrap; word-break:break-word; }

/* Prompt and command styles */
.terminal .prompt { color: var(--ta-blue); font-weight:600; margin-right:6px; }
.terminal .cmd { color: var(--ta-text); }

/* ANSI-like colours for inline spans */
.terminal .ansi-black { color: #0b1220; }
.terminal .ansi-red { color: #ff6b6b; }
.terminal .ansi-green { color: var(--ta-green); }
.terminal .ansi-yellow { color: var(--ta-amber); }
.terminal .ansi-blue { color: var(--ta-blue); }
.terminal .ansi-magenta { color: var(--ta-magenta); }
.terminal .ansi-cyan { color: var(--ta-cyan); }
.terminal .ansi-white { color: #e6f6ff; }

/* Badges and highlights */
.terminal .badge { display:inline-block; padding:0.08rem 0.38rem; border-radius:6px; font-size:0.78em; background:rgba(255,255,255,0.04); color:var(--ta-text); margin-left:0.4rem; }

/* Animated cursor — use at end of a typed line */
.terminal .cursor {
  display:inline-block; width:10px; height:1.05em; vertical-align:middle; margin-left:6px;
  background: linear-gradient(180deg, var(--ta-text), rgba(255,255,255,0.6));
  border-radius:2px;
  box-shadow: 0 0 12px rgba(12,84,196,0.35);
  animation: ta-cursor 1s steps(2, end) infinite;
}
@keyframes ta-cursor { 0% { opacity:1; transform:scaleX(1); } 50% { opacity:0; transform:scaleX(0.85); } 100% { opacity:1; transform:scaleX(1); } }

/* small glow effect for highlighted tokens */
.terminal .glow { box-shadow: 0 6px 20px rgba(11,61,145,0.12); }

/* compact utility to show a 'window top bar' */
.terminal .window-bar { display:flex; gap:8px; align-items:center; margin-bottom:0.6rem; }
.terminal .window-dot { width:10px; height:10px; border-radius:50%; background:#ff5f56; box-shadow: 0 0 0 6px rgba(255,95,86,0.04); }
.terminal .window-dot.yellow { background:#ffbd2e; box-shadow: 0 0 0 6px rgba(255,189,46,0.03); }
.terminal .window-dot.green { background:#27c93f; box-shadow: 0 0 0 6px rgba(39,201,63,0.03); }

/* small responsive tweaks */
@media (max-width:576px){ .terminal { padding:0.9rem; border-radius:10px; } }

/* Terminal-style navbar & button overrides */
.navbar-terminal, .navbar-terminal .navbar-brand { color: #fff !important; }
.navbar-terminal { background: transparent !important; box-shadow: none; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-dark .navbar-nav .nav-link.active { color: var(--ta-green); font-weight:600; }
.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,0.08); }
.navbar-dark .navbar-toggler-icon { filter: invert(1) opacity(0.85); }

/* Make navbar links use the terminal green color for better theme consistency */
.navbar-terminal .nav-link,
.navbar-terminal .navbar-nav .nav-link {
  color: var(--ta-green) !important;
  font-weight: 600;
}
.navbar-terminal .nav-link:hover,
.navbar-terminal .nav-link:focus {
  color: #1fdc7f !important; /* slightly brighter on hover */
  text-decoration: none;
}
.navbar-terminal .nav-link.active {
  color: #1fdc7f !important;
  text-decoration: underline;
}

.navbar-terminal .navbar-brand { color: var(--ta-green) !important; }

/* Solid dark navbar for inner pages (about) matching terminal */
.navbar-terminal-dark { background-color: #0b0b0b !important; }
.navbar-terminal-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.92); }
.navbar-terminal-dark .navbar-nav .nav-link.active { color: var(--ta-green); font-weight:600; }

/* Buttons — primary becomes terminal green */
.btn-primary {
  background-color: var(--ta-green) !important;
  border-color: var(--ta-green) !important;
  color: #021;
  box-shadow: 0 6px 18px rgba(41,208,122,0.12);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #1fdc7f !important;
  border-color: #1fdc7f !important;
  color: #021;
}

/* Outline secondary uses green border on dark hero */
.btn-outline-secondary {
  color: var(--ta-green) !important;
  border-color: rgba(41,208,122,0.18) !important;
  background-color: transparent !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: rgba(41,208,122,0.06) !important;
}

/* Ensure hero buttons are visible on pure black hero */
.hero .btn { box-shadow: none; }

/* Small responsive tweak: make navbar overlay content gracefully */
.navbar.position-absolute { z-index: 4; }

/* Make icons a bit smaller so cards look cleaner */
.service-icon { width:36px; height:36px; margin-bottom:10px; }

/* Force service card SVG icons to use the theme green for fill and stroke
   Use !important so this overrides inline attributes in the SVG markup. */
.service-icon, .service-card .service-icon * {
  fill: var(--ta-green) !important;
  stroke: var(--ta-green) !important;
  color: var(--ta-green) !important;
}

/* subtle green glow under icons to match card hover theme */
.service-icon { filter: drop-shadow(0 6px 10px rgba(41,208,122,0.10)); }

/* Make cards heavier: stronger shadow, subtle lift on hover and green left accent
   Add a height transition so equalization changes animate smoothly. */
.service-card {
  transition: height 360ms ease, transform 220ms ease, box-shadow 220ms ease, border-left-color 220ms ease;
  /* stronger visible green outline by default */
  border-left: 4px solid rgba(41,208,122,0.18) !important; /* visible green stripe */
  border: 1px solid rgba(41,208,122,0.14) !important; /* subtle green border around the card */
  /* faint green ambient shadow so cards read against dark background */
  box-shadow: 0 10px 30px rgba(2,8,14,0.06), 0 10px 24px rgba(41,208,122,0.04);
}
.service-card:hover {
  transform: translateY(-8px);
  /* Dark lift plus a stronger green ambient glow */
  box-shadow:
    0 30px 80px rgba(2,8,14,0.18), /* main dark drop shadow */
    0 16px 60px rgba(41,208,122,0.14), /* larger green ambient */
    0 4px 26px rgba(41,208,122,0.12) inset; /* subtle inner green tint */
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.28);
  /* slightly stronger outer outline to reinforce the hover */
  outline: 2px solid rgba(41,208,122,0.10);
}

/* Keyboard accessibility: focus states should mirror hover (slightly reduced intensity) */
.service-card:focus-within, .service-card:focus {
  transform: translateY(-6px);
  box-shadow:
    0 26px 70px rgba(2,8,14,0.16),
    0 12px 48px rgba(41,208,122,0.16),
    0 3px 18px rgba(41,208,122,0.10) inset;
  border-left-color: var(--ta-green);
  border-color: rgba(41,208,122,0.30);
  outline: 3px solid rgba(41,208,122,0.12);
}

/* Card entrance animation: fade + slide with gentle stagger when parent gains .reveal-visible */
.service-card {
  opacity: 0;
  transform: translateY(12px) scale(0.995);
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1), box-shadow 420ms ease;
}
section.reveal-visible .service-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* stagger delays based on column position (works responsively) */
.row.g-4 > .col:nth-child(1)  .service-card { transition-delay: 40ms; }
.row.g-4 > .col:nth-child(2)  .service-card { transition-delay: 80ms; }
.row.g-4 > .col:nth-child(3)  .service-card { transition-delay: 120ms; }
.row.g-4 > .col:nth-child(4)  .service-card { transition-delay: 40ms; }
.row.g-4 > .col:nth-child(5)  .service-card { transition-delay: 80ms; }
.row.g-4 > .col:nth-child(6)  .service-card { transition-delay: 120ms; }
.row.g-4 > .col:nth-child(7)  .service-card { transition-delay: 40ms; }
.row.g-4 > .col:nth-child(8)  .service-card { transition-delay: 80ms; }
.row.g-4 > .col:nth-child(9)  .service-card { transition-delay: 120ms; }
.row.g-4 > .col:nth-child(10) .service-card { transition-delay: 40ms; }
.row.g-4 > .col:nth-child(11) .service-card { transition-delay: 80ms; }
.row.g-4 > .col:nth-child(12) .service-card { transition-delay: 120ms; }

/* slight pop when visible to emphasize 'heavy' cards */
section.reveal-visible .service-card { box-shadow: 0 18px 48px rgba(2,8,14,0.18); }

/* Smooth transitions for terminal backgrounds and badges */
.terminal { transition: box-shadow 300ms ease, background 800ms ease; }
.cert-badge { transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; }

/* Navbar brand colour on terminal navs should use the theme green to match site accents */
.navbar-terminal { background: transparent !important; box-shadow: none; }
.navbar-terminal .navbar-brand { color: var(--ta-green) !important; }
.navbar-terminal-dark .navbar-brand { color: var(--ta-green) !important; }

/* Certification logos and badges */
.cert-logo { width:44px; height:44px; display:inline-block; vertical-align:middle; border-radius:6px; }
.certs-section {
  /* White background with heavy dark shadow for strong separation */
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));
  background-color: #ffffff; /* pure white */
  color: #041028; /* dark text for readability */
  padding: 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(4,16,32,0.06);
  /* heavy, deep shadow for strong elevation */
  box-shadow: 0 40px 120px rgba(2,8,14,0.32), 0 10px 30px rgba(2,8,14,0.18) inset;
}

/* If the element also includes the .terminal class, `.terminal` rules may still override
   background/color via !important; use a more specific selector to forcibly apply grey */
.terminal.certs-section {
  /* Force white + heavy shadow even when .terminal styles exist */
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1)) !important;
  background-color: #ffffff !important;
  color: #041028 !important;
  box-shadow: 0 40px 120px rgba(2,8,14,0.32) !important, 0 10px 30px rgba(2,8,14,0.18) inset !important;
  border: 1px solid rgba(4,16,32,0.06) !important;
}

/* Ensure headings or utility classes that previously forced white are readable on the light background */
.certs-section h3, .certs-section .text-white { color: #042028 !important; }
.certs-section .text-muted { color: rgba(4,32,40,0.6) !important; }
.certs-section a { color: inherit; }
.certs-section .cert-badge { background: var(--ta-green); color: #021; box-shadow: 0 8px 26px rgba(41,208,122,0.10); }

/* panel-hero: use terminal panel colour, not pure black */
.panel-hero {
  background-color: var(--ta-bg-panel); /* use terminal panel colour */
  color: #fff;
  padding: 2.5rem 1rem;
  border-radius: 8px;
}

/* Make the contact section full-bleed and black like the hero */
#contact.panel-hero {
  /* full-viewport width */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  /* visual style: pure black to match hero feel */
  background-image: none !important;
  background-color: #000 !important;
  color: #fff !important;

  /* full viewport height and centered content */
  min-height: 100vh;
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  padding: 3.5rem 1rem; /* slightly reduced so content sits equidistant */
  z-index: 2;
}

/* Place the Contact Us heading above the form, centered and in normal flow */
#contact.panel-hero > h2 {
  position: relative;
  margin: 0 0 0.5rem 0;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

/* Keep the lead text directly below the heading and slightly spaced */
#contact.panel-hero .lead {
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
  color: rgba(255,255,255,0.9);
}

/* Ensure the internal row and column are perfectly centered and use full available area */
#contact.panel-hero .row {
  width: 100%;
  max-width: 960px; /* keep consistent with site container */
  margin: 0 auto;
  display: flex;
  justify-content: center; /* horizontally center the column */
  align-items: center;     /* vertically center within the section */
}

/* Make the centered form column a flexible column so elements are vertically stacked and centered */
#contact.panel-hero .col-12.col-md-10.col-lg-6.mx-auto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch; /* inputs should stretch to full width */
  gap: 0.75rem;
  padding: 0 1rem;
}

/* Ensure form controls span full width of the column */
#contact.panel-hero .col-12.col-md-10.col-lg-6.mx-auto .form-control,
#contact.panel-hero .col-12.col-md-10.col-lg-6.mx-auto .form-select {
  width: 100%;
}

/* Reduce extra vertical gaps on small screens so 'centred' feels balanced */
@media (max-width: 576px) {
  #contact.panel-hero { padding: 2.5rem 0.75rem; }
  #contact.panel-hero .lead { margin-bottom: 0.75rem; }
}

@media (min-width: 992px) {
  #contact.panel-hero > h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
}

/* Ensure form elements inside the black contact section remain legible */
#contact.panel-hero .form-control,
#contact.panel-hero .form-select,
#contact.panel-hero .form-check-input {
  background-color: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
#contact.panel-hero .form-control::placeholder { color: rgba(255,255,255,0.6) !important; }
#contact.panel-hero .btn-primary { background-color: var(--ta-green) !important; border-color: var(--ta-green) !important; color: #021 !important; }

/* Make the dropdown select itself render with a pure black background in the contact section */
#contact.panel-hero .form-select {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  /* keep native arrow visible on dark bg */
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.9) 50%), linear-gradient(135deg, rgba(255,255,255,0.9) 50%, transparent 50%);
  background-position: calc(100% - 1.5rem) calc(1.15em), calc(100% - 1.1rem) calc(1.15em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Where browsers support styling options, ensure option list is dark */
#contact.panel-hero .form-select option {
  background-color: #000;
  color: #fff;
}

/* Focus/hover states for the select to keep contrast */
#contact.panel-hero .form-select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(41,208,122,0.08) !important;
  border-color: var(--ta-green) !important;
}

/* Keep inner container centered and constrained */
#contact.panel-hero > .container { max-width: 960px; }

/* If the contact panel has a border-radius from .panel-hero, remove it when full-bleed */
#contact.panel-hero { border-radius: 0 !important; }

/* Ensure the certifications separator remains visible if stacked next to contact */
#contact.panel-hero + section { margin-top: 2rem; }