/*
Theme Name: Digi Era
Theme URI: https://digi-era.co
Author: Digi Era
Author URI: https://digi-era.co
Description: Custom WordPress theme for Digi Era — a performance marketing agency. Built around the Digi Era 2026 brand system (Digi Blue / Signal Cyan / Graphite) with dedicated templates for Services, Case Studies, Courses, and Blog. Includes custom post types, a working contact form, and Customizer options for brand contact details.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digi-era
Tags: custom-menu, featured-images, translation-ready, theme-options
*/

/* All actual styling lives in assets/css/main.css (enqueued via functions.php).
   This file only needs the header comment above for WordPress to recognize the theme. */
/* ============================================================
   Digi Era — Colors & Type
   Source of truth: brand-guidelines-v2 (Dataflow D system)
   The live website still uses LEGACY colors/fonts; do not pull
   tokens from website HTML. This file is the canonical kit.
   ============================================================ */

/* Web fonts:
   - Space Grotesk + Inter + JetBrains Mono → Google Fonts (already enqueued on live site)
   - Noto Sans Thai → SELF-HOSTED brand fonts in /fonts (replaces the IBM Plex Sans Thai
     placeholder used during initial setup). Brand-supplied; canonical for all Thai copy. */
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

     /* Noto Sans Thai — default width. Self-hosted; covers 100→900. */
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/NotoSansThai-Thin.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/NotoSansThai-ExtraLight.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/NotoSansThai-Light.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/NotoSansThai-Regular.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSansThai-Medium.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/NotoSansThai-SemiBold.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/NotoSansThai-Bold.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/NotoSansThai-ExtraBold.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/NotoSansThai-Black.ttf') format('truetype'); }
     
     /* Optional condensed widths — available via font-stretch when tighter Thai is needed. */
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-stretch: 87.5%; font-display: swap; src: url('fonts/NotoSansThai_SemiCondensed-Regular.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 700; font-stretch: 87.5%; font-display: swap; src: url('fonts/NotoSansThai_SemiCondensed-Bold.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-stretch: 75%;   font-display: swap; src: url('fonts/NotoSansThai_Condensed-Regular.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 700; font-stretch: 75%;   font-display: swap; src: url('fonts/NotoSansThai_Condensed-Bold.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-stretch: 62.5%; font-display: swap; src: url('fonts/NotoSansThai_ExtraCondensed-Regular.ttf') format('truetype'); }
     @font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 700; font-stretch: 62.5%; font-display: swap; src: url('fonts/NotoSansThai_ExtraCondensed-Bold.ttf') format('truetype'); }
     
     :root {
       /* ─── Brand core ─── */
       --digi-blue:       #1E3FA8;   /* primary brand — buttons, links, headlines */
       --digi-blue-700:   #16307F;   /* hover / pressed */
       --digi-blue-500:   #2A55C8;   /* accent tints, focus rings */
       --digi-blue-100:   #E5EBFB;   /* tinted bg */
     
       --signal-cyan:     #00C2FF;   /* the data-dot — sparingly, ALWAYS as accent */
       --signal-cyan-300: #66DAFF;
       --signal-cyan-100: #D6F4FF;
     
       --graphite:        #0F172A;   /* dark surface, body on light */
       --graphite-700:    #1E293B;
       --graphite-500:    #475569;   /* secondary text */
       --graphite-300:    #94A3B8;   /* tertiary / metadata */
       --graphite-200:    #CBD5E1;   /* borders */
       --graphite-100:    #E2E8F0;   /* subtle dividers */
     
       --off-white:       #F8FAFC;   /* page bg light */
       --white:           #FFFFFF;
     
       /* ─── Semantic ─── */
       --success:         #16A34A;
       --warning:         #F59E0B;
       --danger:          #DC2626;
       --info:            var(--signal-cyan);
     
       /* ─── Surface aliases ─── */
       --bg-page:         var(--off-white);
       --bg-surface:      var(--white);
       --bg-inverse:      var(--graphite);
       --bg-tinted:       var(--digi-blue-100);
     
       --fg-1:            var(--graphite);          /* primary text */
       --fg-2:            var(--graphite-500);      /* secondary */
       --fg-3:            var(--graphite-300);      /* tertiary / muted */
       --fg-on-blue:      var(--white);
       --fg-link:         var(--digi-blue);
       --fg-link-hover:   var(--digi-blue-700);
     
       --border-1:        var(--graphite-100);
       --border-2:        var(--graphite-200);
       --focus-ring:      0 0 0 3px rgba(42, 85, 200, 0.35);
     
       /* ─── Type families ─── */
       --font-display:    'Space Grotesk', 'Noto Sans Thai', system-ui, sans-serif;
       --font-body:       'Inter', 'Noto Sans Thai', system-ui, sans-serif;
       --font-thai:       "Noto Sans", sans-serif;
       --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
     
       /* ─── Type scale (rem; 1rem = 16px) ─── */
       --fs-display:  clamp(2.5rem, 4.2vw + 1rem, 4.5rem); /* 40 → 72 */
       --fs-h1:       clamp(2rem, 2.6vw + 1rem, 3rem);     /* 32 → 48 */
       --fs-h2:       clamp(1.625rem, 1.6vw + 1rem, 2.25rem);
       --fs-h3:       1.5rem;     /* 24 */
       --fs-h4:       1.25rem;    /* 20 */
       --fs-lead:     1.125rem;   /* 18 */
       --fs-body:     1rem;       /* 16 */
       --fs-sm:       0.875rem;   /* 14 */
       --fs-xs:       0.75rem;    /* 12 */
     
       --lh-tight:    1.1;
       --lh-snug:     1.25;
       --lh-normal:   1.5;
       --lh-relaxed:  1.7;        /* preferred for Thai body */
     
       --tracking-tight: -0.02em;
       --tracking-snug:  -0.01em;
       --tracking-wide:  0.06em;
       --tracking-caps:  0.12em;
     
       /* ─── Spacing (4px base) ─── */
       --sp-1:  4px;
       --sp-2:  8px;
       --sp-3:  12px;
       --sp-4:  16px;
       --sp-5:  24px;
       --sp-6:  32px;
       --sp-7:  48px;
       --sp-8:  64px;
       --sp-9:  96px;
       --sp-10: 128px;
     
       /* ─── Radii ─── */
       --r-xs:   4px;
       --r-sm:   8px;
       --r-md:   12px;
       --r-lg:   16px;
       --r-xl:   24px;
       --r-pill: 999px;
     
       /* ─── Elevation ─── */
       --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
       --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
       --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10);
       --shadow-blue: 0 12px 32px rgba(30, 63, 168, 0.18);
     
       /* ─── Motion ─── */
       --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
       --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
       --dur-fast:   140ms;
       --dur-base:   220ms;
       --dur-slow:   420ms;
     
       /* ─── Layout ─── */
       --container-max: 1320px;   /* matches seoinux .container-xxl */
       --gutter:        24px;
     
       /* ─── Hero / brand gradient ─── */
       --grad-hero: linear-gradient(135deg, #16307F 0%, #1E3FA8 50%, #2A55C8 100%);
       --grad-signal: linear-gradient(90deg, var(--digi-blue) 0%, var(--signal-cyan) 100%);
     }
     
     /* ─── Element-level semantic styles ─── */
     html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }
     
     h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); margin: 0 0 0.4em; letter-spacing: var(--tracking-snug); line-height: var(--lh-tight); font-weight: 700; text-wrap: balance; }
     h1 { font-size: var(--fs-h1); }
     h2 { font-size: var(--fs-h2); }
     h3 { font-size: var(--fs-h3); }
     h4 { font-size: var(--fs-h4); font-weight: 600; }
     .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
     
     p { margin: 0 0 1em; color: var(--fg-1); text-wrap: pretty; }
     .lead { font-size: var(--fs-lead); color: var(--fg-2); }
     small, .meta { font-size: var(--fs-sm); color: var(--fg-3); }
     
     /* Eyebrow — small caps label seen above section titles */
     .eyebrow {
       display: inline-flex; align-items: center; gap: 8px;
       font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
       text-transform: uppercase; letter-spacing: var(--tracking-caps);
       color: var(--digi-blue);
     }
     .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-cyan); }
     
     /* The "highlight" word treatment used in homepage h1 (e.g. ยอดขาย) */
     .h-highlight { color: var(--digi-blue); }
     .h-highlight-cyan { color: var(--signal-cyan); }
     
     a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
     a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; }
     
     code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
     code { padding: 2px 6px; background: var(--bg-tinted); border-radius: var(--r-xs); color: var(--digi-blue-700); }
     
     hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--sp-7) 0; }
     
     ::selection { background: var(--signal-cyan-100); color: var(--graphite); }
     
     .bg-1 {
         position: relative;
         background: linear-gradient(135deg, rgb(21, 48, 110) 0%, rgb(30, 63, 168) 60%, rgb(40, 73, 184) 100%);
     }
     .bg-1:before{
         content: "";
         position: absolute;
         background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
         background-size: 60px 60px;
         pointer-events: none;
         inset: 0px;
     }
     *, *::before, *::after { box-sizing: border-box; }
     html, body { margin: 0; padding: 0; }
     body {
       font-family: var(--font-body);
       font-size: 16px;
       line-height: 1.6;
       color: var(--fg-1);
       background: var(--bg-page);
       -webkit-font-smoothing: antialiased;
     }
     img { max-width: 100%; display: block; }
     a { color: inherit; text-decoration: none; }
     
     /* ---------- Layout ---------- */
     .de-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
     
     /* ---------- Header ---------- */
     .de-header {
       position: sticky; top: 0; z-index: 50;
       background: rgba(255,255,255,0.92);
       backdrop-filter: saturate(180%) blur(12px);
       -webkit-backdrop-filter: saturate(180%) blur(12px);
       border-bottom: 1px solid var(--border-1);
     }
     .de-header__inner {
       display: flex; align-items: center; justify-content: space-between;
       height: 72px;
     }
     .de-header__logo img { height: 32px; }
     .de-nav { display: flex; align-items: center; gap: 28px; }
     .de-nav__link {
       font-size: 14px; font-weight: 500; color: var(--fg-1);
       display: inline-flex; align-items: center; gap: 4px;
       transition: color var(--dur-fast) var(--ease-out);
     }
     .de-nav__link:hover { color: var(--digi-blue); }
     .de-nav__link i { font-size: 11px; opacity: 0.6; }
     .de-header__cta { display: flex; align-items: center; gap: 12px; }
     .de-lang {
       font-family: var(--font-mono); font-size: 11px; font-weight: 600;
       letter-spacing: 0.06em; color: var(--fg-2);
       padding: 6px 10px; border-radius: var(--r-sm);
     }
     .de-lang.is-active { color: var(--digi-blue); background: var(--digi-blue-100); }
     
     /* ---------- Buttons ---------- */
     .de-btn {
       display: inline-flex; align-items: center; gap: 8px;
       padding: 12px 22px; border-radius: var(--r-pill);
       font-family: var(--font-body); font-weight: 600; font-size: 14px;
       border: 0; cursor: pointer; text-decoration: none;
       transition: all var(--dur-base) var(--ease-out);
       white-space: nowrap;
     }
     .de-btn--primary a:hover {transform: translateY(-1px); text-decoration: underline;}
     .de-btn--secondary { background: transparent; color: var(--digi-blue); border: 1.5px solid var(--digi-blue); }
     .de-btn--secondary:hover { background: var(--digi-blue-100); }
     .de-btn--line { background: #06C755; color: #fff; }
     .de-btn--line:hover { background: #05a647; }
     .de-btn--ghost { background: transparent; color: var(--fg-1); padding-left: 4px; padding-right: 4px; }
     .de-btn--ghost:hover { color: var(--digi-blue); }
     .bi-arrow-right{margin-bottom: 0 !important;}
     /* ---------- Hero ---------- */
     .de-hero {
       position: relative; overflow: hidden;
       background: linear-gradient(135deg, #16307F 0%, #1E3FA8 50%, #2A55C8 100%);
     }
     .de-hero::before {
       content: "";
       position: absolute; inset: 0;
       background-image:
         radial-gradient(circle at 20% 20%, rgba(0,194,255,0.12) 0, transparent 40%),
         radial-gradient(circle at 80% 60%, rgba(102,218,255,0.10) 0, transparent 50%);
       pointer-events: none;
     }
     .de-hero__grid {
       position: relative;
       display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
     }
     .de-eyebrow p {
       display: inline-flex; align-items: center; gap: 10px;
       margin: 0 0 18px;
     }
     .de-eyebrow p::before {
       content: ""; width: 8px; height: 8px; border-radius: 50%;
       background: #00c2ff; box-shadow: 0 0 14px #00c2ff;
     }
     .de-hero__title {
       font-family: var(--font-display); font-weight: 700;
       font-size: clamp(40px, 5vw, 64px); line-height: 1.05;
       letter-spacing: -0.02em; margin: 0 0 18px;
     }
     .de-hero__title .cy { color: var(--signal-cyan); }
     .de-hero__title-th {
       font-family: "Noto Sans", sans-serif;; font-weight: 700;
       font-size: 22px; line-height: 1.4; color: rgba(255,255,255,0.78);
       margin: 0 0 28px;
     }
     .de-hero__lead {
       font-size: 17px; color: rgba(255,255,255,0.78); max-width: 540px;
       margin: 0 0 32px; line-height: 1.6;
     }
     .de-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
     .de-hero__visual {
       backdrop-filter: blur(20px);
     }
     
     /* ---------- Dataflow visual (hero side) ---------- */
     .de-flow { display: flex; flex-direction: column; gap: 14px; }
     .de-flow__row {
       display: flex; align-items: center; gap: 14px;
       padding: 14px 16px;
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.10);
       border-radius: var(--r-md);
     }
     .de-flow__icon {
       width: 36px; height: 36px; border-radius: var(--r-sm);
       display: inline-flex; align-items: center; justify-content: center;
       background: rgba(0,194,255,0.16); color: var(--signal-cyan);
       font-size: 18px; flex-shrink: 0;
     }
     .de-flow__main { flex: 1; min-width: 0; }
     .de-flow__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin: 0 0 4px; font-family: var(--font-mono); }
     .de-flow__value { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; margin: 0; }
     .de-flow__delta { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
     .de-flow__delta.up { color: #66DAFF; }
     
     /* ---------- Sections ---------- */
     .de-section { padding: 96px 0; }
     .de-section--alt { background: var(--white); }
     .de-section__head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
     .de-section__head .de-eyebrow { color: var(--digi-blue); justify-content: center; }
     .de-section__head .de-eyebrow::before { background: var(--signal-cyan); box-shadow: none; }
     .de-section__title {
       font-family: var(--font-display); font-weight: 700;
       font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1;
       letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fg-1);
     }
     .de-section__lead {
       font-size: 17px; color: var(--fg-2); margin: 0; line-height: 1.6;
     }
     
     /* ---------- Service cards ---------- */
     .de-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
     .de-service .elementor-element-populated{
       transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
         box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
     }
     .de-service .elementor-element-populated:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--digi-blue-100); }
	.de-service__icon p{
       width: 52px; height: 52px; border-radius: var(--r-sm);
       background: var(--digi-blue-100); color: var(--digi-blue);
       display: inline-flex; align-items: center; justify-content: center;
       font-size: 26px;
     }
	.arrow-right .elementor-button-content-wrapper:after{
		content: "\f138";
		font-family: bootstrap-icons !important;
			color:#0f172a;
	}
