/* BrightMind TechWorks – Global Styles (HTML + CSS only) */
/* Color system */
:root{
  --bg:#1A1A1A;
  --surface:#0E0F10;
  --surface-2:#141518;
  --text:#E0E0E0;
  --muted:#B6B6B6;
  --accent:#00BCD4;
  --accent-2:#FFC107;
  --border:#232427;
  --success:#22c55e;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 120% -10%, rgba(0,188,212,.10), transparent 60%),
              radial-gradient(900px 500px at -15% 10%, rgba(255,193,7,.10), transparent 60%),
              var(--bg);
  line-height:1.6;
}

h1,h2,h3,h4{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0 0 .6rem 0;
  line-height:1.2;
}
h1{font-size: clamp(2rem, 1.3rem + 2.5vw, 3rem);}
h2{font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);}
h3{font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);}

p{margin:0 0 1rem 0;color:var(--text)}

a{color:var(--accent);text-decoration:none}

img{max-width:100%;display:block}

.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

.section{padding: clamp(48px, 5vw, 88px) 0;}
/* Section headers with accent underline */
.section-header h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.section-header h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 60px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.muted{color:var(--muted)}

.card {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
}


/* Accessible focus */
:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Header / Nav */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:var(--accent);color:#001014;padding:.5rem 1rem;border-radius:10px;z-index:10000}

header{
  position:sticky;top:0;z-index:999;
  background:rgba(10,10,10,.72);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:64px;
}
.brand{
  display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px
}
.brand img{width:100px;height:100px}
.brand span{font-family:"Montserrat";font-weight:800}
.brand .accent{color:var(--accent)}
.brand .tw{color:var(--accent-2)}

.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
/* Base nav link */
.nav a{
  color: var(--text);
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 12px;
  position: relative;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover & focus */
.nav a:hover,
.nav a:focus-visible{
  background: rgba(255,255,255,.04);
}

/* Active state (supports class or aria-current) */
.nav a.active,
.nav a[aria-current="page"]{
  color: var(--accent);
  background: rgba(0,188,212,.14);      /* teal glow */
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,188,212,.12);
}

/* Underline animation */
.nav a::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  opacity: .9;
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a.active::after,
.nav a[aria-current="page"]::after{
  transform: scaleX(1);
}

.cta-inline{display:flex;gap:10px;align-items:center}
.btn, .btn-outline{
  display:inline-block;border-radius:14px;padding:12px 18px;font-weight:700;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .14s ease, background .2s ease, border-color .2s ease;
}
.btn{background:linear-gradient(180deg, var(--accent), #04a8be);color:#001216}
.btn:hover{transform:translateY(-1px)}
.btn-outline{border-color:var(--accent-2);color:var(--accent-2);background:transparent}
.btn-outline:hover{background:rgba(255,193,7,.12)}

/* Mobile nav (CSS only) */
#nav-toggle{display:none}
.hamburger{display:none;cursor:pointer;padding:8px;border-radius:10px;border:1px solid var(--border)}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);margin:6px 0}
@media (max-width: 900px){
  .hamburger{display:block}
  .nav ul{position:absolute;left:0;right:0;top:64px;background:rgba(10,10,10,.98);
    padding:16px;flex-direction:column;border-bottom:1px solid var(--border);display:none}
  #nav-toggle:checked ~ .nav ul{display:flex}
  .cta-inline{display:none}
}

/* Hero */
.hero{
  padding: clamp(56px, 5vw, 96px) 0;
  background:
    radial-gradient(800px 300px at 110% -10%, rgba(0,188,212,.18), transparent 60%),
    radial-gradient(600px 260px at -10% 0%, rgba(255,193,7,.12), transparent 55%);
}
.hero h1 {
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.muted {
  font-size: 1.05rem;

}
.hero .grid{
  display:grid;gap:28px;align-items:center;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 900px){ .hero .grid{grid-template-columns: 1fr} }

.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  padding:8px 12px;border-radius:999px;font-weight:700;color:var(--muted)
}
.points{display:grid;gap:10px;margin-top:10px}
.points li{list-style:none;display:flex;gap:10px;align-items:flex-start}
.points .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);margin-top:10px}

/* Grids */
.grid-3{display:grid;gap:18px;grid-template-columns: repeat(3, 1fr)}
.grid-4{display:grid;gap:18px;grid-template-columns: repeat(4, 1fr)}
@media (max-width: 1000px){ .grid-4{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 800px){ .grid-3{grid-template-columns: 1fr} .grid-4{grid-template-columns: 1fr} }

.tag{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-weight:700}

/* Services */
.service{display:flex;gap:16px;align-items:flex-start}
.service .icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(0,188,212,.25), rgba(0,188,212,.05));border:1px solid var(--border)}

/* Testimonials */
.testimonial{display:flex;gap:14px}
.testimonial .avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg, #333, #222);border:1px solid var(--border)}

.testimonial {
  border-left: 4px solid var(--accent);
  padding-left: 16px;
}

