/* ══════════════════════════════════════════════════════
   daybson.dev — style.css  v3
   Palette: #2300bd (royal indigo) + deep neutrals
   Fonts: Boska (display) + Satoshi (body)
   ══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --font-display: 'Boska', Georgia, serif;
  --font-body:    'Satoshi', system-ui, sans-serif;

  --t-xs:   clamp(.75rem,  .7rem  + .25vw, .875rem);
  --t-sm:   clamp(.875rem, .8rem  + .35vw, 1rem);
  --t-base: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --t-lg:   clamp(1.125rem,1rem   + .75vw, 1.5rem);
  --t-xl:   clamp(1.5rem,  1.2rem + 1.25vw, 2.25rem);
  --t-2xl:  clamp(2rem,    1rem   + 3.5vw,  4.5rem);
  --t-hero: clamp(3.5rem,  1.5rem + 7vw,    8rem);

  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;
  --s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;

  --r-sm:.375rem;--r-md:.625rem;--r-lg:1rem;--r-xl:1.5rem;--r-2xl:2rem;--r-full:9999px;

  --ease: cubic-bezier(.16,1,.3,1);
  --tr: 200ms var(--ease);
}

/* ── LIGHT MODE ── */
:root,[data-theme="light"] {
  --bg:          #f2f2f8;
  --bg-dim:      #eaeaf2;
  --surface:     #ffffff;
  --surface-2:   #f8f8fd;
  --border:      rgba(35,0,189,.1);
  --border-soft: rgba(35,0,189,.06);

  --text:    #12111f;
  --muted:   #50506a;
  --faint:   #9494ac;
  --inv:     #ffffff;

  --accent:        #2300bd;
  --accent-hov:    #1900a0;
  --accent-dim:    rgba(35,0,189,.1);
  --accent-glow:   rgba(35,0,189,.22);
  --accent-txt:    #2300bd;
  --accent-raw:    35,0,189;

  --sh-sm: 0 1px 3px rgba(35,0,189,.07),0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 8px 28px rgba(35,0,189,.1), 0 2px 6px rgba(0,0,0,.04);
  --sh-lg: 0 24px 64px rgba(35,0,189,.14),0 6px 16px rgba(0,0,0,.06);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg:          #0c0b18;
  --bg-dim:      #100f1f;
  --surface:     #16152a;
  --surface-2:   #1c1b34;
  --border:      rgba(130,110,255,.14);
  --border-soft: rgba(130,110,255,.07);

  --text:    #e8e6ff;
  --muted:   #9b98c4;
  --faint:   #5a5878;
  --inv:     #0c0b18;

  --accent:        #7b68ff;
  --accent-hov:    #9580ff;
  --accent-dim:    rgba(123,104,255,.14);
  --accent-glow:   rgba(123,104,255,.28);
  --accent-txt:    #a090ff;
  --accent-raw:    123,104,255;

  --sh-sm: 0 1px 3px rgba(0,0,0,.3);
  --sh-md: 0 8px 28px rgba(0,0,0,.45);
  --sh-lg: 0 24px 64px rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) {
    --bg:#0c0b18;--bg-dim:#100f1f;--surface:#16152a;--surface-2:#1c1b34;
    --border:rgba(130,110,255,.14);--border-soft:rgba(130,110,255,.07);
    --text:#e8e6ff;--muted:#9b98c4;--faint:#5a5878;--inv:#0c0b18;
    --accent:#7b68ff;--accent-hov:#9580ff;
    --accent-dim:rgba(123,104,255,.14);--accent-glow:rgba(123,104,255,.28);
    --accent-txt:#a090ff;--accent-raw:123,104,255;
    --sh-sm:0 1px 3px rgba(0,0,0,.3);
    --sh-md:0 8px 28px rgba(0,0,0,.45);
    --sh-lg:0 24px 64px rgba(0,0,0,.6);
  }
}

/* ── BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--font-body);font-size:var(--t-base);line-height:1.65;color:var(--text);background:var(--bg);overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;background:none;border:none;}
p,li{text-wrap:pretty;max-width:72ch;}
h1,h2,h3,h4{line-height:1.06;text-wrap:balance;}
::selection{background:var(--accent-dim);color:var(--text);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm);}

.skip-link{position:absolute;left:-999px;top:var(--s4);background:var(--accent);color:var(--inv);padding:var(--s3) var(--s4);border-radius:var(--r-full);z-index:200;font-weight:700;}
.skip-link:focus{left:var(--s4);}

.wrap{width:min(calc(100% - 2.5rem),72rem);margin-inline:auto;}

/* ── PROGRESS ── */
.progress-bar{position:fixed;top:0;left:0;z-index:300;height:2.5px;width:0;background:var(--accent);transition:width .1s linear;}

