/* ============================================================
   klodynlov — portfolio · LIGHT theme (playmoweb-inspired)
   White-dominant, airy, one electric-blue accent. WCAG AA.
   No external fonts/CDN (zéro cloud, fidèle au principe).
   ============================================================ */

:root{
  --bg:        #ffffff;
  --bg-2:      #f4f6f9;
  --panel:     #ffffff;
  --panel-s:   #ffffff;
  --panel-b:   #e3e8ef;
  --panel-bh:  #cbd5e1;

  --ink:       #0f1b2d;
  --muted:     #475569;
  --faint:     #5b6b82;

  --accent:    #005ae0;
  --accent-d:  #0047b3;
  --accent-soft:#e8f0ff;

  --indigo:    #4f46e5;
  --indigo-d:  #4338ca;
  --teal:      #0d9488;   /* large/decorative only */
  --teal-d:    #0f766e;   /* text-safe */
  --gold:      #b45309;
  --gold-d:    #92400e;
  --red:       #dc2626;

  --grad:      linear-gradient(100deg, var(--accent) 0%, var(--indigo) 55%, var(--teal) 115%);
  --grad-soft: linear-gradient(120deg, #eef2fb 0%, #e8f5f3 100%);

  --shadow-sm: 0 1px 3px rgba(15,27,45,.06), 0 1px 2px rgba(15,27,45,.04);
  --shadow-md: 0 10px 30px -12px rgba(15,27,45,.18);

  --r:         16px;
  --r-sm:      10px;
  --maxw:      1180px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --font:      -apple-system, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:      "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  letter-spacing:.1px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3{ line-height:1.08; letter-spacing:-.02em; font-weight:800; }
::selection{ background:var(--accent-soft); color:var(--ink); }

/* ---------- accessibility ---------- */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 8px 0; font-weight:650; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
:focus:not(:focus-visible){ outline:none; }

/* ---------- light ambient background ---------- */
.cosmos{ position:fixed; inset:0; z-index:-2; background:
  radial-gradient(ellipse 90% 60% at 12% -5%, rgba(79,70,229,.07), transparent 60%),
  radial-gradient(ellipse 80% 50% at 95% 8%, rgba(13,148,136,.06), transparent 55%),
  radial-gradient(ellipse 70% 60% at 60% 110%, rgba(180,121,10,.04), transparent 55%),
  var(--bg); }
#starfield{ position:fixed; inset:0; z-index:-1; opacity:.75; }
.nebula{ display:none; }

/* ---------- scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:100;
  background:var(--grad); transform:scaleX(0); transform-origin:left; will-change:transform; }

/* ---------- layout primitives ---------- */
.section{
  padding-block:clamp(4rem,9vw,8rem);
  padding-inline:max(clamp(1.2rem,5vw,2.5rem), calc((100% - var(--maxw)) / 2));
}
.section.alt{ background:var(--bg-2); }
.section-head{ max-width:760px; margin-bottom:clamp(2rem,5vw,3.5rem); }
.kicker{ font:600 .8rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal-d); margin-bottom:1rem; }
.section h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); }
.section-sub{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.18rem); margin-top:1rem; max-width:62ch; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:650; font-size:.95rem;
  padding:.8rem 1.4rem; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s; }
.btn-sm{ padding:.5rem .95rem; font-size:.85rem; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 20px rgba(0,90,224,.28); }
.btn-primary:hover{ background:var(--accent-d); transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,90,224,.34); }
.btn-ghost{ border-color:var(--panel-b); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1.5rem;
  max-width:var(--maxw); margin:0 auto; padding:.9rem clamp(1.2rem,5vw,2.5rem);
  transition:background .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--panel-b); box-shadow:var(--shadow-sm); }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.1rem; letter-spacing:-.02em; }
.brand-mark{ width:22px; height:22px; border-radius:7px; background:var(--grad);
  box-shadow:0 0 16px rgba(0,90,224,.3); position:relative; }
