/* Custom styles to give a clean, professional look */
:root{
  --brand:#0d6efd;
  --brand-dark:#0b5ed7;
  --sign-in:#ffcc00;
  --ink:#101828;
  --surface:#ffffff;
  --surface-soft:#f3f7fb;
  --line:rgba(16, 24, 40, 0.08);
}
body{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%); color:var(--ink);}
.navbar-brand img{filter:grayscale(0);}
header{background-image: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.9));}
.device-mockup{height:320px; display:flex; align-items:center; justify-content:center}
.card-title{color:var(--brand)}
footer{background:transparent}
.btn-primary{background:var(--brand); border-color:var(--brand)}

@media (min-width:1200px){
  .container{max-width:1100px}
}

/* Home/results hero styles */
body.home-page .hero,
body.results-page .hero{
  /* Use the Unsplash image used earlier as the hero background */
  background-image: url('https://images.unsplash.com/photo-1506765515384-028b60a970df?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder');
  background-size: cover;
  background-position: center left; /* show left side of image so card doesn't cover sun */
  min-height: 60vh;
  position: relative;
  color: #fff;
}
body.home-page .hero-overlay,
body.results-page .hero-overlay{
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
}
body.home-page .hero-content,
body.results-page .hero-content{position:relative; z-index:2}
body.home-page .hero-card,
body.results-page .hero-card{max-width:420px; background:rgba(255,255,255,0.9); color:#111}
body.home-page .project-hero{max-width:100% !important;}

@media (max-width:767px){
  body.home-page .project-visual img{max-height:260px}
  body.home-page .project-meta{padding-top:1rem}
}
body.home-page .eyebrow,
body.results-page .eyebrow{
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.75rem;
  font-weight:700;
  color:#cfe2ff;
}
body.home-page .hero-lead{max-width:38rem; color:rgba(255,255,255,0.88)}
body.home-page .hero-intro{max-width:34rem}

body.home-page .hero-card,
body.results-page .hero-card{background:rgba(255,255,255,0.94);}
body.home-page .hero-card h1,
body.results-page .hero-card h1{margin-bottom:0.25rem}
body.home-page .hero-card p,
body.results-page .hero-card p{color:#444}

@media (min-width: 992px){
  body.home-page .hero,
  body.results-page .hero{min-height:68vh}
}

body.home-page .hero-card,
body.results-page .hero-card{padding:1.25rem}
.btn{display:inline-block; font-weight:400; text-align:center; vertical-align:middle; user-select:none; border:1px solid transparent; padding:.375rem .75rem; font-size:1rem; border-radius:.25rem}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,0.2)}
.btn-warning{background:var(--sign-in); color:#000; border-color:var(--sign-in)}

/* ensure nav has no default list bullets if bootstrap missing */
nav ul{list-style:none; margin:0; padding:0}

/* Compact navbar tweaks to match example */
.navbar-brand.small{font-size:0.92rem; font-weight:600; letter-spacing:0.2px}
.navbar .nav-link{font-size:0.92rem; padding:0.35rem 0.6rem}
.navbar{padding-top:0.50rem !important; padding-bottom:0.50rem !important}
.navbar.py-1{padding-top:0.50rem !important; padding-bottom:0.50rem !important}
body.home-page .hero .hero-card,
body.results-page .hero .hero-card{padding:1.25rem}

/* ensure navbar brand left and actions right even inside .container */
.navbar .container{display:flex; align-items:center}
.navbar .navbar-brand{margin-right:1rem}
.navbar .navbar-nav{margin-left:0}
.navbar .ms-auto{margin-left:auto}

/* small layout tweak: keep container a bit narrower to match mock */
@media (min-width:1200px){
  .container{max-width:980px}
}

body.home-page .projects-section{background:linear-gradient(180deg, rgba(255,255,255,0.56), rgba(255,255,255,0.88)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
body.home-page .project-card,
body.home-page .portfolio-callout{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1.15rem;
  box-shadow:0 18px 40px rgba(15,23,42,0.08);
}
body.home-page .project-label{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.35rem 0.7rem;
  border-radius:999px;
  background:var(--surface-soft);
  color:#334155;
  font-size:0.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
body.home-page .project-list{padding-left:1.1rem; color:#475467}
body.home-page .project-list li + li{margin-top:0.45rem}
body.home-page .portfolio-callout{background:linear-gradient(135deg, #101828 0%, #1d4ed8 100%); color:#fff}
body.home-page .portfolio-callout .text-muted{color:rgba(255,255,255,0.82) !important}
body.home-page .portfolio-callout .btn{white-space:nowrap}

/* end of file */