/* ── RESET & ROOT ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}

:root {
  --bg:         #F7F8FA;
  --bg2:        #FFFFFF;
  --surface:    #FFFFFF;
  --surface2:   #F0F2F5;
  --border:     rgba(0,0,0,0.08);
  --border2:    rgba(0,0,0,0.13);
  --text:       #0A0A0F;
  --text2:      #4A4A5A;
  --text3:      #8A8AA0;
  --accent:     #2563EB;
  --accent-h:   #1D4ED8;
  --accent-light: #EFF6FF;
  --accent-rgb: 37,99,235;
  --dark-bg:    #0A0A0F;
  --nav-h:      72px;
  --max:        1200px;
  --r:          12px;
  --r-lg:       20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
}

[data-theme="dark"] {
  --bg:         #0A0A0F;
  --bg2:        #111118;
  --surface:    #16161F;
  --surface2:   #1E1E2A;
  --border:     rgba(255,255,255,0.08);
  --border2:    rgba(255,255,255,0.14);
  --text:       #F0F0FA;
  --text2:      #9090B0;
  --text3:      #5A5A78;
  --accent-light: rgba(37,99,235,0.15);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}

img { max-width:100%; display:block }
a { color:inherit; text-decoration:none }

.container { width:100%; max-width:var(--max); margin:0 auto; padding:0 2rem }

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
.display { font-family:'Clash Display',sans-serif; font-weight:700; line-height:1.08; letter-spacing:-.02em }
.display-xl  { font-size: clamp(3rem,6vw,5.5rem) }
.display-lg  { font-size: clamp(2.2rem,4vw,3.5rem) }
.display-md  { font-size: clamp(1.6rem,3vw,2.5rem) }
.display-sm  { font-size: clamp(1.2rem,2vw,1.6rem) }
.label-tag { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.4rem }
.label-tag::before { content:none }

/* ── NAV ──────────────────────────────────────────────────── */
.nav-wrap {
  position:fixed; top:0; left:0; right:0; z-index:500;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background .3s, box-shadow .3s;
}
.nav-wrap.scrolled { box-shadow: var(--shadow) }
.navbar {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Clash Display', sans-serif; font-size: 1.4rem; font-weight: 700;
  color: var(--text); white-space: nowrap;
}
.nav-logo-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .95rem; font-weight: 700;
}
.nav-links { display:flex; align-items:center; gap:.25rem; flex:1; justify-content:center }
.nav-item { position:relative }
.nav-link {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.45rem .85rem; border-radius:8px;
  font-size:.9rem; font-weight:500; color:var(--text2);
  transition:all .15s; cursor:pointer; border:none; background:none;
  font-family:'DM Sans',sans-serif;
}
.nav-link:hover, .nav-link.active { color:var(--text); background:var(--surface2) }
.nav-link-arrow { font-size:.65rem; transition:transform .2s }
.nav-item:hover .nav-link-arrow { transform:rotate(180deg) }
.nav-cta {
  background: var(--accent); color:#fff !important;
  padding: .5rem 1.25rem !important; border-radius:10px !important;
  font-weight: 600 !important; transition: all .2s !important;
  display:inline-flex; align-items:center; gap:.4rem;
}
.nav-cta:hover { background:var(--accent-h) !important; transform:translateY(-1px); box-shadow:0 4px 14px rgba(var(--accent-rgb),.35) !important }

/* Lang dropdown */
.lang-wrap { position:relative }
.nav-controls { display:flex; align-items:center; gap:.5rem }
.theme-btn {
  width:34px; height:34px; border-radius:8px;
  background:var(--surface2); border:1px solid var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:all .15s;
}
.theme-btn:hover { background:var(--surface); border-color:var(--border2) }
.lang-selected {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .7rem; border-radius:8px; border:1px solid var(--border2);
  background:none; cursor:pointer; font-family:'JetBrains Mono',monospace;
  font-size:.8rem; font-weight:600; color:var(--text2); transition:all .15s;
}
.lang-selected:hover { background:var(--surface2); color:var(--text) }
.lang-chevron { font-size:.6rem; transition:transform .2s }
.lang-wrap.open .lang-chevron { transform:rotate(180deg) }
.lang-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow-lg);
  overflow:hidden; min-width:100px;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .15s, transform .15s; z-index:600;
}
.lang-wrap.open .lang-dropdown { opacity:1; pointer-events:auto; transform:translateY(0) }
.lang-option {
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; font-size:.82rem; font-weight:500; cursor:pointer;
  color:var(--text2); transition:background .1s;
}
.lang-option:hover { background:var(--surface2); color:var(--text) }
.lang-option.active { color:var(--accent); font-weight:600 }

