:root {
  /* - Brand palette - */
  --color-void:      #001C30;
  --color-nebula:    #176B87;
  --color-pulse:     #64CCC5;
  --color-starlight: #DAFFFB;

  /* - Quasar visual palette (reference — actual values in quasar.js QCOLOR) - */
  --qs-disk-inner: #D2E4FF;
  --qs-disk-warm:  #FFD250;
  --qs-disk-cool:  #AA1C08;
  --qs-jet:        #82AAFF;
  --qs-corona:     #5A8CFF;

  /* - Semantic tokens - */
  --bg-base:   var(--color-void);
  --text-pri:  var(--color-starlight);
  --text-mute: rgba(218,255,251,0.46);
  --accent:    var(--color-pulse);
  --border:    rgba(23,107,135,0.28);

  /* - Glass panel (individual cards) - */
  --glass-panel-bg:     rgba(0, 20, 34, 0.40);
  --glass-panel-border: rgba(218, 255, 251, 0.13);
  --glass-panel-blur:   22px;
  --glass-panel-shadow: 0 8px 34px rgba(0, 0, 0, 0.32);

  /* - Header / footer glass (slightly stronger, full-width bars) - */
  --header-bg-scrolled: rgba(0, 20, 34, 0.62);
  --footer-bg:          rgba(0, 20, 34, 0.55);

  /* - Typography - */
  --font: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

  /* - Spacing - */
  --sp-xs:0.5rem; --sp-sm:1rem; --sp-md:2rem; --sp-lg:4rem; --sp-xl:7.5rem;

  /* - Layout - */
  --container: 1200px;
  --radius:    8px;
  --radius-lg: 18px;

  /* - Motion - */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --dur:  0.65s;
}

/* 1. Reset ---------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
  font-family:var(--font); background:var(--bg-base); color:var(--text-pri);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* 2. Drag cursor ------------------------------------------------ */
body            { cursor:grab; }
body.qs-drag,
body.qs-drag *  { cursor:grabbing !important; }
a, button, input, select, textarea { cursor:pointer; }

/* 3. Skip link (WCAG 2.4.1) ---------------------------------- */
.skip-link {
  position:absolute; top:-120%; left:1rem;
  background:var(--accent); color:var(--color-void);
  padding:.5rem 1.1rem; border-radius:var(--radius);
  font-weight:700; font-size:.85rem; letter-spacing:.05em;
  text-decoration:none; z-index:9999; transition:top .2s;
}
.skip-link:focus { top:1rem; }

/* 4. Container ------------------------------------------------- */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--sp-md); }

/* 5. Fixed canvas — persists behind the entire page -----─ */
.hero-canvas {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}

/* 6. Header ---------------------------------------------------- */
.header {
  position:fixed; top:0; inset-inline:0; z-index:100;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.header--scrolled {
  background:var(--header-bg-scrolled);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:4.5rem; }
.nav-brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--accent); }
.brand-icon { width:28px; height:28px; flex-shrink:0; }
.brand-name { font-size:.82rem; font-weight:600; letter-spacing:.32em; color:var(--text-pri); }
.nav-links  { display:flex; gap:var(--sp-md); list-style:none; }
.nav-links a {
  color:var(--text-mute); text-decoration:none; font-size:.76rem;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:color .2s; padding-bottom:3px; border-bottom:1px solid transparent;
}
.nav-links a:hover, .nav-links a.active { color:var(--text-pri); }
.nav-links a.active { border-bottom-color:var(--accent); }
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.nav-toggle span { display:block; width:22px; height:1.5px; background:var(--text-pri); transition:transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* 7. Hero -------------------------------------------------------- */
.hero {
  position:relative; z-index:1;
  height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  background:transparent; overflow:hidden;
}

.hero-content {
  position:relative; z-index:5;
  text-align:center; pointer-events:none; user-select:none;
}
/* Soft dark halo behind the wordmark — keeps it unmistakably
   in front of the busy quasar visual behind it                */
.hero-content::before {
  content:''; position:absolute; inset:-4rem -6rem; z-index:-1;
  background:radial-gradient(ellipse 68% 58% at 50% 50%,
    rgba(0,17,28,.62) 0%, rgba(0,17,28,.28) 55%, transparent 100%);
  border-radius:50%;
}

.hero-eyebrow {
  font-size:clamp(.58rem,1.4vw,.72rem); font-weight:400;
  letter-spacing:.55em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1.4rem;
  text-shadow:0 0 14px rgba(0,17,28,1);
}
.hero-wordmark {
  font-size:clamp(2rem,11vw,9.5rem); font-weight:100;
  letter-spacing:clamp(0.06em,2.2vw,.45em); line-height:1; color:var(--text-pri);
  text-shadow:
    0  0   6px rgba(0,17,28,1),
    0  0  22px rgba(0,17,28,.95),
    0  0  60px rgba(0,17,28,.75),
    0  0 120px rgba(100,204,197,.14);
}

.hero-hint {
  position:absolute; bottom:7rem; left:50%; transform:translateX(-50%);
  z-index:5;
  font-size:.60rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(218,255,251,.34); white-space:nowrap;
  pointer-events:none; user-select:none;
  animation:fadeHint 16s ease-out forwards;
}
@keyframes fadeHint { 0%,75%{opacity:1;} 100%{opacity:0;} }

.scroll-indicator {
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:5; background:none; border:1px solid var(--border); border-radius:50%;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-mute);
  transition:color .2s, border-color .2s, opacity .4s;
  animation:floatY 2.6s ease-in-out infinite;
}
.scroll-indicator:hover   { color:var(--accent); border-color:var(--accent); }
.scroll-indicator svg     { width:16px; height:16px; }
.scroll-indicator--hidden { opacity:0; pointer-events:none; }
@keyframes floatY { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(6px);} }