.brand-mark::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--bg); }
.brand-name .accent{ color:var(--indigo); }
.nav-links{ display:flex; gap:1.7rem; margin-left:auto; }
.nav-links a{ color:var(--muted); font-size:.95rem; font-weight:550; position:relative; transition:color .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px;
  background:var(--grad); transition:width .25s var(--ease); border-radius:2px; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:.7rem; }
.lang-toggle{ background:none; border:1px solid var(--panel-b); color:var(--muted);
  font:600 .8rem/1 var(--mono); padding:.45rem .6rem; border-radius:999px; cursor:pointer; transition:.2s; }
.lang-toggle:hover{ border-color:var(--accent); color:var(--ink); }
.lang-toggle .active{ color:var(--accent); }
.lang-sep{ opacity:.4; margin:0 .15rem; }
.nav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }

/* ---------- hero ---------- */
.hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,6vw,5rem) clamp(1.2rem,5vw,2.5rem) clamp(3rem,6vw,5rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; min-height:78vh; }
.eyebrow{ font:600 .82rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-d); margin-bottom:1.3rem; display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--teal); }
.hero-title{ font-size:clamp(2.4rem,6vw,4.4rem); font-weight:850; }
.hero-title span{ display:block; }
.hero-title .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ color:var(--muted); font-size:clamp(1.02rem,1.6vw,1.22rem); margin:1.5rem 0 2rem; max-width:54ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2rem; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.hero-tags span{ font:550 .78rem/1 var(--mono); color:var(--faint); border:1px solid var(--panel-b);
  padding:.4rem .7rem; border-radius:999px; background:#fff; }

/* ---------- window / demo ---------- */
.window{ background:linear-gradient(180deg, #ffffff, #f6f8fb);
  border:1px solid rgba(20,30,60,.10); border-radius:var(--r); overflow:hidden;
  box-shadow:0 18px 50px -28px rgba(20,30,60,.30), 0 1px 0 rgba(255,255,255,.8) inset; }
.window-bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem;
  background:rgba(15,23,42,.03); border-bottom:1px solid rgba(20,30,60,.08); }
.dot{ width:11px; height:11px; border-radius:50%; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.window-title{ font:550 .8rem/1 var(--mono); color:var(--faint); margin-left:.6rem; }
.window-live{ margin-left:auto; font:600 .72rem/1 var(--mono); color:var(--teal-d); letter-spacing:.05em; animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ opacity:.4; } }
.window-body{ position:relative; aspect-ratio:16/11; }
.window-body canvas{ width:100%; height:100%; }
.window-lg .window-body{ aspect-ratio:16/9; }
.hero-demo-hint{ text-align:center; color:var(--faint); font-size:.82rem; margin-top:.9rem; }

/* ---------- metrics ---------- */
.metrics{ max-width:var(--maxw); margin:0 auto; padding:1.5rem clamp(1.2rem,5vw,2.5rem);
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
  border-block:1px solid var(--panel-b); }
.metric{ text-align:center; padding:1rem .5rem; }
.m-num{ display:block; font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:850;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums; }
.m-label{ display:block; color:var(--muted); font-size:.82rem; margin-top:.2rem; }

/* ---------- vision ---------- */
.vision-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.vision-lead p{ color:var(--muted); font-size:1.08rem; margin-bottom:1.2rem; }
.vision-lead strong{ color:var(--ink); } .vision-lead em{ color:var(--teal-d); font-style:normal; font-weight:600; }
.vision-pillars{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.vision-pillars li{ display:flex; gap:1rem; padding:1.2rem 1.3rem; border:1px solid var(--panel-b);
  border-radius:var(--r); background:var(--panel-s); box-shadow:var(--shadow-sm); transition:.3s var(--ease); }
.vision-pillars li:hover{ border-color:var(--panel-bh); box-shadow:var(--shadow-md); transform:translateX(4px); }
.pill-n{ font:800 1rem/1 var(--mono); color:var(--indigo); padding-top:.2rem; }
.vision-pillars h3{ font-size:1.1rem; margin-bottom:.25rem; }
.vision-pillars p{ color:var(--muted); font-size:.92rem; }

/* ---------- generic card grid ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.1rem; }
.card{ border:1px solid var(--panel-b); border-radius:var(--r); padding:1.5rem; background:var(--panel-s);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:.35s var(--ease); }
.card::before{ content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:0; transition:opacity .35s; }
.card:hover{ transform:translateY(-5px); border-color:var(--panel-bh); box-shadow:var(--shadow-md); }
.card:hover::before{ opacity:1; }
.card>*{ position:relative; }
.card-ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--accent-soft); border:1px solid var(--panel-b); font-size:1.2rem; }
.card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.92rem; }
.card .tag{ display:inline-block; margin-top:1rem; font:600 .68rem/1 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); border:1px solid rgba(180,83,9,.25); padding:.32rem .55rem;
  border-radius:999px; background:#fff7ed; }

/* ---------- work / projects ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.2rem; }
.proj{ border:1px solid var(--panel-b); border-radius:var(--r); padding:1.6rem; background:var(--panel-s);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.7rem; position:relative; overflow:hidden; transition:.35s var(--ease); }
.proj::after{ content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--grad);
  transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease); }
.proj:hover{ transform:translateY(-5px); border-color:var(--panel-bh); box-shadow:var(--shadow-md); }
.proj:hover::after{ transform:scaleY(1); }
.proj.featured{ grid-column:span 2; background:var(--grad-soft); }
.proj-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.proj h3{ font-size:1.25rem; }
.proj .role{ color:var(--teal-d); font-size:.85rem; font-weight:600; }
.proj p{ color:var(--muted); font-size:.93rem; }
.stack{ display:flex; flex-wrap:wrap; gap:.4rem; }
.stack span{ font:550 .72rem/1 var(--mono); color:var(--faint); border:1px solid var(--panel-b);
  padding:.32rem .55rem; border-radius:6px; background:#fff; }
.status{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; }
.status::before{ content:""; width:7px; height:7px; border-radius:50%; }
.status.prod{ color:var(--teal-d); } .status.prod::before{ background:var(--teal); box-shadow:0 0 8px var(--teal); }
.status.wip{ color:var(--gold); } .status.wip::before{ background:var(--gold); }
/* project progressive disclosure */
.proj-more{ align-self:flex-start; margin-top:.2rem; background:none; border:0; cursor:pointer;
  color:var(--accent); font:600 .82rem/1 var(--font); display:inline-flex; align-items:center; gap:.35rem; padding:.2rem 0; }
.proj-more::after{ content:"▾"; font-size:.7rem; transition:transform .25s var(--ease); }
.proj-more[aria-expanded="true"]::after{ transform:rotate(180deg); }
.proj-detail{ overflow:hidden; max-height:0; opacity:0; transition:max-height .4s var(--ease), opacity .3s, margin .3s; }
.proj-detail p{ color:var(--muted); font-size:.88rem; border-top:1px solid var(--panel-b); padding-top:.7rem; }
.proj-detail.open{ max-height:340px; opacity:1; margin-top:.2rem; }

/* ---------- demo section ---------- */
.demo-stage{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.5rem; align-items:start; }
.demo-controls{ border:1px solid var(--panel-b); border-radius:var(--r); padding:1.4rem; background:var(--panel-s); box-shadow:var(--shadow-sm); }
.demo-controls-h{ font:600 .8rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:1rem; }
.demo-btns{ display:flex; flex-direction:column; gap:.6rem; }
.demo-btn{ text-align:left; background:#fff; border:1px solid var(--panel-b); color:var(--ink);
  padding:.7rem .9rem; border-radius:var(--r-sm); cursor:pointer; font-size:.88rem; font-weight:550;
  display:flex; align-items:center; gap:.6rem; transition:.2s; }
.demo-btn:hover{ border-color:var(--accent); background:var(--accent-soft); transform:translateX(3px); }
.demo-btn .b-tag{ font:600 .68rem/1 var(--mono); margin-left:auto; color:var(--faint); }
.demo-readout{ margin-top:1.1rem; font:500 .8rem/1.5 var(--mono); color:var(--muted);
  border-top:1px solid var(--panel-b); padding-top:1rem; min-height:3.5rem; }
.demo-readout .ok{ color:var(--teal-d); } .demo-readout .ev{ color:var(--gold); } .demo-readout .pin{ color:var(--indigo); }

/* ---------- methods ---------- */
.methods-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem; }
.method{ border:1px solid var(--panel-b); border-radius:var(--r-sm); padding:1.1rem 1.2rem; background:var(--panel-s);
  box-shadow:var(--shadow-sm); display:flex; gap:.8rem; align-items:flex-start; transition:.3s var(--ease); }
.method:hover{ border-color:var(--panel-bh); background:var(--accent-soft); box-shadow:var(--shadow-md); }
.method .mk{ color:var(--teal-d); font-weight:800; font-family:var(--mono); font-size:.9rem; padding-top:.1rem; }
.method h3{ font-size:.98rem; margin-bottom:.2rem; }
.method p{ color:var(--muted); font-size:.84rem; }

/* ---------- contact ---------- */
.contact-card{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem);
  border:1px solid var(--panel-b); border-radius:calc(var(--r) + 6px); padding:clamp(2rem,5vw,3.5rem);
  background:var(--grad-soft); box-shadow:var(--shadow-sm); }