/* ── MEGA MENU ─────────────────────────────────────────────── */
.mega-menu {
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:1.5rem; min-width:520px;
  opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-8px);
  transition:opacity .2s, transform .2s;
}
.nav-item:hover .mega-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) }
.mega-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
.mega-item {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem .9rem; border-radius:var(--r); transition:background .15s; cursor:pointer;
}
.mega-item:hover { background:var(--surface2) }
.mega-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.mega-icon.blue   { background:rgba(37,99,235,.1) }
.mega-icon.purple { background:rgba(124,58,237,.1) }
.mega-icon.green  { background:rgba(16,185,129,.1) }
.mega-icon.orange { background:rgba(249,115,22,.1) }
.mega-icon.pink   { background:rgba(236,72,153,.1) }
.mega-icon.cyan   { background:rgba(6,182,212,.1) }
.mega-title { font-size:.875rem; font-weight:600; color:var(--text); margin-bottom:.15rem }
.mega-desc  { font-size:.78rem; color:var(--text3); line-height:1.4 }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding-top: var(--nav-h);
  display: flex; align-items: center;
  position: relative; overflow: visible;
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 70% 60% at 65% 40%, rgba(37,99,235,.06) 0%, transparent 70%),
              radial-gradient(ellipse 50% 50% at 20% 70%, rgba(124,58,237,.04) 0%, transparent 60%);
  pointer-events:none;
}
[data-theme="dark"] .hero::before {
  background: radial-gradient(ellipse 70% 60% at 65% 40%, rgba(37,99,235,.12) 0%, transparent 70%),
              radial-gradient(ellipse 50% 50% at 20% 70%, rgba(124,58,237,.08) 0%, transparent 60%);
}
.hero-inner {
  position:relative; z-index:1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: start; padding: 4rem 0 5rem;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border-radius:99px;
  background:var(--surface); border:1px solid var(--border2);
  font-size:.82rem; color:var(--text2); margin-bottom:1.75rem;
}
.hero-badge-dot { width:7px; height:7px; border-radius:50%; background:#10B981; animation:pulse-g 2s infinite }
@keyframes pulse-g { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)} 50%{box-shadow:0 0 0 6px rgba(16,185,129,0)} }
.hero-title { margin-bottom:1.5rem }
.hero-title .line-colored { color:var(--accent) }
.hero-desc { font-size:1.05rem; color:var(--text2); max-width:480px; margin-bottom:2.25rem; line-height:1.75 }
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2.5rem }

.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:#fff;
  padding:.7rem 1.5rem; border-radius:10px; font-size:.95rem; font-weight:600;
  border:none; cursor:pointer; transition:all .2s;
}
.btn-primary:hover { background:var(--accent-h); transform:translateY(-2px); box-shadow:0 6px 20px rgba(var(--accent-rgb),.35) }

.btn-secondary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--surface); color:var(--text);
  padding:.7rem 1.5rem; border-radius:10px; font-size:.95rem; font-weight:600;
  border:1px solid var(--border2); cursor:pointer; transition:all .2s;
}
.btn-secondary:hover { background:var(--surface2); border-color:var(--border2) }

.hero-stats { display:flex; gap:2.5rem }
.hero-stat-num { font-family:'Clash Display',sans-serif; font-size:1.8rem; font-weight:700; color:var(--text) }
.hero-stat-lbl { font-size:.8rem; color:var(--text3); margin-top:.1rem }