.arrow-right-w .elementor-button-content-wrapper:after{
	color:#ffffff;
}
		.de-service__icon_cyan p{background: var(--signal-cyan-100);}
     .de-service__title {
       font-family: var(--font-display); font-weight: 700;
       font-size: 20px; margin: 0 0 8px; color: var(--fg-1);
     }
     .de-service__desc { font-size: 15px; color: var(--fg-2); margin: 0 0 20px; line-height: 1.6; }
     .de-service__more {
       display: inline-flex; align-items: center; gap: 6px;
       color: var(--digi-blue); font-weight: 600; font-size: 14px;
       transition: gap var(--dur-fast) var(--ease-out);
     }
     .de-service:hover .de-service__more { gap: 10px; }
     .de-eyebrow p:before{
         content: "";
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background:#00c2ff;
     }
     /* ---------- Stats strip ---------- */
     .de-stats {
       position: relative; overflow: hidden;
     }
     .de-stats::after {
       content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
       background: linear-gradient(90deg, #1e3fa8, #00c2ff, #1e3fa8);
     }
     .de-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
     .de-stat__num .elementor-counter-number-suffix{
         font-size: 22px;
         color: rgba(255, 255, 255, 0.55);
         font-weight: 600;
         align-content:end;
     }
     .de-stat__num small { font-size: 22px; color: rgba(255,255,255,0.55); font-weight: 600; }
     .de-stat__label { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
     
     /* ---------- Case study / quote ---------- */
     .de-case {
       background: var(--white); border: 1px solid var(--border-1);
       border-radius: var(--r-lg); overflow: hidden;
       display: grid; grid-template-columns: 1fr 1fr;
     }
     .de-case__media {
       background: linear-gradient(135deg, #16307F 0%, #1E3FA8 60%, #2A55C8 100%);
       padding: 40px; color: #fff;
       display: flex; flex-direction: column; justify-content: space-between;
       min-height: 360px;
       position: relative;
     }
     .de-case__client { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-cyan-300); margin: 0 0 12px; }
     .de-case__deck { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
     .de-case__metric {
       display: flex; align-items: baseline; gap: 12px;
       padding: 12px 14px; background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-sm);
     }
     .de-case__metric b { font-family: var(--font-display); font-size: 22px; color: var(--signal-cyan); font-weight: 700; }
     .de-case__metric span { font-size: 13px; color: rgba(255,255,255,0.78); }
     .de-case__body { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
     .de-case__quote {
       font-family: var(--font-display); font-weight: 600;
       font-size: 22px; line-height: 1.4; letter-spacing: -0.01em;
       color: var(--fg-1); margin: 0 0 24px;
     }
     .de-case__cite { display: flex; align-items: center; gap: 12px; }
     .de-case__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--digi-blue-100); color: var(--digi-blue); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
     .de-case__name { font-weight: 600; font-size: 14px; color: var(--fg-1); margin: 0; }
     .de-case__role { font-size: 12px; color: var(--fg-3); margin: 0; }
     
     /* ---------- CTA band ---------- */
     .de-cta {
       background: linear-gradient(135deg, #1E3FA8 0%, #16307F 100%);
       color: #fff; padding: 72px 0; text-align: center; position: relative; overflow: hidden;
     }
     .de-cta::before {
       content: ""; position: absolute; inset: 0;
       background-image: radial-gradient(circle at 50% 120%, rgba(0,194,255,0.18) 0, transparent 50%);
     }
     .de-cta__inner { position: relative; }
     .de-cta__title {
       font-family: var(--font-display); font-weight: 700;
       font-size: clamp(28px, 3vw, 40px); line-height: 1.15;
       letter-spacing: -0.02em; margin: 0 0 12px;
     }
     .de-cta__title .cy, .cy { color: var(--signal-cyan); }
	 .arrow-right-digi-blue{color:var(--digi-blue);}
     .de-cta__lead { font-size: 17px; color: rgba(255,255,255,0.78); margin: 0 0 28px; }
     .de-cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
     
     /* ---------- Footer ---------- */
     .de-footer {
       background: var(--graphite); color: rgba(255,255,255,0.7);
       padding: 64px 0 32px; font-size: 14px;
     }
     .de-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
     .de-footer__brand img { height: 32px; margin-bottom: 16px; }
     .de-footer__tag { color: rgba(255,255,255,0.55); margin: 0 0 16px; max-width: 280px; line-height: 1.6; }
     .de-footer h5 { font-family: var(--font-display); font-size: 13px; color: #fff; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
     .de-footer ul { list-style: none; padding: 0; margin: 0; }
     .de-footer li { margin: 0 0 10px; }
     .de-footer a { color: rgba(255,255,255,0.65); transition: color var(--dur-fast); }
     .de-footer a:hover { color: var(--signal-cyan); }
     .de-footer__bottom {
       border-top: 1px solid rgba(255,255,255,0.10);
       padding-top: 24px; display: flex; justify-content: space-between;
       flex-wrap: wrap; gap: 16px;
       font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.45);
       letter-spacing: 0.04em;
     }
     
     /* ---------- Responsive ---------- */
     @media (max-width: 1024px) {
       .de-services { grid-template-columns: repeat(2, 1fr); }
       .de-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
       .de-hero__grid { grid-template-columns: 1fr; gap: 40px; }
       .de-case { grid-template-columns: 1fr; }
       .de-footer__grid { grid-template-columns: 1fr 1fr; }
     }
     @media (max-width: 767px) {
       .de-section { padding: 64px 0; }
       .de-hero { padding: 64px 0 80px; }
       .de-services { grid-template-columns: 1fr; }
       .de-nav { display: none; }
       .de-footer__grid { grid-template-columns: 1fr; gap: 32px; }
       .de-hero__title { font-size: 36px; }
     }


.spacegrotesk{font-family: "Space Grotesk", Sans-serif;}

/* ---------- Pricing tiers (3-card with price, featured tier) ---------- */
.de-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.de-pricing__tier {
  background: var(--white); border: 1px solid var(--border-1);
  border-radius: var(--r-lg); padding: 32px;
  display: flex; flex-direction: column;
  transition: all var(--dur-base) var(--ease-out);
}
.de-pricing__tier:hover { box-shadow: var(--shadow-2); border-color: var(--digi-blue-100); transform: translateY(-2px); }
.de-pricing__tier--featured {
  background: linear-gradient(180deg, var(--digi-blue) 0%, var(--digi-blue-700) 100%);
  border-color: var(--digi-blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
  position: relative;
  transform: translateY(-8px);
}
.de-pricing__tier--featured:hover { transform: translateY(-10px); }
.de-pricing__tier--featured::before {
  content: "Most Popular";
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; background: var(--signal-cyan); color: var(--graphite);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--r-pill);
}
.de-pricing__name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--digi-blue); margin: 0 0 8px;
}
.de-pricing__tier--featured .de-pricing__name { color: var(--signal-cyan); }
.de-pricing__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.2; color: var(--fg-1);
  margin: 0 0 16px;
}
.de-pricing__tier--featured .de-pricing__title { color: #fff; }
.de-pricing__price {
  display: flex; align-items: baseline; gap: 8px;
  padding: 16px 0; margin-bottom: 24px;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.de-pricing__tier--featured .de-pricing__price { border-color: rgba(255,255,255,0.18); }
.de-pricing__amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px; line-height: 1; letter-spacing: -0.02em;
  color: var(--digi-blue); margin: 0;
}
.de-pricing__tier--featured .de-pricing__amount { color: var(--signal-cyan); }
.de-pricing__unit {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-3);
}
.de-pricing__tier--featured .de-pricing__unit { color: rgba(255,255,255,0.65); }
.de-pricing__features { list-style: none; padding: 0; margin: 0 0 28px; flex: 1; }
.de-pricing__features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 14px; line-height: 1.5; color: var(--fg-2);
}
.de-pricing__tier--featured .de-pricing__features li { color: rgba(255,255,255,0.85); }
.de-pricing__features li::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  background: var(--digi-blue-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%231E3FA8' d='M6 11L2 7l1.4-1.4L6 8.2l6.6-6.6L14 3z'/></svg>") center no-repeat;
  border-radius: 50%; margin-top: 2px;
}
.de-pricing__tier--featured .de-pricing__features li::before {
  background: rgba(0,194,255,0.2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%2300C2FF' d='M6 11L2 7l1.4-1.4L6 8.2l6.6-6.6L14 3z'/></svg>") center no-repeat;
}
.de-pricing__cta { margin-top: auto; }
.testimonial .elementor-testimonial-content{
	border-bottom: 1px solid #E2E8F0;
    padding-bottom: 20px;
}
.faq .elementor-accordion-item{
	background: #ffffff;
    margin-bottom: 12px;
    border-radius: 10px;
    padding: 10px 0px;
    border: 1px solid #1e3fa8 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.de-hero-case__brand{
	padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50px;
}
.de-tag ul li span{
	background: rgba(255, 255, 255, 0.08);
    border:1px solid rgba(255, 255, 255, 0.18);
	padding: 6px 12px;
	border-radius: 50px;
}
.de-tag ul li:last-child span{
	background: rgba(0, 194, 255, 0.16);
    border-color: rgba(0, 194, 255, 0.4);
    color: var(--signal-cyan-300) !important;
}
.de-case-sidebar__tag ul li span{
	padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-page);
    border: 1px solid var(--border-1);
	margin-bottom: 5px;
}
.shadow-1{
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
}
.de-case-sidebar__label p span{
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.key {
    margin-bottom: 12px !important;
}
.key p span{
	color: #475569;
	font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.case-info .case-title span.num{
    font-family:"Space Grotesk", Sans-serif;
    font-weight: 600;
    font-size: 0.55em;
    color: var(--signal-cyan);
    margin-right: 12px;
    letter-spacing: 0.04em;
    vertical-align: 0.2em;
}
.elementor-author-box__name{
	font-size: 14px !important;
	margin-bottom: 0 !important;
}
.blog-detail h2{
	font-size: 32px;
	line-height: 1.35em;
	font-weight: 700;
}
.home .de-cta{
	margin-bottom: 0!important;
}