/* Unique, simple design with warm accent and subtle geometry */
:root{
  --bg: #f8fafc;
  --panel: #ffffff;
  --ink: #12141a;
  --muted: #606a78;
  --accent: #ff9f1a; /* warm amber */
  --accent-2: #00bfa6; /* teal */
  --ring: color-mix(in oklab, var(--accent) 40%, transparent);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0c0f14;
    --panel: #0f1218;
    --ink: #e9edf4;
    --muted: #a3adbb;
    --accent: #ffb43a;
    --accent-2: #28d7c0;
  }
}

*{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:.8rem }
.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; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, transparent), transparent 50%),
    linear-gradient(315deg, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 50%);
  pointer-events:none;
}
.hero .decor{ position:absolute; inset:0; pointer-events:none }
.stripe{
  position:absolute; left:-10%; right:-10%; height:16px; top:18%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  filter: blur(6px); opacity:.45; transform: rotate(-8deg);
}
.stripe.s2{ top: 38%; height:12px; transform: rotate(-7deg); opacity:.35 }
.stripe.s3{ top: 62%; height:10px; transform: rotate(-6deg); opacity:.28 }
.dots{
  position:absolute; right:6%; top:12%; width:220px; height:220px; opacity:.28; border-radius:20px;
  background:
    radial-gradient(circle 2px, color-mix(in oklab, var(--ink) 16%, transparent) 99%, transparent) 0 0/16px 16px,
    radial-gradient(circle 2px, color-mix(in oklab, var(--ink) 16%, transparent) 99%, transparent) 8px 8px/16px 16px;
}

.hero .hero-inner{ position:relative; padding: clamp(4rem, 9vw, 7rem) 0 clamp(1.8rem, 6vw, 3rem) }
.hero h1{ font-size: clamp(2rem, 5vw, 3.4rem); line-height:1.12; margin:0 0 .7rem }
.lead{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.2rem); margin:.5rem 0 1.2rem; max-width: 60ch }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin: 0 0 1rem }
.chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px;
  background: var(--panel); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset, 0 10px 30px -25px var(--ring);
  color: var(--muted); font-weight:600; font-size:.9rem;
}

.hero-actions{ display:flex; gap:.7rem; flex-wrap:wrap }
.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) }
.button.ghost{
  background: transparent; color: var(--ink); border:1.5px solid color-mix(in oklab, var(--ink) 22%, transparent);
  box-shadow: none;
}
.button.ghost:hover{ background: color-mix(in oklab, var(--ink) 6%, transparent) }

/* 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) }

.steps{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem }
.steps 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 }
}