/* ═══════════════════════════════════════════════════
   ISA DUCA PORTFOLIO — style.css
   Mobile-first · i18n · Modal · Premium UI
═══════════════════════════════════════════════════ */

/* ─── 1. VARIABLES ─────────────────────────────── */
:root {
  --bg:           #0B0B0B;
  --bg-2:         #111111;
  --bg-card:      #141414;
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.15);
  --text:         #F0EEE9;
  --text-2:       #888888;
  --text-3:       #464646;
  --accent:       #7C6FFF;
  --accent-2:     #A89BFF;
  --accent-rgb:   124,111,255;
  --green:        #3ECF8E;
  --yellow:       #F5C542;
  --red:          #FF6B6B;
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    20px;
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --ease-out:     cubic-bezier(0.16,1,0.3,1);
  --nav-h:        64px;
  --glass-bg:     rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --sp-md:  48px;
  --sp-lg:  80px;
  --sp-xl:  120px;
}

[data-theme="light"] {
  --bg:           #F5F4F0;
  --bg-2:         #EDECEA;
  --bg-card:      #FFFFFF;
  --border:       rgba(0,0,0,0.07);
  --border-hover: rgba(0,0,0,0.14);
  --text:         #111111;
  --text-2:       #666666;
  --text-3:       #AAAAAA;
  --glass-bg:     rgba(255,255,255,0.75);
  --glass-border: rgba(0,0,0,0.08);
}

/* ─── 2. RESET ──────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
  cursor: none;
}
@media (hover:none) { body { cursor:auto; } }
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }
button { cursor:none; border:none; background:none; font-family:inherit; }



/* ─── 3. SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar       { width:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px; }

/* ─── 4. CURSOR ─────────────────────────────────── */
.cursor,
.cursor-follower {
  position: fixed;
  pointer-events: none;
  z-index: 9999;

  mix-blend-mode: difference;

  user-select: none;
  -webkit-user-select: none;

  will-change: transform;

  isolation: isolate;
}
a, button {
  pointer-events: auto;
}
.cursor          { width:8px; height:8px; background:white; border-radius:50%; top:-4px; left:-4px; transition-duration:.05s; }
.cursor-follower { width:34px; height:34px; border:1.5px solid rgba(255,255,255,.45); border-radius:50%; top:-17px; left:-17px; transition-duration:.22s; }
.cursor.is-hovering          { transform:scale(3); opacity:.35; }
.cursor-follower.is-hovering { transform:scale(0); opacity:0; }
@media (hover:none) { .cursor,.cursor-follower { display:none; } }

/* ─── 5. NAV ────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  transition:background .4s var(--ease-out), backdrop-filter .4s, border-color .4s;
}
.nav.scrolled {
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--glass-border);
}
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 20px;
  height:100%; display:flex; align-items:center; gap:20px;
}
@media (min-width:768px) { .nav-inner { padding:0 40px; } }

.nav-logo { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; transition:opacity .2s; }
.nav-logo:hover { opacity:.65; }
.logo-mark { width:32px; height:32px; background:var(--accent); color:#fff; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.logo-name { font-size:14px; color:var(--text); }

.nav-links { display:none; align-items:center; gap:4px; margin-left:auto; }
@media (min-width:768px) { .nav-links { display:flex; } }

.nav-link { font-size:13.5px; color:var(--text-2); padding:6px 13px; border-radius:100px; transition:color .2s,background .2s; }
.nav-link:hover { color:var(--text); background:var(--border); }

.nav-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
@media (min-width:768px) { .nav-actions { margin-left:0; } }

/* Language switcher */
.lang-switcher {
  display:flex; align-items:center; gap:0;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:100px;
  padding:3px;
  height:36px;
}
.lang-btn {
  font-family:var(--font-display);
  font-size:11px; font-weight:700;
  letter-spacing:.06em;
  color:var(--text-3);
  padding:0 10px; height:28px;
  border-radius:100px;
  transition:background .2s, color .2s;
  white-space:nowrap;
}
.lang-btn:hover  { color:var(--text); }
.lang-btn.active { background:var(--accent); color:#fff; }
.lang-sep { width:1px; height:14px; background:var(--border-hover); flex-shrink:0; }

/* Theme toggle */
.theme-toggle {
  width:36px; height:36px; border-radius:50%;
  background:var(--border); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2); transition:background .2s,color .2s;
  position:relative; overflow:hidden;
}
.theme-toggle:hover { background:var(--border-hover); color:var(--text); }
.theme-icon { position:absolute; display:flex; transition:transform .3s var(--ease-out),opacity .3s; }
[data-theme="dark"]  .theme-icon.moon { opacity:0; transform:rotate(90deg)  scale(.5); }
[data-theme="dark"]  .theme-icon.sun  { opacity:1; transform:rotate(0)       scale(1);  }
[data-theme="light"] .theme-icon.sun  { opacity:0; transform:rotate(-90deg) scale(.5); }
[data-theme="light"] .theme-icon.moon { opacity:1; transform:rotate(0)       scale(1);  }

