/* Shader-inspired portfolio interface. */
:root{
  color-scheme:dark;
  --bg:#050506;
  --bg-2:#09090b;
  --panel:#0b0b0e;
  --panel-2:#101014;
  --panel-3:#15151a;
  --text:#fafafa;
  --muted:rgba(250,250,250,.66);
  --muted-2:rgba(250,250,250,.46);
  --line:#27272a;
  --line-soft:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.22);
  --accent:#34d399;
  --accent-2:#22d3ee;
  --accent-3:#fb923c;
  --danger:#fb7185;
  --radius:8px;
  --shadow:0 32px 90px rgba(0,0,0,.55);
  --shadow-soft:0 18px 54px rgba(0,0,0,.34);
  --font-sans:Aptos, Inter, "Segoe UI", sans-serif;
  --font-display:"Aptos Display", Aptos, Inter, "Segoe UI", sans-serif;
}

[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f7f4;
  --bg-2:#ededeb;
  --panel:#ffffff;
  --panel-2:#f5f5f1;
  --panel-3:#ecece7;
  --text:#111113;
  --muted:rgba(17,17,19,.66);
  --muted-2:rgba(17,17,19,.48);
  --line:#d8d8d2;
  --line-soft:rgba(17,17,19,.09);
  --line-strong:rgba(17,17,19,.18);
  --accent:#047857;
  --accent-2:#0e7490;
  --accent-3:#c2410c;
  --shadow:0 26px 72px rgba(17,17,19,.13);
  --shadow-soft:0 16px 42px rgba(17,17,19,.10);
}

*{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  font-family:var(--font-sans);
  color:var(--text);
  background:#000;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 50% 42%, transparent 0, rgba(0,0,0,.08) 58%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), transparent 28%, rgba(0,0,0,.54));
  opacity:1;
}

[data-theme="light"] body:before{opacity:.28}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit}
::selection{background:rgba(52,211,153,.28);color:var(--text)}

.container{width:min(100% - 48px, 1180px);margin:0 auto}
.header,main,footer{position:relative;z-index:1}

.bg-canvas{
  display:block;
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  opacity:.78;
  pointer-events:none;
}

[data-theme="light"] .bg-canvas{opacity:.24;filter:saturate(.8)}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:50;
  width:0%;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  box-shadow:0 0 18px rgba(34,211,238,.45);
}

.header{
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(39,39,42,.72);
  background:rgba(0,0,0,.54);
  backdrop-filter:blur(18px);
}

[data-theme="light"] .header{background:rgba(247,247,244,.78)}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:70px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  color:var(--text);
  font-size:14px;
  font-weight:760;
  line-height:1;
}

.brand:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 6px rgba(52,211,153,.11), 0 0 28px rgba(52,211,153,.55);
}

.links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  max-width:100%;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter:blur(16px);
}

[data-theme="light"] .links{background:rgba(255,255,255,.74)}

.links a,
.theme-toggle,
.language-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border:0;
  border-radius:999px;
  padding:8px 12px;
  color:var(--muted);
  background:transparent;
  font-size:13px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease, transform .18s ease;
}

.links a:hover,
.links a.active,
.theme-toggle:hover,
.language-toggle:hover{
  color:var(--text);
  background:rgba(255,255,255,.075);
}

[data-theme="light"] .links a:hover,
[data-theme="light"] .links a.active,
[data-theme="light"] .theme-toggle:hover,
[data-theme="light"] .language-toggle:hover{
  background:rgba(17,17,19,.07);
}

.theme-toggle,
.language-toggle{border-left:1px solid var(--line)}

.hero{
  position:relative;
  padding:58px 0 42px;
  border-bottom:1px solid var(--line);
}

.hero:not(.project-hero){
  min-height:calc(100svh - 70px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-grid{
  width:min(100% - 32px, 768px);
  max-width:768px;
  margin:0 auto;
  padding:8px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  box-shadow:none;
  backdrop-filter:none;
}

[data-theme="light"] .hero-grid{background:rgba(255,255,255,.62)}

.hero-grid > div:first-child{
  min-width:0;
  padding:40px 26px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  text-align:center;
  overflow:hidden;
}

.hero-grid > aside{
  max-width:720px;
  width:100%;
  margin:0 auto;
}

.project-hero .hero-grid{
  width:min(100% - 48px, 980px);
  max-width:980px;
}

.avatar-wrap{
  display:inline-flex;
  margin:0 0 18px;
}

.avatar{
  width:76px;
  height:76px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line-strong);
  background:var(--panel-2);
  box-shadow:0 0 0 7px rgba(255,255,255,.035), 0 22px 50px rgba(0,0,0,.34);
}

.kicker{
  max-width:760px;
  margin:0 auto 14px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  line-height:1.55;
}

.kicker:after{display:none}

h1{
  max-width:820px;
  margin:0 auto 12px;
  font-family:var(--font-display);
  font-size:72px;
  line-height:.95;
  font-weight:900;
  letter-spacing:0;
  text-wrap:balance;
}

.lead{
  max-width:660px;
  margin:0 auto;
  color:rgba(255,255,255,.60);
  font-size:17px;
  line-height:1.72;
}

.availability{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:32px auto;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}

.availability-dot{
  position:relative;
  width:12px;
  height:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.availability-dot:before,
.availability-dot:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--accent);
}

