:root {
  --navy-950:#031822;
  --navy-900:#052638;
  --navy-850:#073148;
  --petrol:#0b4258;
  --gold:#d8a23e;
  --gold-2:#f0cb78;
  --ivory:#f7f3e8;
  --paper:#fffdf7;
  --ink:#06223a;
  --ink-soft:#45566a;
  --line:rgba(216,162,62,.34);
  --white:#fff;
  --radius:24px;
  --shadow:0 28px 70px rgba(0,25,42,.16);
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,select{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.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:fixed;left:18px;top:-60px;z-index:999;background:var(--gold-2);color:var(--navy-950);padding:10px 16px;border-radius:10px;font-weight:800;transition:top .2s}
.skip-link:focus{top:16px}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:9999;background:transparent}.scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 14px rgba(240,203,120,.7)}
.site-header{position:fixed;inset:0 0 auto;z-index:1000;background:rgba(3,24,34,.68);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);transition:background .25s,box-shadow .25s}
.site-header.scrolled{background:rgba(3,24,34,.92);box-shadow:0 12px 40px rgba(0,0,0,.16)}
.nav-shell{width:min(1280px,calc(100% - 36px));height:74px;margin:auto;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:#fff;font-weight:760;letter-spacing:.01em}.brand-mark{width:38px;height:38px;border:1px solid rgba(240,203,120,.75);border-radius:12px;display:grid;place-items:center;color:var(--gold-2);font-family:var(--serif);font-size:14px;background:rgba(255,255,255,.035)}.brand-text{font-size:14px}
.main-nav{display:flex;align-items:center;gap:24px}.main-nav a{position:relative;color:rgba(255,255,255,.78);font-size:13px;font-weight:650}.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--gold);transition:right .22s}.main-nav a:hover,.main-nav a.active{color:#fff}.main-nav a:hover::after,.main-nav a.active::after{right:0}
.language-control{display:flex;align-items:center;gap:7px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:6px 9px}.lang-flag{font-size:16px}.language-control select{appearance:auto;background:transparent;color:#fff;border:0;outline:0;font-size:12px;font-weight:700;max-width:90px}.language-control option{color:#071d2a;background:#fff}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);border-radius:12px}.menu-toggle span{display:block;width:18px;height:1px;background:#fff;margin:5px auto}
.hero{position:relative;min-height:780px;display:flex;align-items:center;isolation:isolate;color:#fff;background:radial-gradient(circle at 78% 18%,rgba(11,66,88,.48),transparent 24%),linear-gradient(135deg,#031822 0%,#052638 50%,#062a3c 100%);overflow:hidden}.hero-bg{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(3,24,34,.92) 0%,rgba(3,24,34,.78) 46%,rgba(3,24,34,.54) 100%)}.hero::after{content:"";position:absolute;inset:auto -12% -260px -15%;height:360px;z-index:-1;background:var(--paper);border-radius:50% 50% 0 0/24% 24% 0 0}.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 78% 32%,rgba(216,162,62,.10),transparent 22%),linear-gradient(180deg,transparent 72%,rgba(0,0,0,.10))}
#three-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.42}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:52px;align-items:center;padding-top:112px;padding-bottom:148px}.hero-copy{max-width:740px}.eyebrow,.section-kicker,.micro{font-size:11px;text-transform:uppercase;letter-spacing:.24em;font-weight:800;color:var(--gold-2)}.hero h1{font-family:var(--serif);font-size:clamp(74px,8.2vw,118px);line-height:.84;letter-spacing:-.035em;margin:20px 0 18px;text-shadow:0 5px 34px rgba(0,0,0,.22);font-weight:600}.hero h1 span{color:var(--ivory)}.hero-role{margin:0;color:var(--gold-2);font-size:clamp(20px,2.5vw,32px);line-height:1.18;font-weight:700;max-width:780px}.hero-subtitle{margin:14px 0 0;font-size:17px;color:rgba(255,255,255,.84)}.hero-subtitle b{font-weight:400;color:rgba(240,203,120,.68);padding-inline:7px}.hero-meta{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:28px;color:rgba(255,255,255,.7);font-size:13px}.hero-meta a:hover{color:var(--gold-2)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{min-height:48px;padding:0 18px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.015em;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px)}.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.btn-primary{background:linear-gradient(135deg,#e0aa45,#f0ce83);color:#092333;box-shadow:0 12px 32px rgba(216,162,62,.2)}.btn-primary:hover{box-shadow:0 16px 42px rgba(216,162,62,.3)}.btn-secondary{color:#fff;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06)}.btn-secondary:hover{border-color:rgba(240,203,120,.55);background:rgba(255,255,255,.09)}.trust-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.trust-strip span{padding:7px 10px;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(255,255,255,.035);font-size:11px;color:rgba(255,255,255,.62)}
.hero-visual{display:flex;align-items:center;justify-content:flex-end}.hero-banner-card{margin:0;width:min(100%,720px);padding:18px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 80px rgba(0,0,0,.26);backdrop-filter:blur(8px)}.hero-banner-card img{width:100%;border-radius:20px;display:block;box-shadow:0 20px 40px rgba(0,0,0,.16)}.hero-banner-card figcaption{margin-top:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.68);text-align:center}
.scroll-cue{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);width:24px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:14px}.scroll-cue span{position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:3px;background:var(--gold-2);transform:translateX(-50%);animation:scrollDot 1.8s infinite}@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,16px)}}
.section{padding:112px 0}.section-heading{display:flex;align-items:flex-start;gap:20px;margin-bottom:44px}.section-heading.compact{margin-bottom:26px}.section-index{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:#b27c1f;font-family:var(--serif);font-size:14px}.section-heading h2{margin:3px 0 0;font-family:var(--serif);font-size:clamp(38px,4.5vw,60px);line-height:1;color:var(--ink);font-weight:500;letter-spacing:-.025em}.section-kicker{margin:0;color:#a26f1e}.dark-section{position:relative;color:#fff;background:linear-gradient(145deg,#041b29,#06344b 70%,#052739);overflow:hidden}.dark-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 20%,rgba(216,162,62,.09),transparent 26%),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,56px 56px,56px 56px}.dark-section>.container{position:relative;z-index:1}.dark-section .section-heading h2{color:#fff}.dark-section .section-index{color:var(--gold-2)}.dark-section .section-kicker{color:var(--gold-2)}
.profile-grid{display:grid;grid-template-columns:1.28fr .72fr;gap:24px}.profile-card,.values-card{border-radius:var(--radius);box-shadow:var(--shadow)}.profile-card{padding:42px 46px;background:#fff;border:1px solid rgba(6,34,58,.07)}.profile-card .lead{margin:0;font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);line-height:1.52;color:#153a54}.profile-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.profile-pill-row span{padding:8px 11px;border-radius:999px;background:#f1f5f6;color:#24465d;font-size:11px;font-weight:750}.profile-quote{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-top:32px;padding-top:28px;border-top:1px solid #e5e6e2}.quote-mark{font-family:var(--serif);font-size:50px;line-height:.8;color:var(--gold)}.profile-quote p{margin:0;color:#3f5262;font-style:italic}.profile-quote span{font-size:11px;color:#73808a}.values-card{position:relative;overflow:hidden;min-height:430px;background:linear-gradient(155deg,#072739,#0b4258);display:flex;flex-direction:column;color:#fff;padding:16px}.values-image-wrap{position:relative;inset:auto;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.05)}.values-image-wrap img{width:100%;height:100%;object-fit:contain;object-position:center center;filter:saturate(.90) contrast(.96)}.values-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,24,34,.02) 0%,rgba(3,24,34,.08) 100%)}.values-copy{position:relative;z-index:1;padding:22px 16px 16px}.values-copy h3{font-family:var(--serif);font-size:32px;line-height:1.08;margin:8px 0 0;font-weight:600}.micro{margin:0;color:var(--gold-2)}
.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.expertise-card{position:relative;min-height:300px;padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.025));backdrop-filter:blur(6px);transition:transform .2s,border-color .2s}.expertise-card:hover{transform:translateY(-4px);border-color:rgba(240,203,120,.32)}.expertise-card .card-num{font-family:var(--serif);font-size:12px;color:var(--gold-2);letter-spacing:.15em}.expertise-card h3{margin:36px 0 18px;font-family:var(--serif);font-size:29px;font-weight:500}.expertise-card ul{list-style:none;margin:0;padding:0}.expertise-card li{position:relative;padding:8px 0 8px 17px;color:rgba(255,255,255,.72);font-size:13px;border-top:1px solid rgba(255,255,255,.06)}.expertise-card li::before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.timeline{position:relative;max-width:1020px;margin-left:auto}.timeline::before{content:"";position:absolute;left:164px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold),rgba(216,162,62,.14))}.timeline-item{display:grid;grid-template-columns:135px 1fr;gap:58px;position:relative;padding:0 0 36px}.timeline-item::before{content:"";position:absolute;left:158px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--gold);box-shadow:0 0 0 6px rgba(216,162,62,.08)}.timeline-date{padding-top:1px;text-align:right;color:#a56f16;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.timeline-content{padding:0 0 28px;border-bottom:1px solid rgba(6,34,58,.09)}.timeline-header{display:grid;grid-template-columns:82px 1fr;gap:18px;align-items:start}.timeline-logo{width:68px;height:68px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;box-shadow:0 12px 24px rgba(0,32,50,.08);border:1px solid rgba(6,34,58,.07)}.timeline-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}.timeline-copy{min-width:0}.timeline-company{color:#71808b;font-size:12px;font-weight:700}.timeline-content h3{margin:5px 0 7px;font-size:22px;line-height:1.22;color:#0d3150}.timeline-content p{margin:0;max-width:760px;color:var(--ink-soft);font-size:14px}.timeline-item.earlier .timeline-content{opacity:.88}.timeline-tag{display:inline-block;margin-top:12px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#9b6d20}
.skills-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.skills-intro p{max-width:420px;color:rgba(255,255,255,.7)}.skill-cloud{display:flex;flex-wrap:wrap;gap:10px;align-content:center}.skill-chip{padding:13px 15px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);font-size:13px;color:rgba(255,255,255,.78);transition:transform .18s,background .18s,border-color .18s}.skill-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.075);border-color:rgba(240,203,120,.28)}.skill-chip.featured{font-size:15px;color:var(--gold-2);border-color:rgba(240,203,120,.24);background:rgba(216,162,62,.07)}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:72px}.secondary-heading{margin-top:0}.education-list,.interest-list{display:grid;gap:16px}.education-item,.interest-item{padding:22px 24px;border-radius:18px;border:1px solid rgba(6,34,58,.08);background:#fff;box-shadow:0 10px 34px rgba(0,32,50,.06)}.education-item h3,.interest-item h3{margin:0 0 6px;font-size:18px;color:#10354d}.education-item p,.interest-item p{margin:0;color:#667583;font-size:13px}.education-item .education-note{margin-top:10px;padding-top:10px;border-top:1px solid #edf0ef;color:#8a6a2a;font-size:11px}
.cv-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:70px;align-items:center}.cv-copy h2{font-family:var(--serif);font-size:clamp(38px,4vw,58px);line-height:1.05;margin:10px 0 14px;font-weight:600}.cv-copy p{max-width:520px;color:rgba(255,255,255,.78);margin-bottom:24px;font-size:15px}.cv-preview{position:relative;width:min(100%,520px);justify-self:end;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);transition:transform .25s}.cv-preview:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-3px)}.cv-preview img{width:100%}.preview-label{position:absolute;left:14px;bottom:14px;padding:9px 12px;border-radius:10px;background:rgba(3,24,34,.86);backdrop-filter:blur(10px);font-size:11px;color:#fff}
.contact-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;padding:52px;border:1px solid rgba(6,34,58,.08);border-radius:30px;background:linear-gradient(145deg,#fff,#f8f6ee);box-shadow:var(--shadow)}.contact-shell h2{font-family:var(--serif);font-size:clamp(34px,4vw,54px);line-height:1.06;margin:8px 0 10px;font-weight:600}.contact-shell p:not(.section-kicker){color:#687783;font-size:15px}.contact-actions{display:grid;gap:10px}.contact-card{display:flex;align-items:center;gap:15px;padding:16px;border:1px solid rgba(6,34,58,.08);background:rgba(255,255,255,.72);border-radius:16px;transition:transform .18s,border-color .18s}.contact-card:hover{transform:translateX(4px);border-color:rgba(216,162,62,.38)}.contact-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--navy-900);color:var(--gold-2);font-family:var(--serif);font-weight:800}.contact-card span:last-child{display:grid}.contact-card small{color:#8a949a;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.contact-card strong{font-size:13px;color:#143a51}
.site-footer{padding:34px 0;background:#031722;color:rgba(255,255,255,.58);font-size:11px}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:25px;align-items:center}.footer-grid>div{display:grid}.footer-grid strong{color:#fff;font-size:13px}.footer-grid a{color:var(--gold-2)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}
@media (max-width:1020px){.main-nav{display:none}.menu-toggle{display:block;order:2}.language-control{order:3}.main-nav.open{display:flex;position:absolute;top:74px;left:18px;right:18px;flex-direction:column;align-items:stretch;gap:0;padding:10px;background:rgba(3,24,34,.98);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 24px 50px rgba(0,0,0,.25)}.main-nav.open a{padding:11px 12px}.hero{min-height:760px}.hero-grid{grid-template-columns:1fr;padding-top:120px}.hero-visual{position:relative;right:auto;bottom:auto;width:100%;opacity:1;justify-content:flex-start}.hero-banner-card{max-width:760px}.profile-grid,.skills-layout,.cv-grid,.contact-shell,.two-column{grid-template-columns:1fr}.expertise-grid{grid-template-columns:1fr 1fr}.values-card{min-height:360px}.cv-preview{justify-self:start;max-width:520px}.contact-shell{gap:30px}.two-column{gap:50px}}
@media (max-width:720px){.container{width:min(100% - 28px,1180px)}.nav-shell{width:calc(100% - 24px);height:68px}.brand-text{display:none}.language-control{padding:5px 7px}.language-control select{width:64px}.hero{min-height:760px}.hero-grid{padding-top:110px;padding-bottom:128px;gap:28px}.hero h1{font-size:64px}.hero-role{font-size:24px}.hero-subtitle{font-size:14px}.hero-meta{display:grid;gap:5px}.hero-visual{width:100%}.hero-banner-card{padding:12px;border-radius:22px}.scroll-cue{bottom:60px}.section{padding:82px 0}.section-heading{margin-bottom:30px}.section-index{width:38px;height:38px}.profile-grid{gap:16px}.profile-card{padding:28px 24px}.profile-card .lead{font-size:23px}.values-card{min-height:auto}.values-copy{padding:18px 14px 14px}.values-copy h3{font-size:28px}.expertise-grid{grid-template-columns:1fr}.expertise-card{min-height:auto}.timeline{margin:0}.timeline::before{left:7px}.timeline-item{grid-template-columns:1fr;gap:8px;padding-left:34px}.timeline-item::before{left:0}.timeline-date{text-align:left}.timeline-header{grid-template-columns:64px 1fr;gap:14px}.timeline-logo{width:56px;height:56px;padding:6px;border-radius:12px}.timeline-content h3{font-size:19px}.skills-layout{gap:28px}.two-column{gap:42px}.cv-grid{gap:36px}.cv-preview{transform:none}.contact-shell{padding:30px 22px}.footer-grid{grid-template-columns:1fr;gap:10px}.scroll-cue{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-cue span{animation:none}.btn,.expertise-card,.contact-card,.cv-preview,.skill-chip{transition:none}}

/* Profile recommendations — anonymised, rewritten from LinkedIn recommendations */
.recommendations-panel{margin-top:34px;padding-top:28px;border-top:1px solid #e5e6e2}.recommendations-panel.standalone{margin-top:0;padding-top:0;border-top:0}
.recommendations-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.recommendations-head h3{margin:7px 0 0;font-family:var(--serif);font-size:33px;line-height:1.08;font-weight:600;color:#143a51}
.recommendation-controls{display:flex;gap:8px;flex:0 0 auto}
.recommendation-nav{width:38px;height:38px;border-radius:50%;border:1px solid rgba(6,34,58,.12);background:#fff;color:#123a54;font-size:16px;display:grid;place-items:center;transition:transform .18s,border-color .18s,background .18s}
.recommendation-nav:hover{transform:translateY(-1px);border-color:rgba(216,162,62,.5);background:#fffaf0}
.recommendation-stage{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;padding:28px 30px;border:1px solid rgba(6,34,58,.08);border-radius:22px;background:linear-gradient(145deg,#f8faf9,#f4f0e6);overflow:hidden;box-shadow:0 14px 36px rgba(0,32,50,.06)}
.recommendation-stage::after{content:"";position:absolute;right:-54px;top:-74px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(216,162,62,.13),transparent 68%);pointer-events:none}
.recommendation-stage .quote-mark{font-family:var(--serif);font-size:54px;line-height:.78;color:var(--gold);position:relative;z-index:1}
.recommendation-stage p{position:relative;z-index:1;margin:0;color:#334b5b;font-size:15px;line-height:1.78;font-style:italic}
.recommendation-stage p.swap-in{animation:recommendationIn .3s ease both}
.recommendation-stage span{position:relative;z-index:1;display:block;margin-top:11px;color:#9a6d21;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.recommendation-dots{display:flex;align-items:center;gap:7px;margin-top:14px}
.recommendation-dot{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#c7d0d3;transition:width .2s,background .2s}
.recommendation-dot.active{width:24px;background:var(--gold)}
@keyframes recommendationIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (max-width:720px){.recommendations-head{align-items:center}.recommendations-head h3{font-size:21px}.recommendation-stage{padding:20px 18px;gap:12px}.recommendation-stage .quote-mark{font-size:46px}.recommendation-stage p{font-size:13px}.recommendation-nav{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.recommendation-stage p.swap-in{animation:none}.recommendation-nav,.recommendation-dot{transition:none}}

/* Refinement pass: cleaner executive hero, integrated banner, static testimonials */
.hero{
  min-height:760px;
  background:linear-gradient(180deg,#031822 0%,#052638 58%,#041d2a 100%);
  overflow:hidden;
}
.hero::after{display:none}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,24,34,.88) 0%,rgba(3,24,34,.62) 42%,rgba(3,24,34,.12) 72%,rgba(3,24,34,.28) 100%);
  pointer-events:none;
}
.hero-banner-bg{
  position:absolute;
  top:74px;
  left:0;
  width:100%;
  height:25vw;
  max-height:350px;
  min-height:285px;
  z-index:-2;
  background:url('../images/hero-banner.webp') center center / cover no-repeat;
}
.hero-banner-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,24,34,.90) 0%,rgba(3,24,34,.68) 31%,rgba(3,24,34,.18) 60%,rgba(3,24,34,.08) 100%),
    linear-gradient(180deg,rgba(3,24,34,.02) 58%,#052638 100%);
}
.hero-grid{
  display:block;
  padding-top:150px;
  padding-bottom:105px;
}
.hero-copy{
  position:relative;
  z-index:2;
  max-width:760px;
}
.hero h1{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-size:clamp(58px,6.3vw,86px);
  line-height:.92;
  letter-spacing:-.025em;
  font-weight:500;
  white-space:nowrap;
  margin:18px 0 16px;
  text-shadow:0 5px 28px rgba(0,0,0,.28);
}
.hero h1 span{font-weight:500;color:#fffdf7}
.hero-role{font-size:clamp(22px,2.25vw,31px);font-weight:650;max-width:760px}
.hero-subtitle{font-size:16px}
.hero-meta{margin-top:24px}
.hero-actions{margin-top:26px}
.trust-strip{margin-top:25px}
.scroll-cue{bottom:38px}

.recommendations-section{background:#fbfaf5}
.recommendations-list{
  display:grid;
  gap:14px;
  max-width:1040px;
}
.recommendation-card{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:18px;
  padding:24px 28px;
  border:1px solid rgba(6,34,58,.09);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,32,50,.055);
}
.recommendation-number{
  padding-top:4px;
  color:#a67525;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}
.recommendation-body{position:relative;padding-left:26px}
.recommendation-body .quote-mark{
  position:absolute;
  left:0;
  top:2px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:39px;
  line-height:.7;
  color:var(--gold);
}
.recommendation-body p{
  margin:0;
  color:#334b5b;
  font-size:14px;
  line-height:1.75;
}
.recommendation-body span{
  display:block;
  margin-top:10px;
  color:#88672e;
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:1020px){
  .hero-banner-bg{height:34vw;min-height:270px;max-height:330px;background-position:58% center}
  .hero-grid{padding-top:145px;padding-bottom:95px}
  .hero h1{font-size:clamp(56px,9vw,82px)}
}
@media (max-width:720px){
  .hero{min-height:720px}
  .hero-banner-bg{top:68px;height:260px;min-height:260px;background-size:auto 260px;background-position:62% center}
  .hero-banner-bg::after{background:linear-gradient(90deg,rgba(3,24,34,.92),rgba(3,24,34,.52) 75%,rgba(3,24,34,.28)),linear-gradient(180deg,rgba(3,24,34,.06) 45%,#052638 100%)}
  .hero-grid{padding-top:130px;padding-bottom:90px}
  .hero h1{font-size:58px;white-space:normal;max-width:330px}
  .recommendation-card{grid-template-columns:1fr;padding:20px 18px;gap:8px}
  .recommendation-number{padding:0}
  .recommendation-body{padding-left:23px}
}


/* =========================================================
   v01 — 2026-10-05 03:17 — final visual overrides
   ========================================================= */

/* Hero: real banner image, no wireframe / 3D decoration */
.hero{
  position:relative;
  min-height:800px;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 16%,rgba(19,93,119,.36),transparent 28%),
    linear-gradient(140deg,#02151f 0%,#05283a 56%,#08374b 100%);
}
.hero::before,.hero::after{display:none!important}
.hero-banner-bg{display:none!important}
.hero-banner-media{
  position:absolute;
  top:74px;
  left:0;
  right:0;
  height:clamp(300px,25vw,410px);
  z-index:0;
  overflow:hidden;
}
.hero-banner-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.hero-banner-shade{
  position:absolute;
  top:74px;
  left:0;
  right:0;
  height:clamp(300px,25vw,410px);
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,21,31,.95) 0%,rgba(2,21,31,.82) 27%,rgba(2,21,31,.35) 51%,rgba(2,21,31,.08) 75%,rgba(2,21,31,.16) 100%),
    linear-gradient(180deg,rgba(2,21,31,.02) 58%,#05283a 100%);
}
.hero-grid{
  position:relative;
  z-index:2;
  display:block;
  padding-top:142px;
  padding-bottom:104px;
}
.hero-copy{max-width:790px}
.hero-name{
  margin:22px 0 18px;
  width:min(100%,710px);
  line-height:1;
}
.hero-name img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.22));
}
.hero-role{max-width:760px;font-size:clamp(23px,2.25vw,31px);line-height:1.16}
.hero-subtitle{max-width:760px}
.hero-meta{margin-top:26px}
.hero-actions{margin-top:28px}
.trust-strip{margin-top:28px}

/* More depth without visual gimmicks */
.dark-section{
  background:
    radial-gradient(circle at 86% 12%,rgba(221,171,74,.11),transparent 25%),
    radial-gradient(circle at 16% 78%,rgba(16,100,132,.26),transparent 33%),
    linear-gradient(145deg,#021823 0%,#07364b 58%,#052536 100%);
}
.cv-section{
  background:
    radial-gradient(circle at 78% 18%,rgba(224,170,69,.13),transparent 27%),
    linear-gradient(135deg,#031722 0%,#07364b 53%,#041e2c 100%);
}
.profile-section{
  background:linear-gradient(145deg,#fffdf7 0%,#f7f5ee 55%,#eef4f4 100%);
}
.experience-section{
  background:
    radial-gradient(circle at 92% 8%,rgba(216,162,62,.08),transparent 20%),
    linear-gradient(155deg,#fffdf8 0%,#f8faf8 52%,#f3f5f1 100%);
}
.education-section{
  background:linear-gradient(145deg,#f8f6ef 0%,#fffdf8 46%,#eef5f5 100%);
}
.recommendations-section{
  background:
    radial-gradient(circle at 12% 8%,rgba(216,162,62,.09),transparent 24%),
    linear-gradient(145deg,#fffdf8 0%,#f7f5ed 58%,#edf4f4 100%);
}
.contact-section{
  background:linear-gradient(145deg,#f1f5f4 0%,#fffdf8 58%,#f8f1e4 100%);
}

/* Recommendations: all visible, understated, no carousel */
.recommendations-list{display:grid;gap:16px;max-width:1060px}
.recommendation-card{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:18px;
  padding:26px 30px;
  border:1px solid rgba(6,34,58,.09);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,247,242,.94));
  box-shadow:0 12px 30px rgba(0,32,50,.055);
}
.recommendation-body p{font-size:14px;line-height:1.78;color:#314858}
.recommendation-body span{color:#7d6230}

/* Contact remains direct and professional */
.contact-shell{
  background:
    radial-gradient(circle at 92% 12%,rgba(216,162,62,.08),transparent 28%),
    linear-gradient(145deg,#ffffff,#f7f5ed);
}
.contact-shell h2{font-size:clamp(30px,3.5vw,48px);max-width:660px}

@media (max-width:1020px){
  .hero{min-height:790px}
  .hero-banner-media,.hero-banner-shade{height:clamp(280px,33vw,355px)}
  .hero-grid{padding-top:135px;padding-bottom:98px}
  .hero-name{width:min(100%,680px)}
}
@media (max-width:720px){
  .hero{min-height:740px}
  .hero-banner-media,.hero-banner-shade{top:68px;height:245px}
  .hero-banner-media img{object-position:62% center}
  .hero-banner-shade{
    background:
      linear-gradient(90deg,rgba(2,21,31,.94) 0%,rgba(2,21,31,.63) 63%,rgba(2,21,31,.24) 100%),
      linear-gradient(180deg,rgba(2,21,31,.02) 42%,#05283a 100%);
  }
  .hero-grid{padding-top:118px;padding-bottom:86px}
  .hero-name{width:min(100%,520px);margin:19px 0 16px}
  .hero-role{font-size:23px}
  .recommendation-card{grid-template-columns:1fr;padding:21px 19px;gap:7px}
  .recommendation-number{padding:0}
}

/* =========================================================
   v02 — 2026-10-05 04:05 — fluid premium gradient pass
   ========================================================= */

/* Banner: preserve the oil-paint texture on the left while keeping text readable */
.hero{
  min-height:840px;
  background:
    radial-gradient(circle at 82% 16%,rgba(20,92,118,.30),transparent 32%),
    linear-gradient(145deg,#02141d 0%,#052839 58%,#07394d 100%);
}
.hero-banner-media{
  top:74px;
  height:clamp(390px,31vw,505px);
}
.hero-banner-media img{
  object-position:left center;
  filter:saturate(1.04) contrast(1.015);
}
.hero-banner-shade{
  top:74px;
  height:clamp(390px,31vw,505px);
  background:
    radial-gradient(circle at 23% 48%,rgba(3,25,36,.33),transparent 45%),
    linear-gradient(90deg,rgba(2,21,31,.68) 0%,rgba(2,21,31,.45) 27%,rgba(2,21,31,.13) 52%,rgba(2,21,31,.035) 77%,rgba(2,21,31,.08) 100%),
    linear-gradient(180deg,rgba(2,21,31,.015) 58%,rgba(5,40,58,.80) 87%,#05283a 100%);
  background-size:140% 140%,100% 100%,100% 100%;
  animation:heroShadeFlow 30s ease-in-out infinite alternate;
}
.hero-grid{padding-top:148px;padding-bottom:116px}
.hero-copy{max-width:820px}
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-32px -90px -44px -48px;
  background:radial-gradient(ellipse at 28% 45%,rgba(2,21,31,.32) 0%,rgba(2,21,31,.16) 45%,transparent 74%);
  filter:blur(10px);
  pointer-events:none;
}
.hero-role{max-width:820px}
.hero-subtitle{max-width:820px}

@keyframes heroShadeFlow{
  0%{background-position:0% 45%,0 0,0 0}
  50%{background-position:28% 55%,0 0,0 0}
  100%{background-position:56% 42%,0 0,0 0}
}

/* Light sections: matte ivory / sand / warm stone with a very slow fluid mesh */
.profile-section,
.experience-section,
.education-section,
.recommendations-section,
.contact-section{
  position:relative;
  overflow:hidden;
  background-size:185% 185%,175% 175%,100% 100%;
  animation:fluidLight 28s ease-in-out infinite alternate;
}
.profile-section{
  background-image:
    radial-gradient(circle at 12% 18%,rgba(210,177,116,.22),transparent 28%),
    radial-gradient(circle at 88% 76%,rgba(121,153,154,.13),transparent 32%),
    linear-gradient(145deg,#fbf8f0 0%,#f3ecdf 43%,#faf8f2 72%,#edf3f1 100%);
}
.experience-section{
  background-image:
    radial-gradient(circle at 88% 12%,rgba(218,181,112,.18),transparent 26%),
    radial-gradient(circle at 18% 82%,rgba(157,132,96,.10),transparent 30%),
    linear-gradient(155deg,#fffdf8 0%,#f4efe5 49%,#f8f7f1 72%,#eef2ef 100%);
}
.education-section{
  background-image:
    radial-gradient(circle at 14% 20%,rgba(202,170,112,.18),transparent 30%),
    radial-gradient(circle at 90% 72%,rgba(137,163,158,.12),transparent 31%),
    linear-gradient(145deg,#f7f2e8 0%,#fffdf8 48%,#efe9de 74%,#eef4f1 100%);
}
.recommendations-section{
  background-image:
    radial-gradient(circle at 10% 10%,rgba(211,171,96,.16),transparent 26%),
    radial-gradient(circle at 91% 80%,rgba(141,163,155,.12),transparent 33%),
    linear-gradient(145deg,#fffdf8 0%,#f5efe3 50%,#fbfaf6 72%,#edf3f0 100%);
}
.contact-section{
  background-image:
    radial-gradient(circle at 84% 18%,rgba(217,176,101,.20),transparent 29%),
    radial-gradient(circle at 18% 84%,rgba(132,160,157,.12),transparent 32%),
    linear-gradient(145deg,#f1f3ef 0%,#fffaf1 52%,#eee5d5 100%);
}

/* Dark sections: navy / petrol / restrained gold with fluid depth */
.dark-section,
.cv-section{
  position:relative;
  overflow:hidden;
  background-size:175% 175%,165% 165%,145% 145%,100% 100%;
  animation:fluidDark 32s ease-in-out infinite alternate;
}
.dark-section{
  background-image:
    radial-gradient(circle at 82% 16%,rgba(220,167,68,.15),transparent 27%),
    radial-gradient(circle at 13% 78%,rgba(25,111,142,.30),transparent 34%),
    radial-gradient(circle at 56% 48%,rgba(10,71,94,.22),transparent 38%),
    linear-gradient(145deg,#02151f 0%,#063147 43%,#0a4055 65%,#041f2e 100%);
}
.cv-section{
  background-image:
    radial-gradient(circle at 78% 18%,rgba(227,177,80,.17),transparent 28%),
    radial-gradient(circle at 18% 82%,rgba(25,111,142,.26),transparent 34%),
    radial-gradient(circle at 52% 42%,rgba(13,74,98,.24),transparent 36%),
    linear-gradient(140deg,#02151f 0%,#07364b 52%,#0a3e51 68%,#031b29 100%);
}

@keyframes fluidLight{
  0%{background-position:0% 20%,100% 78%,0 0}
  50%{background-position:44% 58%,58% 35%,0 0}
  100%{background-position:86% 28%,8% 68%,0 0}
}
@keyframes fluidDark{
  0%{background-position:6% 12%,96% 82%,45% 50%,0 0}
  50%{background-position:58% 38%,42% 32%,72% 44%,0 0}
  100%{background-position:92% 64%,12% 68%,24% 60%,0 0}
}

/* Keep all content above the animated paint layers */
.section>.container{position:relative;z-index:2}

/* Light cards inherit a more matte, sand-toned finish */
.profile-card,
.education-item,
.interest-item,
.recommendation-card,
.contact-shell{
  background:linear-gradient(145deg,rgba(255,253,247,.96),rgba(243,236,224,.92));
  border-color:rgba(87,65,33,.09);
}
.profile-card{
  box-shadow:0 24px 64px rgba(45,35,20,.10);
}
.recommendation-card{
  box-shadow:0 13px 34px rgba(48,37,21,.065);
}
.contact-shell{
  background:
    radial-gradient(circle at 88% 16%,rgba(216,162,62,.10),transparent 26%),
    linear-gradient(145deg,rgba(255,253,248,.98),rgba(239,231,215,.94));
}

/* Updated experience copy from the current visual CV */
.timeline-content p{max-width:800px}
.timeline-achievement{
  margin-top:5px!important;
  color:#765d35!important;
  font-style:italic;
}
.timeline-achievement strong{
  color:#123d60;
  font-weight:750;
}

/* Slightly warmer skill cards so they sit naturally on the moving navy background */
.expertise-card,
.skill-chip{
  backdrop-filter:blur(7px);
}

@media (max-width:1020px){
  .hero{min-height:810px}
  .hero-banner-media,.hero-banner-shade{height:clamp(340px,42vw,445px)}
  .hero-banner-media img{object-position:left center}
  .hero-grid{padding-top:136px;padding-bottom:106px}
}

@media (max-width:720px){
  .hero{min-height:760px}
  .hero-banner-media,.hero-banner-shade{top:68px;height:300px}
  .hero-banner-media img{object-position:34% center}
  .hero-banner-shade{
    background:
      radial-gradient(circle at 30% 45%,rgba(3,25,36,.30),transparent 46%),
      linear-gradient(90deg,rgba(2,21,31,.72) 0%,rgba(2,21,31,.50) 55%,rgba(2,21,31,.18) 100%),
      linear-gradient(180deg,rgba(2,21,31,.02) 45%,#05283a 100%);
  }
  .hero-grid{padding-top:118px;padding-bottom:94px}
  .hero-copy::before{inset:-22px -25px -30px -28px}
}

@media (prefers-reduced-motion:reduce){
  .hero-banner-shade,
  .profile-section,
  .experience-section,
  .education-section,
  .recommendations-section,
  .contact-section,
  .dark-section,
  .cv-section{
    animation:none!important;
  }
}

/* =========================================================
   v03 — 2026-10-05 04:08 — restrained fluid texture refinement
   ========================================================= */

/* Keep the banner in its native 4:1 composition on desktop so the
   oil-paint texture at the left remains visible instead of being cropped. */
@media (min-width:1021px){
  .hero-banner-media,
  .hero-banner-shade{
    top:74px;
    height:auto;
    aspect-ratio:4 / 1;
  }
  .hero-banner-media img{
    width:100%;
    height:100%;
    object-fit:fill;
    object-position:left center;
  }
}

/* Slightly lighter global shade, with the readability concentrated behind
   the copy rather than over the whole artwork. */
.hero-banner-shade{
  background:
    radial-gradient(ellipse at 20% 46%,rgba(2,21,31,.28) 0%,rgba(2,21,31,.16) 34%,transparent 61%),
    linear-gradient(90deg,rgba(2,21,31,.48) 0%,rgba(2,21,31,.31) 28%,rgba(2,21,31,.08) 55%,rgba(2,21,31,.015) 82%,rgba(2,21,31,.055) 100%),
    linear-gradient(180deg,rgba(2,21,31,.005) 55%,rgba(5,40,58,.64) 86%,#05283a 100%);
  background-size:145% 145%,100% 100%,100% 100%;
  animation:heroShadeFlow 34s ease-in-out infinite alternate;
}
.hero-copy::before{
  inset:-38px -86px -48px -55px;
  background:
    radial-gradient(ellipse at 25% 46%,rgba(2,20,29,.48) 0%,rgba(2,20,29,.28) 38%,rgba(2,20,29,.08) 62%,transparent 78%);
  filter:blur(11px);
}

/* Subtle moving matte texture. The palette deliberately stays within
   petrol/navy, ivory, sand and muted stone. */
.profile-section::before,
.experience-section::before,
.education-section::before,
.recommendations-section::before,
.contact-section::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-28%;
  pointer-events:none;
  opacity:.34;
  filter:blur(76px);
  background:
    radial-gradient(ellipse at 22% 32%,rgba(191,153,91,.26),transparent 38%),
    radial-gradient(ellipse at 74% 68%,rgba(112,139,137,.16),transparent 42%),
    radial-gradient(ellipse at 58% 22%,rgba(229,218,194,.24),transparent 35%);
  transform:translate3d(-1.5%,0,0) scale(1.02);
  animation:lightTextureDrift 38s ease-in-out infinite alternate;
}

.dark-section::before,
.cv-section::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-26%;
  pointer-events:none;
  opacity:.28;
  filter:blur(82px);
  background:
    radial-gradient(ellipse at 22% 34%,rgba(23,103,132,.42),transparent 39%),
    radial-gradient(ellipse at 78% 63%,rgba(173,132,58,.20),transparent 35%),
    radial-gradient(ellipse at 54% 26%,rgba(10,74,98,.34),transparent 40%);
  transform:translate3d(-1%,0,0) scale(1.03);
  animation:darkTextureDrift 42s ease-in-out infinite alternate;
}

/* Keep text and cards safely above the texture layer. */
.section>.container{position:relative;z-index:2}

/* A slight matte warmth on white surfaces; no glossy or neon treatment. */
.profile-card,
.education-item,
.interest-item,
.recommendation-card,
.contact-shell{
  background:
    linear-gradient(145deg,rgba(255,253,247,.965),rgba(239,231,216,.91));
  box-shadow:0 16px 44px rgba(47,38,24,.075);
}
.recommendation-card:nth-child(even){
  background:linear-gradient(145deg,rgba(250,247,239,.97),rgba(237,232,220,.92));
}

@keyframes lightTextureDrift{
  0%{transform:translate3d(-2.0%,-1.0%,0) scale(1.02) rotate(-.2deg)}
  50%{transform:translate3d(2.4%,1.8%,0) scale(1.055) rotate(.2deg)}
  100%{transform:translate3d(-.5%,3.0%,0) scale(1.035) rotate(-.1deg)}
}
@keyframes darkTextureDrift{
  0%{transform:translate3d(-2.0%,-1.0%,0) scale(1.03) rotate(-.15deg)}
  50%{transform:translate3d(2.8%,1.4%,0) scale(1.065) rotate(.18deg)}
  100%{transform:translate3d(.6%,3.2%,0) scale(1.04) rotate(-.08deg)}
}

@media (max-width:1020px){
  .hero-banner-media img{object-position:18% center}
}
@media (max-width:720px){
  .hero-banner-media img{object-position:24% center}
  .hero-banner-shade{
    background:
      radial-gradient(ellipse at 25% 42%,rgba(2,21,31,.33),transparent 55%),
      linear-gradient(90deg,rgba(2,21,31,.60) 0%,rgba(2,21,31,.37) 58%,rgba(2,21,31,.15) 100%),
      linear-gradient(180deg,rgba(2,21,31,.01) 42%,#05283a 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .profile-section::before,
  .experience-section::before,
  .education-section::before,
  .recommendations-section::before,
  .contact-section::before,
  .dark-section::before,
  .cv-section::before{
    animation:none!important;
  }
}

/* =========================================================
   v06 — 2026-10-05 04:59 — more visible, more liquid fluid texture
   ========================================================= */

/* v06 keeps the same premium palette but makes the motion easier to notice:
   slightly stronger opacity, less blur, more localized masses, and smoother
   organic deformation so the effect feels more like slow liquid matter. */
.profile-section::before,
.experience-section::before,
.education-section::before,
.recommendations-section::before,
.contact-section::before,
.dark-section::before,
.cv-section::before{
  display:none!important;
}

.section{isolation:isolate}
.section>.container{position:relative;z-index:3}

.fluid-texture{
  position:absolute;
  z-index:1;
  inset:-18% -10%;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}
.fluid-blob{
  position:absolute;
  display:block;
  width:min(54vw,760px);
  aspect-ratio:1.18 / 1;
  border-radius:46% 54% 58% 42% / 50% 42% 58% 50%;
  filter:blur(36px);
  will-change:transform,border-radius,opacity,filter;
  transform:translate3d(0,0,0) rotate(0.01deg);
}

/* Light sections: ivory / sand / warm stone / muted mineral. */
.fluid-texture-light{opacity:.82}
.fluid-texture-light .fluid-blob-a{
  left:-10%;top:-18%;
  background:
    radial-gradient(circle at 30% 36%,rgba(240,228,205,.86),rgba(240,228,205,.26) 42%,rgba(255,255,255,0) 76%),
    linear-gradient(135deg,rgba(198,166,109,.62),rgba(232,219,191,.26) 58%,rgba(255,255,255,0));
  animation:fluidBlobA 16s ease-in-out infinite alternate;
}
.fluid-texture-light .fluid-blob-b{
  right:-11%;bottom:-18%;
  background:
    radial-gradient(circle at 66% 44%,rgba(155,175,169,.42),rgba(155,175,169,.12) 42%,rgba(255,255,255,0) 72%),
    linear-gradient(145deg,rgba(214,198,167,.42),rgba(116,145,144,.32) 58%,rgba(255,255,255,0));
  animation:fluidBlobB 18s ease-in-out infinite alternate;
}
.fluid-texture-light .fluid-blob-c{
  left:24%;top:8%;
  width:min(38vw,560px);
  background:
    radial-gradient(circle at 48% 40%,rgba(255,250,241,.92),rgba(255,250,241,.24) 40%,rgba(255,255,255,0) 74%),
    linear-gradient(120deg,rgba(233,221,194,.58),rgba(181,156,113,.26) 64%,rgba(255,255,255,0));
  animation:fluidBlobC 20s ease-in-out infinite alternate;
}
.fluid-texture-light .fluid-blob-d{
  left:58%;top:42%;
  width:min(28vw,420px);
  background:
    radial-gradient(circle at 46% 46%,rgba(214,196,158,.56),rgba(214,196,158,.12) 44%,rgba(255,255,255,0) 76%),
    linear-gradient(135deg,rgba(188,163,117,.36),rgba(245,239,228,.16) 66%,rgba(255,255,255,0));
  animation:fluidBlobD 17s ease-in-out infinite alternate;
}

/* Dark sections: navy / petrol / muted gold. */
.fluid-texture-dark{opacity:.74}
.fluid-texture-dark .fluid-blob{filter:blur(42px)}
.fluid-texture-dark .fluid-blob-a{
  left:-11%;top:-17%;
  background:
    radial-gradient(circle at 34% 34%,rgba(36,125,156,.84),rgba(36,125,156,.16) 42%,rgba(5,29,42,0) 74%),
    linear-gradient(135deg,rgba(18,94,121,.82),rgba(8,53,73,.34) 58%,rgba(5,29,42,0));
  animation:fluidBlobA 14s ease-in-out infinite alternate;
}
.fluid-texture-dark .fluid-blob-b{
  right:-10%;bottom:-20%;
  background:
    radial-gradient(circle at 64% 46%,rgba(209,167,87,.38),rgba(209,167,87,.12) 40%,rgba(3,26,38,0) 72%),
    linear-gradient(145deg,rgba(192,148,67,.50),rgba(14,71,94,.40) 60%,rgba(3,26,38,0));
  animation:fluidBlobB 17s ease-in-out infinite alternate;
}
.fluid-texture-dark .fluid-blob-c{
  left:28%;top:6%;
  width:min(40vw,600px);
  background:
    radial-gradient(circle at 50% 38%,rgba(18,84,108,.64),rgba(18,84,108,.16) 40%,rgba(3,25,36,0) 72%),
    linear-gradient(125deg,rgba(13,78,102,.66),rgba(118,96,56,.24) 64%,rgba(3,25,36,0));
  animation:fluidBlobC 19s ease-in-out infinite alternate;
}
.fluid-texture-dark .fluid-blob-d{
  left:60%;top:40%;
  width:min(30vw,430px);
  background:
    radial-gradient(circle at 50% 44%,rgba(31,104,128,.44),rgba(31,104,128,.10) 42%,rgba(3,25,36,0) 74%),
    linear-gradient(135deg,rgba(147,112,52,.24),rgba(11,70,91,.40) 66%,rgba(3,25,36,0));
  animation:fluidBlobD 16s ease-in-out infinite alternate;
}

.fluid-variant-2 .fluid-blob-a{animation-delay:-5s}
.fluid-variant-2 .fluid-blob-b{animation-delay:-11s}
.fluid-variant-2 .fluid-blob-c{animation-delay:-3s}
.fluid-variant-2 .fluid-blob-d{animation-delay:-8s}
.fluid-variant-3 .fluid-blob-a{animation-delay:-12s}
.fluid-variant-3 .fluid-blob-b{animation-delay:-4s}
.fluid-variant-3 .fluid-blob-c{animation-delay:-14s}
.fluid-variant-3 .fluid-blob-d{animation-delay:-7s}

@keyframes fluidBlobA{
  0%{transform:translate3d(-4%,3%,0) scale(1.00) rotate(-7deg);border-radius:46% 54% 58% 42% / 50% 42% 58% 50%;opacity:.84}
  30%{transform:translate3d(10%,10%,0) scale(1.08) rotate(1deg);border-radius:58% 42% 46% 54% / 40% 59% 41% 60%;opacity:1}
  68%{transform:translate3d(22%,18%,0) scale(1.14) rotate(9deg);border-radius:41% 59% 61% 39% / 55% 43% 57% 45%;opacity:.94}
  100%{transform:translate3d(34%,8%,0) scale(.99) rotate(15deg);border-radius:52% 48% 40% 60% / 61% 38% 62% 39%;opacity:.86}
}
@keyframes fluidBlobB{
  0%{transform:translate3d(4%,2%,0) scale(1.08) rotate(6deg);border-radius:56% 44% 42% 58% / 47% 58% 42% 53%;opacity:.84}
  36%{transform:translate3d(-8%,-9%,0) scale(1.00) rotate(-1deg);border-radius:43% 57% 62% 38% / 58% 43% 57% 42%;opacity:1}
  72%{transform:translate3d(-23%,-17%,0) scale(.93) rotate(-11deg);border-radius:60% 40% 48% 52% / 43% 61% 39% 57%;opacity:.92}
  100%{transform:translate3d(-36%,-8%,0) scale(1.06) rotate(-17deg);border-radius:49% 51% 37% 63% / 52% 41% 59% 48%;opacity:.84}
}
@keyframes fluidBlobC{
  0%{transform:translate3d(-10%,12%,0) scale(.95) rotate(-4deg);border-radius:52% 48% 61% 39% / 45% 57% 43% 55%;opacity:.66}
  34%{transform:translate3d(5%,-3%,0) scale(1.03) rotate(3deg);border-radius:39% 61% 45% 55% / 59% 40% 60% 41%;opacity:.90}
  72%{transform:translate3d(18%,-14%,0) scale(1.13) rotate(10deg);border-radius:58% 42% 53% 47% / 42% 55% 45% 58%;opacity:1}
  100%{transform:translate3d(-4%,18%,0) scale(1.00) rotate(17deg);border-radius:44% 56% 62% 38% / 53% 39% 61% 47%;opacity:.72}
}
@keyframes fluidBlobD{
  0%{transform:translate3d(0,0,0) scale(.92) rotate(-5deg);border-radius:49% 51% 59% 41% / 45% 55% 45% 55%;opacity:.58}
  45%{transform:translate3d(-14%,10%,0) scale(1.12) rotate(5deg);border-radius:61% 39% 46% 54% / 58% 42% 58% 42%;opacity:.88}
  100%{transform:translate3d(10%,-8%,0) scale(1.00) rotate(13deg);border-radius:40% 60% 52% 48% / 49% 59% 41% 51%;opacity:.66}
}

.profile-card,
.education-item,
.interest-item,
.recommendation-card,
.contact-shell{
  backdrop-filter:blur(3px);
}

@media (max-width:720px){
  .fluid-texture{inset:-12% -26%;opacity:.58}
  .fluid-blob{width:92vw;filter:blur(30px)}
  .fluid-texture-dark .fluid-blob{filter:blur(34px)}
  .fluid-texture-light .fluid-blob-d,
  .fluid-texture-dark .fluid-blob-d{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fluid-blob{animation:none!important;transform:none!important}
}
.fluid-static .fluid-blob{animation:none!important;transform:none!important}


/* =========================================================
   v09 — 2026-10-05 11:30 — gradient-gl WebGL fluid texture
   ========================================================= */

/* Disable the previous CSS blob layer and background-position drift.
   The section palettes remain exactly the same; only the motion engine changes. */
.fluid-texture{display:none!important}
.profile-section,
.experience-section,
.education-section,
.recommendations-section,
.contact-section,
.dark-section,
.cv-section{
  animation:none!important;
}

.section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.section>.container{position:relative;z-index:3}

.webgl-fluid-canvas{
  position:absolute!important;
  inset:-2%!important;
  width:104%!important;
  height:104%!important;
  display:block!important;
  z-index:1!important;
  pointer-events:none!important;
  border:0!important;
  transform:translateZ(0);
  will-change:filter,opacity;
}

/* The shader provides true liquid deformation. The blend/filter treatment keeps
   the existing CV palette instead of introducing bright synthetic colours. */
.webgl-fluid-dark{
  opacity:.60!important;
  mix-blend-mode:soft-light!important;
  filter:grayscale(.70) saturate(.72) contrast(1.55) brightness(1.12)!important;
}
.webgl-fluid-light{
  opacity:.44!important;
  mix-blend-mode:multiply!important;
  filter:grayscale(.82) sepia(.18) saturate(.70) contrast(1.32) brightness(1.10)!important;
}

/* Preserve readability and the original card hierarchy above the shader. */
.dark-section::after{z-index:2}
.profile-card,
.values-card,
.expertise-card,
.timeline,
.skills-layout,
.cv-grid,
.education-grid,
.recommendations-list,
.contact-shell{
  position:relative;
  z-index:3;
}

/* Graceful fallback: original static gradients remain untouched if WebGL/CDN fails. */
.webgl-fluid-fallback .webgl-fluid-canvas,
.webgl-fluid-unavailable .webgl-fluid-canvas,
.fluid-motion-reduced .webgl-fluid-canvas{display:none!important}

@media (max-width:720px){
  .webgl-fluid-dark{opacity:.48!important}
  .webgl-fluid-light{opacity:.34!important}
}

/* =========================================================
   v10 — 2026-10-05 11:39 — WebGL fluid texture visible through all content surfaces
   ========================================================= */

/* Keep one GPU shader per major section, but let it breathe through the inner
   surfaces as translucent matte glass. This preserves the existing layout while
   making the organic motion visible across light and dark blocks, not just in the
   empty margins around them. */
.webgl-fluid-dark{
  opacity:.70!important;
  mix-blend-mode:soft-light!important;
  filter:grayscale(.55) saturate(.82) contrast(1.70) brightness(1.14)!important;
}
.webgl-fluid-light{
  opacity:.58!important;
  mix-blend-mode:multiply!important;
  filter:grayscale(.72) sepia(.14) saturate(.78) contrast(1.45) brightness(1.12)!important;
}

/* Light inner surfaces — ivory / sand / warm stone, translucent enough for the
   section shader to remain visible while preserving text contrast. */
.profile-card,
.education-item,
.interest-item,
.recommendation-card,
.contact-shell{
  background:linear-gradient(145deg,
    rgba(255,253,247,.78),
    rgba(244,237,223,.68) 54%,
    rgba(236,241,238,.64)
  )!important;
  border-color:rgba(74,74,62,.10)!important;
  backdrop-filter:blur(2px) saturate(.96)!important;
  -webkit-backdrop-filter:blur(2px) saturate(.96)!important;
}

.recommendation-card:nth-child(even){
  background:linear-gradient(145deg,
    rgba(249,246,238,.76),
    rgba(238,231,216,.66) 54%,
    rgba(247,244,236,.64)
  )!important;
}

.contact-card{
  background:linear-gradient(145deg,
    rgba(255,255,252,.68),
    rgba(244,239,228,.56)
  )!important;
  backdrop-filter:blur(2px) saturate(.96)!important;
  -webkit-backdrop-filter:blur(2px) saturate(.96)!important;
}

.profile-pill-row span{
  background:rgba(241,245,246,.62)!important;
  border:1px solid rgba(16,53,77,.06);
  backdrop-filter:blur(1px);
}

/* Dark inner surfaces — petrol / navy glass. The moving WebGL texture remains
   visible inside cards without reducing the readability of white text. */
.values-card{
  background:linear-gradient(155deg,
    rgba(5,35,50,.78),
    rgba(8,59,79,.64)
  )!important;
  backdrop-filter:blur(2px) saturate(.96)!important;
  -webkit-backdrop-filter:blur(2px) saturate(.96)!important;
}

.expertise-card{
  background:linear-gradient(160deg,
    rgba(255,255,255,.085),
    rgba(255,255,255,.026)
  )!important;
  backdrop-filter:blur(2px) saturate(.98)!important;
  -webkit-backdrop-filter:blur(2px) saturate(.98)!important;
}

.skill-chip{
  background:rgba(255,255,255,.055)!important;
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
.skill-chip.featured{
  background:rgba(216,162,62,.085)!important;
}

/* The experience section intentionally remains visually open. Its moving light
   shader is now visible behind the timeline copy, logos and separators rather
   than being hidden by an opaque panel. */
.timeline-content{
  background:linear-gradient(90deg,
    rgba(255,253,248,.22),
    rgba(246,239,225,.10) 58%,
    rgba(255,255,255,0)
  );
  border-radius:14px;
  padding:4px 8px 28px;
  margin-left:-8px;
}

/* Contact shell and recommendations are large enough that the WebGL movement can
   now be seen across their full surface instead of only around their edges. */
.recommendation-card,
.contact-shell,
.profile-card,
.education-item,
.interest-item,
.values-card,
.expertise-card{
  overflow:hidden;
}

/* Slightly soften the static grid overlay on dark sections so it does not mask
   the liquid deformation. */
.dark-section::after{
  opacity:.62;
}

@media (max-width:720px){
  .webgl-fluid-dark{opacity:.58!important}
  .webgl-fluid-light{opacity:.48!important}
  .profile-card,
  .education-item,
  .interest-item,
  .recommendation-card,
  .contact-shell{
    backdrop-filter:blur(1.5px) saturate(.96)!important;
    -webkit-backdrop-filter:blur(1.5px) saturate(.96)!important;
  }
}


/* =========================================================
   v11 — 2026-10-05 11:51 — hybrid WebGL + organic living surfaces
   ========================================================= */

/* Stronger section-level shader visibility while keeping the same CV palette. */
.webgl-fluid-dark{
  opacity:.82!important;
  mix-blend-mode:soft-light!important;
  filter:grayscale(.38) saturate(.92) contrast(1.95) brightness(1.12)!important;
}
.webgl-fluid-light{
  opacity:.72!important;
  mix-blend-mode:multiply!important;
  filter:grayscale(.55) sepia(.12) saturate(.88) contrast(1.68) brightness(1.08)!important;
}

/* Each important content surface receives its own animated organic layer.
   This is intentionally independent from WebGL so motion stays visible even
   through cards and timeline panels. */
.organic-surface{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
}
.organic-surface > *:not(.organic-surface-layer){
  position:relative;
  z-index:2;
}
.organic-surface-layer{
  position:absolute!important;
  z-index:0!important;
  inset:-28%!important;
  pointer-events:none!important;
  border-radius:42% 58% 63% 37% / 46% 38% 62% 54%!important;
  transform-origin:50% 50%;
  will-change:transform,border-radius,opacity,background-position;
}
.organic-surface-layer.layer-a{
  animation:organicLiquidA 13.5s cubic-bezier(.45,0,.24,1) infinite alternate;
}
.organic-surface-layer.layer-b{
  inset:-34%!important;
  animation:organicLiquidB 17.5s cubic-bezier(.4,0,.22,1) infinite alternate;
}

/* LIGHT — ivory, sand, warm stone, very restrained mineral green-grey. */
.organic-light .organic-surface-layer.layer-a{
  opacity:.68;
  filter:blur(24px) saturate(1.03);
  mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse at 18% 28%,rgba(203,168,108,.48) 0%,rgba(203,168,108,.18) 24%,transparent 52%),
    radial-gradient(ellipse at 78% 22%,rgba(250,244,230,.86) 0%,rgba(250,244,230,.22) 27%,transparent 58%),
    radial-gradient(ellipse at 72% 76%,rgba(132,155,151,.26) 0%,rgba(132,155,151,.08) 26%,transparent 54%),
    radial-gradient(ellipse at 34% 74%,rgba(224,205,169,.40) 0%,rgba(224,205,169,.10) 28%,transparent 58%);
}
.organic-light .organic-surface-layer.layer-b{
  opacity:.46;
  filter:blur(18px) saturate(1.02);
  mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse at 68% 34%,rgba(191,159,104,.42) 0%,rgba(191,159,104,.12) 24%,transparent 48%),
    radial-gradient(ellipse at 26% 62%,rgba(255,252,244,.92) 0%,rgba(255,252,244,.20) 27%,transparent 54%),
    radial-gradient(ellipse at 84% 78%,rgba(176,187,178,.28) 0%,rgba(176,187,178,.07) 24%,transparent 50%);
}

/* DARK — navy, petrol and muted gold, no neon. */
.organic-dark .organic-surface-layer.layer-a{
  opacity:.76;
  filter:blur(26px) saturate(1.04);
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 18% 28%,rgba(27,114,145,.46) 0%,rgba(27,114,145,.16) 23%,transparent 50%),
    radial-gradient(ellipse at 78% 22%,rgba(9,61,82,.56) 0%,rgba(9,61,82,.14) 25%,transparent 52%),
    radial-gradient(ellipse at 72% 76%,rgba(184,139,58,.28) 0%,rgba(184,139,58,.08) 24%,transparent 50%),
    radial-gradient(ellipse at 34% 74%,rgba(16,84,108,.38) 0%,rgba(16,84,108,.10) 26%,transparent 54%);
}
.organic-dark .organic-surface-layer.layer-b{
  opacity:.50;
  filter:blur(20px) saturate(1.02);
  mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse at 68% 34%,rgba(216,169,78,.34) 0%,rgba(216,169,78,.09) 22%,transparent 48%),
    radial-gradient(ellipse at 26% 62%,rgba(24,109,138,.38) 0%,rgba(24,109,138,.11) 25%,transparent 52%),
    radial-gradient(ellipse at 84% 78%,rgba(8,51,70,.54) 0%,rgba(8,51,70,.14) 24%,transparent 50%);
}

/* Make the cards translucent enough for the local liquid layer to be seen,
   while keeping the exact structure and hierarchy of v10. */
.profile-card,
.education-item,
.interest-item,
.recommendation-card,
.contact-shell,
.contact-card,
.timeline-content{
  background-color:transparent!important;
  backdrop-filter:blur(1.2px) saturate(.98)!important;
  -webkit-backdrop-filter:blur(1.2px) saturate(.98)!important;
}
.profile-card,
.education-item,
.interest-item,
.recommendation-card,
.contact-shell{
  background:linear-gradient(145deg,rgba(255,253,247,.64),rgba(240,232,216,.50) 55%,rgba(239,243,240,.46))!important;
}
.contact-card{
  background:linear-gradient(145deg,rgba(255,255,252,.58),rgba(241,235,220,.42))!important;
}
.recommendation-card:nth-child(even){
  background:linear-gradient(145deg,rgba(248,245,236,.61),rgba(235,227,210,.47) 55%,rgba(246,243,234,.46))!important;
}
.values-card{
  background:linear-gradient(155deg,rgba(4,31,45,.70),rgba(7,57,77,.52))!important;
}
.expertise-card{
  background:linear-gradient(160deg,rgba(255,255,255,.070),rgba(255,255,255,.018))!important;
}
.skill-chip{
  background:rgba(255,255,255,.035)!important;
}
.skill-chip.featured{
  background:rgba(216,162,62,.060)!important;
}
.timeline-content{
  background:linear-gradient(90deg,rgba(255,252,245,.14),rgba(242,232,212,.07) 62%,rgba(255,255,255,0))!important;
}
.cv-copy,
.skills-intro,
.skill-cloud{
  border-radius:22px;
}

/* Different phases prevent every block from moving in sync. */
.expertise-card:nth-child(2n) .layer-a,
.education-item:nth-child(2n) .layer-a,
.interest-item:nth-child(2n) .layer-a,
.recommendation-card:nth-child(2n) .layer-a,
.timeline-item:nth-child(2n) .layer-a,
.skill-chip:nth-child(2n) .layer-a,
.contact-card:nth-child(2n) .layer-a{animation-delay:-5.2s}
.expertise-card:nth-child(3n) .layer-b,
.timeline-item:nth-child(3n) .layer-b,
.skill-chip:nth-child(3n) .layer-b,
.recommendation-card:nth-child(3n) .layer-b{animation-delay:-8.4s}

@keyframes organicLiquidA{
  0%{
    transform:translate3d(-7%,-4%,0) scale(1.00) rotate(-5deg);
    border-radius:42% 58% 63% 37% / 46% 38% 62% 54%;
    background-position:0% 0%,100% 0%,100% 100%,0% 100%;
  }
  28%{
    transform:translate3d(5%,7%,0) scale(1.08) rotate(1deg);
    border-radius:58% 42% 44% 56% / 38% 61% 39% 62%;
    background-position:14% 8%,88% 12%,92% 82%,8% 88%;
  }
  62%{
    transform:translate3d(12%,-2%,0) scale(1.13) rotate(8deg);
    border-radius:39% 61% 57% 43% / 57% 41% 59% 43%;
    background-position:28% 16%,76% 24%,80% 70%,18% 76%;
  }
  100%{
    transform:translate3d(-2%,10%,0) scale(1.04) rotate(14deg);
    border-radius:55% 45% 39% 61% / 42% 58% 44% 56%;
    background-position:42% 26%,64% 34%,68% 60%,30% 66%;
  }
}
@keyframes organicLiquidB{
  0%{
    transform:translate3d(8%,6%,0) scale(1.10) rotate(6deg);
    border-radius:60% 40% 48% 52% / 43% 59% 41% 57%;
    background-position:100% 20%,10% 80%,90% 90%;
  }
  34%{
    transform:translate3d(-5%,-5%,0) scale(.98) rotate(-2deg);
    border-radius:44% 56% 62% 38% / 59% 42% 58% 41%;
    background-position:82% 30%,22% 68%,78% 74%;
  }
  70%{
    transform:translate3d(-12%,8%,0) scale(1.08) rotate(-9deg);
    border-radius:52% 48% 38% 62% / 46% 61% 39% 54%;
    background-position:66% 42%,36% 54%,64% 58%;
  }
  100%{
    transform:translate3d(4%,-7%,0) scale(1.02) rotate(-14deg);
    border-radius:41% 59% 54% 46% / 62% 39% 61% 38%;
    background-position:50% 54%,50% 42%,50% 42%;
  }
}

@media (max-width:720px){
  .webgl-fluid-dark{opacity:.70!important}
  .webgl-fluid-light{opacity:.60!important}
  .organic-surface-layer{filter:blur(18px)!important}
  .organic-surface-layer.layer-b{filter:blur(15px)!important}
}

@media (prefers-reduced-motion:reduce){
  .organic-surface-layer{animation:none!important;transform:none!important}
}

/* v11 verification pass — targeted visibility tuning after local motion checks. */
.profile-card .organic-surface-layer.layer-a,
.education-item .organic-surface-layer.layer-a,
.interest-item .organic-surface-layer.layer-a,
.recommendation-card .organic-surface-layer.layer-a,
.timeline-content .organic-surface-layer.layer-a{
  opacity:.82;
  filter:blur(18px) saturate(1.04);
}
.profile-card .organic-surface-layer.layer-b,
.education-item .organic-surface-layer.layer-b,
.interest-item .organic-surface-layer.layer-b,
.recommendation-card .organic-surface-layer.layer-b,
.timeline-content .organic-surface-layer.layer-b{
  opacity:.58;
  filter:blur(15px) saturate(1.03);
}

.expertise-card .organic-surface-layer.layer-a,
.skills-intro .organic-surface-layer.layer-a,
.skill-cloud .organic-surface-layer.layer-a,
.skill-chip .organic-surface-layer.layer-a,
.cv-copy .organic-surface-layer.layer-a{
  opacity:.94;
  filter:blur(16px) saturate(1.08);
  background:
    radial-gradient(ellipse at 20% 28%,rgba(36,132,164,.62) 0%,rgba(36,132,164,.19) 22%,transparent 46%),
    radial-gradient(ellipse at 78% 20%,rgba(10,69,92,.74) 0%,rgba(10,69,92,.18) 23%,transparent 48%),
    radial-gradient(ellipse at 72% 78%,rgba(205,157,67,.38) 0%,rgba(205,157,67,.10) 21%,transparent 46%),
    radial-gradient(ellipse at 34% 72%,rgba(18,96,123,.54) 0%,rgba(18,96,123,.13) 23%,transparent 49%);
}
.expertise-card .organic-surface-layer.layer-b,
.skills-intro .organic-surface-layer.layer-b,
.skill-cloud .organic-surface-layer.layer-b,
.skill-chip .organic-surface-layer.layer-b,
.cv-copy .organic-surface-layer.layer-b{
  opacity:.68;
  filter:blur(13px) saturate(1.05);
  background:
    radial-gradient(ellipse at 68% 34%,rgba(224,176,82,.42) 0%,rgba(224,176,82,.11) 20%,transparent 44%),
    radial-gradient(ellipse at 25% 62%,rgba(30,123,153,.52) 0%,rgba(30,123,153,.13) 22%,transparent 46%),
    radial-gradient(ellipse at 84% 78%,rgba(8,57,77,.66) 0%,rgba(8,57,77,.16) 22%,transparent 46%);
}

.contact-shell .organic-surface-layer.layer-a,
.contact-card .organic-surface-layer.layer-a{
  opacity:.86;
  filter:blur(18px) saturate(1.04);
}
.contact-shell .organic-surface-layer.layer-b,
.contact-card .organic-surface-layer.layer-b{
  opacity:.62;
  filter:blur(15px) saturate(1.03);
}
\n\n/* =========================================================\n   v12 — 2026-10-05 12:07 — performance-first background motion\n   ========================================================= */\n\n/*\n  v12 removes the expensive per-card animation layers and the multiple WebGL\n  canvases. Only section backgrounds move now. Motion is implemented with two\n  soft gradient planes per section and compositor-friendly transforms only:\n  no animated blur, no animated backdrop-filter and no shader per section.\n*/\n\n.webgl-fluid-canvas,\n.organic-surface-layer{display:none!important}\n\n.section{\n  position:relative;\n  isolation:isolate;\n  overflow:hidden;\n}\n.section>.container{position:relative;z-index:3}\n\n.section-fluid-bg{\n  position:absolute;\n  z-index:0;\n  inset:-24% -18%;\n  overflow:hidden;\n  pointer-events:none;\n}\n.section-flow{\n  position:absolute;\n  display:block;\n  width:78%;\n  height:84%;\n  border-radius:50%;\n  opacity:.9;\n  will-change:transform,opacity;\n  transform:translate3d(0,0,0);\n}\n\n/* LIGHT SECTIONS — ivory / sand / beige stone / muted mineral. */\n.section-fluid-bg-light .section-flow-a{\n  left:-12%;\n  top:-18%;\n  background:\n    radial-gradient(ellipse at 30% 35%,rgba(207,169,104,.42) 0%,rgba(207,169,104,.20) 23%,rgba(207,169,104,0) 58%),\n    radial-gradient(ellipse at 72% 28%,rgba(255,248,231,.88) 0%,rgba(255,248,231,.28) 28%,rgba(255,248,231,0) 65%),\n    radial-gradient(ellipse at 58% 76%,rgba(143,162,157,.22) 0%,rgba(143,162,157,.08) 28%,rgba(143,162,157,0) 58%);\n  animation:sectionFlowA 18s cubic-bezier(.45,0,.25,1) infinite alternate;\n}\n.section-fluid-bg-light .section-flow-b{\n  right:-18%;\n  bottom:-20%;\n  width:72%;\n  height:78%;\n  background:\n    radial-gradient(ellipse at 58% 44%,rgba(184,150,93,.34) 0%,rgba(184,150,93,.13) 25%,rgba(184,150,93,0) 58%),\n    radial-gradient(ellipse at 24% 68%,rgba(242,229,204,.64) 0%,rgba(242,229,204,.18) 28%,rgba(242,229,204,0) 62%),\n    radial-gradient(ellipse at 78% 74%,rgba(164,177,169,.18) 0%,rgba(164,177,169,.06) 26%,rgba(164,177,169,0) 56%);\n  animation:sectionFlowB 22s cubic-bezier(.42,0,.22,1) infinite alternate;\n}\n\n/* DARK SECTIONS — navy / petrol / muted gold, deliberately non-neon. */\n.section-fluid-bg-dark .section-flow-a{\n  left:-12%;\n  top:-18%;\n  background:\n    radial-gradient(ellipse at 30% 34%,rgba(28,119,151,.52) 0%,rgba(28,119,151,.22) 22%,rgba(28,119,151,0) 56%),\n    radial-gradient(ellipse at 74% 28%,rgba(8,68,92,.62) 0%,rgba(8,68,92,.24) 26%,rgba(8,68,92,0) 62%),\n    radial-gradient(ellipse at 58% 78%,rgba(189,140,54,.24) 0%,rgba(189,140,54,.09) 25%,rgba(189,140,54,0) 56%);\n  animation:sectionFlowA 17s cubic-bezier(.45,0,.25,1) infinite alternate;\n}\n.section-fluid-bg-dark .section-flow-b{\n  right:-18%;\n  bottom:-20%;\n  width:72%;\n  height:78%;\n  background:\n    radial-gradient(ellipse at 58% 42%,rgba(205,157,68,.28) 0%,rgba(205,157,68,.10) 22%,rgba(205,157,68,0) 54%),\n    radial-gradient(ellipse at 24% 68%,rgba(22,102,132,.44) 0%,rgba(22,102,132,.16) 26%,rgba(22,102,132,0) 58%),\n    radial-gradient(ellipse at 78% 72%,rgba(6,48,67,.66) 0%,rgba(6,48,67,.20) 26%,rgba(6,48,67,0) 60%);\n  animation:sectionFlowB 21s cubic-bezier(.42,0,.22,1) infinite alternate;\n}\n\n/* Phase offsets stop consecutive sections from breathing in sync. */\n.fluid-phase-2 .section-flow-a{animation-delay:-6s}\n.fluid-phase-2 .section-flow-b{animation-delay:-11s}\n.fluid-phase-3 .section-flow-a{animation-delay:-12s}\n.fluid-phase-3 .section-flow-b{animation-delay:-5s}\n\n@keyframes sectionFlowA{\n  0%{transform:translate3d(-4%,-2%,0) scale(1.00) rotate(-4deg);opacity:.80}\n  35%{transform:translate3d(10%,8%,0) scale(1.08) rotate(1deg);opacity:1}\n  70%{transform:translate3d(20%,14%,0) scale(1.13) rotate(6deg);opacity:.92}\n  100%{transform:translate3d(30%,6%,0) scale(1.02) rotate(11deg);opacity:.84}\n}\n@keyframes sectionFlowB{\n  0%{transform:translate3d(5%,4%,0) scale(1.08) rotate(5deg);opacity:.76}\n  38%{transform:translate3d(-8%,-6%,0) scale(1.00) rotate(-1deg);opacity:1}\n  72%{transform:translate3d(-19%,-14%,0) scale(.95) rotate(-7deg);opacity:.90}\n  100%{transform:translate3d(-29%,-6%,0) scale(1.05) rotate(-12deg);opacity:.80}\n}\n\n/* Keep cards static. They are translucent enough to reveal the moving section\n   background, but they no longer animate themselves and do not use expensive\n   backdrop blurs. */\n.profile-card,\n.education-item,\n.interest-item,\n.recommendation-card,\n.contact-shell{\n  background:linear-gradient(145deg,rgba(255,253,247,.74),rgba(240,232,216,.62) 55%,rgba(239,243,240,.58))!important;\n  backdrop-filter:none!important;\n  -webkit-backdrop-filter:none!important;\n}\n.contact-card{\n  background:linear-gradient(145deg,rgba(255,255,252,.76),rgba(241,235,220,.60))!important;\n  backdrop-filter:none!important;\n  -webkit-backdrop-filter:none!important;\n}\n.recommendation-card:nth-child(even){\n  background:linear-gradient(145deg,rgba(248,245,236,.76),rgba(235,227,210,.61) 55%,rgba(246,243,234,.58))!important;\n}\n.values-card{\n  background:linear-gradient(155deg,rgba(4,31,45,.82),rgba(7,57,77,.66))!important;\n  backdrop-filter:none!important;\n}\n.expertise-card{\n  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.022))!important;\n  backdrop-filter:none!important;\n}\n.skill-chip{\n  background:rgba(255,255,255,.050)!important;\n  backdrop-filter:none!important;\n}\n.skill-chip.featured{background:rgba(216,162,62,.075)!important}\n.timeline-content{\n  background:linear-gradient(90deg,rgba(255,252,245,.22),rgba(242,232,212,.10) 62%,rgba(255,255,255,0))!important;\n  backdrop-filter:none!important;\n}\n.contact-shell,\n.contact-card,\n.profile-card,\n.education-item,\n.interest-item,\n.recommendation-card,\n.timeline-content,\n.expertise-card,\n.skill-chip{\n  animation:none!important;\n}\n\n@media (max-width:720px){\n  .section-fluid-bg{inset:-20% -40%}\n  .section-flow{width:105%;height:80%}\n  .section-flow-b{display:none}\n}\n\n@media (prefers-reduced-motion:reduce){\n  .section-flow{animation:none!important;transform:none!important}\n}\n.section-fluid-bg.motion-off .section-flow{animation:none!important;transform:none!important}\n