/* Hamburger */
.menu-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:36px; height:36px; border-radius:8px; background:var(--border); }
.menu-toggle span { display:block; width:18px; height:1.5px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease-out); }
@media (min-width:768px) { .menu-toggle { display:none; } }

/* Mobile menu */
.mobile-menu { position:fixed; inset:0; background:var(--bg); z-index:999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .3s,transform .3s var(--ease-out); }
.mobile-menu.open { opacity:1; pointer-events:all; transform:none; }
.mobile-menu-inner { display:flex; flex-direction:column; align-items:center; gap:28px; }
.mobile-link { font-family:var(--font-display); font-size:clamp(28px,9vw,48px); font-weight:700; color:var(--text-3); transition:color .2s; }
.mobile-link:hover { color:var(--text); }

/* ─── 6. SECTION COMMONS ────────────────────────── */
.section-inner { max-width:1280px; margin:0 auto; padding:0 20px; }
@media (min-width:768px) { .section-inner { padding:0 40px; } }

.section-label { display:flex; align-items:center; gap:14px; font-size:11px; font-weight:600; color:var(--text-3); letter-spacing:.14em; text-transform:uppercase; margin-bottom:28px; }
@media (min-width:768px) { .section-label { margin-bottom:40px; } }
.label-line { display:block; width:28px; height:1px; background:var(--accent); flex-shrink:0; }

.section-title { font-family:var(--font-display); font-size:clamp(28px,4.5vw,54px); font-weight:700; line-height:1.1; letter-spacing:-.03em; color:var(--text); }
.section-title em { font-style:normal; color:var(--accent); }

/* ─── 7. REVEAL ─────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out); }
.reveal.visible { opacity:1; transform:none; }

/* ─── 8. HERO ───────────────────────────────────── */
.hero { min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-h); }
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(100px); opacity:.45; }
.glow-1 { width:480px; height:480px; background:radial-gradient(circle,rgba(var(--accent-rgb),.2) 0%,transparent 70%); top:-160px; left:-80px; animation:glowFloat 8s ease-in-out infinite; }
.glow-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(168,155,255,.13) 0%,transparent 70%); bottom:-80px; right:-80px; animation:glowFloat 11s ease-in-out infinite reverse; }
.glow-3 { width:240px; height:240px; background:radial-gradient(circle,rgba(var(--accent-rgb),.09) 0%,transparent 70%); top:50%; left:50%; animation:glowFloat 7s ease-in-out infinite 2s; }
@keyframes glowFloat { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(24px,-34px) scale(1.06)} 66%{transform:translate(-18px,16px) scale(.96)} }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:68px 68px; mask-image:radial-gradient(ellipse at 28% 38%,black 20%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse at 28% 38%,black 20%,transparent 70%); }
.hero-orbs { position:absolute; inset:0; }
.orb { position:absolute; border-radius:50%; background:var(--accent); opacity:.055; animation:orbFloat 12s ease-in-out infinite; }
.orb-1 { width:160px; height:160px; top:22%; left:62%; }
.orb-2 { width:65px; height:65px; top:66%; left:76%; animation-delay:3s; }
.orb-3 { width:100px; height:100px; top:38%; left:84%; animation-delay:6s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-26px) scale(1.06)} }

