@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');
:root{--primary:#7c3aed;--accent:#06b6d4;--bg:#020617;--card:rgba(255,255,255,.075);--border:rgba(255,255,255,.13)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:#fff;overflow-x:hidden}.bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 10%,rgba(124,58,237,.28),transparent 32%),radial-gradient(circle at 80% 20%,rgba(6,182,212,.22),transparent 32%),linear-gradient(135deg,#020617,#07111f);z-index:-1}
a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 6%;background:rgba(2,6,23,.68);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}.logo{display:flex;align-items:center;gap:10px;font-weight:900}.logo span{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent))}.site-header nav{display:flex;gap:20px}.site-header nav a{opacity:.82}.top-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 22px;font-weight:900;border:1px solid var(--border);cursor:pointer}.primary,.top-cta{background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 28px rgba(124,58,237,.28)}.secondary{background:rgba(255,255,255,.08)}
.hero{min-height:78vh;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:80px 6%}.eyebrow{display:inline-flex;color:#7dd3fc;font-weight:900;margin-bottom:18px}.hero h1,.section-title h1,.section-title h2{font-size:clamp(38px,6vw,78px);line-height:1.04;margin:0 0 22px}.hero h1 span{background:linear-gradient(135deg,#fff,#7dd3fc);-webkit-background-clip:text;color:transparent}.hero p,.section-title p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.75}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.hero-card{min-height:390px;border-radius:42px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(6,182,212,.08));border:1px solid var(--border);display:grid;place-items:center;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:perspective(900px) rotateY(-9deg)}.mock{width:78%;height:240px;border-radius:28px;background:#0f172a;border:1px solid var(--border);padding:26px}.mock b{display:block;height:18px;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:30px;margin:18px}.mock span{display:block;margin:30px 18px;font-size:30px;font-weight:900}
.section{padding:80px 6%}.section-title{text-align:center;max-width:840px;margin:0 auto 46px}.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}.filters button{border:1px solid var(--border);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:11px 18px;cursor:pointer}.demo-grid,.package-grid,.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{border:1px solid var(--border);background:var(--card);border-radius:30px;padding:26px;backdrop-filter:blur(16px);box-shadow:0 25px 70px rgba(0,0,0,.22)}.demo-card{padding:0;overflow:hidden}.thumb{height:220px;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.15));display:grid;place-items:center}.thumb img,.detail-img img{width:100%;height:100%;object-fit:cover}.thumb span{font-size:34px;font-weight:900}.body{padding:24px}.body small{color:#7dd3fc;font-weight:800}.card h3{font-size:24px;margin:12px 0}.card p{color:rgba(255,255,255,.72);line-height:1.7}.card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.load-more{text-align:center;margin-top:32px}.price{font-size:32px;font-weight:900;margin:15px 0}.contact-subtitle{text-align:center!important;margin:16px auto 0!important}.contact-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}.contact-card span{color:#7dd3fc;font-weight:900}.contact-card strong{font-size:22px}.featured{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(37,211,102,.14))}.whatsapp-big{background:#25D366;color:#06130a;border-radius:999px;padding:16px 24px;font-weight:900}.address{grid-column:1/-1}.footer{padding:44px 6%;display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--border);background:rgba(2,6,23,.6)}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.detail-card{max-width:1040px;margin:auto}.detail-img{height:420px;border-radius:26px;overflow:hidden;background:rgba(255,255,255,.06)}.fav-btn{border:1px solid var(--border);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:13px 20px;font-weight:900;cursor:pointer}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.demo-grid,.package-grid,.contact-grid{grid-template-columns:1fr 1fr}.site-header nav{display:none}.hero-card{transform:none}.address{grid-column:auto}}@media(max-width:680px){.demo-grid,.package-grid,.contact-grid{grid-template-columns:1fr}.hero,.section{padding-left:22px;padding-right:22px}.footer{flex-direction:column}.hero-card{min-height:280px}.detail-img{height:250px}}

.logo img{max-height:42px;max-width:120px;object-fit:contain}.preview-toolbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 24px}.preview-toolbar button{border:1px solid var(--border);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:11px 18px;font-weight:900;cursor:pointer}.live-preview-wrap{display:flex;justify-content:center;margin:30px 0}.live-device{background:#070b25;border:7px solid #090d35;border-radius:30px;box-shadow:0 35px 80px rgba(0,0,0,.45);overflow:hidden;transition:.3s;width:100%;max-width:1180px}.live-device.mobile{width:390px;height:720px}.live-device.tablet{width:780px;height:720px}.live-device.desktop{width:100%;height:720px}.live-device iframe{width:100%;height:100%;border:0;background:#fff}.device-top{height:34px;background:#fff;color:#0f172a;display:flex;align-items:center;gap:8px;padding:0 14px;font-weight:900}.device-top i{width:10px;height:10px;border-radius:50%;background:#94a3b8}.ref-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.ref-gallery img{width:100%;height:180px;object-fit:cover;border-radius:18px}@media(max-width:680px){.live-device.mobile,.live-device.tablet,.live-device.desktop{width:100%;height:640px}.ref-gallery{grid-template-columns:1fr}}

/* TemaWeb V3 */
.mobile-menu-toggle{display:none;border:1px solid var(--border);background:rgba(255,255,255,.08);color:#fff;border-radius:14px;width:46px;height:46px;font-size:24px}
.logo img{max-width:120px;max-height:42px;object-fit:contain}
.hero-text{text-align:left}.hero .actions{align-items:center}.blog-card{padding:0;overflow:hidden}.blog-cover{width:100%;height:240px;object-fit:cover;border-radius:0!important;display:block}.blog-card-body{padding:30px}.blog-detail-cover{margin:0 0 40px 0}.blog-detail-cover img{width:100%;height:auto;max-height:540px;object-fit:cover;border-radius:0!important;display:block}.article-content{font-size:18px;line-height:1.95;color:rgba(255,255,255,.84);margin-top:30px}.article-content h1,.article-content h2{color:#fff;margin-top:36px}.ref-gallery{margin-top:22px;margin-bottom:24px}.ref-gallery img{border-radius:0!important}.ref-btn{margin-top:18px}.contact-grid,.demo-grid,.package-grid{align-items:stretch}
@media(max-width:1000px){
  .site-header{position:sticky;align-items:center}.mobile-menu-toggle{display:inline-grid;place-items:center}.site-header nav{display:none;position:absolute;left:6%;right:6%;top:78px;padding:18px;border:1px solid var(--border);border-radius:22px;background:rgba(2,6,23,.96);backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.38);z-index:30}.site-header nav.open{display:grid;gap:12px}.site-header nav a{padding:12px;border-radius:12px;background:rgba(255,255,255,.05)}.top-cta{display:none}
  .hero{text-align:center}.hero-text{text-align:center}.hero .actions{justify-content:center;display:flex;flex-direction:row}.hero p{margin-left:auto;margin-right:auto}.hero-card{margin-inline:auto;width:100%;max-width:520px}
}
@media(max-width:520px){
  .hero .actions{flex-direction:column;align-items:center}.hero .actions .btn{width:min(100%,320px)}.section-title{text-align:center}.card-actions{justify-content:center}.body{text-align:center}
}

/* TemaWeb V4 final refinements */
.load-more .btn,[data-load-more]{background:linear-gradient(135deg,var(--primary),var(--accent))!important;box-shadow:0 0 28px rgba(124,58,237,.28);color:#fff!important}
.contact-subtitle{text-align:center!important;margin-left:auto!important;margin-right:auto!important;max-width:760px}.contact-card a:not(.whatsapp-big){margin-top:10px}.whatsapp-big{display:inline-flex;align-items:center;justify-content:center;margin-top:10px}.ref-gallery{margin-top:24px;margin-bottom:28px}.ref-gallery img{border-radius:0!important}.ref-btn{margin-top:22px!important}.blog-cover,.blog-detail-cover img{border-radius:0!important}.blog-detail-cover{margin-bottom:42px!important}.article-content{padding-top:8px}.cookie-banner{position:fixed;left:24px;right:24px;bottom:24px;z-index:99;display:none;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:rgba(2,6,23,.94);backdrop-filter:blur(16px);box-shadow:0 25px 80px rgba(0,0,0,.35)}.cookie-banner.show{display:flex}.cookie-banner p{margin:0;color:rgba(255,255,255,.78)}.cookie-banner button{border:0;border-radius:999px;padding:11px 18px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:900;cursor:pointer}
@media(max-width:680px){.cookie-banner{flex-direction:column;align-items:flex-start}.cookie-banner button{width:100%}}

/* V5 Demo gallery */
.demo-gallery-slider{position:relative;margin:24px 0 44px}.demo-gallery-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 18px;scroll-behavior:smooth}.gallery-item{min-width:min(82vw,520px);height:330px;border:1px solid var(--border);background:rgba(255,255,255,.06);padding:0;cursor:pointer;scroll-snap-align:start;overflow:hidden}.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}.gallery-item:hover img{transform:scale(1.035)}.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border:1px solid var(--border);border-radius:50%;background:rgba(2,6,23,.82);color:#fff;font-size:34px;cursor:pointer}.gallery-prev{left:10px}.gallery-next{right:10px}.live-preview-section{margin-top:34px}.section-title.mini h2{font-size:clamp(30px,4vw,48px)}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:999;display:none;align-items:center;justify-content:center;padding:30px}.lightbox.open{display:flex}.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;background:#fff}.lightbox-close{position:absolute;top:22px;right:26px;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#020617;font-size:34px;cursor:pointer}@media(max-width:680px){.gallery-item{min-width:88vw;height:250px}.gallery-nav{display:none}}


/* TemaWeb V6 Premium UI */
:root{
  --tw-purple:#8b5cf6;
  --tw-blue:#0ea5e9;
  --tw-cyan:#22d3ee;
  --tw-green:#10b981;
}
body.light-mode{
  --bg:#f7f9ff;
  --card:rgba(255,255,255,.78);
  --border:rgba(15,23,42,.12);
  color:#0f172a;
}
body.light-mode .bg{
  background:radial-gradient(circle at 20% 10%,rgba(124,58,237,.16),transparent 32%),radial-gradient(circle at 80% 20%,rgba(6,182,212,.16),transparent 32%),linear-gradient(135deg,#f7f9ff,#eef6ff);
}
body.light-mode .site-header,
body.light-mode .card,
body.light-mode .modern-card{
  background:rgba(255,255,255,.78);
  color:#0f172a;
}
body.light-mode .card p,
body.light-mode .hero p,
body.light-mode .section-title p{color:rgba(15,23,42,.72)}
body.light-mode .mini-demo span,
body.light-mode .modern-trust-grid span,
body.light-mode .review-card p{color:rgba(15,23,42,.68)}

.site-header{
  width:min(96%,1500px);
  margin:18px auto 0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 70px rgba(0,0,0,.25);
}
.site-header nav a{
  position:relative;
  padding:10px 4px;
  transition:.25s ease;
}
.site-header nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--tw-purple),var(--tw-cyan));
  transition:.25s ease;
}
.site-header nav a:hover{
  color:#fff;
  transform:translateY(-2px);
}
.site-header nav a:hover::after{transform:scaleX(1)}

