/* Minimal corporate design with a diagonal gradient ribbon */
:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #5f6b82;
  --accent: #2563eb; /* cobalt */
  --accent-2: #fb7185; /* coral */
  --ring: color-mix(in oklab, var(--accent) 40%, transparent);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f18;
    --panel: #0f1421;
    --ink: #e7ecf7;
    --muted: #aab3c4;
    --accent: #5b86ff;
    --accent-2: #ff94a3;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  line-height:1.55;
  color:var(--ink);
  background: var(--bg);
}

.container{ width:min(1100px, 100% - 2rem); margin-inline:auto; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background: color-mix(in oklab, var(--bg) 80%, white 20% / 70%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }
.brand-name{ font-weight:800; letter-spacing:.02em }
.nav{ display:flex; gap:.85rem }
.nav a{ color:inherit; text-decoration:none; padding:.42rem .6rem; border-radius:.6rem }
.nav a:hover{ background: color-mix(in oklab, var(--ink) 8%, transparent) }
.nav a.cta{ background: var(--ink); color: var(--panel); font-weight:600 }
.nav a.cta:hover{ background: color-mix(in oklab, var(--ink) 85%, black 15%) }

/* Hero */
.hero{ position:relative; overflow:hidden; }
.ribbon{
  position:absolute; inset:-10% -20% 60% -20%;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  transform: rotate(-6deg);
  filter: blur(10px);
  opacity:.35;
}
.hero .hero-inner{ position:relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 6vw, 3rem) }
.hero h1{ font-size: clamp(2rem, 5vw, 3.25rem); line-height:1.12; margin:0 0 .7rem }
.lead{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.2rem); margin:.5rem 0 1.1rem; max-width: 62ch }
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center }
.button{
  display:inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white; font-weight:800; padding:.8rem 1rem; border-radius:.9rem; text-decoration:none;
  box-shadow: 0 12px 28px -12px var(--ring);
}
.button:hover{ filter: brightness(1.05) }
.link{ text-decoration:none; font-weight:700 }
.link:hover{ text-decoration:underline }
.meta{ list-style:none; padding:0; margin:1rem 0 0; color:var(--muted); display:grid; gap:.35rem }

/* Sections */
.section{ padding: clamp(2rem, 6vw, 3.2rem) 0 }
.section h2{ font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin:0 0 1rem }
.section p{ margin:.5rem 0 0 }

.cards .card-grid{ list-style:none; display:grid; gap:1rem; padding:0; margin:0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card{
  background: var(--panel);
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-radius: 1rem; padding:1.1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset, 0 20px 40px -35px var(--ring);
}
.card h3{ margin:.2rem 0 .4rem; font-size:1.05rem }
.card p{ color:var(--muted) }

.bullets{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem }
.bullets li{ background: var(--panel); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); border-radius:.85rem; padding:.8rem 1rem }

/* Contact */
.contact .contact-block{
  background: var(--panel);
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  border-radius:1rem; padding:1rem;
}
.contact-block ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.contact-block a{ color:var(--accent) }

/* Footer */
.site-footer{ padding:1.2rem 0; color:var(--muted); border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent); }

/* A11y */
.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{ left:1rem; top:1rem; background:var(--panel); color:var(--ink); padding:.5rem .75rem; border-radius:.5rem; outline:2px solid var(--accent); }

@media (prefers-reduced-motion: reduce){
  .button{ transition:none; animation:none }
}