/* ===========================
   Reset & Base
   =========================== */
   *,*::before,*::after{ box-sizing:border-box }
   html:focus-within{ scroll-behavior:smooth }
   body{ margin:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
   a{ color:inherit; text-decoration:none }
   img,svg,video{ display:block; max-width:100%; height:auto }
   :focus-visible{ outline: none }
   
   /* ===========================
      Tokens – single theme (no dark mode)
      =========================== */
   :root{
     --bg:#0b0c10;
     --fg:#e7e9ee;
     --fg-dim:#b7bcc7;
   
     --tint:#0a84ff;
     --tint2:#34c759;
     --warn:#ff9f0a;
     --danger:#ff3b30;
   
     --surface: color-mix(in oklab, #ffffff 8%, transparent);
     --surface-2: color-mix(in oklab, #ffffff 12%, transparent);
     --line: color-mix(in oklab, #ffffff 16%, transparent);
   
     --font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
   
     --r-10:10px; --r-14:14px; --r-18:18px; --pill:999px;
   
     --shadow-1:0 10px 30px rgba(0,0,0,.35);
     --shadow-2:0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
     --focus:0 0 0 3px color-mix(in oklab, var(--tint) 40%, transparent);
   
     --gutter: clamp(16px, 3vw, 24px);
     --content: 1100px;
   
     --ease:cubic-bezier(.2,.8,.2,1);
     --d1:.16s; --d2:.28s; --d3:.4s;
   
     /* Feature toggles (via body classes) */
     --fx-chroma-opacity:1;
     --fx-blur-amount:18px;
     --fx-shadow-strength:1;
   }
   
   /* ===========================
      Base layout
      =========================== */
   body{
     font:var(--font);
     color:var(--fg);
     background:
       radial-gradient(120vh 120vh at 10% 10%, #1b2aff33, transparent 60%),
       radial-gradient(140vh 140vh at 90% 20%, #34c75933, transparent 60%),
       radial-gradient(160vh 160vh at 50% 100%, #ff9f0a33, transparent 60%),
       var(--bg);
   }
   
   /* Utilities */
   .container{ width:min(100% - 2*var(--gutter), var(--content)); margin-inline:auto }
   .muted{ color: var(--fg-dim) }
   .lead{ color:var(--fg-dim); font-size:clamp(16px, 1.5vw, 20px) }
   .display{ font-size:clamp(28px, 5vw, 56px); line-height:1.06; letter-spacing:.2px; font-weight:800 }
   .h2{ font-size:clamp(22px, 2.6vw, 34px); font-weight:800; margin:0 0 .25rem }
   .h4{ font-size:clamp(18px, 2vw, 24px); font-weight:700; margin:0 }
   .h5{ font-size:18px; font-weight:700; margin:0 }
   
   .fx-chroma{
     position:fixed; inset:0; z-index:-1; pointer-events:none;
     opacity:var(--fx-chroma-opacity);
     background:
       radial-gradient(40vh 40vh at 20% 15%, #84a9ff33, transparent 55%),
       radial-gradient(46vh 46vh at 75% 20%, #6ee7b733, transparent 60%),
       radial-gradient(60vh 60vh at 50% 80%, #ffd18a33, transparent 60%);
     filter: blur(12px) saturate(120%);
   }
   
   /* Glass surfaces */
   .glass{
     background:var(--surface);
     backdrop-filter: blur(var(--fx-blur-amount)) saturate(120%);
     -webkit-backdrop-filter: blur(var(--fx-blur-amount)) saturate(120%);
     border:1px solid var(--line);
   }
   
   /* ===========================
      Navigation
      =========================== */
   .nav{ position:sticky; top:0; z-index:10; box-shadow:var(--shadow-1); }
   .nav__bar{
     display:flex; align-items:center; justify-content:space-between;
     min-height:64px; gap:1rem; padding-block:10px;
     transition:min-height var(--d2) var(--ease), padding var(--d2) var(--ease);
   }
   .nav.is-compact .nav__bar{ min-height:52px; padding-block:6px }
   
   .brand{ display:inline-flex; align-items:center; gap:.6rem }
   .brand__dot{ width:12px; height:12px; border-radius:50%; background:var(--tint);
     box-shadow: 0 0 0 4px color-mix(in oklab, var(--tint) calc(30% * var(--fx-shadow-strength)), transparent);
   }
   .brand__name{ font-weight:800; letter-spacing:.2px }
   .brand__sub{ opacity:.6 }
   
   .nav__menu{ display:flex; gap:1rem; align-items:center; }
   .nav__link{
     padding:.4rem .6rem; border-radius:10px; opacity:.9; transition:opacity var(--d1) var(--ease), background var(--d1) var(--ease);
   }
   .nav__link:hover{ opacity:1; background: color-mix(in oklab, #ffffff 10%, transparent); }
   .nav__link.is-active{ color:var(--tint) }
   
   /* ===========================
      Hero
      =========================== */
   .hero{
     display:grid; grid-template-columns: 1.2fr .8fr; gap:clamp(16px, 3vw, 40px);
     padding-block:clamp(20px, 6vw, 48px);
   }
   @media (max-width: 900px){ .hero{ grid-template-columns: 1fr } }
   .hero__content .cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem }
   
   .card{
     border-radius:var(--r-18);
     box-shadow: 0 10px calc(30px * var(--fx-shadow-strength)) rgba(0,0,0,.35);
     padding:clamp(16px, 2.4vw, 24px);
   }
   
   /* ===========================
      Grid / Tiles / Buttons
      =========================== */
   .section{ padding:clamp(24px, 7vw, 64px) 0 }
   
   .grid{
     display:grid; gap:clamp(16px, 2.6vw, 28px);
     grid-template-columns: repeat(4, minmax(0,1fr));
   }
   @media (max-width:1100px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
   @media (max-width:820px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
   @media (max-width:520px){ .grid{ grid-template-columns: 1fr } }
   
   /* Contact grid */
   .grid-contact{
     grid-template-columns: 1.1fr .9fr;
   }
   @media (max-width: 900px){ .grid-contact{ grid-template-columns: 1fr } }
   
   .tile{
     display:block; text-align:center; border-radius:var(--r-18);
     box-shadow: 0 10px calc(30px * var(--fx-shadow-strength)) rgba(0,0,0,.35);
     padding:22px 18px; position:relative; overflow:hidden;
     transition: transform var(--d2) var(--ease), filter var(--d2) var(--ease), box-shadow var(--d2) var(--ease), background-color var(--d2) var(--ease);
   }
   .tile__icon{ font-size:1.7rem; margin-bottom:10px }
   .tile__title{ margin:0 0 6px; font-weight:800 }
   .tile__text{ margin:0; color:var(--fg-dim) }
   
   .pressfx:hover{ transform: translateY(-6px) scale(1.01) }
   .pressfx:active{ transform: translateY(-2px) scale(.995) }
   .pressfx::after{
     content:""; position:absolute; inset:-40% -10% auto -10%; height:60%; border-radius:50%;
     background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 60%);
     transform: translateY(-30%) rotate(2deg); opacity:0; pointer-events:none;
     transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease);
   }
   .pressfx:hover::after{ opacity:1; transform: translateY(-10%) rotate(0) }
   
   .btn{
     --bg: color-mix(in oklab, #ffffff 10%, transparent);
     display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
     min-height:44px; padding:0 16px; border-radius:var(--pill);
     border:1px solid var(--line); color:var(--fg); background:var(--bg);
     box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-2);
     transition: transform var(--d1) var(--ease), box-shadow var(--d1) var(--ease), background var(--d1) var(--ease), filter var(--d1) var(--ease);
     -webkit-tap-highlight-color:transparent; user-select:none;
   }
   .btn:focus-visible{ box-shadow: var(--shadow-2), var(--focus) }
   .btn:active{ transform: translateY(1px) scale(.985) }
   .btn--primary{
     --bg: linear-gradient(180deg, color-mix(in oklab, var(--tint) 96%, #fff 4%), color-mix(in oklab, var(--tint) 70%, #000 30%));
     color:#fff;
   }
   .btn--primary:hover{ filter: brightness(1.06) }
   .btn--ghost{ --bg: color-mix(in oklab, #ffffff 10%, transparent) }
   .btn--tinted{ --bg: color-mix(in oklab, var(--tint) 18%, transparent); color: color-mix(in oklab, var(--tint) 96%, #000 4%) }
   
   /* Chips / Toggles */
   .chips{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem }
   .chip{
     display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:10px;
     background: color-mix(in oklab, #ffffff 14%, transparent);
     border:1px solid var(--line); color: var(--fg); font-weight:600; font-size:.85rem;
     transition: transform var(--d1) var(--ease), background-color var(--d1) var(--ease), color var(--d1) var(--ease), border-color var(--d1) var(--ease);
   }
   .chip--toggle{ cursor:pointer }
   .chip--toggle.is-active{
     background: color-mix(in oklab, var(--tint) 22%, transparent);
     border-color: color-mix(in oklab, var(--tint) 40%, transparent);
     color: color-mix(in oklab, var(--tint) 96%, #000 4%);
   }
   
   /* Contact page bits */
   .contact-card .contact-top{ display:flex; gap:16px; align-items:center; margin-bottom:12px }
   .contact-card .avatar{
     width:72px; height:72px; border-radius:50%;
     box-shadow: 0 10px calc(30px * var(--fx-shadow-strength)) rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
     object-fit:cover; background:#d9d9d9;
   }
   .contact-list{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px }
   .contact-list li{ display:flex; gap:12px; align-items:center }
   .contact-list li span{ width:86px; color:var(--fg-dim) }
   
   /* Banner & Footer */
   .banner{
     display:flex; align-items:center; justify-content:space-between; gap:1rem;
     padding:clamp(16px, 2.6vw, 22px);
     border-radius:var(--r-18);
     box-shadow: 0 10px calc(30px * var(--fx-shadow-strength)) rgba(0,0,0,.35);
   }
   
   .footer{ border-top:1px solid var(--line); background:var(--surface); backdrop-filter: blur(var(--fx-blur-amount)) saturate(120%) }
   .footer__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px }
   .footer__nav{ display:flex; gap:.75rem }
   .link{ border-bottom:1px solid transparent }
   .link:hover{ border-color: color-mix(in oklab, var(--fg) 30%, transparent) }
   
   /* ===========================
      Feature Toggles (via body)
      =========================== */
   body.fx-blur-off{ --fx-blur-amount:0px }
   body.fx-depth-off{ --fx-shadow-strength:.35 }
   
   /* Motion safe (manuell + System) */
   body.fx-motion-safe *, body.fx-motion-safe *::before, body.fx-motion-safe *::after{
     transition:none !important; animation:none !important;
   }
   @media (prefers-reduced-motion: reduce){
     *,*::before,*::after{ transition:none !important; animation:none !important }
   }