.contact-card h2{ font-size:clamp(1.8rem,4vw,2.7rem); margin:.3rem 0; }
.contact-links{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0; }
.contact-meta{ list-style:none; display:flex; flex-direction:column; gap:.8rem; margin-top:1.5rem; }
.contact-meta li{ display:flex; flex-direction:column; gap:.1rem; border-top:1px solid var(--panel-b); padding-top:.8rem; }
.contact-meta span{ color:var(--faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.contact-meta strong{ color:var(--ink); font-weight:600; }
.contact-form{ display:flex; flex-direction:column; gap:.9rem; }
.contact-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; color:var(--muted); }
.contact-form input,.contact-form textarea{ background:#fff; border:1px solid var(--panel-b);
  border-radius:var(--r-sm); padding:.75rem .9rem; color:var(--ink); font-family:inherit; font-size:.95rem;
  transition:border-color .2s, box-shadow .2s; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.contact-form input[aria-invalid="true"],.contact-form textarea[aria-invalid="true"]{ border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
.field-err{ color:var(--red); font-size:.76rem; min-height:1em; }
.honeypot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-status{ font-size:.85rem; min-height:1.2rem; }
.form-status.ok{ color:var(--teal-d); } .form-status.err{ color:var(--red); }

/* ---------- back to top ---------- */
.to-top{ position:fixed; right:1.3rem; bottom:1.3rem; z-index:60; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--panel-b); background:#fff; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-md);
  font-size:1.1rem; display:grid; place-items:center; opacity:0; transform:translateY(12px) scale(.9);
  pointer-events:none; transition:.3s var(--ease); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--panel-b); margin-top:0; background:var(--bg-2); }
.footer-in{ max-width:var(--maxw); margin:0 auto; padding:2.5rem clamp(1.2rem,5vw,2.5rem); text-align:center; }
.footer .brand-name{ font-size:1.2rem; font-weight:800; }
.footer p{ color:var(--muted); margin-top:.6rem; font-size:.92rem; }
.footer-small{ color:var(--faint); font-size:.82rem; }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:auto; text-align:left; }
  .hero-demo{ order:2; }
  .vision-grid,.demo-stage,.contact-card{ grid-template-columns:1fr; }
  .proj.featured{ grid-column:span 1; }
  .metrics{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .metric:nth-child(4),.metric:nth-child(5){ grid-column:span 1; }
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column;
    background:rgba(255,255,255,.98); backdrop-filter:blur(16px); padding:5.5rem 2rem 2rem; gap:1.4rem;
    transform:translateX(100%); transition:transform .35s var(--ease); border-left:1px solid var(--panel-b);
    box-shadow:-20px 0 50px -30px rgba(15,27,45,.3); margin-left:0; }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:1.15rem; }
  .nav-burger{ display:flex; z-index:60; }
  .nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px){
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .nav-actions .btn{ display:none; }
  .hero-cta .btn{ flex:1; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}