.theme-toggle{
  width:72px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:space-around;
  cursor:pointer;
  box-shadow:inset 0 0 18px rgba(124,58,237,.25);
}
.theme-toggle span{transition:.3s ease}
body.light-mode .theme-toggle{background:#fff;color:#0f172a}
body.light-mode .theme-toggle .sun{transform:scale(1.25)}
body:not(.light-mode) .theme-toggle .moon{transform:scale(1.25)}

.hero{
  min-height:calc(100vh - 120px);
  position:relative;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 58% 35%,rgba(59,130,246,.22),transparent 30%),radial-gradient(circle at 72% 50%,rgba(139,92,246,.26),transparent 24%);
  z-index:-1;
  animation:heroPulse 7s ease-in-out infinite alternate;
}
@keyframes heroPulse{from{opacity:.55;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}
.hero h1{
  letter-spacing:-.065em;
  text-shadow:0 0 45px rgba(124,58,237,.18);
}
.hero-card{
  position:relative;
  overflow:hidden;
  transform:perspective(1100px) rotateY(-9deg) rotateX(3deg);
  transition:.45s ease;
  border:1px solid rgba(125,211,252,.18);
}
.hero-card:hover{transform:perspective(1100px) rotateY(-4deg) rotateX(1deg) translateY(-8px)}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:conic-gradient(from 120deg,transparent,rgba(124,58,237,.45),rgba(6,182,212,.45),transparent);
  animation:liquidGlow 8s linear infinite;
  opacity:.42;
}
.hero-card > *{position:relative;z-index:1}
@keyframes liquidGlow{to{transform:rotate(360deg)}}
.actions .btn,.top-cta,.load-more .btn{
  position:relative;
  overflow:hidden;
}
.actions .btn::before,.top-cta::before,.load-more .btn::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:.6s ease;
}
.actions .btn:hover::before,.top-cta:hover::before,.load-more .btn:hover::before{transform:translateX(120%)}

.reveal-section,.demo-card,.package,.contact-card,.modern-card{
  opacity:0;
  transform:translateY(32px);
  filter:blur(10px);
  transition:opacity .75s ease,transform .75s ease,filter .75s ease;
}
.reveal-in,.demo-card.reveal-in,.package.reveal-in,.contact-card.reveal-in,.modern-card.reveal-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.demo-card,.package,.modern-card{
  transform-style:preserve-3d;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .75s ease,filter .75s ease;
}
.demo-card:hover,.package:hover,.modern-card:hover{
  border-color:rgba(125,211,252,.36);
  box-shadow:0 32px 90px rgba(59,130,246,.16),0 0 50px rgba(124,58,237,.12);
}
.thumb{position:relative;overflow:hidden}
.thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.55));
}
.thumb img{transition:transform .7s ease}
.demo-card:hover .thumb img{transform:scale(1.08)}

.modern-dashboard-section{
  width:min(96%,1500px);
  margin:-20px auto 50px;
  display:grid;
  grid-template-columns:1fr 1.1fr .9fr;
  gap:18px;
}
.modern-card{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(11,16,36,.82),rgba(8,12,28,.68));
  border-radius:22px;
  padding:26px;
  box-shadow:0 24px 80px rgba(0,0,0,.24);
}
.card-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;
}
.card-head h3{margin:0;font-size:22px}
.card-head a{color:#a78bfa;font-weight:800}
.mini-demo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini-demo{display:grid;gap:9px}
.mini-demo img{width:100%;height:150px;object-fit:cover;border-radius:14px}
.mini-demo span{font-size:14px;color:rgba(255,255,255,.82)}
.modern-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.modern-trust-grid div{display:grid;gap:8px;text-align:center}
.modern-trust-grid b{
  width:46px;height:46px;margin:auto;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(124,58,237,.18);
  border:1px solid rgba(124,58,237,.24);
}
.modern-trust-grid strong{font-size:15px}
.modern-trust-grid span{font-size:13px;color:rgba(255,255,255,.62)}
.review-card p{line-height:1.8;color:rgba(255,255,255,.75)}
.stars{color:#facc15;letter-spacing:3px}
.package-grid .package:nth-child(2){
  border-color:rgba(139,92,246,.55);
  background:linear-gradient(180deg,rgba(73,20,130,.55),rgba(17,24,39,.72));
  box-shadow:0 0 70px rgba(139,92,246,.18);
}
.package .btn{width:100%;min-height:60px;font-size:18px}

@media(max-width:1100px){
  .modern-dashboard-section{grid-template-columns:1fr}
  .modern-trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .site-header{width:100%;margin:0;border-radius:0;padding:22px 6%}
  .site-header nav{
    position:fixed!important;
    top:0!important;right:0!important;left:auto!important;
    width:min(84vw,390px);
    height:100vh;
    border-radius:0!important;
    padding:28px;
    transform:translateX(105%);
    display:grid!important;
    align-content:start;
    gap:18px!important;
    transition:.35s ease;
    background:rgba(9,11,20,.97)!important;
  }
  .site-header nav.open{transform:translateX(0)}
  .site-header nav::before{
    content:"TemaWeb";
    font-size:28px;
    font-weight:900;
    margin:20px 0 22px;
  }
  .site-header nav a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:22px;
    padding:18px 16px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.08);
  }
  .site-header nav a::after{
    content:"›";
    position:static;
    height:auto;
    transform:none;
    background:none;
    opacity:.45;
  }
  .theme-toggle{margin-left:auto}
  .hero{text-align:center;padding-top:70px}
  .hero-text{text-align:center}
  .hero h1{font-size:clamp(44px,13vw,78px)}
}
@media(max-width:620px){
  .modern-trust-grid,.mini-demo-strip{grid-template-columns:1fr}
  .mini-demo img{height:220px}
  .package .price{font-size:54px}
}


