:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2.2rem, 1.4rem + 3vw, 4.6rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --color-bg: #fcf9ff;
  --color-surface: #fffdfd;
  --color-surface-2: #f4eefb;
  --color-border: #dfd4ec;
  --color-divider: #ece3f5;
  --color-text: #241c2f;
  --color-text-muted: #655979;
  --color-text-faint: #8f7ea8;
  --color-primary: #6d4bc3;
  --color-primary-hover: #5734a6;
  --color-accent: #cb4b8b;
  --shadow-sm: 0 1px 2px rgba(48, 28, 71, 0.06);
  --shadow-md: 0 18px 44px rgba(76, 44, 113, 0.11);
  --font-body: 'Satoshi', 'Inter', sans-serif;
  --font-display: 'Zodiak', 'Georgia', serif;
}

[data-theme="dark"] {
  --color-bg: #161121;
  --color-surface: #1f182d;
  --color-surface-2: #2a2140;
  --color-border: #49385f;
  --color-divider: #392b4a;
  --color-text: #f4edff;
  --color-text-muted: #d4c6ea;
  --color-text-faint: #a28fbe;
  --color-primary: #c8a7ff;
  --color-primary-hover: #e0ccff;
  --color-accent: #ff8cb8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.22);
  --shadow-md: 0 16px 40px rgba(0,0,0,0.3);
}

*,:before,:after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.7;
  color:var(--color-text);
  background:
    radial-gradient(circle at 0% 0%, rgba(203,75,139,0.10), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(87,137,255,0.09), transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(69,181,125,0.08), transparent 22%),
    radial-gradient(circle at 12% 86%, rgba(255,170,82,0.08), transparent 20%),
    linear-gradient(180deg, var(--color-bg), var(--color-surface));
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:var(--space-4);top:-3rem;background:var(--color-text);color:var(--color-bg);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);z-index:100
}
.skip-link:focus{top:var(--space-3)}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px);
  background:color-mix(in oklab, var(--color-bg) 84%, white 16%);
  border-bottom:1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
}
.header-inner,.hero,.section,.footer-inner{
  width:min(100% - 2rem, 1120px);
  margin-inline:auto;
}
.header-inner{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-4) 0;
  gap:var(--space-4);
}
.brand{
  display:flex;align-items:center;gap:var(--space-3);text-decoration:none;
  font-size:var(--text-sm);letter-spacing:0.06em;text-transform:uppercase
}
.brand-mark{width:2rem;height:2rem;color:var(--color-accent);flex:none}
.theme-toggle{
  min-width:44px;min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-full);
  display:grid;place-items:center;color:var(--color-text-muted);background:var(--color-surface)
}

main{padding-bottom:var(--space-20)}
.hero{
  min-height:78vh;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:var(--space-10);
  align-items:end;
  padding:clamp(var(--space-12), 10vw, var(--space-24)) 0 var(--space-12);
}
.eyebrow{
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.14em;color:var(--color-text-muted);
  margin-bottom:var(--space-4)
}
h1{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  line-height:1.02;
  letter-spacing:-0.03em;
  max-width:11ch;
}
.lead{
  margin-top:var(--space-6);
  max-width:34ch;
  color:var(--color-text-muted)
}
.hero-card{
  align-self:center;
  background: linear-gradient(145deg, color-mix(in oklab, var(--color-surface) 90%, white 10%), color-mix(in oklab, var(--color-surface) 86%, var(--color-primary) 14%));
  border:1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  box-shadow:var(--shadow-md);
}
.hero-card p + p{margin-top:var(--space-4)}
.hero-card .kicker{font-size:var(--text-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-4)}

.section{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:var(--space-10);
  padding:var(--space-12) 0;
  border-top:1px solid var(--color-divider);
}
.section h2{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  line-height:1.1;
  max-width:12ch;
}
.section-copy p,
.section-copy li{max-width:68ch}
.section-copy p + p{margin-top:var(--space-4)}
.section-copy ul{list-style:none;display:grid;gap:var(--space-3)}
.section-copy li{
  padding-left:1.25rem;position:relative;color:var(--color-text)
}
.section-copy li::before{
  content:"";position:absolute;left:0;top:0.8em;width:0.42rem;height:0.42rem;border-radius:50%;background:var(--color-accent)
}

.quote{
  margin-top:var(--space-6);
  padding:var(--space-6);
  background: linear-gradient(180deg, var(--color-surface), color-mix(in oklab, var(--color-surface) 90%, var(--color-primary) 10%));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  color:var(--color-text-muted)
}

.contact-box{
  background: linear-gradient(180deg, var(--color-surface), color-mix(in oklab, var(--color-surface) 93%, var(--color-accent) 7%));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  display:grid;gap:var(--space-4)
}
.mail{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-weight:700;text-decoration:none;
  padding-bottom:0.1rem;border-bottom:1px solid currentColor;
  width:fit-content
}
.note{font-size:var(--text-sm);color:var(--color-text-muted)}
.footer-inner{
  padding:var(--space-8) 0 var(--space-12);
  border-top:1px solid var(--color-divider);
  color:var(--color-text-faint);
  font-size:var(--text-sm)
}

@media (max-width: 860px){
  .hero,.section{grid-template-columns:1fr;gap:var(--space-8)}
  .hero{min-height:auto;padding-top:var(--space-12)}
  h1,.section h2{max-width:none}
  .hero-card{padding:var(--space-6)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}