/* ── NAV ── */
.nav-shell{position:fixed;top:0;inset-inline:0;z-index:100;padding-block:var(--s4);transition:background var(--tr),box-shadow var(--tr),padding var(--tr);}
.nav-shell.nav-scrolled{padding-block:var(--s3);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 1px 0 var(--border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);}
.logo{display:inline-flex;align-items:center;gap:var(--s3);font-weight:700;font-size:var(--t-sm);color:var(--text);transition:opacity var(--tr);}
.logo:hover{opacity:.75;}
.logo svg{width:2.1rem;height:2.1rem;flex-shrink:0;}
nav{display:none;gap:var(--s6);}
nav a{font-size:var(--t-sm);font-weight:500;color:var(--muted);transition:color var(--tr);}
nav a:hover{color:var(--text);}
.nav-actions{display:flex;align-items:center;gap:var(--s3);}

/* Language pill */
.lang-pill{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);overflow:hidden;position:relative;}
.preview-badge{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--inv);padding:.18rem .5rem;border-radius:var(--r-full) 0 0 var(--r-full);margin-right:var(--s1);}
.lang-btn{padding:var(--s2) var(--s3);font-size:var(--t-xs);font-weight:700;color:var(--muted);border-radius:var(--r-full);transition:background var(--tr),color var(--tr);}
.lang-btn.active{background:var(--accent-dim);color:var(--accent-txt);}
.lang-btn:last-child{border-radius:0 var(--r-full) var(--r-full) 0;}

.theme-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);color:var(--muted);transition:background var(--tr),color var(--tr);}
.theme-btn:hover{background:var(--surface-2);color:var(--text);}
.theme-btn svg{width:1.1rem;height:1.1rem;}
[data-theme="dark"] .icon-sun{display:block;}[data-theme="dark"] .icon-moon{display:none;}
[data-theme="light"] .icon-sun{display:none;}[data-theme="light"] .icon-moon{display:block;}
.icon-sun,.icon-moon{display:none;}
:root:not([data-theme]) .icon-moon{display:block;}

/* ── HERO ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(5rem,12vw,8rem);overflow:hidden;}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.hero-noise{position:absolute;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px;}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s5);}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border:1px solid var(--border);border-radius:var(--r-full);background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(10px);font-size:var(--t-xs);font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;width:fit-content;}
.live-dot{width:.5rem;height:.5rem;border-radius:var(--r-full);background:#22c55e;box-shadow:0 0 0 .2rem rgba(34,197,94,.25);animation:blink 2.2s ease-in-out infinite;}
@keyframes blink{0%,100%{box-shadow:0 0 0 .2rem rgba(34,197,94,.25);}50%{box-shadow:0 0 0 .55rem rgba(34,197,94,.06);}}
.hero-name{font-family:var(--font-display);font-size:var(--t-hero);font-weight:700;line-height:.92;letter-spacing:-.02em;color:var(--text);}
.hero-name em{font-style:italic;color:var(--accent);display:block;}
.hero-role{font-size:var(--t-xl);font-family:var(--font-display);font-weight:400;color:var(--muted);letter-spacing:-.01em;}
.hero-desc{max-width:54ch;color:var(--muted);font-size:var(--t-lg);line-height:1.55;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);}
.hero-pills{display:flex;flex-wrap:wrap;gap:var(--s2);}
.hero-pills span{padding:var(--s1) var(--s3);border:1px solid var(--border);border-radius:var(--r-full);font-size:var(--t-xs);font-weight:600;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;}
.hero-scroll-hint{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding-top:var(--s8);margin-top:var(--s4);}
.scroll-line{width:1px;height:3rem;background:linear-gradient(to bottom,var(--accent),transparent);animation:scroll-line 2s ease-in-out infinite;}
@keyframes scroll-line{0%,100%{transform:scaleY(1);opacity:1;}50%{transform:scaleY(.6);opacity:.5;}}
.hero-scroll-hint span{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}

/* ── SECTION BASE ── */
.section{padding-block:clamp(var(--s12),10vw,var(--s24));}
.section-dim{background:var(--bg-dim);}
.section-kicker{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-txt);margin-bottom:var(--s3);}
.section-title{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:600;color:var(--text);max-width:18ch;margin-bottom:var(--s10);}