.availability-dot:before{
  width:12px;
  height:12px;
  opacity:.6;
  animation:ping 1.65s cubic-bezier(0,0,.2,1) infinite;
}

.availability-dot:after{
  width:7px;
  height:7px;
}

@keyframes ping{
  75%,100%{transform:scale(2.2);opacity:0}
}

.cta,
.actions,
.meta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.cta{justify-content:center;margin:28px 0 0}
.hero:not(.project-hero) .cta{margin:0}
.actions{margin-top:auto;padding-top:20px}
.meta-row{justify-content:center;margin-top:18px}

.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 22px;
  color:var(--text);
  background:rgba(255,255,255,.045);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 14px 34px rgba(0,0,0,.18);
  font-size:14px;
  font-weight:740;
  line-height:1.15;
  text-align:center;
  white-space:normal;
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.btn:before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  opacity:0;
  background:
    radial-gradient(circle at var(--px, 50%) var(--py, 40%), rgba(255,255,255,.34), transparent 30%),
    linear-gradient(120deg, rgba(34,211,238,.2), transparent 42%, rgba(251,146,60,.18));
  transition:opacity .22s ease;
}

.btn:after{
  content:"";
  position:absolute;
  inset:-90% -30%;
  pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.38), transparent 58%);
  transform:translateX(-64%) rotate(8deg);
  transition:transform .62s cubic-bezier(.2,.7,.2,1);
}

.btn:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong);
  background:rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 20px 54px rgba(0,0,0,.28);
}

.btn:hover:before{opacity:1}
.btn:hover:after{transform:translateX(64%) rotate(8deg)}
.btn:active{transform:translateY(0)}

.btn.primary{
  border-color:rgba(255,255,255,.34);
  color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.045)),
    rgba(255,255,255,.035);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 22px 58px rgba(255,255,255,.08);
}

[data-theme="light"] .btn.primary{color:#fff;background:linear-gradient(180deg, #111113, #047857)}

.chip,
.badge,
.pills li{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.034);
  line-height:1.25;
}

.chip{
  position:relative;
  overflow:hidden;
  padding:7px 11px;
  font-size:12px;
  font-weight:680;
}

.section{
  padding:54px 0;
  position:relative;
}

.compact-section{padding-top:28px}

.section.subtle{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.018);
}

.section-head{
  max-width:760px;
  margin:0 0 24px;
}

.section-head.centered{
  margin:0 auto 22px;
  text-align:center;
}

.section-head:before{display:none}

.section-head h2,
.page-head h1{
  margin:0 0 9px;
  font-family:var(--font-display);
  color:var(--text);
  font-size:34px;
  line-height:1.08;
  font-weight:820;
  letter-spacing:0;
  text-wrap:balance;
}

.section-head p,
.page-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.72;
}

.page-head{
  padding:58px 0 34px;
  border-bottom:1px solid var(--line);
}

.page-head .container{
  width:min(100% - 48px, 920px);
  padding:8px;
  border:1px solid var(--line);
  background:rgba(7,7,9,.54);
  backdrop-filter:blur(18px);
}

[data-theme="light"] .page-head .container{background:rgba(255,255,255,.62)}

.page-head .container > *{
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding-left:26px;
  padding-right:26px;
}

.page-head h1{
  padding-top:36px;
  margin-bottom:0;
  border-top:1px solid var(--line);
  border-bottom:0;
  text-align:center;
  font-size:48px;
}

.page-head p{
  padding-top:12px;
  padding-bottom:34px;
  border-bottom:1px solid var(--line);
  text-align:center;
}

.card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), rgba(11,11,14,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.055) inset;
  backdrop-filter:blur(14px);
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

[data-theme="light"] .card{background:rgba(255,255,255,.72)}

.card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at var(--px, 50%) var(--py, 0%), rgba(34,211,238,.13), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.07), transparent 34%);
  transition:opacity .22s ease;
}

.card:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-soft);
}

.card:hover:before{opacity:1}
.card > *{position:relative;z-index:1}

.highlight{animation:none}