.hero-content { max-width:1280px; margin:0 auto; padding:52px 20px 72px; width:100%; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
@media (min-width:768px) { .hero-content { padding:72px 40px 80px; } }

.hero-badge { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border:1px solid var(--border); border-radius:100px; font-size:12px; color:var(--text-2); background:var(--glass-bg); backdrop-filter:blur(8px); }
.badge-dot  { width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }

.hero-name { 
  font-family:var(--font-display); 
  font-size:clamp(56px,15vw,80px); 
  font-weight:800; line-height:.92; 
  letter-spacing:-.035em; 
  display:flex; 
  flex-direction:column; 
  margin-top:4px;
 }
.name-line   { display:block; }
.accent-text { -webkit-text-stroke:1.5px var(--accent); color:transparent; }
@media (min-width:768px) { .accent-text { -webkit-text-stroke:2px var(--accent); } }

.hero-title { display:flex; align-items:center; gap:8px; font-size:clamp(12px,1.3vw,15px); color:var(--text-2); font-weight:300; flex-wrap:wrap; }
.title-tag  { color:var(--accent); font-family:monospace; opacity:.7; }

.hero-desc { font-size:clamp(14px,1.3vw,17px); color:var(--text-2); line-height:1.75; font-weight:300; max-width:420px; }

.hero-cta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:4px; }
.btn { display:inline-flex; align-items:center; gap:7px; padding:11px 20px; border-radius:100px; font-family:var(--font-display); font-size:13px; font-weight:600; transition:all .3s var(--ease-out); white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); transform:translateY(-2px); box-shadow:0 12px 32px rgba(var(--accent-rgb),.35); }
.btn-primary svg { transition:transform .2s; }
.btn-primary:hover svg { transform:translateX(3px); }
.btn-ghost { background:var(--border); color:var(--text-2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--border-hover); color:var(--text); transform:translateY(-2px); }