/* ── ABOUT ── */
.about-grid{display:grid;gap:var(--s8) var(--s12);align-items:start;}
.about-photo{display:flex;flex-direction:column;gap:var(--s4);}
.photo-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--border);aspect-ratio:4/5;max-width:22rem;}
.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .6s var(--ease);}
.photo-frame:hover img{transform:scale(1.03);}
.photo-badge{position:absolute;bottom:var(--s4);left:var(--s4);display:flex;flex-direction:column;align-items:center;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--accent);color:var(--inv);backdrop-filter:blur(8px);}
.photo-badge span:first-child{font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;line-height:1;}
.photo-badge span:last-child{font-size:var(--t-xs);opacity:.85;font-weight:500;}
.info-cards{display:grid;gap:var(--s2);}
.info-card{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--surface);font-size:var(--t-sm);}
.info-card dt{font-size:1rem;flex-shrink:0;}
.info-card dd{color:var(--muted);font-weight:500;}
.info-card a{color:var(--accent-txt);}
.info-card a:hover{text-decoration:underline;}
.about-text{display:flex;flex-direction:column;gap:var(--s4);}
.about-lead{font-size:var(--t-lg);line-height:1.55;color:var(--text);}
.about-text p:not(.about-lead){color:var(--muted);}
.cert-goals{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4);}
.cert-chip{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border:1px dashed var(--border);border-radius:var(--r-full);font-size:var(--t-sm);font-weight:600;color:var(--accent-txt);}
.cert-chip svg{width:1rem;height:1rem;stroke:var(--accent);}

/* ── SKILLS ── */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:var(--s4);}
.skill-card{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);border:1px solid var(--border-soft);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-sm);transition:box-shadow var(--tr),border-color var(--tr),transform var(--tr);}
.skill-card:hover{box-shadow:var(--sh-md);border-color:var(--border);transform:translateY(-2px);}
.skill-icon{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--accent-dim);color:var(--accent-txt);}
.skill-icon svg{width:1.2rem;height:1.2rem;}
.skill-card h3{font-size:var(--t-sm);font-weight:700;color:var(--text);}
.tag-cloud{display:flex;flex-wrap:wrap;gap:var(--s2);}
.tag-cloud span{padding:var(--s1) var(--s3);border-radius:var(--r-full);border:1px solid var(--border);font-size:var(--t-xs);font-weight:600;color:var(--muted);transition:background var(--tr),color var(--tr),border-color var(--tr);}
.skill-card:hover .tag-cloud span{border-color:color-mix(in srgb,var(--accent) 25%,var(--border));color:var(--accent-txt);background:var(--accent-dim);}

/* ── TIMELINE ── */
.timeline{display:flex;flex-direction:column;gap:0;}
.tl-item{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s5);}
.tl-left{display:flex;flex-direction:column;align-items:center;padding-top:.55rem;}
.tl-dot{width:1rem;height:1rem;border-radius:var(--r-full);border:2px solid var(--accent);background:var(--bg);box-shadow:0 0 0 .3rem var(--accent-dim);flex-shrink:0;transition:background var(--tr);}
.tl-dot.current{background:var(--accent);}
.tl-line{width:1px;flex:1;min-height:var(--s6);background:linear-gradient(to bottom,var(--border),transparent);margin-block:var(--s3);}
.tl-right{padding-bottom:var(--s8);}
.tl-meta{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);}
.tl-date{font-size:var(--t-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-txt);}
.tl-badge{padding:var(--s1) var(--s3);border-radius:var(--r-full);font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;}
.current-badge{background:var(--accent);color:var(--inv);}
.tl-card{padding:var(--s5) var(--s6);border:1px solid var(--border-soft);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-sm);transition:box-shadow var(--tr),border-color var(--tr);}
.tl-card:hover{box-shadow:var(--sh-md);border-color:var(--border);}
.tl-company{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s2);}
.tl-card h3{font-size:var(--t-lg);font-weight:700;margin-bottom:var(--s3);}
.tl-card ul{list-style:none;display:grid;gap:var(--s2);color:var(--muted);font-size:var(--t-sm);line-height:1.62;}
.tl-card li{padding-left:var(--s5);position:relative;}
.tl-card li::before{content:'▸';position:absolute;left:0;color:var(--accent-txt);font-size:.75em;}
.tl-card strong{color:var(--text);font-weight:600;}
.tl-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--border-soft);}
.tl-tags span{padding:var(--s1) var(--s3);border-radius:var(--r-full);border:1px solid var(--border);font-size:var(--t-xs);font-weight:600;color:var(--faint);}

