
:root{
  --accent:#E2FF00;
  --bg:#050505;
  --bg-soft:#0a0a0a;
  --card:#111111;
  --text:#ffffff;
  --muted:#a3a3a3;
  --border:rgba(255,255,255,.10);
  --surface:rgba(255,255,255,.03);
  --shadow:0 20px 60px rgba(0,0,0,.28);
}
html[data-theme="light"]{
  --bg:#f5f7f2;
  --bg-soft:#edf1ea;
  --card:#ffffff;
  --text:#111316;
  --muted:#54606f;
  --border:rgba(15,23,42,.10);
  --surface:rgba(255,255,255,.72);
  --shadow:0 22px 70px rgba(15,23,42,.10);
}
html,body{background:var(--bg); color:var(--text);}
.theme-toggle{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface); color:var(--text); transition:.25s ease;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.theme-toggle:hover{transform:translateY(-1px); border-color:rgba(226,255,0,.6); color:var(--accent);}
.shell-body{
  min-height:100vh;
  background:
    radial-gradient(circle at top, rgba(226,255,0,.08), transparent 26%),
    radial-gradient(circle at bottom right, rgba(255,255,255,.05), transparent 22%),
    var(--bg);
}
.shell-nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.shell-wrap{max-width:1440px; margin:0 auto; padding:0 24px;}
.shell-brand{font-family:'Syne',sans-serif; letter-spacing:-.04em;}
.shell-link{color:var(--muted); transition:.2s ease;}
.shell-link:hover,.shell-link.is-active{color:var(--text);}
.shell-hero{
  padding:112px 0 48px;
}
.shell-badge{
  display:inline-flex; align-items:center; gap:.6rem; padding:.65rem 1rem; border-radius:999px;
  border:1px solid var(--border); color:var(--accent); background:var(--surface);
  letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; font-weight:700;
}
.shell-grid{display:grid; gap:24px;}
@media(min-width:980px){.shell-grid.cols-2{grid-template-columns:1.15fr .85fr;}}
@media(min-width:980px){.shell-grid.cols-3{grid-template-columns:repeat(3,1fr);}}
.shell-card{
  background:var(--card); border:1px solid var(--border); border-radius:28px;
  box-shadow:var(--shadow); overflow:hidden;
}
.shell-card.pad{padding:28px;}
.shell-title{font-family:'Syne',sans-serif; letter-spacing:-.04em; color:var(--text);}
.shell-muted{color:var(--muted);}
.shell-prose p{color:var(--muted); line-height:1.8; margin:0 0 1rem;}
.shell-prose strong{color:var(--text);}
.shell-list{display:grid; gap:14px; padding:0; margin:0; list-style:none;}
.shell-list li{
  border:1px solid var(--border); border-radius:18px; padding:16px 18px; color:var(--muted);
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card) 100%, transparent));
}
.shell-kpi{
  display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr));
}
.shell-kpi div{
  border:1px solid var(--border); border-radius:20px; padding:18px; background:var(--surface);
}
.shell-kpi span{display:block; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px;}
.shell-kpi strong{font-size:1.1rem; color:var(--text);}
.shell-media{
  aspect-ratio:16/9; width:100%; display:block; border:0; background:#000;
}
.shell-hero-image{
  width:100%; height:100%; min-height:360px; object-fit:cover;
}
.shell-chip-row{display:flex; flex-wrap:wrap; gap:10px;}
.shell-chip{
  padding:.7rem 1rem; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); font-size:.88rem;
}
.shell-cta{
  padding:28px; border-radius:28px; background:
  linear-gradient(135deg, rgba(226,255,0,.15), rgba(226,255,0,.03) 38%, rgba(255,255,255,.03));
  border:1px solid rgba(226,255,0,.28);
}
.shell-button{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:14px 22px; border-radius:999px; text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; font-weight:700; transition:.2s ease;
}
.shell-button.primary{background:var(--accent); color:#0f1112;}
.shell-button.secondary{border:1px solid var(--border); color:var(--text); background:var(--surface);}
.shell-button:hover{transform:translateY(-1px);}
.related-grid{display:grid; gap:16px;}
@media(min-width:900px){.related-grid{grid-template-columns:repeat(3,1fr);}}
.related-card{
  border:1px solid var(--border); border-radius:24px; padding:20px; background:var(--card); display:flex; flex-direction:column; gap:14px;
}
.related-card small{color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-weight:700;}
.related-card p{color:var(--muted); line-height:1.7; margin:0;}
.brand-wall{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr));}
@media(min-width:700px){.brand-wall{grid-template-columns:repeat(5,minmax(0,1fr));}}
.brand-mark{
  min-height:88px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:22px; background:var(--surface);
  color:var(--text); font-family:'Syne',sans-serif; font-size:1rem; text-align:center; padding:18px;
}
.shell-footer{padding:38px 0 56px; color:var(--muted); border-top:1px solid var(--border);}
.breadcrumbs{display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:.9rem;}
.breadcrumbs a{color:var(--muted);}
.breadcrumbs a:hover{color:var(--text);}
.mobile-drawer{
  position:fixed; inset:0; z-index:90; display:none; opacity:0; transition:.25s ease;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px);
}
.mobile-drawer.is-open{display:flex; opacity:1;}
.mobile-drawer-panel{
  width:min(88vw,420px); height:100%; background:var(--card); border-inline-end:1px solid var(--border); padding:24px;
}
.mobile-nav-item{
  display:block; padding:14px 0; border-bottom:1px solid var(--border); color:var(--text);
  font-family:'Syne',sans-serif; font-size:1.1rem;
}
.themeable-overlay, html[data-theme="light"] #mobile-menu-overlay,
html[data-theme="light"] #video-modal, html[data-theme="light"] #youtube-modal, html[data-theme="light"] #loc-modal{
  background:rgba(245,247,242,.94)!important;
}
html[data-theme="light"] .glass-nav{background:rgba(255,255,255,.74)!important; border-bottom-color:rgba(15,23,42,.08)!important;}
html[data-theme="light"] .cinematic-gradient{background:linear-gradient(to top, rgba(245,247,242,.96) 0%, rgba(245,247,242,.62) 35%, rgba(245,247,242,0) 100%)!important;}
html[data-theme="light"] .btn-outline{color:#111316!important; border-color:rgba(15,23,42,.16)!important; background:rgba(255,255,255,.32)!important;}
html[data-theme="light"] .btn-outline:hover{border-color:#111316!important; color:#111316!important;}
html[data-theme="light"] .btn-primary:hover{color:#111316!important; border-color:#111316!important;}
html[data-theme="light"] .text-white,
html[data-theme="light"] .mix-blend-difference.text-white,
html[data-theme="light"] .mix-blend-difference{color:#111316!important; mix-blend-mode:normal!important;}
html[data-theme="light"] .text-gray-300{color:#3f4c5d!important;}
html[data-theme="light"] .text-gray-400{color:#556274!important;}
html[data-theme="light"] .text-gray-500, html[data-theme="light"] .text-gray-600{color:#64748b!important;}
html[data-theme="light"] .bg-black, html[data-theme="light"] .bg-[#050505], html[data-theme="light"] .bg-[#060606], html[data-theme="light"] .bg-[#0a0a0a]{background:#f5f7f2!important;}
html[data-theme="light"] .bg-[#111], html[data-theme="light"] .bg-black\/50{background:#ffffff!important;}
html[data-theme="light"] .border-white\/5, html[data-theme="light"] .border-white\/10, html[data-theme="light"] .border-white\/20, html[data-theme="light"] .border-gray-800, html[data-theme="light"] .border-gray-900{border-color:rgba(15,23,42,.10)!important;}
html[data-theme="light"] #mobile-menu-overlay .text-white, html[data-theme="light"] #mobile-menu-overlay .mobile-nav-link{color:#111316!important;}
html[data-theme="light"] #mobile-menu-overlay .text-gray-500{color:#64748b!important;}
html[data-theme="light"] #mobileLangBtn, html[data-theme="light"] .mobile-lang-item{background:rgba(255,255,255,.84)!important; color:#111316!important;}
html[data-theme="light"] #backToTop{border-color:#111316!important; color:#111316!important;}
html[data-theme="light"] .project-item::after{background:rgba(255,255,255,.14)!important;}
.upgrade-hub-card{
  position:relative; overflow:hidden; border:1px solid var(--border); border-radius:28px; background:var(--card); padding:24px;
  transition:.25s ease;
}
.upgrade-hub-card:hover{transform:translateY(-4px); border-color:rgba(226,255,0,.4);}
.upgrade-hub-card .label{color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:.72rem;}
.upgrade-hub-grid{display:grid; gap:18px;}
@media(min-width:960px){.upgrade-hub-grid{grid-template-columns:repeat(3,1fr);}}
.upgrade-mini-links{display:flex; flex-wrap:wrap; gap:10px;}
.upgrade-mini-links a{padding:10px 14px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:var(--surface); font-size:.83rem;}
.upgrade-mini-links a:hover{color:var(--text); border-color:rgba(226,255,0,.45);}

/* Desktop nav dropdowns */
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:14px 0;color:var(--text);font-family:'Syne',sans-serif;font-size:1rem;cursor:pointer;}
.nav-dropdown-trigger i{font-size:.72rem;color:var(--muted);}
.nav-dropdown-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:320px;padding:14px;border:1px solid var(--border);background:color-mix(in srgb, var(--card) 92%, transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;box-shadow:var(--shadow);display:none;z-index:80;}
.nav-dropdown:hover .nav-dropdown-panel{display:grid;gap:8px;}
.nav-dropdown-panel a{display:block;padding:11px 12px;border-radius:14px;color:var(--muted);}
.nav-dropdown-panel a:hover{background:var(--surface);color:var(--text);}
.nav-dropdown-more{margin-top:4px;border-top:1px solid var(--border);padding-top:12px;color:var(--accent)!important;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;}
@media(min-width:1080px){.desktop-nav{display:flex!important;}}

/* Mobile submenu */
.mobile-nav-group{border-bottom:1px solid var(--border);}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mobile-nav-head .mobile-nav-item{border-bottom:0;flex:1;}
.mobile-nav-toggle{width:40px;height:40px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.15rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.mobile-submenu{display:none;padding:0 0 14px 0;gap:8px;}
.mobile-submenu.is-open{display:grid;}
.mobile-submenu a{display:block;padding:10px 14px;border-radius:14px;background:var(--surface);color:var(--muted);font-size:.95rem;}
.mobile-submenu a:hover{color:var(--text);}
.mobile-submenu-more{color:var(--accent)!important;font-weight:700;}
.mobile-nav-item-pill{padding-inline:14px!important;border:1px solid rgba(226,255,0,.3)!important;border-radius:999px!important;background:rgba(226,255,0,.08)!important;}

/* Directory page cards */
.directory-section{margin-top:18px;}

/* Brand ribbon */
.brand-ribbon{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.brand-ribbon::-webkit-scrollbar{display:none;}
.brand-card{position:relative;min-width:180px;min-height:108px;border-radius:22px;overflow:hidden;border:1px solid var(--border);background:var(--card);display:flex;align-items:flex-end;padding:16px;box-shadow:var(--shadow);}
.brand-card__bg,.brand-card__overlay{position:absolute;inset:0;}
.brand-card__bg{background-image:var(--brand-image);background-size:cover;background-position:center;filter:blur(10px) saturate(1.1);transform:scale(1.12);opacity:.55;}
.brand-card__overlay{background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.54));}
.brand-card__name{position:relative;z-index:2;font-family:'Syne',sans-serif;font-size:1rem;color:#fff;letter-spacing:-.03em;}
html[data-theme="light"] .brand-card__overlay{background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.72));}
html[data-theme="light"] .brand-card__name{color:#111316;}

/* Landing video modals */
.video-modal-shell{width:min(1100px,96vw);background:var(--card);border:1px solid var(--border);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);display:grid;gap:0;}
@media(min-width:980px){.video-modal-shell{grid-template-columns:1.2fr .8fr;}}
.video-modal-media{background:#000;min-height:260px;}
.video-modal-meta{padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;}
#video-modal-title{font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.04;color:var(--text);margin:0 0 12px;}
.video-modal-copy{color:var(--muted);line-height:1.8;margin:0;}
.video-modal-actions{display:flex;flex-wrap:wrap;gap:10px;}
.sw-modal-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border);}
.sw-modal-title{font-family:'Syne',sans-serif;font-size:1.2rem;color:var(--text);margin:0;}
.sw-modal-links{display:flex;flex-wrap:wrap;gap:10px;}
.sw-modal-links a{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;}
.showcase-inline-links .shell-button{min-width:unset;}

/* Stronger landing light theme */
html[data-theme="light"] body{
  background:
    radial-gradient(circle at top left, rgba(226,255,0,.12), transparent 24%),
    radial-gradient(circle at top right, rgba(17,19,22,.04), transparent 18%),
    linear-gradient(180deg, #fbfcf8 0%, #f1f5ee 34%, #eef3ec 100%)!important;
}
html[data-theme="light"] .slide-bg::after{background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.05))!important;}
html[data-theme="light"] #slider-container::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(251,252,248,.06), rgba(241,245,238,.34));pointer-events:none;}
html[data-theme="light"] .glow-btn{box-shadow:0 20px 50px rgba(15,23,42,.08)!important;}
html[data-theme="light"] .glow-btn.btn-primary{color:#111316!important;}
html[data-theme="light"] .project-item:hover,
html[data-theme="light"] .project-item.is-touch-active{background:rgba(255,255,255,.7)!important;}
html[data-theme="light"] .project-item h3,
html[data-theme="light"] .project-item .text-gray-400{color:#111316!important;}
html[data-theme="light"] .project-item p{color:#64748b!important;}
html[data-theme="light"] .bts-tooltip{background:#111316!important;color:#fff!important;}
html[data-theme="light"] .sw-grid-card,
html[data-theme="light"] .sw-modal-card,
html[data-theme="light"] .shell-card,
html[data-theme="light"] .upgrade-hub-card,
html[data-theme="light"] .related-card,
html[data-theme="light"] .loc-card,
html[data-theme="light"] .cinento-shell{background:rgba(255,255,255,.78)!important;border-color:rgba(15,23,42,.1)!important;box-shadow:0 20px 60px rgba(15,23,42,.08)!important;}
html[data-theme="light"] #showcase .absolute.inset-0 img{opacity:.12!important;}
html[data-theme="light"] .sw-desc{color:#5c6b7c!important;}
html[data-theme="light"] .loc-tag,
html[data-theme="light"] .shell-chip,
html[data-theme="light"] .mobile-nav-toggle,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .sw-modal-links a,
html[data-theme="light"] .shell-button.secondary{background:rgba(255,255,255,.82)!important;color:#111316!important;border-color:rgba(15,23,42,.12)!important;}
html[data-theme="light"] .shell-button.primary{background:var(--accent)!important;color:#111316!important;}
html[data-theme="light"] #contact .absolute.inset-0{opacity:.04!important;}
html[data-theme="light"] #contact a,
html[data-theme="light"] #contact h2,
html[data-theme="light"] #contact p{color:#111316!important;}

@media(max-width:768px){
  .video-modal-shell{width:min(96vw,96vw);}
  .brand-card{min-width:150px;min-height:96px;}
  .sw-modal-meta{align-items:flex-start;}
}
