:root{
  --bg:#F3F5F8;
  --surface:#FFFFFF;
  --text:#0B1220;
  --muted:#4B5563;
  --stroke: rgba(15, 23, 42, .10);

  /* Premium, subtle */
  --accent:#2563EB;     /* calm blue */
  --accentSoft: rgba(37,99,235,.10);
  --shadow: 0 18px 50px rgba(2, 6, 23, .12);
  --shadow2: 0 10px 26px rgba(2, 6, 23, .10);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 520px at 18% 4%, rgba(37,99,235,.10), transparent 58%),
    radial-gradient(900px 460px at 86% 8%, rgba(2,6,23,.06), transparent 55%),
    var(--bg);
}

a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin:0 auto; padding:0 20px}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background: rgba(243,245,248,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(217,224,234,.95);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:34px; width:auto}
.brand .name{display:flex; flex-direction:column; line-height:1.1}
.brand .name b{font-weight:900; letter-spacing:.09em; font-size:12px}
.brand .name span{font-size:12px; color:var(--muted)}
.navlinks{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.navlinks a{font-size:13px; color:var(--muted)}
.navlinks a:hover{color:var(--text)}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:14px; padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  color:var(--text);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.btn:hover{background: rgba(255,255,255,.96)}
.btn.primary{
  border-color: rgba(37,99,235,.35);
  background: var(--accentSoft);
}
.btn.primary:hover{
  background: rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.55);
}
.btn.link{
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding-left:10px; padding-right:10px;
}
.btn.link:hover{color:var(--text); background: rgba(255,255,255,.65); border-color: rgba(15,23,42,.10)}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  color:var(--muted);
  font-size:12px;
}
.badge.dot::before{
  content:""; width:7px; height:7px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(37,99,235,.22);
}

/* Typography */
h1,h2{
  margin:0 0 10px 0;
  font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing:.01em;
}
h1{font-size:42px; line-height:1.12}
h2{font-size:26px; line-height:1.2}
h3{margin:0 0 8px 0; font-size:16px}
p{margin:0 0 12px 0; color:var(--muted); line-height:1.65}
.small{font-size:12px; color:var(--muted)}

/* Layout */
section{padding:52px 0}
.hero{padding:54px 0 28px 0; position:relative; overflow:hidden;}
.hero::before{
  content:"";
  position:absolute; inset:-20px;
  background:
    linear-gradient(180deg, rgba(243,245,248,.92), rgba(243,245,248,.96)),
    url("./assets/img/hero.jpg") center/cover no-repeat;
  filter: saturate(.92) contrast(1.02);
  transform: scale(1.03);
  z-index:0;
}
.hero .container{position:relative; z-index:1;}

.heroGrid{
  display:grid; grid-template-columns: 1.22fr .78fr;
  gap:16px; align-items:stretch;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
  border:1px solid rgba(15, 23, 42, .10);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
}
.card.flat{box-shadow: var(--shadow2); background: rgba(255,255,255,.86)}
.card:hover{
  border-color: rgba(37,99,235,.22);
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(2,6,23,.14);
  transition: .18s ease;
}
.grid{display:grid; gap:14px}
.grid.cols3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols2{grid-template-columns: repeat(2, minmax(0,1fr))}
hr.sep{
  border:none; height:1px;
  background: linear-gradient(90deg, transparent, rgba(2,6,23,.10), transparent);
  margin:16px 0;
}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.65}
.list li{margin:6px 0}

/* Media cards */
.cardMedia{
  width:100%;
  height:150px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: #e9eef6;
  margin-bottom:12px;
}
.cardMedia img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(.95) contrast(1.05);
}

/* Form */
.formRow{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px}
.input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline:none;
}
textarea{min-height:96px; resize:vertical}

/* Contact pills */
.pill{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
}
.pill strong{font-weight:900}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Tech band background */
.techBand{position:relative; overflow:hidden;}
.techBand::after{
  content:"";
  position:absolute; inset:0;
  background: url("./assets/img/tech-bg.jpg") center/cover no-repeat;
  opacity:.06;
  pointer-events:none;
}
.techBand > .container{position:relative; z-index:1;}

/* Footer */
.footer{
  padding:24px 0 34px 0;
  border-top:1px solid rgba(217,224,234,.98);
  background: rgba(255,255,255,.60);
}
.footerGrid{
  display:grid; gap:14px; grid-template-columns: 1.2fr .8fr;
}

/* Toast */
.toast{
  position:fixed; bottom:18px; right:18px;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.10);
  padding:12px 14px;
  border-radius:14px;
  box-shadow: var(--shadow);
  color: var(--text);
  display:none;
  max-width: 360px;
}

/* Responsive */
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr}
  .grid.cols3{grid-template-columns: repeat(2, minmax(0,1fr))}
  h1{font-size:36px}
}
@media (max-width: 640px){
  .navlinks{display:none}
  .grid.cols3,.grid.cols2{grid-template-columns: 1fr}
  .formRow{grid-template-columns: 1fr}
  h1{font-size:30px}
}

/* ===== PREMIUM+ PATCH (2026) ===== */
:root{
  --stroke: rgba(15, 23, 42, .075);   /* lighter borders */
  --shadow: 0 22px 70px rgba(2, 6, 23, .10);
  --shadow2: 0 12px 36px rgba(2, 6, 23, .09);
  --radius: 22px;
}

/* More breathing room */
section{ padding: 64px 0; }
.hero{ padding: 72px 0 42px 0; }
.container{ max-width: 1100px; }

/* Typography refinement */
body{ letter-spacing: .01em; }
h1{ font-size: 46px; line-height: 1.08; }
h2{ font-size: 28px; }
p{ font-size: 15.5px; }
.small{ font-size: 13px; }

/* Reduce "boxed" feel: softer borders, calmer surfaces */
.card{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
}
.card.flat{
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.78);
}
.card:hover{
  border-color: rgba(37,99,235,.16);
}

/* Less visible dividers */
hr.sep{ opacity: .55; margin: 18px 0; }

/* Buttons: slightly slimmer, more premium */
.btn{
  padding: 11px 13px;
  border-radius: 999px;
  border-color: rgba(15,23,42,.10);
}
.btn.primary{
  background: rgba(37,99,235,.11);
  border-color: rgba(37,99,235,.28);
}
.badge{
  border-color: rgba(15,23,42,.09);
  background: rgba(255,255,255,.70);
}

/* Hero overlay: a bit more "editorial" */
.hero::before{
  background:
    linear-gradient(180deg, rgba(243,245,248,.86), rgba(243,245,248,.94)),
    url("./assets/img/hero.jpg") center/cover no-repeat;
}

/* Media cards: rounder, less framed */
.cardMedia{
  height: 160px;
  border-radius: 16px;
  border: 0;
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
}
.cardMedia img{ filter: saturate(.92) contrast(1.04); }

/* Pills: less "outlined", more surface */
.pill{
  border: 1px solid rgba(15,23,42,.07);
  background: rgba(255,255,255,.76);
}

/* Header: a bit cleaner */
header{
  border-bottom: 1px solid rgba(15,23,42,.07);
}

/* Responsive typography */
@media (max-width: 980px){
  h1{ font-size: 38px; }
}
@media (max-width: 640px){
  h1{ font-size: 32px; }
  section{ padding: 56px 0; }
}

.lead{font-size:16px; color: rgba(75,85,99,.92); line-height:1.7;}