/* Projects filter (CSS-only) */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filters input[type="radio"]{display:none}
.filters label{padding:8px 12px;border:1px solid var(--border);border-radius:999px;cursor:pointer;color:var(--muted);font-weight:700}
.filters input:checked + label{background:rgba(0,188,212,.16);color:var(--accent);border-color:var(--accent)}

.projects-grid{display:grid;gap:18px;grid-template-columns: repeat(3, 1fr)}
@media (max-width: 1000px){ .projects-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 700px){ .projects-grid{grid-template-columns: 1fr} }
.project-card .thumb{aspect-ratio: 16/10;border-radius:12px;background:linear-gradient(180deg,#1e1f22,#121316);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-weight:700}

.project-card h3 a{color:var(--text);text-decoration:none}
.project-card h3 a:hover{color:var(--accent)}

/* CSS-only filtering via radio siblings */
#filter-all:checked ~ .projects-grid .project-card{display:block}
#filter-web:checked ~ .projects-grid .project-card:not(.web){display:none}
#filter-cloud:checked ~ .projects-grid .project-card:not(.cloud){display:none}
#filter-fintech:checked ~ .projects-grid .project-card:not(.fintech){display:none}
#filter-ai:checked ~ .projects-grid .project-card:not(.ai){display:none}
#filter-mobile:checked ~ .projects-grid .project-card:not(.mobile){display:none}
#filter-uiux:checked ~ .projects-grid .project-card:not(.uiux){display:none}

/* Forms */
input, textarea, select{
  width:100%;border-radius:12px;border:1px solid var(--border);
  padding:12px 14px;background:rgba(255,255,255,.02);color:var(--text);
}
textarea{min-height:140px;resize:vertical}
label{display:block;margin:.4rem 0 .35rem;font-weight:700;color:var(--muted)}
.form-row{display:grid;gap:14px;grid-template-columns: 1fr 1fr}
@media (max-width:700px){ .form-row{grid-template-columns: 1fr} }

/* Tables (if needed) */
table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
th,td{padding:12px 14px;border-bottom:1px solid var(--border)}
th{text-align:left;color:#cfcfcf;background:#121317}

/* Utilities */
.center{display:grid;place-items:center}
.hr{height:1px;background:var(--border);margin:20px 0}
.small{font-size:.92rem}
/* ----- CodeNest Footer (responsive) ----- */
footer { border-top:1px solid var(--border); background:linear-gradient(180deg, var(--surface), var(--surface-2)); color:var(--muted); }
footer .footer-content {
  display:grid; gap:22px; grid-template-columns: 1.6fr 1fr 1fr 1fr; padding: 28px 0;
}
footer .footer-section h3 { color: var(--text); margin-bottom:.6rem; }
footer .footer-section p { color: var(--muted); }
footer .footer-section ul { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
footer .footer-section a { color: var(--muted); text-decoration:none; }
footer .footer-section a:hover { color: var(--accent); text-decoration:underline; }

footer .social-links { display:flex; gap:10px; margin-top:.6rem; }
footer .social-links a {
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
}
footer .social-links a:hover { border-color:var(--accent); background:rgba(0,188,212,.12); color:var(--accent); }

footer .footer-bottom {
  border-top:1px solid var(--border); padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
footer .footer-bottom p { margin:0; color:var(--muted); font-size:.95rem; }

@media (max-width:1000px){ footer .footer-content { grid-template-columns: 1fr 1fr; } }
@media (max-width:600px){
  footer .footer-content { grid-template-columns: 1fr; }
  footer .footer-bottom { flex-direction:column; text-align:center; }
}

/* --- Home: logo strip --- */
.logo-row{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items:center;
}
.logo{
  display:grid; place-items:center;
  height:56px; border:1px solid var(--border); border-radius:12px;
  background: rgba(255,255,255,.02);
  color: var(--muted); font-weight:800; letter-spacing:.6px;
}
@media (max-width: 900px){ .logo-row{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .logo-row{ grid-template-columns: repeat(2, 1fr); } }

/* --- Home: process steps --- */
.step{ position:relative; padding-top:22px; }
.step-num{
  position:absolute; top:-14px; left:16px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,193,7,.18); color: var(--accent-2);
  font-weight:800; border:1px solid var(--border);
}

/* --- Home: tag cloud --- */
.tagcloud{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- Home: FAQ --- */
.faq{ display:grid; gap:12px; }
.faq details summary{
  cursor:pointer; font-weight:700; outline:none;
  list-style:none; /* remove default marker in some browsers */
}
.faq details summary::-webkit-details-marker{ display:none; }
.faq details summary::after{
  content:"+"; float:right; font-weight:800; color:var(--muted);
}
.faq details[open] summary::after{ content:"–"; }

/* --- Home: CTA band --- */
.cta-band{
  padding: clamp(36px, 4vw, 56px) 0;
  background:
    radial-gradient(600px 220px at 105% -10%, rgba(0,188,212,.16), transparent 60%),
    radial-gradient(520px 200px at -5% 0%, rgba(255,193,7,.12), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.cta-band__actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 900px){
  .cta-band .container{ flex-direction:column; align-items:flex-start; }
}