/* ── CV DOWNLOAD ── */
.cv-section{padding-block:clamp(var(--s12),8vw,var(--s20));background:var(--accent);position:relative;overflow:hidden;}
.cv-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.cv-inner{position:relative;z-index:1;display:grid;gap:var(--s8) var(--s12);align-items:center;}
.cv-glow{position:absolute;width:32rem;height:20rem;top:-10rem;right:-6rem;background:radial-gradient(ellipse,rgba(255,255,255,.15) 0%,transparent 70%);pointer-events:none;filter:blur(20px);}
.cv-section .section-kicker{color:rgba(255,255,255,.7);}
.cv-text h2{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:700;color:#fff;margin-bottom:var(--s3);}
.cv-text p{color:rgba(255,255,255,.75);max-width:48ch;}
.cv-actions{display:flex;flex-wrap:wrap;gap:var(--s3);}
.cv-section .btn-primary{background:#fff;color:var(--accent);}
.cv-section .btn-primary:hover{background:rgba(255,255,255,.9);}
.cv-section .btn-outline{border-color:rgba(255,255,255,.4);color:#fff;}
.cv-section .btn-outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.65);}

/* ── CONTACT ── */
.contact-card{position:relative;overflow:hidden;max-width:54rem;margin-inline:auto;padding:clamp(var(--s8),7vw,var(--s20));border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--surface);box-shadow:var(--sh-lg);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s5);}
.contact-rays{position:absolute;width:36rem;height:22rem;top:-11rem;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 68%);pointer-events:none;filter:blur(18px);}
.contact-heading{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:700;color:var(--text);}
.contact-sub{max-width:44ch;color:var(--muted);font-size:var(--t-lg);line-height:1.5;}
.contact-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);color:var(--faint);font-size:var(--t-sm);}
.sep{opacity:.4;}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:var(--s2);justify-content:center;min-height:3rem;padding:.85rem 1.75rem;border-radius:var(--r-full);background:var(--accent);color:var(--inv);font-size:var(--t-sm);font-weight:700;letter-spacing:.02em;transition:background var(--tr),transform var(--tr),box-shadow var(--tr);box-shadow:0 0 0 0 var(--accent-glow);}
.btn-primary:hover{background:var(--accent-hov);transform:translateY(-2px);box-shadow:0 10px 32px var(--accent-glow);}
.btn-primary:active{transform:translateY(0);}
.btn-primary svg{width:1.1rem;height:1.1rem;}
.btn-large{min-height:3.5rem;padding:1rem 2.25rem;font-size:var(--t-base);}
.btn-outline{display:inline-flex;align-items:center;gap:var(--s2);justify-content:center;min-height:3rem;padding:.85rem 1.75rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:var(--t-sm);font-weight:600;transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr);}
.btn-outline:hover{background:var(--surface-2);color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateY(-1px);}
.btn-outline svg{width:1rem;height:1rem;}
.btn-outline.btn-large{min-height:3.5rem;padding:1rem 2.25rem;}

/* ── FOOTER ── */
.site-footer{padding-block:var(--s6);border-top:1px solid var(--border-soft);}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);font-size:var(--t-xs);color:var(--faint);}

/* ── REVEAL ANIMATIONS ── */
.reveal,.fade-up{opacity:0;transform:translateY(1.75rem);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.fade-up{transition-delay:var(--d,0ms);}
.reveal.in,.fade-up.in{opacity:1;transform:translateY(0);}
.reveal:nth-child(2){transition-delay:60ms;}
.reveal:nth-child(3){transition-delay:120ms;}
.reveal:nth-child(4){transition-delay:180ms;}
.reveal:nth-child(5){transition-delay:230ms;}
.reveal:nth-child(6){transition-delay:275ms;}

/* ── RESPONSIVE ── */
@media(min-width:48rem){
  nav{display:flex;}
  .about-grid{grid-template-columns:20rem 1fr;}
  .cv-inner{grid-template-columns:1fr auto;}
}
@media(max-width:47.99rem){
  nav{position:fixed;bottom:0;inset-inline:0;z-index:100;display:flex;justify-content:space-around;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(22px);border-top:1px solid var(--border-soft);}
  body{padding-bottom:4.5rem;}
  .hero{padding-block:6rem 3rem;min-height:auto;}
  .nav-actions{gap:var(--s2);}
  .preview-badge{display:none;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;}
  .reveal,.fade-up{opacity:1;transform:none;}
}