/* 8. Content sections — fully transparent, let the quasar          
      show through freely between the glass cards ------- */
.section {
  position:relative; z-index:1;
  padding:var(--sp-xl) 0;
  background:transparent;
}
.section-intro { margin-bottom:var(--sp-lg); }
.eyebrow {
  font-size:.68rem; font-weight:600; letter-spacing:.42em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
  text-shadow:0 0 16px rgba(0,17,28,.9);
}
.section-intro h2 {
  font-size:clamp(2rem,4.5vw,3.5rem); font-weight:200;
  letter-spacing:.04em; line-height:1.15;
  text-shadow:0 2px 24px rgba(0,17,28,.65);
}

/* 9. Glass panel — shared frosted-card treatment -------
      Applied to About, each Value card, each Portfolio card,
      and the Contact card.                                      */
.glass-panel {
  background:              var(--glass-panel-bg);
  border:                   1px solid var(--glass-panel-border);
  border-radius:            var(--radius-lg);
  backdrop-filter:          blur(var(--glass-panel-blur)) saturate(150%);
  -webkit-backdrop-filter:  blur(var(--glass-panel-blur)) saturate(150%);
  box-shadow:               var(--glass-panel-shadow),
                            inset 0 1px 0 rgba(255,255,255,0.05);
}

/* 10. About ------------------------------------------------------ */
.about-body {
  padding: var(--sp-lg);
}
.about-body p {
  font-size:clamp(.95rem,1.4vw,1.1rem); font-weight:300; color:var(--text-mute);
  max-width:620px; margin-bottom:1.25rem; line-height:1.85;
}
.about-meta { display:flex; gap:var(--sp-lg); margin-top:var(--sp-lg); padding-top:var(--sp-md); border-top:1px solid var(--glass-panel-border); flex-wrap:wrap; }
.meta-item dt { font-size:.66rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--text-mute); margin-bottom:.4rem; }
.meta-item dd { font-size:.95rem; font-weight:300; color:var(--text-pri); letter-spacing:.03em; }

/* 11. Values ------------------------------------------------------ */
.values-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--sp-md);
}
.value-card { padding:var(--sp-lg) var(--sp-md); transition:background .3s, transform .3s; }
.value-card:hover { background:rgba(23,107,135,.16); transform:translateY(-3px); }
.value-icon { width:40px; height:40px; color:var(--accent); margin-bottom:var(--sp-md); }
.value-icon svg { width:100%; height:100%; }
.value-title { font-size:1.15rem; font-weight:400; letter-spacing:.04em; margin-bottom:.7rem; }
.value-desc  { font-size:.88rem; font-weight:300; line-height:1.8; color:var(--text-mute); }