.hero-scroll { display:flex; align-items:center; gap:11px; margin-top:28px; }
.scroll-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.scroll-line  { width:52px; height:1px; background:var(--border); position:relative; overflow:hidden; }
.scroll-dot   { position:absolute; top:-1.5px; left:-4px; width:4px; height:4px; border-radius:50%; background:var(--accent); animation:scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot { 0%{left:-4px;opacity:1} 80%{left:52px;opacity:1} 100%{left:52px;opacity:0} }

.hero-side { position:absolute; right:40px; top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:14px; z-index:2; width:280px; }
@media (min-width:1100px) { .hero-side { display:flex; } }

.glass-card { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:18px; transition:border-color .3s; }
.glass-card:hover { border-color:var(--border-hover); }
.card-header { display:flex; gap:6px; margin-bottom:14px; }
.card-dot { width:10px; height:10px; border-radius:50%; }
.card-dot.green  { background:var(--green); }
.card-dot.yellow { background:var(--yellow); }
.card-dot.red    { background:var(--red); }
.card-code { font-family:'SF Mono','Fira Code',monospace; font-size:11px; line-height:1.9; color:var(--text-2); }
.code-comment { color:var(--text-3); }
.code-keyword { color:var(--accent-2); }
.code-var     { color:#7dd3fc; }
.code-key     { color:var(--text-2); }
.code-str     { color:#86efac; }
.code-bool    { color:var(--accent-2); }

.hero-stats { display:flex; align-items:center; gap:12px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius); backdrop-filter:blur(16px); padding:13px 16px; }
.stat-item  { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.stat-num   { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--accent); letter-spacing:-.04em; }
.stat-label { font-size:9px; color:var(--text-3); text-align:center; line-height:1.35; text-transform:uppercase; letter-spacing:.05em; }
.stat-divider { width:1px; height:26px; background:var(--border); }

/* ─── 9. ABOUT ──────────────────────────────────── */
.about { padding:var(--sp-lg) 0; }
@media (min-width:768px) { .about { padding:var(--sp-xl) 0; } }

.about-grid { display:grid; grid-template-columns:1fr; gap:44px; margin-top:36px; }
@media (min-width:900px) { .about-grid { grid-template-columns:1fr 1fr; gap:68px; margin-top:52px; } }

.about-desc { font-size:clamp(14px,1.2vw,16.5px); color:var(--text-2); line-height:1.8; font-weight:300; margin-top:22px; margin-bottom:28px; }

.soft-skills { display:flex; flex-wrap:wrap; gap:7px; }
.soft-tag { padding:6px 12px; border:1px solid var(--border); border-radius:100px; font-size:12px; color:var(--text-2); transition:border-color .2s,color .2s; }
.soft-tag:hover { border-color:var(--accent); color:var(--accent); }

.skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
@media (max-width:380px) { .skills-grid { grid-template-columns:1fr; } }

.skill-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:9px; transition:border-color .3s,transform .3s var(--ease-out); }
.skill-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.skill-icon { color:var(--accent); opacity:.8; }
.skill-name { font-size:12px; font-weight:600; color:var(--text); }
.skill-bar  { height:2.5px; background:var(--border); border-radius:2px; overflow:hidden; }
.skill-fill { height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:2px; transition:width 1.2s var(--ease-out); }
.skill-card.animate .skill-fill { width:var(--fill); }

.tech-tags { display:flex; flex-wrap:wrap; gap:7px; }
.tech-tag  { padding:5px 12px; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.2); border-radius:100px; font-size:11px; font-weight:500; color:var(--accent-2); transition:background .2s,transform .2s; }
.tech-tag:hover { background:rgba(var(--accent-rgb),.16); transform:translateY(-1px); }

/* ─── 10. PROJECTS — Case Study List ────────────── */
.projects { padding:var(--sp-lg) 0; background:var(--bg-2); }
@media (min-width:768px) { .projects { padding:var(--sp-xl) 0; } }

.projects-header { display:flex; flex-direction:column; gap:20px; margin-bottom:52px; }
@media (min-width:860px) { .projects-header { flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:64px; } }

.projects-intro { font-size:clamp(13px,1.1vw,15px); color:var(--text-3); line-height:1.75; font-weight:300; max-width:280px; }

.projects-list { display:flex; flex-direction:column; gap:20px; }
@media (min-width:768px) { .projects-list { gap:24px; } }

/* Single case */
.case {
  display:grid; grid-template-columns:1fr;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border);
  transition:border-color .3s, box-shadow .4s;
}
.case:hover { border-color:var(--border-hover); box-shadow:0 16px 48px rgba(0,0,0,.2); }

@media (min-width:768px) {
  .case { grid-template-columns:55% 45%; min-height:360px; align-items:stretch; }
  .case:nth-child(even) { grid-template-columns:45% 55%; }
  .case:nth-child(even) .case-image-wrap { order:2; }
  .case:nth-child(even) .case-body       { order:1; }
}
@media (min-width:1100px) {
  .case              { grid-template-columns:56% 44%; min-height:400px; }
  .case:nth-child(even) { grid-template-columns:44% 56%; }
}

/* Image side */
.case-image-wrap { display:block; position:relative; overflow:hidden; aspect-ratio:16/10; cursor:none; width:100%; background:none; text-align:left; }
@media (min-width:768px) { .case-image-wrap { aspect-ratio:unset; height:100%; } }

.img-placeholder { width:100%; height:100%; min-height:220px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; transition:transform .7s var(--ease-out); }
.case:hover .img-placeholder { transform:scale(1.04); }

