/* ===== Reset + theme ===== */
* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
:root{
  --bg:#0f1223; --panel:#171a2b; --text:#e7e9ee; --muted:#a9afc3;
  --brand:#64F0D2; --line:#262a40;

  /* Bigger HERO app logos */
  --hero-icon-min: 120px;
  --hero-icon-max: 190px;
  --hero-icon-vw: 16vw;
}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg,#0b0e1d,#12162a);
}
.container{ max-width:1100px; margin:0 auto; padding:0 20px }

/* ===== Header / Nav ===== */
.site-header{
  position: sticky; top: 0; z-index: 10;
  background: #0f1223;                 /* solid, no alpha */
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand-name{ letter-spacing:.2px }
.logo{ height:50px; width:auto; }

/* ===== Links & Buttons ===== */
a{ color: var(--brand); text-decoration: none }
a:hover, a:focus-visible{ color: var(--brand); text-decoration: underline }

.btn{
  display:inline-block; border:1px solid var(--line);
  padding:10px 14px; border-radius:10px; text-decoration:none;
}
.btn.primary{ background:var(--brand); color:#0b0e1d; border:none; font-weight:600 }
.btn.ghost{ background:transparent }

/* Inside cards, links should NOT turn brand-green */
.card a,
a.card,             /* if the card itself is an <a> */
.card-link,
.card-link .card a{
  color: inherit;
  text-decoration: none;
}

/* ===== Hero ===== */
.hero{
  padding: clamp(28px, 5vh, 56px) 0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(100,240,210,.15), transparent);
}
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center }
.hero h1{ font-size:44px; line-height:1.05; margin:0 0 10px }
.hero p{ color:var(--muted); font-size:18px }

/* Right column card chrome (also reused elsewhere) */
.hero-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  display:grid; gap:14px;
}
.stat{ display:flex; align-items:baseline; justify-content:space-between }
.stat-num{ font-size:36px; font-weight:800 }
.stat-label{ color:var(--muted) }

/* Small CTA row helper */
.hero .cta-row{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }

/* ===== Sections / Cards ===== */
.section{ padding:56px 0 }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding: clamp(16px,3.5vw,24px);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card h3{ margin:4px 0 6px }
.card p{ color:var(--muted) }

/* Make entire cards clickable (only for anchors) */
.card-link{
  display:block; color:inherit; text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.card-link:hover{ transform: translateY(-1px); transition: transform 120ms }
.card-link:focus{
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  outline: none;
}
/* Only clickable cards get hover/focus effects */
a.card:hover,
a.card:focus-visible,
a.card.card-link:hover,
a.card.card-link:focus-visible{
  border-color: var(--brand);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transform: translateY(-1px);
  outline: none;
}

/* Pills / service list */
.pill{
  display:inline-block; border:1px solid var(--line);
  padding:4px 8px; border-radius:999px; font-size:12px;
  margin-right:6px; margin-top:6px;
}
.service-list{ display:grid; gap:10px }

/* Forms / Footer */
.contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
label{ display:grid; gap:6px; color:var(--muted) }
input, textarea{
  background:#0e1224; border:1px solid var(--line); border-radius:10px;
  padding:10px; color:var(--text);
}
.site-footer{ border-top:1px solid var(--line); padding:18px 0 }
.foot{ display:flex; justify-content:space-between; align-items:center }
.muted{ color:var(--muted) }

/* ===== Combo hero slider (left + right move together) ===== */
.hero-rotator-combo{
  position: relative;
  overflow: hidden;
  padding-bottom: 12px;        /* space for dots without pushing layout */
  min-height: 220px;           /* compact baseline; JS will size to slide */
}

/* Track-based slider: one full-width column per slide */
.hr-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .5s ease;
  transform: translateX(calc(var(--i, 0) * -100%));
}

/* Slides are in normal flow inside the track */
.hr-slide{ position: relative; }

.hr-dots{
  position: absolute; left:0; right:0; bottom:8px;
  display:flex; justify-content:center; gap:8px;
  z-index:5; pointer-events:auto;
}
.hr-dots button{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--line); background:transparent; padding:0; cursor:pointer;
}
.hr-dots button[aria-current="true"]{ background:var(--brand); border-color:var(--brand) }

@media (prefers-reduced-motion: reduce){
  .hr-track{ transition: none }
}