/* 12. Portfolio ---------------------------------------------------- */
.portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-md); }
.portfolio-card { padding:var(--sp-md) var(--sp-lg); transition:border-color .3s, transform .3s; }
.portfolio-card:hover { border-color:rgba(100,204,197,.35); transform:translateY(-3px); }
.portfolio-card-top {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--glass-panel-border);
}
.portfolio-name { font-size:clamp(1.4rem,2.8vw,2rem); font-weight:200; letter-spacing:.08em; }
.portfolio-link {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:500; letter-spacing:.08em;
  color:var(--accent); text-decoration:none; flex-shrink:0;
  transition:gap .2s, opacity .2s;
}
.portfolio-link:hover { gap:.55rem; opacity:.78; }
.portfolio-link svg { width:14px; height:14px; }
.portfolio-desc { font-size:.875rem; font-weight:300; color:var(--text-mute); line-height:1.75; }

/* 13. Contact ------------------------------------------------------ */
.contact-card {
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:1rem;
  padding:var(--sp-lg);
}
.email-reveal-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  background:none; border:1px solid var(--glass-panel-border); border-radius:var(--radius);
  color:var(--accent); font-size:.88rem; font-family:var(--font);
  letter-spacing:.08em; padding:.7rem 1.4rem;
  transition:border-color .2s, background .2s;
}
.email-reveal-btn:hover { border-color:var(--accent); background:rgba(100,204,197,.08); }
.email-reveal-btn svg { width:16px; height:16px; flex-shrink:0; }
.contact-email {
  display:inline-block; font-size:clamp(1.2rem,2.8vw,2.2rem); font-weight:200;
  letter-spacing:.06em; color:var(--text-pri); text-decoration:none;
  border-bottom:1px solid var(--glass-panel-border); padding-bottom:.25rem;
  transition:color .2s, border-color .2s;
}
.contact-email:hover { color:var(--accent); border-color:var(--accent); }

/* 14. Footer -------------------------------------------------------- */
.footer {
  position:relative; z-index:1; border-top:1px solid var(--border);
  padding:var(--sp-md) 0; background:var(--footer-bg);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-brand { font-size:.72rem; font-weight:600; letter-spacing:.35em; color:var(--text-pri); text-decoration:none; opacity:.6; transition:opacity .2s; }
.footer-brand:hover { opacity:1; }
.footer-copy  { font-size:.72rem; color:var(--text-mute); font-weight:300; }
.footer-nav   { display:flex; gap:1.5rem; }
.footer-nav a { font-size:.68rem; color:var(--text-mute); text-decoration:none; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.footer-nav a:hover { color:var(--accent); }

/* 15. Scroll animations ------------------------------------------- */
.animate-on-scroll {
  opacity:0; transform:translateY(26px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.animate-on-scroll.in-view { opacity:1; transform:translateY(0); }

/* 16. Focus --------------------------------------------------------- */
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }

/* 17. Responsive ----------------------------------------------------- */
@media (max-width:768px) {
  :root { --sp-xl:4.5rem; --sp-lg:2.5rem; --glass-panel-blur:16px; }
  .nav-toggle { display:flex; }
  .nav-links {
    position:fixed; top:4.5rem; inset-inline:0;
    background:rgba(0,17,28,.94);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    flex-direction:column; gap:0; padding:1rem 0;
    border-bottom:1px solid var(--border);
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .35s var(--ease), opacity .35s; z-index:99;
  }
  .nav-links--open { transform:translateY(0); opacity:1; pointer-events:all; }
  .nav-links li    { list-style:none; }
  .nav-links a     { display:block; padding:1rem 2rem; font-size:.85rem; }
  .values-grid     { grid-template-columns:1fr; }
  .portfolio-grid  { grid-template-columns:1fr; }
  .about-meta      { gap:var(--sp-md); }
  .footer-inner    { justify-content:center; text-align:center; }
  .footer-nav      { flex-wrap:wrap; justify-content:center; }
  .contact-card    { width:100%; }
}
@media (max-width:768px), (pointer:coarse) {
  .hero-hint { display:none; }
}
@media (max-width:480px) {
  .portfolio-card-top { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .value-card, .about-body, .contact-card { padding:var(--sp-md); }
}

/* 18. Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .animate-on-scroll { opacity:1; transform:none; transition:none; }
  .scroll-indicator, .hero-hint { animation:none; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}