.p1 { background:linear-gradient(145deg,#1A0E2E 0%,#0F1A3E 55%,#0D2844 100%); }
.p2 { background:linear-gradient(145deg,#0D1F0D 0%,#132613 55%,#071A14 100%); }
.p3 { background:linear-gradient(145deg,#2E0E1A 0%,#3A1020 55%,#1A0612 100%); }
.p4 { background:linear-gradient(145deg,#0E0E2E 0%,#121228 55%,#0A0A20 100%); }
.p5 { background:linear-gradient(145deg,#1A1005 0%,#2E1E06 55%,#1A0E00 100%); }
[data-theme="light"] .p1 { background:linear-gradient(145deg,#E8E0FF 0%,#D4DFFF 55%,#CCE8FF 100%); }
[data-theme="light"] .p2 { background:linear-gradient(145deg,#D4FFE0 0%,#C8F5D4 55%,#CCFFE8 100%); }
[data-theme="light"] .p3 { background:linear-gradient(145deg,#FFD4E8 0%,#FFCCDc 55%,#FFD0E8 100%); }
[data-theme="light"] .p4 { background:linear-gradient(145deg,#D4D4FF 0%,#CCCCFF 55%,#D8D8FF 100%); }
[data-theme="light"] .p5 { background:linear-gradient(145deg,#FFF0D4 0%,#FFE8CC 55%,#FFF4D0 100%); }

.placeholder-shape { position:absolute; border-radius:50%; opacity:.11; animation:shapeFloat 9s ease-in-out infinite; background:white; }
.placeholder-shape.s1 { width:260px; height:260px; top:-80px; right:-60px; }
.placeholder-shape.s2 { width:140px; height:140px; bottom:-35px; left:6%; animation-delay:2s; }
.placeholder-shape.s3 { width:80px;  height:80px;  top:44%; left:44%; animation-delay:4s; }
.placeholder-shape.s4 { width:60px;  height:60px;  bottom:14%; right:20%; animation-delay:1s; }
@keyframes shapeFloat { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-10px,-16px) scale(1.08)} }

.placeholder-label { position:relative; z-index:2; font-family:var(--font-display); font-size:clamp(18px,3vw,40px); font-weight:800; color:rgba(255,255,255,.13); letter-spacing:-.04em; text-align:center; padding:20px; pointer-events:none; }
[data-theme="light"] .placeholder-label { color:rgba(0,0,0,.09); }

.case-image-hover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(var(--accent-rgb),.82); opacity:0; transition:opacity .28s; font-family:var(--font-display); font-weight:600; font-size:14px; color:white; }
.case:hover .case-image-hover { opacity:1; }
.case-image-hover svg { transform:translateX(-4px); transition:transform .3s var(--ease-out); }
.case:hover .case-image-hover svg { transform:none; }

/* Text side */
.case-body { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:32px 28px 36px; transition:background .3s; }
@media (min-width:768px)  { .case-body { padding:52px; gap:20px; } }
@media (min-width:1100px) { .case-body { padding:64px 60px; } }
.case:hover .case-body { background:rgba(var(--accent-rgb),.02); }

.case-meta  { display:flex; align-items:center; gap:14px; }
.case-index { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--text-3); letter-spacing:.08em; }
.case-cat   { font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }

.case-name  { font-family:var(--font-display); font-size:clamp(22px,2.8vw,38px); font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--text); transition:color .2s; }
.case:hover .case-name { color:var(--accent-2); }

.case-desc  { font-size:clamp(13px,1.1vw,15px); color:var(--text-2); line-height:1.72; font-weight:300; max-width:420px; }

.case-tags  { display:flex; flex-wrap:wrap; gap:6px; }
.case-tags span { padding:4px 11px; background:var(--border); border-radius:100px; font-size:11px; color:var(--text-2); transition:background .2s,color .2s; }
.case:hover .case-tags span { background:rgba(var(--accent-rgb),.1); color:var(--accent-2); }

.case-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--text-3); margin-top:4px; transition:color .2s,gap .3s var(--ease-out); }
.case-link svg { transition:transform .3s var(--ease-out); }
.case:hover .case-link     { color:var(--accent); gap:12px; }
.case:hover .case-link svg { transform:translateX(4px); }

/* ─── 11. PROCESS ───────────────────────────────── */
.process { padding:var(--sp-lg) 0; }
@media (min-width:768px) { .process { padding:var(--sp-xl) 0; } }

.process-steps { display:grid; grid-template-columns:1fr; gap:32px; margin-top:44px; }
@media (min-width:560px)  { .process-steps { grid-template-columns:1fr 1fr; gap:36px; } }
@media (min-width:1000px) { .process-steps { grid-template-columns:repeat(5,1fr); gap:0; margin-top:68px; } }

.process-step { display:flex; flex-direction:column; align-items:flex-start; position:relative; padding-right:18px; }
.step-number  { font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--accent); margin-bottom:20px; position:relative; }
.step-number::before { content:''; position:absolute; bottom:-9px; left:0; width:26px; height:1px; background:var(--accent); opacity:.4; }
.step-content { display:flex; flex-direction:column; gap:10px; padding-top:6px; }
.step-icon { width:42px; height:42px; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:background .3s,transform .3s; }
.process-step:hover .step-icon { background:rgba(var(--accent-rgb),.15); transform:translateY(-3px); }
.step-content h3 { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.step-content p  { font-size:12.5px; color:var(--text-2); line-height:1.65; font-weight:300; }
.step-connector  { position:absolute; top:4px; right:-1px; width:1px; height:52%; background:linear-gradient(to bottom,var(--border),transparent); }
@media (max-width:999px) { .step-connector { display:none; } }
/* ─── 12. CONTACT ───────────────────────────────── */

.contact {
  padding: var(--sp-lg) 0 var(--sp-md);
  position: relative;
  overflow: hidden;
}

@media (min-width:768px) {
  .contact {
    padding: var(--sp-xl) 0 var(--sp-lg);
  }
}

.contact-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.contact-glow {
  position: absolute;
  width: 680px;
  height: 480px;
  bottom: -180px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    rgba(var(--accent-rgb), .11) 0%,
    transparent 70%
  );
  filter: blur(60px);
  pointer-events: none;
}

.contact-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 36px auto 0;
}

@media (min-width:768px) {
  .contact-content {
    margin-top: 52px;
  }
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(34px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
  margin-bottom: 18px;
}

.contact-title em {
  font-style: normal;
  color: var(--accent);
}

.contact-sub {
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--text-2);
  margin-bottom: 44px;
  font-weight: 300;
}

.contact-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  gap: 10px;
  position: relative;
  z-index: 5;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;

  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);

  text-align: left;
  text-decoration: none;
  color: inherit;

  position: relative;
  z-index: 10;

  cursor: pointer;

  transition:
    border-color .3s,
    background .3s,
    transform .3s var(--ease-out),
    box-shadow .3s;
}

.contact-link:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .04);
  transform: translateX(7px);

  box-shadow:
    0 10px 30px rgba(var(--accent-rgb), .08);
}

.contact-link-icon {
  width: 38px;
  height: 38px;

  background: rgba(var(--accent-rgb), .08);

  border-radius: var(--radius-sm);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--accent);

  flex-shrink: 0;
}

.contact-link-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  flex: 1;
}

.contact-link-arrow {
  color: var(--text-3);
  transition: transform .2s, color .2s;
}

.contact-link:hover .contact-link-arrow {
  transform: translate(4px, -4px);
  color: var(--accent);
}
/* ─── 13. FOOTER ────────────────────────────────── */
.footer { border-top:1px solid var(--border); padding:22px 0; }
.footer-inner { max-width:1280px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (min-width:768px) { .footer-inner { padding:0 40px; } }
.footer-left    { display:flex; flex-direction:column; gap:2px; }
.footer-logo    { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text); }
.footer-tagline,.footer-copy { font-size:11px; color:var(--text-3); }

/* ─── 14. MODAL ─────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease-out);
}
@media (min-width:640px) { .modal-overlay { align-items:center; } }
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%; max-width:900px;
  max-height:94svh;
  overflow-y:auto;
  transform:translateY(40px);
  transition:transform .4s var(--ease-out);
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}
@media (min-width:640px) {
  .modal { border-radius:var(--radius-lg); max-height:90svh; }
}
.modal-overlay.open .modal { transform:none; }

/* ── Header (sticky) ── */
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px;
  position:sticky; top:0;
  background:var(--bg-card);
  z-index:10;
  border-bottom:1px solid var(--border);
}
@media (min-width:640px) { .modal-header { padding:22px 32px 18px; } }

.modal-meta  { display:flex; align-items:center; gap:12px; }
.modal-index { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--text-3); letter-spacing:.08em; }
.modal-cat   { font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }

.modal-close {
  width:36px; height:36px; border-radius:50%;
  background:var(--border); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s,color .2s,transform .2s;
  flex-shrink:0;
}
.modal-close:hover { background:var(--border-hover); color:var(--text); transform:rotate(90deg); }

/* ── 1. CAPA — hero full bleed ── */
.modal-hero {
  width:100%;
  aspect-ratio:16/8;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.modal-hero img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ── 2. INFOS ── */
.modal-body {
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  gap:24px;
  border-bottom:1px solid var(--border);
}
@media (min-width:640px) { .modal-body { padding:40px 40px; gap:28px; } }

.modal-title {
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,38px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--text);
}

.modal-info-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media (min-width:600px) {
  .modal-info-grid { grid-template-columns:1fr 1fr; gap:32px; }
}

/* ── 3. GALERIA — padding lateral, mesmo aspecto da hero ── */
.modal-gallery {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 24px;
  border-bottom:1px solid var(--border);
  padding-bottom:0;
}
@media (min-width:640px) { .modal-gallery { padding:0 40px; gap:14px; } }

.gallery-full {
  width:100%;
  aspect-ratio:16/8;   /* igual à hero */
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.gallery-full:last-child { margin-bottom:32px; }
@media (min-width:640px) { .gallery-full:last-child { margin-bottom:40px; } }

.gallery-full img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease-out);
}
.gallery-full:hover img { transform:scale(1.03); }

.gallery-full .placeholder-shape { opacity:.14; }
.gt1 { background:linear-gradient(145deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.04)); }
.gt2 { background:linear-gradient(145deg,rgba(168,155,255,.14),rgba(var(--accent-rgb),.07)); }
.gt3 { background:linear-gradient(145deg,rgba(var(--accent-rgb),.1),rgba(168,155,255,.18)); }

/* ── 4. TAGS + BOTÃO ── */
.modal-body-bottom {
  border-bottom:none;
  border-top:none;
}

/* Sections */
.modal-section { display:flex; flex-direction:column; gap:12px; }
.modal-section-title {
  font-family:var(--font-display);
  font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.modal-text { font-size:clamp(13.5px,1.2vw,15px); color:var(--text-2); line-height:1.8; font-weight:300; }

/* Process steps */
.modal-process-steps { display:flex; flex-direction:column; gap:10px; }
.modal-process-step  { display:flex; align-items:flex-start; gap:14px; }
.mps-num  { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--accent); min-width:20px; margin-top:2px; }
.mps-text { font-size:13.5px; color:var(--text-2); line-height:1.65; font-weight:300; }

/* Footer row */
.modal-footer-row {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding-top:20px;
  border-top:1px solid var(--border);
  margin-top:8px;
}
.modal-tags { display:flex; flex-wrap:wrap; gap:6px; }
.modal-tags span { padding:4px 11px; background:var(--border); border-radius:100px; font-size:11px; color:var(--text-2); }
.modal-cta { flex-shrink:0; }


/* ─── Modal real images ──────────────────────────── */
.modal-img-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}