:root {
    --bg-primary: #07090E;
    --bg-secondary: #0D111A;
    --bg-tertiary: #131926;
    --bg-surface: #101622;
    --bg-surface-elevated: #182030;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --primary-default: #6366F1;
    --primary-hover: #4F46E5;
    --primary-active: #4338CA;
    --primary-subtle: rgba(99, 102, 241, 0.12);
    --primary-glow: rgba(99, 102, 241, 0.35);
    --secondary-default: #06B6D4;
    --secondary-hover: #0891B2;
    --secondary-active: #0E7490;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);
    --border-highlight: rgba(99, 102, 241, 0.4);
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: #07090E;
    color: #F8FAFC;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
}

.font-primary {
    font-family: var(--font-primary);
}

.font-display {
    font-family: var(--font-display);
}

.bg-dark-primary {
    background-color: #07090E;
}

.text-muted {
    color: #94A3B8 !important;
}

::selection {
    background: #6366F1;
    color: #FFFFFF;
}

/* ===== header ===== */
.ek-header-nav {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-header-nav a {
    text-decoration: none;
}

.ek-header-nav .js-mobile-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== hero_section ===== */
.ek-hero-section {
    background-color: #07090E;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-hero-section .ek-hero-grid-overlay {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
}

.ek-hero-section .ek-hero-card {
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.ek-hero-section .ek-hero-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px 0 rgba(99, 102, 241, 0.15);
}

.ek-hero-section video {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ===== our_services ===== */
.services-grid-section {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.services-grid-section .services-grid-section__card {
    backdrop-filter: blur(16px) saturate(180%);
}

.services-grid-section .services-grid-section__card:hover {
    box-shadow: 0 0 25px -5px rgba(99, 102, 241, 0.25), 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.services-grid-section .services-grid-section__btn {
    box-sizing: border-box;
}

.services-grid-section .services-grid-section__btn:hover {
    box-shadow: 0 0 20px -3px rgba(99, 102, 241, 0.45);
}

/* ===== quick_application ===== */
.ek-quick-app {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-quick-app .ek-quick-app__ambient {
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 45%);
}

.ek-quick-app .ek-quick-app__panel {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ek-quick-app .ek-quick-app__input::placeholder {
    color: #64748B;
    opacity: 1;
}

.ek-quick-app .ek-quick-app__input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.ek-quick-app .ek-quick-app__btn:hover {
    transform: translateY(-2px);
}

.ek-quick-app .ek-quick-app__btn:active {
    transform: translateY(0);
}

/* ===== common_niche_mistakes ===== */
.common-mistakes-block .mistakes-ambient-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%);
    filter: blur(40px);
}

.common-mistakes-block .js-mistake-filter {
    background-color: #101622;
    color: #94A3B8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.common-mistakes-block .js-mistake-filter:hover {
    color: #F8FAFC;
    border-color: rgba(99, 102, 241, 0.4);
    background-color: #182030;
}

.common-mistakes-block .js-mistake-filter.active-filter {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: #FFFFFF;
    border-color: #6366F1;
    box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.4);
}

.common-mistakes-block .js-mistake-card {
    will-change: transform;
}

/* ===== beginners_dictionary ===== */
.ek-dictionary {
    position: relative;
}

.ek-dictionary .js-dict-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ek-dictionary .js-dict-card.is-hidden {
    display: none;
}

.ek-dictionary .js-dict-filter.active {
    background-color: #6366F1;
    border-color: #6366F1;
    color: #FFFFFF;
}

/* ===== recent_projects ===== */
.ek-portfolio-grid {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-portfolio-grid .js-filter-btn.is-active {
    background-color: #6366F1;
    color: #FFFFFF;
    border-color: #6366F1;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.35);
}

.ek-portfolio-grid .js-portfolio-item.is-hidden {
    display: none;
}

/* ===== latest_insights ===== */
.ek-blog-section .ek-blog-card {
    backdrop-filter: blur(16px);
}

.ek-blog-section .js-filter-btn.active-filter {
    background-color: #6366F1;
    color: #FFFFFF;
    border-color: #6366F1;
}

/* ===== footer ===== */
.site-footer-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #07090E;
}

.site-footer-block .site-footer-block__link {
    position: relative;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer-block .site-footer-block__link:hover {
    transform: translateX(3px);
}

/* ===== PAGE: services ===== */
.services-showcase-section { word-break: break-word; } .services-showcase-section input::placeholder, .services-showcase-section textarea::placeholder { color: #64748B; opacity: 1; } .services-showcase-section .service-card { backdrop-filter: blur(16px); }

/* ===== PAGE: portfolio ===== */
.portfolio-showcase-section { word-break: break-word; }
.portfolio-showcase-section .js-portfolio-item { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
.portfolio-showcase-section .js-portfolio-item:hover { transform: translateY(-4px); }
.portfolio-showcase-section .js-portfolio-item.is-hidden { display: none !important; }
.portfolio-showcase-section .js-filter-btn.active { background-color: #6366F1 !important; color: #FFFFFF !important; border-color: #6366F1 !important; box-shadow: 0 0 20px -3px rgba(99, 102, 241, 0.45) !important; }

/* ===== PAGE: blog ===== */
.blog-section input::placeholder {
  color: #64748B;
  opacity: 1;
}
.blog-section .line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== PAGE: contact ===== */
.contact-page-block input::placeholder, .contact-page-block textarea::placeholder { color: #64748B; opacity: 1; }
.contact-page-block select:invalid { color: #64748B; }
.contact-page-block select option { background-color: #131926; color: #F8FAFC; }
.contact-page-block input:focus, .contact-page-block textarea:focus, .contact-page-block select:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25); }

/* ===== PAGE: privacy ===== */
.privacy-policy-section .js-policy-item { scroll-margin-top: 100px; }
.privacy-policy-section .privacy-nav .active-nav { background: rgba(99, 102, 241, 0.15); color: #F8FAFC; border: 1px solid rgba(99, 102, 241, 0.3); }

/* ===== PAGE: terms ===== */
.terms-content-section input::placeholder { color: #64748B; opacity: 1; } .terms-content-section .js-toc-link.is-active { background-color: rgba(99, 102, 241, 0.15); color: #F8FAFC; font-weight: 600; border-left: 2px solid #38BDF8; } .terms-content-section .js-terms-card { scroll-margin-top: 2rem; }

/* ===== PAGE: disclaimer ===== */
.disclaimer-page-section { box-sizing: border-box; } .disclaimer-page-section * { box-sizing: border-box; }

.tech-comment-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(16, 22, 34, 0.7) 100%);
}

.tech-avatar {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 0.05em;
}

.comment-action-btn {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-action-btn:active {
    transform: scale(0.96);
}

.tech-reply-card {
    position: relative;
}

.reply-thread-line::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 1.25rem;
    height: 1px;
    background: rgba(99, 102, 241, 0.4);
    border-radius: 9999px;
}

.tech-reply-card .tech-avatar {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
}


/* ===== PAGE TEMPLATE: services ===== */
.ek-header-nav {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-header-nav a {
    text-decoration: none;
}

.ek-header-nav .js-mobile-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ek-service-detail-page {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-service-detail-page .ek-rich-content h2,
.ek-service-detail-page .ek-rich-content h3 {
    color: #F8FAFC;
}

.site-footer-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #07090E;
}

.site-footer-block .site-footer-block__link {
    position: relative;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer-block .site-footer-block__link:hover {
    transform: translateX(3px);
}

/* ===== PAGE TEMPLATE: portfolio ===== */
.ek-header-nav {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-header-nav a {
    text-decoration: none;
}

.ek-header-nav .js-mobile-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ek-portfolio-detail .ek-detail-grid-overlay {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
}

.ek-portfolio-detail .ek-rich-content h1,
.ek-portfolio-detail .ek-rich-content h2,
.ek-portfolio-detail .ek-rich-content h3,
.ek-portfolio-detail .ek-rich-content h4,
.ek-portfolio-detail .ek-rich-content h5 {
    color: #F8FAFC;
    font-weight: 700;
}

.ek-portfolio-detail .ek-rich-content p {
    line-height: 1.65;
}

.site-footer-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #07090E;
}

.site-footer-block .site-footer-block__link {
    position: relative;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer-block .site-footer-block__link:hover {
    transform: translateX(3px);
}

/* ===== PAGE TEMPLATE: blog ===== */
.ek-header-nav {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ek-header-nav a {
    text-decoration: none;
}

.ek-header-nav .js-mobile-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #07090E;
}

.site-footer-block .site-footer-block__link {
    position: relative;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer-block .site-footer-block__link:hover {
    transform: translateX(3px);
}

.ek-blog-hero .ek-hero-grid-overlay {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
}

.ek-article-content .ek-post-body h1,
.ek-article-content .ek-post-body h2,
.ek-article-content .ek-post-body h3,
.ek-article-content .ek-post-body h4 {
    color: #F8FAFC;
    font-weight: 700;
}

.ek-article-content .ek-post-body h2 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.ek-article-content .ek-post-body p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #94A3B8;
}

.ek-article-content .ek-post-body ul {
    list-style: disc;
    margin-left: 1.25rem;
    margin-bottom: 1rem;
    color: #94A3B8;
}

.ek-article-content .ek-post-body li {
    margin-bottom: 0.5rem;
}

.ek-article-content .ek-post-body strong {
    color: #F8FAFC;
}
/* =========================================================
   EKWEBDESIGN PREMIUM VISUAL REFRESH — 2026
   Keeps existing HTML/JS and upgrades the visual system.
   ========================================================= */
:root {
    --premium-bg: #05070d;
    --premium-panel: rgba(15, 20, 33, .72);
    --premium-panel-strong: rgba(18, 24, 40, .92);
    --premium-line: rgba(255,255,255,.10);
    --premium-line-soft: rgba(255,255,255,.065);
    --premium-indigo: #7c6cff;
    --premium-cyan: #25d9ff;
    --premium-purple: #b46cff;
    --premium-text: #f7f8ff;
    --premium-muted: #a3adc2;
}

html { background: var(--premium-bg); }
body {
    background:
      radial-gradient(900px 500px at 50% -10%, rgba(99,102,241,.14), transparent 65%),
      radial-gradient(700px 500px at 100% 35%, rgba(37,217,255,.055), transparent 65%),
      var(--premium-bg);
}

/* subtle premium grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.ek-header-nav {
    background: rgba(5,7,13,.76) !important;
    border-bottom-color: rgba(255,255,255,.075) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.ek-header-nav > div:first-child > div { height: 76px !important; }
.ek-header-nav nav a { position: relative; }
.ek-header-nav nav a::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: 4px;
    height: 2px; border-radius: 99px;
    background: linear-gradient(90deg,var(--premium-cyan),var(--premium-indigo));
    transform: scaleX(0); transform-origin: center;
    transition: transform .25s ease;
}
.ek-header-nav nav a:hover::after { transform: scaleX(1); }
.ek-header-nav img { filter: drop-shadow(0 0 14px rgba(124,108,255,.35)); }

.ek-hero-section {
    min-height: 650px;
    display: flex;
    align-items: center;
    background:
      radial-gradient(650px 450px at 50% 20%, rgba(99,102,241,.17), transparent 70%),
      linear-gradient(180deg,#05070d 0%,#070a12 100%) !important;
}
.ek-hero-section .ek-hero-grid-overlay,
.ek-blog-hero .ek-hero-grid-overlay,
.ek-detail-grid-overlay {
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) !important;
    background-size: 54px 54px !important;
    mask-image: linear-gradient(to bottom,black,transparent 92%);
}
.ek-hero-section h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
    max-width: 950px;
    text-wrap: balance;
    background: linear-gradient(135deg,#fff 18%,#d9dcff 55%,#8eeaff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.ek-hero-section p { font-size: clamp(1rem,1.6vw,1.18rem) !important; color:#aab3c7 !important; max-width: 720px !important; }
.ek-hero-section a[class*="bg-gradient"] { border-radius: 14px !important; box-shadow: 0 12px 40px rgba(99,102,241,.26) !important; }
.ek-hero-section a[class*="bg-[#101622]"] { border-radius:14px !important; background:rgba(255,255,255,.045) !important; backdrop-filter:blur(12px); }

/* Shared premium cards */
.services-grid-section__card,
.js-mistake-card,
.js-dict-card,
.js-portfolio-item,
.js-article-card,
.service-card,
.portfolio-showcase-section article,
.ek-comments-section > div,
.tech-comment-card,
.tech-reply-card {
    border: 1px solid var(--premium-line) !important;
    background: linear-gradient(145deg,rgba(22,28,46,.82),rgba(10,14,24,.72)) !important;
    box-shadow: 0 16px 45px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035) !important;
    border-radius: 22px !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease !important;
}
.services-grid-section__card:hover,
.js-mistake-card:hover,
.js-dict-card:hover,
.js-portfolio-item:hover,
.js-article-card:hover,
.service-card:hover,
.portfolio-showcase-section article:hover {
    transform: translateY(-7px);
    border-color: rgba(124,108,255,.42) !important;
    box-shadow: 0 24px 65px rgba(0,0,0,.34), 0 0 45px rgba(99,102,241,.09), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.services-grid-section,
.ek-portfolio-grid,
.ek-dictionary,
.common-mistakes-block,
.blog-section,
.services-showcase-section,
.portfolio-showcase-section { background: transparent !important; }

.services-grid-section h2,
.ek-portfolio-grid h2,
.ek-dictionary h2,
.common-mistakes-block h2,
.services-showcase-section h2,
.portfolio-showcase-section h2 {
    font-family: var(--font-display);
    letter-spacing: -.035em;
}

/* Images */
.js-portfolio-item img,
.js-article-card img,
.portfolio-showcase-section img,
.ek-portfolio-detail img,
.ek-service-detail-page img,
.ek-blog-detail-page img {
    border-radius: 16px;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.js-portfolio-item:hover img,
.js-article-card:hover img { transform: scale(1.035); filter: saturate(1.08) contrast(1.02); }

/* Category/service/blog heroes */
.ek-category-hero,
.ek-service-hero,
.ek-blog-hero,
.ek-portfolio-detail {
    position: relative;
    background:
      radial-gradient(700px 350px at 50% 0%,rgba(99,102,241,.13),transparent 72%),
      transparent !important;
}
.ek-category-hero h1,
.ek-service-hero h1,
.ek-blog-hero h1,
.ek-portfolio-detail h1 {
    font-family: var(--font-display);
    letter-spacing: -.05em !important;
    line-height: 1.02 !important;
    text-wrap: balance;
}

/* Content readability */
.ek-article-content .ek-post-body,
.terms-content-section,
.privacy-policy-section,
.disclaimer-page-section {
    color: #b1bacd;
}
.ek-article-content .ek-post-body p,
.ek-article-content .ek-post-body li,
.terms-content-section p,
.privacy-policy-section p,
.disclaimer-page-section p { line-height: 1.85; }
.ek-article-content .ek-post-body h2,
.ek-article-content .ek-post-body h3 { font-family:var(--font-display); font-size:clamp(1.35rem,2vw,1.8rem); margin-top:2.2rem; }

/* Forms */
input, textarea, select {
    border-radius: 13px !important;
    border-color: rgba(255,255,255,.11) !important;
    background: rgba(255,255,255,.035) !important;
    color: #f7f8ff !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: rgba(124,108,255,.75) !important;
    box-shadow: 0 0 0 4px rgba(124,108,255,.12),0 0 25px rgba(124,108,255,.08) !important;
    outline: none !important;
}

/* CTA panels */
.ek-quick-app__panel {
    border: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(135deg,rgba(22,28,48,.88),rgba(9,13,23,.9)) !important;
    border-radius: 28px !important;
}

.site-footer-block {
    background: #04060b !important;
    border-top-color: rgba(255,255,255,.09) !important;
}
.site-footer-block a:hover { color:#8eeaff !important; }

/* Buttons */
a[class*="rounded-xl"][class*="bg-gradient"],
button[class*="rounded-xl"][class*="bg-gradient"] {
    position: relative;
    overflow: hidden;
}
a[class*="rounded-xl"][class*="bg-gradient"]::before,
button[class*="rounded-xl"][class*="bg-gradient"]::before {
    content:""; position:absolute; inset:0;
    background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);
    transform:translateX(-120%); transition:transform .65s ease;
}
a[class*="rounded-xl"][class*="bg-gradient"]:hover::before,
button[class*="rounded-xl"][class*="bg-gradient"]:hover::before { transform:translateX(120%); }

@media (max-width: 767px) {
    .ek-hero-section { min-height: 600px; padding-top: 4rem !important; padding-bottom: 4.5rem !important; }
    .ek-hero-section h1 { font-size: clamp(2.35rem,11vw,3.4rem) !important; }
    .ek-header-nav > div:first-child > div { height:68px !important; }
    .services-grid-section__card,
    .js-mistake-card,
    .js-dict-card,
    .js-portfolio-item,
    .js-article-card,
    .service-card { border-radius:18px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* =========================================================
   EK SIGNATURE SHOWCASE — UNIQUE, VIDEO-FREE HERO SYSTEM
   ========================================================= */
.ek-premium-showcase {
    position:relative;
    overflow:hidden;
    min-height:430px;
    padding:34px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:32px;
    background:
      radial-gradient(circle at 84% 25%,rgba(37,217,255,.13),transparent 26%),
      radial-gradient(circle at 22% 82%,rgba(180,108,255,.13),transparent 30%),
      linear-gradient(135deg,rgba(17,22,38,.97),rgba(5,8,15,.98));
    box-shadow:0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06);
}
.ek-premium-showcase::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.ek-showcase-orbit { position:absolute; border:1px solid rgba(124,108,255,.18); border-radius:50%; pointer-events:none; }
.ek-showcase-orbit-a { width:430px;height:430px;right:-160px;top:-170px;transform:rotate(22deg); }
.ek-showcase-orbit-b { width:280px;height:280px;right:-75px;top:-95px;border-color:rgba(37,217,255,.14); }
.ek-showcase-topline { position:relative; z-index:2; display:flex; align-items:center; gap:10px; color:#8f9bb2; font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:700; }
.ek-showcase-dot { width:7px;height:7px;border-radius:50%;background:#25d9ff;box-shadow:0 0 14px #25d9ff; }
.ek-showcase-index { margin-left:auto; color:#65708a; }
.ek-showcase-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; min-height:315px; }
.ek-showcase-copy { max-width:610px; padding-top:20px; }
.ek-kicker { color:#8b7dff; font-size:11px; letter-spacing:.22em; font-weight:800; }
.ek-showcase-copy h2 { margin:13px 0 15px; max-width:620px; font-family:var(--font-display); font-size:clamp(2rem,4vw,3.6rem); line-height:.98; letter-spacing:-.055em; color:#f8f9ff; }
.ek-showcase-copy p { max-width:520px; margin:0 0 24px; color:#9da8bc; line-height:1.7; font-size:14px; }
.ek-showcase-link { display:inline-flex; align-items:center; gap:9px; color:#e9ebff; font-size:13px; font-weight:700; text-decoration:none; }
.ek-showcase-link i { color:#25d9ff; transition:transform .25s ease; }
.ek-showcase-link:hover i { transform:translate(3px,-3px); }
.ek-showcase-dashboard { position:relative; padding:20px; border:1px solid rgba(255,255,255,.10); border-radius:24px; background:rgba(6,10,19,.72); box-shadow:0 25px 55px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(18px); }
.ek-dashboard-head { display:flex; justify-content:space-between; align-items:center; color:#c8cee0; font-size:12px; font-weight:700; }
.ek-live-label { color:#6fe7c1; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.ek-live-label i { display:inline-block;width:6px;height:6px;border-radius:50%;background:#6fe7c1;margin-right:5px;box-shadow:0 0 10px rgba(111,231,193,.8); }
.ek-dashboard-chart { height:145px; display:flex; align-items:end; gap:8px; padding:22px 4px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.ek-dashboard-chart span { flex:1; min-width:8px; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,#8b7dff,#25d9ff); box-shadow:0 0 18px rgba(124,108,255,.12); opacity:.9; }
.ek-dashboard-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:16px; }
.ek-dashboard-metrics div { padding:11px 9px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.055); }
.ek-dashboard-metrics strong { display:block; color:#f6f7ff; font-family:var(--font-display); font-size:17px; }
.ek-dashboard-metrics small { color:#727e95; font-size:9px; line-height:1.2; }
.ek-showcase-tags { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ek-showcase-tags span { padding:7px 11px; border:1px solid rgba(255,255,255,.075); border-radius:999px; background:rgba(255,255,255,.025); color:#8f9bb2; font-size:10px; font-weight:700; letter-spacing:.04em; }
@media(max-width:767px){
 .ek-premium-showcase{padding:22px;min-height:auto;border-radius:24px}
 .ek-showcase-grid{grid-template-columns:1fr;gap:22px;min-height:auto}
 .ek-showcase-copy{padding-top:12px}
 .ek-showcase-copy h2{font-size:2.35rem}
 .ek-showcase-dashboard{padding:15px}
 .ek-dashboard-chart{height:105px}
 .ek-dashboard-metrics{gap:7px}
 .ek-dashboard-metrics strong{font-size:14px}
 .ek-dashboard-metrics small{font-size:8px}
 .ek-showcase-orbit-a{right:-250px}
 .ek-showcase-orbit-b{right:-160px}
}


/* ========================= LUMVEX PREMIUM IDENTITY ========================= */
:root{
  --lv-bg:#05060a;--lv-panel:#0b0e15;--lv-panel2:#10141d;--lv-line:rgba(255,255,255,.09);
  --lv-ink:#f7f8fc;--lv-muted:#9aa4b5;--lv-violet:#8b5cf6;--lv-cyan:#22d3ee;--lv-lime:#b8f36b;
}
html{scroll-behavior:smooth}
body{background:var(--lv-bg)!important;color:var(--lv-ink);font-family:'Plus Jakarta Sans',sans-serif;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
.ek-header-nav{background:rgba(5,6,10,.78)!important;border-bottom:1px solid var(--lv-line)!important;backdrop-filter:blur(20px) saturate(140%);box-shadow:0 10px 40px rgba(0,0,0,.22)!important}
.ek-header-nav a{transition:.25s ease}
.ek-header-nav .group>div:first-child{background:linear-gradient(145deg,#171126,#0b1018)!important;border-color:rgba(139,92,246,.32)!important;box-shadow:0 0 30px rgba(139,92,246,.12)!important}
.ek-header-nav .group:hover>div:first-child{border-color:rgba(34,211,238,.7)!important;transform:rotate(-3deg)}
.ek-hero-section{background:radial-gradient(circle at 18% 20%,rgba(139,92,246,.17),transparent 28%),radial-gradient(circle at 82% 15%,rgba(34,211,238,.12),transparent 25%),#05060a!important;padding-top:72px!important;padding-bottom:90px!important}
.ek-hero-grid-overlay{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle at center,#000 0%,transparent 72%)}
.ek-hero-section h1{font-family:'Space Grotesk',sans-serif!important;font-size:clamp(2.8rem,6.5vw,6.6rem)!important;line-height:.94!important;letter-spacing:-.065em!important;max-width:1050px!important}
.ek-hero-section h1 strong,.ek-hero-section h1 span{background:linear-gradient(100deg,#fff 12%,#b8a2ff 48%,#67e8f9 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ek-hero-section p{max-width:720px!important;color:#aeb7c7!important;font-size:1rem!important}
.ek-hero-section .inline-flex.rounded-full{border-color:rgba(184,243,107,.2)!important;background:rgba(184,243,107,.06)!important;color:var(--lv-lime)!important}
.ek-hero-section a[href*="contact"]{background:linear-gradient(100deg,#8b5cf6,#6d5dfc 55%,#22d3ee)!important;box-shadow:0 15px 45px rgba(139,92,246,.25)!important;border:1px solid rgba(255,255,255,.14)}
.ek-hero-section a[href*="portfolio"]{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(12px)}
/* premium section framing */
section{position:relative}
section h2{font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.045em!important}
.services-grid-section__card,.ek-quick-app__panel{background:linear-gradient(145deg,rgba(17,21,31,.92),rgba(8,10,16,.94))!important;border-color:rgba(255,255,255,.09)!important;box-shadow:0 25px 70px rgba(0,0,0,.28)!important}
.services-grid-section__card{border-radius:26px!important}
.services-grid-section__card:hover{transform:translateY(-8px)!important;border-color:rgba(139,92,246,.45)!important;box-shadow:0 30px 80px rgba(72,43,135,.22)!important}
.services-grid-section__card img{filter:saturate(.9) contrast(1.04)}
.services-grid-section__card a:hover img{transform:scale(1.06)}
.services-grid-section__btn:hover{background:linear-gradient(100deg,#8b5cf6,#22d3ee)!important;border-color:transparent!important}
.ek-quick-app__panel{border-radius:30px!important;position:relative;overflow:hidden}
.ek-quick-app__panel:before{content:"";position:absolute;inset:-1px;background:linear-gradient(120deg,rgba(139,92,246,.3),transparent 35%,rgba(34,211,238,.18) 75%,transparent);pointer-events:none}
.ek-quick-app__input{background:#080b11!important;border-color:rgba(255,255,255,.1)!important}
.ek-quick-app__input:focus{border-color:#8b5cf6!important;box-shadow:0 0 0 4px rgba(139,92,246,.1)}
.ek-quick-app__btn{background:linear-gradient(100deg,#8b5cf6,#22d3ee)!important}
/* portfolio / content cards */
article,.rounded-2xl,.rounded-3xl{scroll-margin-top:100px}
main img{border-radius:inherit}
footer{background:#030407!important;border-top:1px solid rgba(255,255,255,.08)!important}
footer a:hover{color:#67e8f9!important}
/* subtle premium motion */
@keyframes lvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ek-hero-section .relative.z-10>div:first-child{animation:lvFloat 7s ease-in-out infinite}
@media(max-width:767px){.ek-hero-section{padding-top:48px!important;padding-bottom:64px!important}.ek-hero-section h1{font-size:clamp(2.6rem,14vw,4.3rem)!important}.services-grid-section__card{border-radius:20px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}