.highlight:after{
  content:"";
  position:absolute;
  inset:auto 16px 16px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), rgba(52,211,153,.46), transparent);
}

@keyframes floatPanel{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.h3,
.card h3{
  margin:0 0 10px;
  color:var(--text);
  font-size:19px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:0;
}

.muted{color:var(--muted);line-height:1.7}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.mini-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:18px;
}

.featured-list{
  max-width:768px;
  margin:0 auto;
  padding:8px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
}

.mini-item{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 14px;
  background:rgba(255,255,255,.034);
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.mini-item:before,
.chip:before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  opacity:0;
  background:radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.18), transparent 36%);
  transition:opacity .2s ease;
}

.mini-item:hover{
  transform:translateX(4px);
  border-color:var(--line-strong);
  background:rgba(255,255,255,.06);
}

.mini-item:hover:before,
.chip:hover:before{opacity:1}

.mini-title{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:760;
  line-height:1.35;
}

.mini-sub{
  display:block;
  margin-top:5px;
  color:var(--muted-2);
  font-size:12px;
  line-height:1.55;
}

.pills{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0;
  padding:0;
}

.pills li{
  padding:8px 12px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}

.bullets{
  margin:14px 0 0 19px;
  padding:0;
  color:var(--muted);
  line-height:1.7;
}

.bullets li{margin:8px 0}
.bullets a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}

.project{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.project-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}

.project-top > div{min-width:0}
.project-top p{margin:0}

.badge{
  flex:0 0 auto;
  min-height:28px;
  padding:6px 10px;
  color:var(--text);
  font-size:11px;
  font-weight:760;
}

.project-body{
  display:flex;
  flex:1;
  flex-direction:column;
}

.shot{
  width:100%;
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel-2);
  overflow:hidden;
}

#tableau-sales-customer-dashboard{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:20px;
  align-items:start;
}

#tableau-sales-customer-dashboard .project-top{margin:0}
#tableau-sales-customer-dashboard .project-body{min-width:0}
#tableau-sales-customer-dashboard .shot{
  margin-top:0;
  aspect-ratio:832 / 600;
  object-fit:contain;
  background:#f4f5f3;
}
#tableau-sales-customer-dashboard .bullets{margin-top:16px}

.project-file-banner{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:16px;
  border:1px solid var(--line);
  border-left:3px solid var(--accent-3);
  border-radius:var(--radius);
  padding:14px;
  background:rgba(255,255,255,.034);
}

.project-file-banner strong{color:var(--text)}
.project-file-banner span{color:var(--muted);font-size:13px;line-height:1.6}

.profile-wrap{display:block;margin:14px 0 18px}
.profile{
  width:100%;
  max-width:440px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  object-fit:cover;
  background:var(--panel-2);
}

.pdf-wrap{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel-2);
}

.pdf-frame{width:100%;height:78vh;border:0;background:#fff}
.dashboard-pdf-wrap{margin-top:10px;box-shadow:var(--shadow-soft)}

.project-hero .project-preview-card{
  padding:10px;
  overflow:hidden;
}

.project-hero .project-preview-card .shot{margin:0;border-radius:var(--radius)}

.pdf-summary-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pdf-summary-card .mini-list{margin-top:0}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.kpi-card,
.tableau-metric-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-height:142px;
}

.kpi-card img{width:34px;height:34px;object-fit:contain;filter:saturate(.95)}
.kpi-card span,
.tableau-metric-card span{color:var(--muted);font-size:13px;line-height:1.45}
.kpi-card strong,
.tableau-metric-card strong{color:var(--text);font-size:27px;line-height:1;font-weight:840}
.kpi-card small,
.tableau-metric-card small{color:var(--muted-2);font-size:12px;line-height:1.45}

.analysis-card{overflow:hidden}
.section-head.compact{margin-bottom:16px}
.section-head.compact h2{font-size:21px;margin-bottom:5px}
.section-head.compact p{font-size:14px}

.bar-row{margin:13px 0}
.bar-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:13px;
}

.bar-label strong{color:var(--text);font-weight:760}
.bar-track{
  height:10px;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

.bar-track span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));
  transform-origin:left center;
  animation:barBloom .9s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes barBloom{
  from{transform:scaleX(.08)}
  to{transform:scaleX(1)}
}

.table-card{overflow:auto}
.table-card h3{margin:0 0 12px}
table{width:100%;border-collapse:collapse;color:var(--muted);font-size:13px}
th,td{border-bottom:1px solid var(--line);padding:10px 9px;text-align:left;vertical-align:top}
th{color:var(--text);font-weight:800}
td:last-child,th:last-child{text-align:right;color:var(--text)}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}

.gallery-grid .wide{
  grid-column:1 / -1;
  max-width:680px;
  margin-inline:auto;
}