/* =========================================================
   TemaWeb V7 Premium Menu + Performance + Full Hero
   ========================================================= */
html{scroll-behavior:smooth}
body{background:#020617;color:#fff;color-scheme:dark}
body.light-mode{background:#f8fbff;color:#0f172a;color-scheme:light}
body.light-mode .bg{
  background:radial-gradient(circle at 20% 10%,rgba(124,58,237,.16),transparent 32%),radial-gradient(circle at 80% 20%,rgba(6,182,212,.16),transparent 32%),linear-gradient(135deg,#f8fbff,#eef6ff);
}
body.light-mode .site-header,
body.light-mode .card,
body.light-mode .modern-card{
  background:rgba(255,255,255,.82);
  color:#0f172a;
  border-color:rgba(15,23,42,.12);
}
body.light-mode .site-header nav a,
body.light-mode .logo{color:#0f172a!important}
body.light-mode .hero h1,
body.light-mode .section-title h1,
body.light-mode .section-title h2,
body.light-mode .card h3,
body.light-mode .modern-card h3,
body.light-mode .modern-trust-grid strong{color:#0f172a}
body.light-mode .hero p,
body.light-mode .section-title p,
body.light-mode .card p,
body.light-mode .modern-trust-grid span,
body.light-mode .review-card p{color:rgba(15,23,42,.72)}
body.light-mode .primary,
body.light-mode .top-cta,
body.light-mode .load-more .btn{color:#fff!important}
body.light-mode .eyebrow{color:#2563eb}
body.light-mode .package-grid .package:nth-child(2){color:#fff}
body.light-mode .package-grid .package:nth-child(2) p{color:rgba(255,255,255,.78)}

.site-header{
  width:min(96%,1500px);
  max-width:1500px;
  margin:18px auto 0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(3,7,18,.7);
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  z-index:200;
}
.site-header nav a{
  position:relative;
  padding:10px 4px;
  transition:transform .22s ease,color .22s ease;
}
.site-header nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  transform:scaleX(0);
  background:linear-gradient(90deg,#8b5cf6,#22d3ee);
  transition:transform .22s ease;
}
.site-header nav a:hover{color:#fff;transform:translateY(-2px)}
.site-header nav a:hover::after{transform:scaleX(1)}

.theme-toggle{
  width:72px;height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:space-around;
  cursor:pointer;
  box-shadow:inset 0 0 18px rgba(124,58,237,.25);
}
.theme-toggle span{transition:transform .25s ease}
body.light-mode .theme-toggle{background:#fff;color:#0f172a;border-color:rgba(15,23,42,.14)}
body.light-mode .theme-toggle .sun{transform:scale(1.25)}
body:not(.light-mode) .theme-toggle .moon{transform:scale(1.25)}

.hero{
  min-height:100vh!important;
  width:min(96%,1500px);
  margin:0 auto;
  padding:90px 0 70px!important;
  grid-template-columns:1fr 1.05fr;
  position:relative;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 58% 35%,rgba(59,130,246,.22),transparent 30%),radial-gradient(circle at 72% 50%,rgba(139,92,246,.26),transparent 24%);
  z-index:-1;
  animation:twHeroPulse 8s ease-in-out infinite alternate;
}
@keyframes twHeroPulse{from{opacity:.55;transform:scale(.99)}to{opacity:1;transform:scale(1.015)}}
.hero h1{
  letter-spacing:-.065em;
  text-shadow:0 0 45px rgba(124,58,237,.18);
}
.hero-card{
  min-height:620px;
  position:relative;
  overflow:hidden;
  border-radius:34px;
  background:radial-gradient(circle at 68% 36%,rgba(34,211,238,.25),transparent 26%),radial-gradient(circle at 45% 45%,rgba(139,92,246,.34),transparent 28%),linear-gradient(135deg,rgba(15,23,42,.92),rgba(2,6,23,.86));
  border:1px solid rgba(125,211,252,.18);
  transform:perspective(1100px) rotateY(-9deg) rotateX(3deg);
  transition:transform .35s ease;
}
.hero-card:hover{transform:perspective(1100px) rotateY(-4deg) rotateX(1deg) translateY(-8px)}
.hero-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:conic-gradient(from 120deg,transparent,rgba(124,58,237,.45),rgba(6,182,212,.45),transparent);
  animation:twLiquidGlow 9s linear infinite;
  opacity:.38;
}
@keyframes twLiquidGlow{to{transform:rotate(360deg)}}
.hero-card > *{position:relative;z-index:1}
.hero-card .mock{
  width:82%;
  height:360px;
  border-radius:28px;
  transform:translateZ(40px) rotate(-2deg);
  background:radial-gradient(circle at 80% 30%,rgba(34,211,238,.2),transparent 26%),linear-gradient(145deg,#0f172a,#070a1a);
  backdrop-filter:blur(18px);
}
.mock b{height:22px;margin:24px;background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
.mock span{font-size:42px}
.hero .actions{gap:18px}
.hero .btn{min-height:62px;padding:16px 28px}

.actions .btn,.top-cta,.load-more .btn,[data-load-more]{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#8b5cf6,#0ea5e9)!important;
  color:#fff!important;
}
.actions .btn::before,.top-cta::before,.load-more .btn::before,[data-load-more]::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:transform .55s ease;
}
.actions .btn:hover::before,.top-cta:hover::before,.load-more .btn:hover::before,[data-load-more]:hover::before{transform:translateX(120%)}

.reveal-section,.demo-card,.package,.contact-card,.modern-card{
  opacity:0;
  transform:translateY(30px);
  filter:blur(8px);
  transition:opacity .65s ease,transform .65s ease,filter .65s ease;
}
.reveal-in,.demo-card.reveal-in,.package.reveal-in,.contact-card.reveal-in,.modern-card.reveal-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.demo-card,.package,.modern-card{
  transform-style:preserve-3d;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,opacity .65s ease,filter .65s ease;
}
.demo-card:hover,.package:hover,.modern-card:hover{
  border-color:rgba(125,211,252,.36);
  box-shadow:0 32px 90px rgba(59,130,246,.16),0 0 50px rgba(124,58,237,.12);
}
.thumb{position:relative;overflow:hidden}
.thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.55));
}
.thumb img{transition:transform .55s ease}
.demo-card:hover .thumb img{transform:scale(1.06)}

.modern-dashboard-section{
  width:min(96%,1500px);
  margin:0 auto 40px!important;
  transform:translateY(-34px);
  display:grid;
  grid-template-columns:1fr 1.1fr .9fr;
  gap:18px;
}
.modern-card{
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(11,16,36,.82),rgba(8,12,28,.68));
  border-radius:22px;
  padding:26px;
  box-shadow:0 24px 80px rgba(0,0,0,.24);
}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px}
.card-head h3{margin:0;font-size:22px}
.card-head a{color:#a78bfa;font-weight:800}
.mini-demo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini-demo{display:grid;gap:9px}
.mini-demo img{width:100%;height:150px;object-fit:cover;border-radius:14px}
.mini-demo span{font-size:14px;color:rgba(255,255,255,.82)}
.modern-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.modern-trust-grid div{display:grid;gap:8px;text-align:center}
.modern-trust-grid b{
  width:46px;height:46px;margin:auto;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(124,58,237,.18);
  border:1px solid rgba(124,58,237,.24);
}
.modern-trust-grid strong{font-size:15px}
.modern-trust-grid span{font-size:13px;color:rgba(255,255,255,.62)}
.review-card p{line-height:1.8;color:rgba(255,255,255,.75)}
.stars{color:#facc15;letter-spacing:3px}
.package-grid .package:nth-child(2){
  border-color:rgba(139,92,246,.55);
  background:linear-gradient(180deg,rgba(73,20,130,.55),rgba(17,24,39,.72));
  box-shadow:0 0 70px rgba(139,92,246,.18);
}
.package .btn{width:100%;min-height:60px;font-size:18px}

/* Stable premium mobile menu */
.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:180;
}
.menu-backdrop.open{opacity:1;pointer-events:auto}
.mobile-menu-toggle{
  position:relative;
  display:none;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.075);
  color:#fff;
  border-radius:18px;
  width:54px;
  height:54px;
  cursor:pointer;
  z-index:230;
}
.mobile-menu-toggle span{
  position:absolute;
  width:24px;
  height:2px;
  border-radius:4px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.mobile-menu-toggle span:nth-child(1){top:18px}
.mobile-menu-toggle span:nth-child(2){top:26px}
.mobile-menu-toggle span:nth-child(3){top:34px}
.mobile-menu-toggle.active span:nth-child(1){top:26px;transform:rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){top:26px;transform:rotate(-45deg)}

@media(max-width:1100px){
  .modern-dashboard-section{grid-template-columns:1fr}
  .modern-trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .site-header{
    width:100%;
    max-width:none;
    margin:0;
    border-radius:0;
    padding:18px 22px;
  }
  .theme-toggle{width:58px;height:40px;margin-left:auto}
  .mobile-menu-toggle{display:grid}
  .site-header nav{
    position:fixed!important;
    inset:92px 18px auto 18px!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(100vh - 120px);
    overflow:auto;
    display:grid!important;
    gap:10px!important;
    padding:18px!important;
    border-radius:28px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:linear-gradient(180deg,rgba(10,14,28,.98),rgba(4,7,16,.96))!important;
    box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 60px rgba(124,58,237,.16);
    transform:translateY(-18px) scale(.96)!important;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease,transform .25s ease!important;
    z-index:220;
  }
  .site-header nav.open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1)!important;
  }
  .site-header nav::before{
    content:"Menü";
    font-size:15px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#7dd3fc;
    margin:4px 6px 10px;
  }
  .site-header nav a{
    color:#fff!important;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:20px;
    font-weight:800;
    padding:18px 20px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.08);
    transform:none!important;
  }
  .site-header nav a::after{
    content:"›";
    position:static!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    transform:none!important;
    opacity:.5;
    font-size:28px;
  }
  .site-header nav a:hover{
    background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(34,211,238,.16))!important;
  }
  .top-cta{display:none}
  .hero{
    min-height:auto!important;
    width:100%;
    padding:72px 22px 42px!important;
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-text{text-align:center}
  .hero .actions{justify-content:center;flex-direction:row;flex-wrap:wrap}
  .hero .btn{min-width:220px}
  .hero-card{
    min-height:360px;
    max-width:680px;
    width:100%;
    margin:28px auto 0;
    transform:none!important;
  }
  .hero-card .mock{height:250px}
  .modern-dashboard-section{transform:none;width:calc(100% - 36px)}
}
@media(max-width:620px){
  .modern-trust-grid,.mini-demo-strip{grid-template-columns:1fr}
  .mini-demo img{height:220px}
  .package .price{font-size:54px}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(40px,12vw,62px)}
  .hero .actions{flex-direction:column}
  .hero .btn{width:100%;max-width:340px}
  .hero-card{min-height:300px}
  .hero-card .mock{height:210px}
  .mock span{font-size:28px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(max-width:700px){
  .hero::before,.hero-card::before{animation:none!important}
  .reveal-section,.demo-card,.package,.contact-card,.modern-card{filter:none}
}


/* =========================================================
   TemaWeb V8 - Exact Premium Reference Layout Fix
   ========================================================= */
html.menu-locked{overflow:hidden}
body{
  background:#02040d!important;
  color:#fff;
  color-scheme:dark;
}
.bg{
  background:
    radial-gradient(circle at 20% 16%,rgba(124,58,237,.22),transparent 30%),
    radial-gradient(circle at 72% 22%,rgba(14,165,233,.25),transparent 34%),
    linear-gradient(135deg,#03050d 0%,#060a15 48%,#02040d 100%)!important;
}

/* Light mode readable */
body.light-mode{
  background:#f6f9ff!important;
  color:#0f172a!important;
  color-scheme:light;
}
body.light-mode .bg{
  background:
    radial-gradient(circle at 20% 16%,rgba(124,58,237,.12),transparent 30%),
    radial-gradient(circle at 72% 22%,rgba(14,165,233,.14),transparent 34%),
    linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%)!important;
}
body.light-mode .site-header,
body.light-mode .card,
body.light-mode .modern-card{
  background:rgba(255,255,255,.82)!important;
  color:#0f172a!important;
  border-color:rgba(15,23,42,.12)!important;
}
body.light-mode .site-header nav a,
body.light-mode .logo,
body.light-mode .card h3,
body.light-mode .modern-card h3,
body.light-mode .section-title h1,
body.light-mode .section-title h2,
body.light-mode .hero h1{color:#0f172a!important}
body.light-mode .hero p,
body.light-mode .section-title p,
body.light-mode .card p,
body.light-mode .modern-trust-grid span,
body.light-mode .review-card p{color:rgba(15,23,42,.72)!important}
body.light-mode .primary,
body.light-mode .top-cta,
body.light-mode .load-more .btn{color:#fff!important}
body.light-mode .eyebrow{color:#2563eb!important}
body.light-mode .package-grid .package:nth-child(2){
  background:linear-gradient(180deg,#4c1d95,#172554)!important;
  color:#fff!important;
}
body.light-mode .package-grid .package:nth-child(2) p{color:rgba(255,255,255,.78)!important}

/* Full width reference-like header */
.site-header{
  width:calc(100% - 48px)!important;
  max-width:none!important;
  margin:18px 24px 0!important;
  border-radius:18px!important;
  min-height:88px;
  padding:18px 46px!important;
  background:rgba(6,8,20,.72)!important;
  border:1px solid rgba(139,92,246,.28)!important;
  box-shadow:0 18px 70px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
  z-index:300;
}
.logo{font-size:20px}
.logo span{width:46px;height:46px;border-radius:12px}
.logo img{max-height:48px}
.site-header nav{
  gap:34px!important;
}
.site-header nav a{
  font-size:15px;
  opacity:.9;
}
.theme-toggle{
  width:76px!important;
  height:44px!important;
  border-radius:999px!important;
  border:1px solid rgba(139,92,246,.35)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  box-shadow:0 0 24px rgba(139,92,246,.25), inset 0 0 18px rgba(124,58,237,.22);
}
body.light-mode .theme-toggle{
  background:#fff!important;
  color:#0f172a!important;
}

/* Full screen hero, no side menu visual */
.hero{
  width:calc(100% - 48px)!important;
  max-width:none!important;
  min-height:calc(100vh - 120px)!important;
  margin:0 24px!important;
  padding:80px 72px 84px!important;
  grid-template-columns:0.86fr 1.14fr!important;
  border:1px solid rgba(139,92,246,.24);
  border-top:0;
  border-radius:0 0 20px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 61% 38%,rgba(37,99,235,.28),transparent 28%),
    radial-gradient(circle at 72% 45%,rgba(124,58,237,.26),transparent 30%),
    linear-gradient(135deg,rgba(13,16,38,.78),rgba(4,7,16,.72));
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,6,23,.4),transparent 55%),
    radial-gradient(circle at 66% 40%,rgba(34,211,238,.22),transparent 20%);
  z-index:-1;
  animation:twHeroSoft 9s ease-in-out infinite alternate;
}
@keyframes twHeroSoft{from{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.018)}}
.hero h1{
  font-size:clamp(52px,5.25vw,92px)!important;
  line-height:1.02!important;
  max-width:780px;
  letter-spacing:-.06em!important;
}
.hero p{
  max-width:680px;
  font-size:18px!important;
}
.hero .actions{
  margin-top:38px!important;
  gap:22px!important;
}
.hero .btn{
  min-height:62px!important;
  padding:0 30px!important;
  font-size:17px;
}
.hero-card{
  min-height:590px!important;
  height:100%;
  border-radius:34px!important;
  border:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(circle at 50% 40%,rgba(34,211,238,.36),transparent 18%),
    radial-gradient(circle at 60% 48%,rgba(139,92,246,.48),transparent 24%),
    linear-gradient(135deg,rgba(15,23,42,.05),rgba(2,6,23,.06))!important;
  transform:none!important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-card::before{
  opacity:.55!important;
  filter:blur(2px);
}
.hero-card .mock{
  width:min(78%,720px)!important;
  height:390px!important;
  border-radius:30px!important;
  transform:perspective(900px) rotateY(-10deg) rotateX(4deg)!important;
  background:
    radial-gradient(circle at 80% 35%,rgba(14,165,233,.18),transparent 24%),
    linear-gradient(145deg,#121832,#070a17)!important;
  border:1px solid rgba(125,211,252,.22)!important;
  box-shadow:0 32px 120px rgba(0,0,0,.45),0 0 70px rgba(124,58,237,.18);
}
.mock b{
  height:24px!important;
  margin:28px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#8b5cf6,#0ea5e9,#22d3ee)!important;
}
.mock span{
  font-size:42px!important;
}

/* Buttons same premium style */
.primary,.top-cta,.load-more .btn,[data-load-more]{
  background:linear-gradient(135deg,#a855f7,#0ea5e9)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 0 34px rgba(59,130,246,.24)!important;
}
.secondary{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  color:#fff!important;
}
body.light-mode .secondary{
  background:rgba(15,23,42,.06)!important;
  border-color:rgba(15,23,42,.14)!important;
  color:#0f172a!important;
}

/* Cards below reference-like */
.modern-dashboard-section{
  width:calc(100% - 48px)!important;
  max-width:none!important;
  margin:22px 24px 54px!important;
  transform:none!important;
  grid-template-columns:1fr 1.1fr .9fr!important;
}
.modern-card{
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(8,13,29,.88),rgba(4,9,22,.82))!important;
  border:1px solid rgba(125,211,252,.1)!important;
}
body.light-mode .modern-card{
  background:rgba(255,255,255,.84)!important;
}
.package-grid .package:nth-child(2){
  border-color:rgba(168,85,247,.55)!important;
  background:linear-gradient(180deg,rgba(73,20,130,.58),rgba(15,23,42,.82))!important;
}

/* Stable modern overlay menu */
.menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:250;
}
.menu-backdrop.open{
  opacity:1;
  pointer-events:auto;
}
.mobile-menu-toggle{
  position:relative;
  display:none;
  place-items:center;
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  cursor:pointer;
  z-index:360;
}
.mobile-menu-toggle span{
  position:absolute;
  width:25px;
  height:2px;
  background:currentColor;
  border-radius:4px;
  transition:.25s ease;
}
.mobile-menu-toggle span:nth-child(1){top:18px}
.mobile-menu-toggle span:nth-child(2){top:26px}
.mobile-menu-toggle span:nth-child(3){top:34px}
.mobile-menu-toggle.active span:nth-child(1){top:26px;transform:rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){top:26px;transform:rotate(-45deg)}

/* Remove broken right panel drawer behavior */
@media(max-width:1000px){
  .site-header{
    width:100%!important;
    margin:0!important;
    border-radius:0!important;
    padding:18px 22px!important;
  }
  .theme-toggle{
    width:58px!important;
    height:40px!important;
    margin-left:auto;
  }
  .mobile-menu-toggle{
    display:grid!important;
  }
  .site-header nav{
    position:fixed!important;
    inset:92px 18px auto 18px!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(100vh - 120px)!important;
    overflow:auto!important;
    display:grid!important;
    gap:10px!important;
    padding:18px!important;
    border-radius:28px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:linear-gradient(180deg,rgba(10,14,28,.98),rgba(4,7,16,.96))!important;
    box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 60px rgba(124,58,237,.16)!important;
    transform:translateY(-18px) scale(.96)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .25s ease,transform .25s ease!important;
    z-index:350!important;
  }
  .site-header nav.open{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(0) scale(1)!important;
  }
  .site-header nav::before{
    content:"Menü";
    font-size:15px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#7dd3fc;
    margin:4px 6px 10px;
  }
  .site-header nav a{
    color:#fff!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    font-size:20px!important;
    font-weight:800!important;
    padding:18px 20px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    transform:none!important;
  }
  .site-header nav a::after{
    content:"›"!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    transform:none!important;
    opacity:.5!important;
    font-size:28px!important;
  }
  .top-cta{
    display:none!important;
  }
  .hero{
    width:100%!important;
    margin:0!important;
    padding:76px 22px 50px!important;
    min-height:auto!important;
    grid-template-columns:1fr!important;
    border-left:0;
    border-right:0;
    border-radius:0 0 22px 22px;
    text-align:center;
  }
  .hero-text{
    text-align:center!important;
  }
  .hero p{
    margin-left:auto;
    margin-right:auto;
  }
  .hero .actions{
    justify-content:center!important;
    flex-wrap:wrap!important;
  }
  .hero-card{
    min-height:360px!important;
    max-width:720px!important;
    margin:28px auto 0!important;
  }
  .hero-card .mock{
    height:240px!important;
    width:86%!important;
    transform:none!important;
  }
  .modern-dashboard-section{
    width:calc(100% - 36px)!important;
    margin:22px 18px 45px!important;
    grid-template-columns:1fr!important;
  }
}
@media(max-width:560px){
  .hero h1{
    font-size:clamp(40px,12vw,62px)!important;
  }
  .hero .actions{
    flex-direction:column!important;
  }
  .hero .btn{
    width:100%;
    max-width:340px;
  }
  .hero-card{
    min-height:310px!important;
  }
  .hero-card .mock{
    height:210px!important;
  }
  .mock span{
    font-size:28px!important;
  }
}

/* performance */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(max-width:700px){
  .hero::before,.hero-card::before{animation:none!important}
  .reveal-section,.demo-card,.package,.contact-card,.modern-card{filter:none!important}
}


/* =========================================================
   TemaWeb V9 - Reference Screenshot Exact Homepage System
   ========================================================= */
.reference-hero{
  width:calc(100% - 48px)!important;
  max-width:none!important;
  min-height:calc(100vh - 122px)!important;
  margin:0 24px!important;
  padding:92px 72px 70px!important;
  display:grid!important;
  grid-template-columns:.9fr 1.1fr!important;
  align-items:center!important;
  position:relative!important;
  border:1px solid rgba(139,92,246,.28)!important;
  border-top:0!important;
  border-radius:0 0 20px 20px!important;
  background:
    linear-gradient(90deg,rgba(5,7,18,.95) 0%,rgba(10,14,38,.88) 39%,rgba(2,8,21,.82) 100%),
    radial-gradient(circle at 67% 45%,rgba(37,99,235,.3),transparent 30%),
    radial-gradient(circle at 73% 44%,rgba(124,58,237,.34),transparent 26%)!important;
  overflow:hidden!important;
}
.reference-hero .hero-text{
  position:relative;
  z-index:2;
}
.reference-hero .eyebrow{
  color:#a78bfa!important;
  font-size:17px;
  letter-spacing:.01em;
}
.reference-hero h1{
  font-size:clamp(48px,4.25vw,82px)!important;
  line-height:1.1!important;
  max-width:720px;
  letter-spacing:-.055em!important;
}
.reference-hero h1 span{
  background:linear-gradient(135deg,#a855f7,#2563eb,#22d3ee);
  -webkit-background-clip:text;
  color:transparent;
}
.reference-hero p{
  max-width:650px;
  color:rgba(255,255,255,.78)!important;
  font-size:18px!important;
  line-height:1.85!important;
}
.reference-hero .actions{
  margin-top:34px!important;
}
.whatsapp-cta{
  display:inline-flex!important;
  gap:10px;
  background:rgba(255,255,255,.08)!important;
}
.hero-slider-nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:86px;
}
.hero-slider-nav strong{
  font-size:21px;
  color:#fff;
}
.hero-slider-nav span{
  width:82px;
  height:3px;
  background:linear-gradient(90deg,#a855f7 0 55%,rgba(255,255,255,.18) 55%);
  border-radius:10px;
}
.hero-slider-nav em{
  font-style:normal;
  color:rgba(255,255,255,.55);
}
.hero-visual{
  position:relative;
  z-index:1;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual::before{
  content:"";
  position:absolute;
  width:86%;
  height:72%;
  background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.35),transparent 28%),radial-gradient(circle at 40% 50%,rgba(168,85,247,.55),transparent 32%);
  filter:blur(22px);
  opacity:.9;
}
.hero-visual img{
  position:relative;
  width:100%;
  max-width:820px;
  height:auto;
  max-height:620px;
  object-fit:contain;
  border-radius:28px;
  filter:drop-shadow(0 42px 90px rgba(0,0,0,.5));
}
.hero-device{
  position:relative;
  width:min(740px,100%);
  height:500px;
}
.floating-panel{
  position:absolute;
  border:1px solid rgba(125,211,252,.18);
  background:linear-gradient(180deg,rgba(12,17,38,.9),rgba(6,9,22,.82));
  border-radius:26px;
  box-shadow:0 38px 100px rgba(0,0,0,.45),0 0 80px rgba(124,58,237,.16);
}
.main-panel{
  inset:60px 90px 80px 20px;
  padding:54px;
  transform:perspective(900px) rotateY(-9deg) rotateX(2deg);
}
.main-panel h3{
  font-size:38px;
  line-height:1.15;
  color:#fff;
}
.main-panel p{
  font-size:15px!important;
  line-height:1.7!important;
}
.main-panel button{
  border:0;
  border-radius:10px;
  padding:13px 18px;
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#0ea5e9);
}
.stat-panel{
  right:18px;
  bottom:118px;
  width:210px;
  padding:24px;
  transform:rotate(4deg);
}
.stat-panel strong{
  display:block;
  font-size:48px;
  margin:16px 0;
}
.stat-panel i{
  display:block;
  height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(34,211,238,.25),rgba(168,85,247,.12));
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:42px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.78);
}
.scroll-cue i{
  width:22px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  position:relative;
}
.scroll-cue i::after{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:4px;
  height:8px;
  border-radius:4px;
  background:#fff;
  transform:translateX(-50%);
  animation:scrollCue 1.4s infinite;
}
@keyframes scrollCue{50%{top:20px;opacity:.35}}

.reference-overview{
  width:calc(100% - 48px);
  margin:24px 24px 56px;
  display:grid;
  grid-template-columns:1fr 1.12fr .95fr;
  gap:18px;
}
.reference-card{
  border:1px solid rgba(125,211,252,.11);
  background:linear-gradient(180deg,rgba(8,13,29,.92),rgba(3,9,22,.86));
  border-radius:16px;
  padding:28px 30px;
  box-shadow:0 28px 80px rgba(0,0,0,.24);
}
.ref-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}
.ref-card-head h3{
  font-size:24px;
  margin:0;
}
.ref-card-head h3::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  border-radius:10px;
  background:#a855f7;
  margin-top:14px;
}
.ref-card-head a{
  color:#c4b5fd;
  font-weight:800;
  background:rgba(124,58,237,.14);
  padding:12px 16px;
  border-radius:14px;
}
.live-demo-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.live-demo-mini{
  display:grid;
  gap:10px;
}
.live-demo-mini div{
  height:175px;
  border-radius:10px;
  overflow:hidden;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
}
.live-demo-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.live-demo-mini span{
  color:rgba(255,255,255,.78);
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.why-grid div{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px;
}
.why-grid b{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:14px;
  color:#c4b5fd;
  background:rgba(124,58,237,.16);
  border:1px solid rgba(124,58,237,.22);
  font-size:25px;
}
.why-grid strong{
  font-size:16px;
}
.why-grid p{
  margin:0;
  color:rgba(255,255,255,.7);
  font-size:14px;
  line-height:1.7;
}
.stats-row{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}
.stats-row div{
  padding:22px 16px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.08);
}
.stats-row div:last-child{border-right:0}
.stats-row strong{
  display:block;
  font-size:25px;
  margin-bottom:8px;
}
.stats-row span{
  color:rgba(255,255,255,.62);
  font-size:13px;
}
.testimonial-box{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:24px;
}
.person{
  display:flex;
  align-items:center;
  gap:14px;
}
.avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#8b5cf6,#0ea5e9);
  color:#fff;
  font-weight:900;
}
.person span{
  display:block;
  color:rgba(255,255,255,.56);
  font-size:13px;
  margin-top:3px;
}
.person .stars{
  margin-left:auto;
  color:#facc15;
  letter-spacing:2px;
}
.testimonial-box p{
  margin-top:24px;
  color:rgba(255,255,255,.78);
  line-height:1.85;
}
.mini-slider-dots{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.mini-slider-dots button{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.06);
}
.mini-slider-dots span,.mini-slider-dots i{
  width:22px;
  height:4px;
  border-radius:10px;
  background:rgba(255,255,255,.2);
}
.mini-slider-dots span{
  background:#a855f7;
}