/* ===== HERO project slides: bigger icon + tight layout ===== */
.hero-grid:has(.hero-project-left){
  grid-template-columns: minmax(var(--hero-icon-min), var(--hero-icon-max)) 1fr; /* wider left col for bigger icon */
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
}
.hero-project-left{ display:flex; align-items:center; justify-content:flex-end }
.project-icon-lg{
  width:  clamp(var(--hero-icon-min), var(--hero-icon-vw), var(--hero-icon-max));
  height: clamp(var(--hero-icon-min), var(--hero-icon-vw), var(--hero-icon-max));
  border-radius:22px; object-fit:cover; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.hero-project-right h1{ margin:0 0 6px }
.hero-project-right p{ margin:6px 0 0 }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr } /* stack hero columns */
  .cards{ grid-template-columns:1fr }
  .contact .grid{ grid-template-columns:1fr }

  /* scale hero icons sanely on tablets */
  .project-icon-lg{
    width:  clamp(100px, 22vw, 160px);
    height: clamp(100px, 22vw, 160px);
  }
  .hero-grid:has(.hero-project-left){
    grid-template-columns: minmax(100px, 160px) 1fr;
  }
}
@media (max-width: 640px){
  .cards{ grid-template-columns:1fr; padding-inline:12px; gap:14px }
  .card{ padding:20px; border-radius:16px }

  /* slightly smaller on phones */
  .project-icon-lg{
    width:  clamp(96px, 28vw, 140px);
    height: clamp(96px, 28vw, 140px);
  }
  .hero-grid:has(.hero-project-left){
    grid-template-columns: minmax(96px, 140px) 1fr;
  }
}

/* === Compact cards for the Projects section === */
#titles .cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
#titles .card{
  padding: 12px 14px;          /* tighter padding */
  border-radius: 12px;
}
#titles .card-app{
  display: grid !important;
  grid-template-columns: auto 1fr;  /* icon | text */
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  margin-bottom: 6px;
}
#titles .card-app .app-icon{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
  object-fit: cover;
}
#titles .card-app .app-text{ min-width: 0 }
#titles .card-app .app-text h3{
  font-size: 16px; margin: 0 0 2px; line-height: 1.15;
}
#titles .card-app .app-text p{
  font-size: 13px; line-height: 1.35; margin: 0; color: var(--muted);
}
#titles .pill{
  font-size: 11px; padding: 3px 6px; margin-top: 4px;
}
/* a touch more motion for the smaller cards */
#titles .card-link:hover{ transform: translateY(-2px) }
/* --- responsive tweaks for project cards --- */
@media (max-width: 900px){
  #titles .cards{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 640px){
  #titles .cards{ grid-template-columns: 1fr }
  #titles .card{ padding: 14px }
}

/* === Team: image left, text right === */
#team .profile-card { padding: 14px 16px; }

.profile-row{
  display: grid;
  grid-template-columns: 95px 1fr;  /* avatar | text */
  align-items: center;
  column-gap: 12px;
}

.profile-avatar{
  width: 95px;
  height: 95px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  display: block;
}

.profile-text{ min-width: 0; }
.profile-text h3{
  margin: 0 0 4px;
  line-height: 1.15;
}
.profile-text p{
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere; /* keeps long titles tidy */
}

/* Smaller on phones */
@media (max-width: 640px){
  .profile-row{
    grid-template-columns: 60px 1fr;
    column-gap: 10px;
  }
  .profile-avatar{
    width: 60px; height: 60px; border-radius: 12px;
  }
}

/* Bigger brand logo in the HERO first slide */
.hero-grid:has(.company-logo-lg){
  grid-template-columns: minmax(180px, 280px) 1fr;  /* wider left col for logo */
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
}

.company-logo-lg{
  width: clamp(180px, 22vw, 280px);
  height: auto;                 /* keep wordmark aspect ratio */
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
  /* Optional: feathered edge, uncomment if you want it */
  /* -webkit-mask-image: radial-gradient(ellipse at center, #000 calc(100% - 14px), transparent 100%); */
  /*         mask-image: radial-gradient(ellipse at center, #000 calc(100% - 14px), transparent 100%); */
  /* -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; */
}

/* Responsive tune-ups */
@media (max-width: 900px){
  .hero-grid:has(.company-logo-lg){
    grid-template-columns: minmax(160px, 240px) 1fr;
  }
  .company-logo-lg{
    width: clamp(160px, 26vw, 240px);
  }
}
@media (max-width: 640px){
  .hero-grid:has(.company-logo-lg){
    grid-template-columns: minmax(140px, 200px) 1fr;
  }
  .company-logo-lg{
    width: clamp(140px, 32vw, 200px);
  }
}

@media (max-width: 640px){
  :root{ --text-edge-pad: clamp(12px, 5vw, 20px); }

  /* Add left/right padding to standalone paragraphs */
  p{
    padding-left:  max(var(--text-edge-pad), env(safe-area-inset-left));
    padding-right: max(var(--text-edge-pad), env(safe-area-inset-right));
  }

  /* Don't double-pad paragraphs already inside padded containers/cards */
  .container p,
  .card p,
  .hero-card p,
  #titles .card-app .app-text p {
    padding-left: 0;
    padding-right: 0;
  }
}