figure.card{margin:0}
figcaption{
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.tableau-preview-card{padding:10px;overflow:hidden}
.tableau-metric-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.dashboard-shot{
  width:100%;
  aspect-ratio:832 / 600;
  object-fit:contain;
  padding:8px;
  background:#f4f5f3;
  transition:transform .35s ease, filter .35s ease;
}

.dashboard-gallery figure{overflow:hidden}
.dashboard-gallery .shot{margin-top:0}
.dashboard-gallery .card:hover .dashboard-shot,
.tableau-preview-card:hover .dashboard-shot,
#tableau-sales-customer-dashboard:hover .shot{
  transform:scale(1.016);
  filter:saturate(1.04) contrast(1.02);
}

.footer{
  padding:24px 0;
  border-top:1px solid var(--line);
}

.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}

.footer p{margin:0;font-size:13px}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .56s ease, transform .56s ease;
  transition-delay:var(--reveal-delay, 0ms);
}

.reveal.in{opacity:1;transform:translateY(0)}

html[dir="rtl"]{
  --font-sans:"Segoe UI", Tahoma, Arial, sans-serif;
  --font-display:"Segoe UI", Tahoma, Arial, sans-serif;
}

html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .hero-grid > div:first-child,
html[dir="rtl"] .page-head h1,
html[dir="rtl"] .page-head p{text-align:center}

html[dir="rtl"] .nav,
html[dir="rtl"] .links,
html[dir="rtl"] .cta,
html[dir="rtl"] .actions,
html[dir="rtl"] .meta-row,
html[dir="rtl"] .footer-row,
html[dir="rtl"] .bar-label,
html[dir="rtl"] .project-top{
  flex-direction:row-reverse;
}

html[dir="rtl"] .brand:before{order:2}
html[dir="rtl"] .theme-toggle{border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .language-toggle{border-left:0;border-right:1px solid var(--line)}
html[dir="rtl"] .bullets{margin:14px 19px 0 0}
html[dir="rtl"] .mini-item:hover{transform:translateX(-4px)}
html[dir="rtl"] .project-file-banner{border-left:1px solid var(--line);border-right:3px solid var(--accent-3)}
html[dir="rtl"] td,
html[dir="rtl"] th{text-align:right}
html[dir="rtl"] td:last-child,
html[dir="rtl"] th:last-child{text-align:left}
html[dir="rtl"] .bar-track span{transform-origin:right center}

@media (max-width:980px){
  .grid-3{grid-template-columns:1fr}
  #tableau-sales-customer-dashboard{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .container{width:min(100% - 34px, 1180px)}
  .nav{
    min-height:auto;
    padding:14px 0;
    flex-direction:column;
    align-items:flex-start;
  }
  .links{
    width:100%;
    justify-content:flex-start;
    border-radius:var(--radius);
    overflow-x:auto;
  }
  .links a,
  .theme-toggle,
  .language-toggle{
    min-height:34px;
    font-size:12px;
    padding:8px 10px;
  }
  .theme-toggle,
  .language-toggle{border:0}
  .hero{padding:48px 0 34px}
  .hero-grid,
  .page-head .container{width:min(100% - 34px, 920px)}
  .hero-grid > div:first-child{padding:42px 22px 36px}
  h1{font-size:46px}
  .page-head h1{font-size:40px}
  .section-head h2{font-size:29px}
  .grid-2,
  .gallery-grid{grid-template-columns:1fr}
  .tableau-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-head .container > *{padding-left:18px;padding-right:18px}
}

@media (max-width:560px){
  .container{width:min(100% - 28px, 1180px)}
  .hero-grid,
  .page-head .container{width:min(100% - 28px, 920px)}
  .hero-grid{padding:6px}
  .hero-grid > div:first-child{padding:34px 16px 30px}
  .avatar{width:66px;height:66px}
  h1{font-size:37px}
  .lead{font-size:15px;line-height:1.7}
  .kicker{font-size:12px}
  .cta,
  .actions{
    width:100%;
    justify-content:center;
  }
  .btn{
    min-height:42px;
    padding:10px 15px;
    font-size:13px;
  }
  .card{padding:18px}
  .section{padding:42px 0}
  .page-head{padding:42px 0 26px}
  .page-head h1{font-size:34px;padding-top:28px}
  .page-head p{padding-bottom:28px}
  .project-top{flex-direction:column}
  .kpi-grid,
  .tableau-metric-grid{grid-template-columns:1fr}
  .kpi-card,
  .tableau-metric-card{min-height:112px}
  .pdf-frame{height:64vh}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important}
  .scroll-progress{display:none}
  .bg-canvas{display:none}
  .reveal{opacity:1;transform:none}
}