body.light-mode .reference-hero{
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(238,246,255,.84))!important;
}
body.light-mode .reference-hero p,
body.light-mode .hero-slider-nav em,
body.light-mode .scroll-cue{color:rgba(15,23,42,.72)!important}
body.light-mode .hero-slider-nav strong{color:#0f172a}
body.light-mode .reference-card,
body.light-mode .testimonial-box{
  background:rgba(255,255,255,.84)!important;
  color:#0f172a!important;
  border-color:rgba(15,23,42,.12)!important;
}
body.light-mode .why-grid p,
body.light-mode .stats-row span,
body.light-mode .person span,
body.light-mode .testimonial-box p,
body.light-mode .live-demo-mini span{color:rgba(15,23,42,.68)!important}
body.light-mode .stats-row,
body.light-mode .stats-row div{border-color:rgba(15,23,42,.1)!important}

@media(max-width:1200px){
  .reference-overview{grid-template-columns:1fr}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .reference-hero{
    width:100%!important;
    margin:0!important;
    grid-template-columns:1fr!important;
    padding:72px 22px 56px!important;
    min-height:auto!important;
    text-align:center!important;
  }
  .reference-hero .hero-text{text-align:center!important}
  .reference-hero p{margin-left:auto;margin-right:auto}
  .hero-slider-nav{justify-content:center;margin-top:42px}
  .hero-visual{min-height:360px}
  .scroll-cue{display:none}
  .reference-overview{
    width:calc(100% - 36px);
    margin:22px 18px 46px;
  }
  .live-demo-row{grid-template-columns:1fr}
  .live-demo-mini div{height:240px}
}
@media(max-width:620px){
  .why-grid,.stats-row{grid-template-columns:1fr}
  .stats-row div{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .stats-row div:last-child{border-bottom:0}
}


/* TemaWeb V10 Functional Sliders + Light Mode */
.reference-hero{display:block!important}
.hero-slide{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:40px;
  position:absolute;
  inset:0;
  padding:92px 72px 70px;
  opacity:0;
  transform:translateX(32px);
  pointer-events:none;
  transition:opacity .7s ease,transform .7s ease;
}
.hero-slide.active{opacity:1;transform:translateX(0);pointer-events:auto}
.hero-lines{display:flex;align-items:center;gap:8px}
.hero-lines button{width:50px;height:3px;border:0;border-radius:10px;background:rgba(255,255,255,.18);cursor:pointer;padding:0}
.hero-lines button.active{background:linear-gradient(90deg,#a855f7,#22d3ee)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-size:34px;cursor:pointer;z-index:5;transition:.25s ease}
.hero-arrow:hover{background:linear-gradient(135deg,#8b5cf6,#0ea5e9)}
.hero-prev{left:26px}.hero-next{right:26px}
.live-demo-row{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.live-demo-row::-webkit-scrollbar{display:none}
.live-demo-mini{scroll-snap-align:start}
.testimonial-slider{position:relative;min-height:220px}
.testimonial-slider .testimonial-box{display:none}
.testimonial-slider .testimonial-box.active{display:block;animation:testFade .35s ease}
@keyframes testFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.demo-controls button,.testimonial-controls button{cursor:pointer;transition:.25s ease}
.demo-controls button:hover,.testimonial-controls button:hover{background:linear-gradient(135deg,#8b5cf6,#0ea5e9)}

body.light-mode{--bg:#f5f8ff;--card:rgba(255,255,255,.88);--border:rgba(15,23,42,.13);background:#f5f8ff!important;color:#172033!important}
body.light-mode .bg{background:radial-gradient(circle at 18% 12%,rgba(124,58,237,.13),transparent 34%),radial-gradient(circle at 75% 18%,rgba(14,165,233,.15),transparent 36%),linear-gradient(135deg,#f8fbff,#edf5ff)!important}
body.light-mode .site-header{background:rgba(255,255,255,.86)!important;color:#0f172a!important;border-color:rgba(99,102,241,.22)!important;box-shadow:0 18px 60px rgba(30,41,59,.12)}
body.light-mode .site-header nav a,body.light-mode .logo,body.light-mode .mobile-menu-toggle,body.light-mode .theme-toggle{color:#0f172a!important}
body.light-mode .mobile-menu-toggle{background:rgba(15,23,42,.05)!important;border-color:rgba(15,23,42,.14)!important}
body.light-mode .reference-hero{background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(239,246,255,.88)),radial-gradient(circle at 67% 45%,rgba(37,99,235,.13),transparent 30%),radial-gradient(circle at 73% 44%,rgba(124,58,237,.12),transparent 26%)!important;border-color:rgba(99,102,241,.18)!important}
body.light-mode .reference-hero h1,body.light-mode .section-title h1,body.light-mode .section-title h2,body.light-mode .card h3,body.light-mode .reference-card h3,body.light-mode .why-grid strong,body.light-mode .stats-row strong,body.light-mode .person strong{color:#0f172a!important}
body.light-mode .reference-hero p,body.light-mode .hero-slider-nav em,body.light-mode .scroll-cue,body.light-mode .why-grid p,body.light-mode .stats-row span,body.light-mode .person span,body.light-mode .testimonial-box p,body.light-mode .live-demo-mini span,body.light-mode .card p{color:#475569!important}
body.light-mode .hero-slider-nav strong{color:#0f172a!important}
body.light-mode .hero-lines button{background:rgba(15,23,42,.16)}
body.light-mode .hero-lines button.active{background:linear-gradient(90deg,#7c3aed,#0284c7)}
body.light-mode .reference-card,body.light-mode .card,body.light-mode .testimonial-box{background:rgba(255,255,255,.88)!important;color:#0f172a!important;border-color:rgba(15,23,42,.11)!important;box-shadow:0 22px 70px rgba(30,41,59,.12)!important}
body.light-mode .secondary{background:rgba(15,23,42,.055)!important;border-color:rgba(15,23,42,.12)!important;color:#0f172a!important}
body.light-mode .site-header nav.open{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(239,246,255,.96))!important}
body.light-mode .site-header nav.open a{color:#0f172a!important;background:rgba(15,23,42,.045)!important;border-color:rgba(15,23,42,.08)!important}
body.light-mode .site-header nav::before{color:#2563eb!important}
body.light-mode .menu-backdrop{background:rgba(15,23,42,.28)!important}
body.light-mode .package-grid .package:nth-child(2){background:linear-gradient(180deg,#4c1d95,#172554)!important;color:#fff!important}
body.light-mode .package-grid .package:nth-child(2) h3,body.light-mode .package-grid .package:nth-child(2) .price{color:#fff!important}
body.light-mode .package-grid .package:nth-child(2) p{color:rgba(255,255,255,.8)!important}

@media(max-width:1000px){
  .hero-slide{position:relative;inset:auto;display:none;grid-template-columns:1fr;padding:72px 22px 56px;text-align:center}
  .hero-slide.active{display:grid}
  .hero-arrow{display:none}
  .hero-lines{justify-content:center}
  .hero-visual{min-height:350px}
  .site-header nav.open{opacity:1!important;pointer-events:auto!important;transform:translateY(0) scale(1)!important}
}


/* TemaWeb V11 - unified functional slider controls */
.hero-arrow{display:none!important}
.slider-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:24px;
}
.hero-bottom-controls{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:8;
  margin-top:0;
}
.slider-round{
  width:54px;
  height:54px;
  border-radius:50%;
  border:0;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:30px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 12px 35px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.slider-round:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#8b5cf6,#0ea5e9);
  box-shadow:0 18px 44px rgba(59,130,246,.22);
}
.slider-lines{
  display:flex;
  align-items:center;
  gap:20px;
}
.slider-lines button{
  display:block;
  width:36px;
  height:6px;
  border:0;
  border-radius:999px;
  padding:0;
  background:rgba(148,163,184,.38);
  cursor:pointer;
  transition:width .25s ease,background .25s ease,transform .25s ease;
}
.slider-lines button.active{
  width:42px;
  background:#a855f7;
  box-shadow:0 0 18px rgba(168,85,247,.34);
}
.slider-lines button:hover{
  transform:scaleX(1.08);
}
.live-demos .slider-controls,
.testimonial-card .slider-controls{
  margin-top:22px;
}
body.light-mode .slider-round{
  background:rgba(15,23,42,.08);
  color:#0f172a;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
body.light-mode .slider-lines button{
  background:rgba(15,23,42,.22);
}
body.light-mode .slider-lines button.active{
  background:#7c3aed;
}
@media(max-width:1000px){
  .hero-bottom-controls{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin:20px auto 0;
  }
}
@media(max-width:520px){
  .slider-controls{gap:14px}
  .slider-round{width:48px;height:48px;font-size:27px}
  .slider-lines{gap:12px}
  .slider-lines button{width:30px;height:5px}
  .slider-lines button.active{width:36px}
}


/* TemaWeb V12 - Reference numeric controls + FAQ + media support */
.hero-media,.hero-visual video,.hero-visual img{
  width:100%;
  max-width:820px;
  height:auto;
  max-height:620px;
  object-fit:contain;
  border-radius:28px;
  filter:drop-shadow(0 42px 90px rgba(0,0,0,.5));
}
.thumb video,.live-demo-mini video,.ref-gallery video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.reference-number-controls{
  position:absolute!important;
  left:72px!important;
  bottom:42px!important;
  transform:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  z-index:20!important;
  margin:0!important;
}
.reference-number-controls .hero-current{
  font-size:20px;
  color:#fff;
  min-width:30px;
}
.reference-number-controls .hero-dot-numbers{
  display:flex;
  gap:32px;
  margin-left:6px;
}
.reference-number-controls .hero-dot-numbers em{
  font-style:normal;
  color:rgba(255,255,255,.48);
  font-size:13px;
}
.reference-number-controls .slider-round{
  width:46px!important;
  height:46px!important;
  background:rgba(15,23,42,.7)!important;
}
.reference-number-controls .slider-lines{
  gap:0!important;
}
.reference-number-controls .slider-lines button{
  width:74px!important;
  height:3px!important;
  border-radius:8px!important;
  background:rgba(148,163,184,.32)!important;
}
.reference-number-controls .slider-lines button.active{
  background:linear-gradient(90deg,#a855f7,#22d3ee)!important;
  box-shadow:none!important;
}
.demo-controls,.testimonial-controls{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:18px!important;
}
.demo-controls .slider-round,.testimonial-controls .slider-round{
  width:42px!important;
  height:42px!important;
  font-size:24px!important;
}
.demo-controls .slider-lines button,.testimonial-controls .slider-lines button{
  width:28px!important;
  height:4px!important;
}
.demo-controls .slider-lines button.active,.testimonial-controls .slider-lines button.active{
  width:34px!important;
}
body.light-mode .reference-number-controls .hero-current{color:#0f172a}
body.light-mode .reference-number-controls .hero-dot-numbers em{color:rgba(15,23,42,.48)}

.faq-accordion{
  width:min(980px,92%);
  margin:0 auto;
  display:grid;
  gap:14px;
}
.faq-item{
  border:1px solid var(--border);
  background:rgba(255,255,255,.055);
  border-radius:18px;
  overflow:hidden;
}
.faq-question{
  width:100%;
  border:0;
  background:transparent;
  color:#fff;
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
}
.faq-question b{
  font-size:30px;
  transition:.25s ease;
  opacity:.65;
}
.faq-item.active .faq-question b{
  transform:rotate(90deg);
  opacity:1;
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-item.active .faq-answer{
  max-height:380px;
}
.faq-answer p{
  margin:0;
  padding:0 24px 24px;
  color:rgba(255,255,255,.72);
  line-height:1.8;
}
body.light-mode .faq-item{background:rgba(255,255,255,.85);border-color:rgba(15,23,42,.12)}
body.light-mode .faq-question{color:#0f172a}
body.light-mode .faq-answer p{color:#475569}
.ref-gallery img,.ref-gallery video{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:0!important;
  display:block;
}
@media(max-width:1000px){
  .reference-number-controls{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    justify-content:center!important;
    margin:20px auto 0!important;
  }
}
@media(max-width:560px){
  .reference-number-controls{
    gap:12px!important;
    flex-wrap:wrap;
  }
  .reference-number-controls .slider-lines button{
    width:44px!important;
  }
  .reference-number-controls .hero-dot-numbers{
    gap:18px;
  }
}


/* TemaWeb V13 - hero slider layout fix + locked wheel + cover cards */
.reference-hero{
  min-height:calc(100vh - 122px)!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
}
.reference-hero .hero-slide{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  grid-template-columns:.46fr .54fr!important;
  align-items:center!important;
  gap:42px!important;
  padding:78px 88px 98px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(36px)!important;
  pointer-events:none!important;
  transition:opacity .65s ease,transform .65s ease,visibility .65s ease!important;
}
.reference-hero .hero-slide.active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(0)!important;
  pointer-events:auto!important;
}
.reference-hero .hero-text{
  min-width:0!important;
  max-width:760px!important;
}
.reference-hero h1{
  font-size:clamp(52px,4.8vw,92px)!important;
  line-height:1.08!important;
  margin-bottom:28px!important;
}
.reference-hero p{
  max-width:660px!important;
}
.reference-hero .actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:24px!important;
  margin-top:34px!important;
}
.reference-hero .actions .btn{
  min-width:220px!important;
  justify-content:center!important;
}
.reference-hero .hero-visual{
  min-width:0!important;
  min-height:560px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.reference-hero .hero-media,
.reference-hero .hero-visual img,
.reference-hero .hero-visual video{
  width:100%!important;
  max-width:900px!important;
  max-height:660px!important;
  object-fit:contain!important;
  display:block!important;
}
.reference-number-controls{
  left:72px!important;
  bottom:42px!important;
  right:auto!important;
  width:auto!important;
  max-width:640px!important;
  z-index:50!important;
}
.reference-number-controls .slider-round{
  margin-right:10px!important;
}
.reference-number-controls .hero-current{
  font-size:20px!important;
  font-weight:900!important;
  color:#fff!important;
}
.reference-number-controls .slider-lines button{
  width:76px!important;
}
.scroll-cue{
  left:50%!important;
  bottom:46px!important;
  z-index:45!important;
}
.references-grid .ref-card,
.portfolio-grid .portfolio-card{
  padding:0!important;
  overflow:hidden!important;
}
.ref-cover,
.portfolio-cover{
  width:100%!important;
  height:300px!important;
  overflow:hidden!important;
  background:#0f172a!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.ref-cover img,.ref-cover video,
.portfolio-cover img,.portfolio-cover video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.ref-body,.portfolio-body{
  padding:34px!important;
}
.ref-detail-media{
  width:100%;
  height:260px;
  margin:22px 0 6px;
  overflow:hidden;
  background:#0f172a;
}
.ref-detail-media img,.ref-detail-media video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ref-body h3,.portfolio-body h3{
  margin-top:0!important;
}
body.light-mode .ref-cover,
body.light-mode .portfolio-cover,
body.light-mode .ref-detail-media{
  background:#e2e8f0!important;
}
@media(max-width:1000px){
  .reference-hero{
    min-height:auto!important;
  }
  .reference-hero .hero-slide{
    position:relative!important;
    inset:auto!important;
    display:none!important;
    grid-template-columns:1fr!important;
    padding:70px 22px 46px!important;
    text-align:center!important;
  }
  .reference-hero .hero-slide.active{
    display:grid!important;
  }
  .reference-hero .hero-text{
    margin:0 auto!important;
  }
  .reference-hero .hero-visual{
    min-height:340px!important;
  }
  .reference-hero .actions{
    justify-content:center!important;
  }
  .reference-number-controls{
    display:none!important;
  }
  .scroll-cue{
    display:none!important;
  }
}
@media(max-width:620px){
  .ref-cover,.portfolio-cover{height:230px!important}
  .ref-body,.portfolio-body{padding:26px!important}
}


/* TemaWeb V14 - wider spacious hero + reliable live demo random cards */
.reference-hero{
  width:calc(100% - 44px)!important;
  max-width:none!important;
  min-height:720px!important;
  height:calc(100vh - 122px)!important;
  margin:0 22px!important;
  border-radius:0 0 18px 18px!important;
  background:
    linear-gradient(90deg,rgba(4,6,16,.95) 0%,rgba(10,14,38,.88) 36%,rgba(2,8,21,.82) 100%),
    radial-gradient(circle at 66% 42%,rgba(37,99,235,.35),transparent 32%),
    radial-gradient(circle at 73% 45%,rgba(124,58,237,.42),transparent 28%)!important;
}
.reference-hero .hero-slide{
  grid-template-columns:.42fr .58fr!important;
  gap:52px!important;
  padding:74px 86px 98px!important;
}
.reference-hero .hero-text{
  max-width:690px!important;
}
.reference-hero h1{
  font-size:clamp(48px,4.35vw,84px)!important;
  line-height:1.08!important;
  max-width:690px!important;
}
.reference-hero p{
  font-size:17px!important;
  line-height:1.78!important;
  max-width:610px!important;
}
.reference-hero .hero-visual{
  min-height:610px!important;
}
.reference-hero .hero-media,
.reference-hero .hero-visual img,
.reference-hero .hero-visual video{
  max-width:980px!important;
  max-height:700px!important;
}
.reference-number-controls{
  left:72px!important;
  bottom:44px!important;
}
.scroll-cue{
  bottom:44px!important;
}
.live-demo-row{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
  overflow:hidden!important;
  min-height:230px;
}
.live-demo-mini{
  opacity:1;
  transform:translateY(0);
  transition:opacity .25s ease,transform .25s ease;
}
.live-demo-mini.random-hide{
  display:none!important;
}
.live-demo-mini.random-anim{
  animation:demoRandomIn .28s ease;
}
@keyframes demoRandomIn{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.live-demo-mini div{
  height:190px!important;
}
@media(max-width:1000px){
  .reference-hero{
    width:100%!important;
    height:auto!important;
    min-height:auto!important;
    margin:0!important;
  }
  .reference-hero .hero-slide{
    padding:64px 22px 44px!important;
    gap:26px!important;
  }
  .reference-hero .hero-visual{
    min-height:360px!important;
  }
  .live-demo-row{
    grid-template-columns:1fr!important;
  }
  .live-demo-mini div{
    height:240px!important;
  }
}


/* TemaWeb V15 - remove inner hero nav */
.hero-slider-nav{
  display:none!important;
}