/* PIXELEDGE SYSTEMS – Professional static site
   Theme: Indigo → Cyan gradient, dark background, glass UI, smooth reveals.
   Author: ChatGPT
*/

/* CSS Reset (trimmed modern normalize) */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; } /* use 'hidden' if older browser support is needed */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brand-end); outline-offset: 2px; }

/* Theme */
:root{
  --brand-start:#6D28D9;
  --brand-end:#06B6D4;
  --bg:#0B1020;
  --panel:#0f152b;
  --text:#E6EAF3;
  --muted:#9AA3B2;
  --border:rgba(255,255,255,0.08);
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --radius:18px;
   --logo-min: 44px;     /* smallest on mobile */
  --logo-max: 88px;     /* cap on large desktops */
}

@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9fc; --panel:#ffffff; --text:#101625; --muted:#576176; --border:rgba(16,22,37,.1); }
}

body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1200px 800px at 80% -20%, rgba(109,40,217,.18), transparent 60%),
              radial-gradient(1200px 800px at -10% 110%, rgba(6,182,212,.18), transparent 60%),
              var(--bg);
  line-height: 1.6;
}

/* Utilities */
.container{ width:min(1200px, 92%); margin-inline:auto; }
.stack-2 > * + * { margin-top: .5rem; }
.stack-4 > * + * { margin-top: 1rem; }
.stack-6 > * + * { margin-top: 1.5rem; }
.grid{ display:grid; gap: 1.25rem; }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr;} }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand-gradient{
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
}
.text-gradient{
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.2rem; border-radius: 14px; font-weight: 600;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.btn.primary{ background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); color:white; border-color: transparent; }
.btn.primary:hover{ box-shadow: 0 12px 26px rgba(6,182,212,.28); }
.btn.ghost{ background: transparent; }
.badge{ font-size:.75rem; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--border); opacity:.9 }

/* Header / Nav */
.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }

.logo{ display:flex; align-items:center; gap:.8rem; white-space: nowrap; }

.logo img{
  /* grow with viewport, never smaller than 44px or larger than 88px */
  width:100px;
  height: 90px;
  filter: drop-shadow(0 6px 18px rgba(6,182,212,.25));
}

.logo span{
  font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .35px;
  opacity: 1;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Give the header a bit more breathing room so the larger logo looks balanced */
.site-header .navbar{ padding: 1.1rem 0; }

/* Fine-tune for small phones */
@media (max-width: 480px){
  :root{ --logo-min: 40px; --logo-max: 64px; }
  .site-header .navbar{ padding: .9rem 0; }
}
.nav{ display:flex; align-items:center; gap:1rem; }
.nav a{ 
  padding:.5rem .75rem; 
  border-radius:10px; 
  font-weight:600; 
  color:#f2f6f9; /* Changed to a darker grey for inactive links */
}

.nav a.active, .nav a:hover{ 
  color:var(--text); /* Assuming --text is a darker color for active/hover */
  background: rgba(255,255,255,.05); 
}
.menu-btn{ display:none; }
@media (max-width: 900px){
  .menu-btn{ display:inline-flex; }
  .nav{ position: fixed; inset: 64px 0 auto 0; background: var(--panel); border-top:1px solid var(--border);
        flex-direction: column; padding:1rem; transform: translateY(-150%); transition: .2s ease; }
  .nav.open{ transform: translateY(0); }
}

/* Hero */
.hero{
  position: relative; padding: clamp(3rem, 5vw, 6rem) 0;
}
.hero { overflow-x: clip; } /* or: contain: paint; */
.hero::before{
  content:""; position:absolute; inset:-10% -10% auto -10%; height: 380px; z-index:-1;
  background: radial-gradient(500px 220px at 20% 40%, rgba(109,40,217,.45), transparent 60%),
              radial-gradient(400px 200px at 70% 30%, rgba(6,182,212,.45), transparent 60%);
  filter: blur(40px); opacity:.7; animation: float 12s ease-in-out infinite alternate;
}
@keyframes float{ to{ transform: translateY(18px);} }
.hero .mast{ display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; align-items:center; }
.hero h1{ font-size: clamp(2.2rem, 1.6rem + 2.8vw, 4rem); line-height:1.1; letter-spacing:-.5px }
.lead{ color: var(--muted); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); }

/* Sections */
.section{ padding: clamp(2.5rem, 4vw, 4.5rem) 0; }
.section h2{ font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom: 1rem;}
.kicker{ font-size:.85rem; text-transform: uppercase; letter-spacing:.2em; color: var(--muted); }

/* Carousel (simple) */
.carousel{ position: relative; overflow: hidden; border-radius: var(--radius); }
.carousel-track{ display:flex; gap:1rem; will-change: transform; transition: transform .5s ease; }
.carousel .card{
  width: clamp(220px, 82vw, 320px);
  min-width: clamp(220px, 82vw, 320px);
}
/* --- Safety: ensure embeds never overflow --- */
iframe { max-width: 100%; display: block; }
.carousel-controls{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem}
.carousel button{ width:40px; height:40px; display:grid; place-items:center; }

/* Projects grid */
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem }
.filters button{ padding:.6rem .9rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.02); font-weight:600; color:var(--muted) }
.filters button.active{ background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); color:white; border-color:transparent }
.project{ overflow:hidden; }
.project img{ border-radius:12px; }
.project .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; }
.project .meta small{ color:var(--muted); }

/* Team */
.team{ display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px){ .team{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .team{ grid-template-columns: 1fr; } }
.team .person{ padding: 1rem; border-radius: var(--radius); border:1px solid var(--border); background: rgba(255,255,255,.02) }
.person img{ aspect-ratio: 4/3; width:100%; object-fit: cover; border-radius: 12px; margin-bottom:.75rem }
.person h4{ margin-bottom:.25rem }

/* Contact */
.form{ display:grid; gap:.9rem; grid-template-columns: 1fr 1fr; }
.form .full{ grid-column: 1 / -1; }
.input, select, textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid var(--border);
  background: rgba(255,255,255,.02); color: var(--text);
}
textarea{ min-height: 140px; resize: vertical; }

/* Footer */
footer{ border-top:1px solid var(--border); margin-top: 3rem; }
footer .cols{ display:grid; gap: 1rem; grid-template-columns: 1.4fr repeat(3, 1fr); padding: 2rem 0; }
footer a{ color: var(--muted); }
footer a:hover{ color: var(--text); }
@media (max-width: 900px){ footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ footer .cols { grid-template-columns: 1fr; } }

/* Reveal on scroll */
.reveal{ opacity: 0; transform: translateY(12px); transition: 600ms cubic-bezier(.2,.8,.2,1); }
.reveal.visible{ opacity: 1; transform: none; }

/* Tiny helpers */
.muted{ color: var(--muted); }
.hr{ height:1px; background: var(--border); margin:1rem 0; }
.inline-icon{ width:1.1em; height:1.1em; display:inline-block }
.small{ font-size:.9rem }
.code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9rem }

/* Project detail */
.hero-slim{ padding: 2rem 0; background: linear-gradient(180deg, rgba(109,40,217,.15), transparent); border-bottom:1px solid var(--border) }
.breadcrumbs{ color: var(--muted); font-size:.9rem }
.gallery{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ .hero .mast{ grid-template-columns: 1fr } .gallery{ grid-template-columns: 1fr } }

/* Selection & scrollbar */
::selection{ background: color-mix(in oklab, var(--brand-end) 40%, transparent); }
::-webkit-scrollbar{ height:12px; width:12px }
::-webkit-scrollbar-thumb{ background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); border-radius: 999px; }