/* Hero visual */
.hero-visual { position:relative; padding:2rem 3rem 2rem 0 }
.hero-img-wrap {
  border-radius:20px; overflow:visible; position:relative;
  width:100%; max-width:420px;
  box-shadow:0 24px 60px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.12);
}
.hero-img-wrap > img { width:100%; height:auto; display:block; border-radius:20px }
.hero-img-overlay {
  position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:1;
  background:linear-gradient(160deg, rgba(0,50,20,.18) 0%, rgba(0,15,40,.08) 100%);
}

/* Floating cards */
.float-card {
  position:absolute; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:.8rem 1.1rem; box-shadow:0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  display:flex; align-items:center; gap:.75rem;
  min-width:170px; z-index:10;
}
[data-theme="dark"] .float-card { background:var(--surface); border-color:var(--border2) }
.float-card:nth-child(2) { animation:float-card 4s ease-in-out infinite; animation-delay:0s;    top:-22px;  left:20px }
.float-card:nth-child(3) { animation:float-card 4s ease-in-out infinite; animation-delay:-1.8s; top:28%;    right:-28px }
.float-card:nth-child(4) { animation:float-card 4s ease-in-out infinite; animation-delay:-3s;   bottom:80px; right:-28px }
.float-card:nth-child(5) { animation:float-card 4s ease-in-out infinite; animation-delay:-1.2s; bottom:-22px; left:20px }
@keyframes float-card { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float-card-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0 }
.float-card-icon.palette  { background:#FFF3E0 }
.float-card-icon.triangle { background:#FFF8E1 }
.float-card-icon.phone    { background:#E8EAF6 }
.float-card-icon.ticket   { background:#F3F3F3 }
.float-card-num   { font-family:'Clash Display',sans-serif; font-size:.95rem; font-weight:700; color:#0A0A0F; white-space:nowrap }
.float-card-label { font-size:.72rem; color:#8A8AA0; margin-top:.1rem }
[data-theme="dark"] .float-card-num { color:var(--text) }
[data-theme="dark"] .float-card-label { color:var(--text3) }

/* ── LOGOS STRIP ─────────────────────────────────────────── */
.logos-strip {
  padding:2.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--surface); overflow:hidden;
}
.logos-track {
  display:flex; gap:3rem; align-items:center;
  animation:scroll-logos 20s linear infinite; width:max-content;
}
.logos-strip:hover .logos-track { animation-play-state:paused }
@keyframes scroll-logos { to{transform:translateX(-50%)} }
.logo-item {
  font-family:'Clash Display',sans-serif; font-size:.9rem; font-weight:600;
  color:var(--text3); white-space:nowrap; transition:color .2s;
  display:flex; align-items:center; gap:.4rem;
}
.logo-item:hover { color:var(--text) }
.logo-dot { width:6px; height:6px; border-radius:50%; background:var(--border2) }

/* ── PORTFOLIO SECTION ────────────────────────────────────── */
.section { padding:6rem 0 }
.section-header { margin-bottom:3rem }
.section-header-row { display:flex; align-items:flex-end; justify-content:space-between; margin-top:.75rem }
.section-link { font-size:.875rem; font-weight:500; color:var(--accent); display:inline-flex; align-items:center; gap:.3rem; transition:gap .2s }
.section-link:hover { gap:.6rem }

.portfolio-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.portfolio-card {
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  transition:transform .25s, box-shadow .25s; cursor:pointer;
}
.portfolio-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.portfolio-card.featured { grid-column:1; grid-row:1/3 }
.portfolio-img { aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#1E1E3F,#0f2a56); position:relative }
.portfolio-card.featured .portfolio-img { aspect-ratio:3/4 }
.portfolio-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative }
.portfolio-img-placeholder::after { content:attr(data-label); font-family:'Clash Display',sans-serif; font-size:1.1rem; font-weight:600; color:rgba(255,255,255,.3); position:absolute }
.portfolio-img-1 { background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460) }
.portfolio-img-2 { background:linear-gradient(135deg,#0f2027,#203a43,#2c5364) }
.portfolio-img-3 { background:linear-gradient(135deg,#200122,#6f0000) }
.portfolio-img-4 { background:linear-gradient(135deg,#0a3d0a,#1a5c1a) }
.portfolio-body { padding:1.25rem 1.5rem }
.portfolio-tags { display:flex; gap:.5rem; margin-bottom:.75rem; flex-wrap:wrap }
.portfolio-tag { font-size:.7rem; font-weight:600; padding:.2rem .6rem; border-radius:99px; background:var(--accent-light); color:var(--accent) }
.portfolio-tag.alt { background:var(--surface2); color:var(--text3) }
.portfolio-title { font-family:'Clash Display',sans-serif; font-size:1.1rem; font-weight:600; margin-bottom:.4rem; color:var(--text) }
.portfolio-desc { font-size:.85rem; color:var(--text2); line-height:1.55 }
.blog-title { font-family:'Clash Display',sans-serif; font-size:1rem; font-weight:600; margin-bottom:.4rem; line-height:1.3; color:var(--text) }

/* ── DARK SECTION ─────────────────────────────────────────── */
.dark-section { background:var(--dark-bg); padding:5rem 0; position:relative; overflow:hidden }
[data-theme="dark"] .dark-section { background:#050508 }
.dark-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(37,99,235,.08) 0%, transparent 70%) }
.dark-section-inner { position:relative; z-index:1 }
.dark-section .label-tag { color:#6096FF }
.dark-section .display-lg { color:#fff }
.dark-section .section-sub { color:rgba(255,255,255,.5); max-width:560px; margin:.75rem auto 3rem; text-align:center }
.services-dark-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }
.service-card-dark {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:1.5rem; transition:all .2s;
}
.service-card-dark:hover { background:rgba(255,255,255,.08); border-color:rgba(37,99,235,.3); transform:translateY(-3px) }
.svc-icon { font-size:1.75rem; margin-bottom:1rem }
.svc-title { font-family:'Clash Display',sans-serif; font-size:1rem; font-weight:600; color:#fff; margin-bottom:.5rem }
.svc-desc { font-size:.82rem; color:rgba(255,255,255,.45); line-height:1.6 }

/* ── BLOG SECTION ─────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem }
.blog-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:all .2s }
.blog-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.blog-img { aspect-ratio:16/9; overflow:hidden }
.blog-img-ph { width:100%; height:100% }
.blog-img-ph-1 { background:linear-gradient(135deg,#1a1a2e,#16213e) }
.blog-img-ph-2 { background:linear-gradient(135deg,#0f2027,#203a43) }
.blog-img-ph-3 { background:linear-gradient(135deg,#200122,#6f0000,#cb2d3e) }
.blog-body { padding:1.25rem }
.blog-meta { display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem }
.blog-cat { font-size:.7rem; font-weight:600; padding:.2rem .6rem; border-radius:99px; background:var(--accent-light); color:var(--accent) }
.blog-date { font-size:.75rem; color:var(--text3) }
.blog-excerpt { font-size:.82rem; color:var(--text2); line-height:1.55 }
.blog-read { display:inline-flex; align-items:center; gap:.3rem; margin-top:.75rem; font-size:.82rem; font-weight:500; color:var(--accent); transition:gap .2s }
.blog-card:hover .blog-read { gap:.55rem }

/* ── TEAM SECTION ─────────────────────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem }
.team-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:all .2s; text-align:center }
.team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.team-img { aspect-ratio:1; overflow:hidden; position:relative }
.team-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Clash Display',sans-serif; font-size:2rem; font-weight:700; color:#fff }
.team-img-ph-1 { background:linear-gradient(135deg,#667eea,#764ba2) }
.team-img-ph-2 { background:linear-gradient(135deg,#f093fb,#f5576c) }
.team-img-ph-3 { background:linear-gradient(135deg,#4facfe,#00f2fe) }
.team-img-ph-4 { background:linear-gradient(135deg,#43e97b,#38f9d7) }
.team-body { padding:1.1rem }
.team-name { font-family:'Clash Display',sans-serif; font-size:.95rem; font-weight:700; margin-bottom:.2rem }
.team-role { font-size:.78rem; color:var(--accent); font-weight:500; margin-bottom:.5rem }
.team-bio { font-size:.78rem; color:var(--text3); line-height:1.5; margin-bottom:.75rem }
.team-links { display:flex; justify-content:center; gap:.4rem }
.team-link { width:28px; height:28px; border-radius:7px; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.75rem; transition:all .15s; color:var(--text3) }
.team-link:hover { background:var(--accent); border-color:var(--accent); color:#fff }

/* ── CTA BANNER ───────────────────────────────────────────── */
.cta-banner {
  background:linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  border-radius:var(--r-lg); padding:3.5rem; text-align:center;
  position:relative; overflow:hidden; margin:4rem 0;
}
.cta-banner::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") }
.cta-banner-inner { position:relative; z-index:1 }
.cta-banner h2 { font-family:'Clash Display',sans-serif; font-size:clamp(1.8rem,3vw,2.75rem); font-weight:700; color:#fff; margin-bottom:.75rem }
.cta-banner p { color:rgba(255,255,255,.7); margin-bottom:2rem; font-size:1.05rem }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.btn-white { background:#fff; color:var(--accent); padding:.7rem 1.5rem; border-radius:10px; font-weight:600; font-size:.95rem; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.4rem }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.2) }
.btn-ghost-white { background:transparent; color:#fff; padding:.7rem 1.5rem; border-radius:10px; font-weight:600; font-size:.95rem; border:1.5px solid rgba(255,255,255,.4); cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.4rem }
.btn-ghost-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7) }

/* ── CONTACT SECTION ──────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 2fr; gap:2rem; align-items:start }
.contact-info-card { background:var(--dark-bg); border-radius:var(--r-lg); padding:2rem; position:sticky; top:calc(var(--nav-h) + 1rem) }
[data-theme="dark"] .contact-info-card { background:#050508; border:1px solid rgba(255,255,255,.06) }
.contact-info-card h3 { font-family:'Clash Display',sans-serif; font-size:1.3rem; color:#fff; margin-bottom:.5rem }
.contact-info-card p { color:rgba(255,255,255,.5); font-size:.875rem; margin-bottom:1.75rem }
.contact-detail { display:flex; align-items:center; gap:.75rem; margin-bottom:1.1rem }
.contact-detail-icon { width:38px; height:38px; border-radius:9px; background:rgba(37,99,235,.15); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0 }
.contact-detail-label { font-size:.7rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em }
.contact-detail-val { font-size:.875rem; color:#fff; font-weight:500 }
.btn-whatsapp { width:100%; margin-top:1.5rem; background:#25D366; color:#fff; padding:.75rem 1.25rem; border-radius:10px; font-weight:600; font-size:.9rem; border:none; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:.5rem }
.btn-whatsapp:hover { background:#1EBE5A; transform:translateY(-1px) }
.contact-form-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:2rem }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.form-group { margin-bottom:1.1rem }
.form-label { display:block; font-size:.82rem; font-weight:500; color:var(--text2); margin-bottom:.4rem }
.form-input {
  width:100%; padding:.65rem 1rem;
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:9px; color:var(--text); font-size:.9rem; font-family:'DM Sans',sans-serif;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12) }
.form-input::placeholder { color:var(--text3) }
textarea.form-input { min-height:120px; resize:vertical }
select.form-input { cursor:pointer }
.btn-submit {
  width:100%; background:var(--accent); color:#fff; padding:.8rem 1.5rem;
  border-radius:10px; font-weight:600; font-size:.95rem; border:none; cursor:pointer;
  transition:all .2s; display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-submit:hover { background:var(--accent-h); transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--accent-rgb),.3) }

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer { background:var(--dark-bg); padding:4rem 0 0 }
[data-theme="dark"] .site-footer { border-top:1px solid rgba(255,255,255,.06) }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem }
.footer-logo { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem }
.footer-logo-icon { width:34px; height:34px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem }
.footer-logo-text { font-family:'Clash Display',sans-serif; font-size:1.2rem; font-weight:700; color:#fff }
.footer-desc { font-size:.85rem; color:rgba(255,255,255,.4); line-height:1.7; margin-bottom:1.5rem; max-width:260px }
.footer-social { display:flex; gap:.5rem }
.footer-social-btn { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:.8rem; transition:all .15s; cursor:pointer }
.footer-social-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff }
.footer-col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); margin-bottom:1rem }
.footer-col a { display:block; font-size:.875rem; color:rgba(255,255,255,.45); margin-bottom:.6rem; transition:color .15s; cursor:pointer }
.footer-col a:hover { color:#fff }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:rgba(255,255,255,.3) }
.footer-bottom-links { display:flex; gap:1.5rem }
.footer-bottom-links a { color:rgba(255,255,255,.3); transition:color .15s; cursor:pointer }
.footer-bottom-links a:hover { color:rgba(255,255,255,.7) }

/* ── PERSONALIZAÇÃO SECTION ───────────────────────────────── */
.custom-section { padding:6rem 0 }
.custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.custom-visual { position:relative }
.custom-img-wrap { background:linear-gradient(135deg,#0a2e1a 0%,#103a22 50%,#0d4a28 100%); border-radius:var(--r-lg); padding:2rem; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center }
.custom-img-inner { background:#fff; border-radius:var(--r); overflow:hidden; width:75%; aspect-ratio:3/4; box-shadow:0 20px 60px rgba(0,0,0,.3) }
.custom-quote { font-family:'Clash Display',sans-serif; font-size:1.1rem; font-weight:600; color:var(--text); text-align:center; margin-bottom:3rem; font-style:italic }
.custom-title { margin-bottom:1.25rem }
.custom-title .accent-purple { color:#7C3AED }
.custom-desc { color:var(--text2); font-size:.95rem; line-height:1.75; margin-bottom:2rem }

/* ── PLATFORMS SECTION ────────────────────────────────────── */
.platforms-section { padding:5rem 0; text-align:center }
.platforms-title .accent-purple { color:#7C3AED }
.platforms-sub { color:var(--text2); margin-bottom:2rem }
.platforms-grid { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.5rem }
.platform-pill { display:flex; align-items:center; gap:.75rem; background:var(--surface); border:1px solid var(--border2); border-radius:99px; padding:.65rem 1.25rem; font-size:.9rem; font-weight:500; color:var(--text2); transition:all .2s; cursor:default }
.platform-pill:hover { border-color:var(--accent); color:var(--text); transform:translateY(-2px); box-shadow:var(--shadow) }
.platform-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0 }
.platform-icon.spotify { background:#1DB954 }
.platform-icon.tidal   { background:#000 }
.platform-icon.apple   { background:linear-gradient(135deg,#FC5C7D,#6A82FB) }
.platform-icon.youtube { background:#FF0000 }
.platform-icon.tiktok  { background:#010101 }
.platform-icon.deezer  { background:#FF0092 }
.platform-icon.amazon  { background:#FF9900 }
.platform-icon.more    { background:var(--surface2); color:var(--text3) }

/* ── BILHETERIA SECTION ───────────────────────────────────── */
.bilheteria-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; text-align:left }
.bilheteria-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:all .2s }
.bilheteria-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.bilheteria-mockup { aspect-ratio:4/3; overflow:hidden; position:relative; background:linear-gradient(135deg,#e8f4fd 0%,#d0e8f9 100%); display:flex; align-items:center; justify-content:center; padding:1rem }
[data-theme="dark"] .bilheteria-mockup { background:linear-gradient(135deg,#0d1f2d,#1a3a4a) }
.bilheteria-body { padding:1.25rem 1.5rem }
.bilheteria-card-title { font-family:'Clash Display',sans-serif; font-size:1rem; font-weight:700; margin-bottom:.4rem }
.bilheteria-card-desc { font-size:.82rem; color:var(--text2); line-height:1.55 }

/* ── FAQ SECTION ──────────────────────────────────────────── */
.faq-section { padding:6rem 0 }
.faq-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:5rem; align-items:start }
.faq-left .accent-purple { color:#7C3AED }
.faq-left p { color:var(--text2); font-size:.9rem; line-height:1.7 }
.faq-list { display:flex; flex-direction:column; gap:.75rem }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color .2s }
.faq-item.open { border-color:var(--border2) }
.faq-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:none; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:600; color:var(--text); text-align:left; gap:1rem }
.faq-trigger:hover { background:var(--surface2) }
.faq-icon { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--surface2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:1rem; transition:transform .25s, background .2s; color:var(--text2) }
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--accent); color:#fff; border-color:var(--accent) }
.faq-body { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 1.25rem }
.faq-item.open .faq-body { max-height:400px; padding:.25rem 1.25rem 1.25rem }
.faq-answer { font-size:.875rem; color:var(--text2); line-height:1.7 }
.faq-answer p { margin-bottom:.6rem }
.faq-answer strong { color:var(--text); font-weight:600 }

/* ── PULSEIRAS BANNER ─────────────────────────────────────── */
.pulseiras-banner { margin:2rem 0 4rem; background:linear-gradient(135deg,#dbeafe 0%,#ede9fe 35%,#fce7f3 65%,#fef9c3 100%); border-radius:var(--r-lg); overflow:hidden; padding:3.5rem }
[data-theme="dark"] .pulseiras-banner { background:linear-gradient(135deg,rgba(37,99,235,.15) 0%,rgba(124,58,237,.15) 35%,rgba(236,72,153,.1) 65%,rgba(234,179,8,.08) 100%); border:1px solid rgba(255,255,255,.08) }
.pulseiras-title .accent-purple { color:#7C3AED }
.pulseiras-desc { color:var(--text2); font-size:.9rem; line-height:1.75; margin-bottom:1.5rem }

/* ── SCROLL REVEAL ────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-d1 { transition-delay:.1s }
.reveal-d2 { transition-delay:.2s }
.reveal-d3 { transition-delay:.3s }
.reveal-d4 { transition-delay:.4s }

/* ── MOBILE NAV ───────────────────────────────────────────── */
.mobile-toggle { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:.3rem; border-radius:8px; transition:background .15s }
.mobile-toggle:hover { background:var(--surface2) }
.nav-cta-desktop { display:inline-flex }
.mob-overlay { display:none; position:fixed; inset:0; z-index:490; background: var(--surface) }
.mob-overlay.open { display:flex; flex-direction:column }
.mob-overlay-bg { position:absolute; inset:0; background: var(--bg) }
[data-theme="dark"] .mob-overlay-bg { background: radial-gradient(ellipse 80% 60% at 10% 20%, rgba(37,99,235,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 80%, rgba(124,58,237,.1) 0%, transparent 55%), var(--bg) }
[data-theme="light"] .mob-overlay-bg { background: radial-gradient(ellipse 80% 60% at 10% 20%, rgba(37,99,235,.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 90% 80%, rgba(124,58,237,.04) 0%, transparent 55%), var(--bg) }
.mob-top { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; height:var(--nav-h); border-bottom:1px solid var(--border); flex-shrink:0 }
.mob-logo { display:flex; align-items:center; gap:.6rem; font-family:'Clash Display',sans-serif; font-size:1.3rem; font-weight:700; color:var(--text) }
.mob-close { width:40px; height:40px; border-radius:50%; background:var(--surface2); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); transition:all .2s }
.mob-close:hover { background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(90deg) }
.mob-body { position:relative; z-index:1; flex:1; overflow-y:auto; padding:2rem 2rem 1rem; display:flex; flex-direction:column; gap:0 }
.mob-link { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; border-bottom:1px solid var(--border); font-family:'Clash Display',sans-serif; font-size:1.6rem; font-weight:700; color:var(--text); cursor:pointer; text-decoration:none; transition:color .2s; background:none; border-left:none; border-right:none; border-top:none; width:100% }
.mob-link:last-of-type { border-bottom:none }
.mob-link:hover { color:var(--accent) }
.mob-link-num { font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:400; color:var(--text3); margin-right:.5rem }
.mob-link-arrow { width:36px; height:36px; border-radius:50%; border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; color:var(--text3); flex-shrink:0; transition:all .2s }
.mob-link:hover .mob-link-arrow { border-color:var(--accent); color:var(--accent); background:var(--accent-light) }
.mob-services { max-height:0; overflow:hidden; transition:max-height .35s ease; display:flex; flex-direction:column; gap:.25rem; padding-left:.5rem }
.mob-services.open { max-height:500px }
.mob-service-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:10px; color:var(--text2); font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:500; transition:all .15s; text-decoration:none }
.mob-service-item:hover { background:var(--surface2); color:var(--text) }
.mob-svc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.mob-bottom { position:relative; z-index:1; padding:1.25rem 2rem 2rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:1rem }
.mob-cta { flex:1; background:var(--accent); color:#fff; padding:.85rem 1.25rem; border-radius:12px; font-weight:700; font-size:1rem; text-align:center; border:none; cursor:pointer; font-family:'Clash Display',sans-serif; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none }
.mob-cta:hover { background:var(--accent-h); transform:translateY(-1px) }
.mob-lang-row { display:flex; gap:.4rem }
.mob-flag-btn { width:36px; height:36px; border-radius:8px; border:1px solid var(--border2); background:none; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:all .15s }
.mob-flag-btn:hover, .mob-flag-btn.active { border-color:var(--accent); background:var(--accent-light) }
.mob-link { opacity:0; transform:translateX(-20px); transition:opacity .3s, transform .3s, color .2s }
.mob-overlay.open .mob-link { opacity:1; transform:translateX(0) }
.mob-overlay.open .mob-link:nth-child(1) { transition-delay:.05s }
.mob-overlay.open .mob-link:nth-child(2) { transition-delay:.1s }
.mob-overlay.open .mob-link:nth-child(3) { transition-delay:.15s }
.mob-overlay.open .mob-link:nth-child(4) { transition-delay:.2s }
.mob-overlay.open .mob-link:nth-child(5) { transition-delay:.25s }

/* ── DARK MODE FIX ────────────────────────────────────────── */
[data-theme="dark"] .pcard,
[data-theme="dark"] .blog-grid > a {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}
[data-theme="dark"] .pcard:hover,
[data-theme="dark"] .blog-grid > a:hover {
  border-color: rgba(255,255,255,.18) !important;
}
[data-theme="dark"] .portfolio-title,
[data-theme="dark"] .blog-title,
[data-theme="dark"] .bilheteria-card-title,
[data-theme="dark"] .team-name {
  color: var(--text) !important;
}
[data-theme="dark"] .portfolio-tag.alt {
  color: var(--text2) !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1024px){
  .hero-inner { grid-template-columns:1fr; gap:2.5rem }
  .hero-visual { order:-1; max-width:520px; margin:0 auto }
  .team-grid { grid-template-columns:1fr 1fr }
  .services-dark-grid { grid-template-columns:1fr 1fr }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem }
}
@media(max-width:768px){
  .mobile-toggle { display:flex }
  .nav-links { display:none !important }
  .nav-cta-desktop { display:none !important }
  .portfolio-grid { grid-template-columns:1fr }
  .portfolio-card.featured { grid-column:1; grid-row:auto }
  .blog-grid { grid-template-columns:1fr }
  .contact-grid { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .custom-grid { grid-template-columns:1fr }
  .faq-grid { grid-template-columns:1fr }
  .bilheteria-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr }
  .hero-stats { flex-wrap:wrap; gap:1.25rem }
  .services-dark-grid { grid-template-columns:1fr 1fr }
  .cta-btns { flex-direction:column; align-items:center }
  .hero-inner { grid-template-columns:1fr; padding:3rem 0 }
  .hero-visual { display:none }
  .section { padding:4rem 0 }
  .mega-grid { grid-template-columns:1fr }
}
@media(max-width:480px){
  .team-grid { grid-template-columns:1fr }
  .services-dark-grid { grid-template-columns:1fr }
}