/* ============================================================
   MEDEVSO, Premium Website Stylesheet v2
   Warm pastels, rich gradients, Plus Jakarta Sans
   ============================================================ */

/* ============================================================
   Custom Properties
   ============================================================ */
:root {
    /* Brand */
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-light: #60A5FA;
    --primary-soft: #93C5FD;
    --primary-subtle: #DBEAFE;
    --primary-ghost: #EFF6FF;

    /* Rich Pastel Palette */
    --pastel-sky: #E0F2FE;
    --pastel-sky-mid: #BAE6FD;
    --pastel-mint: #D1FAE5;
    --pastel-mint-mid: #A7F3D0;
    --pastel-peach: #FED7AA;
    --pastel-peach-mid: #FDBA74;
    --pastel-rose: #FECDD3;
    --pastel-rose-mid: #FDA4AF;
    --pastel-lilac: #E9D5FF;
    --pastel-lilac-mid: #D8B4FE;
    --pastel-sand: #FEF3C7;
    --pastel-sand-mid: #FDE68A;
    --pastel-teal: #CCFBF1;
    --pastel-teal-mid: #99F6E4;
    --pastel-coral: #FFE4E6;
    --pastel-coral-mid: #FECACA;

    /* Accent Colors */
    --accent-blue: #3B82F6;
    --accent-indigo: #6366F1;
    --accent-emerald: #10B981;
    --accent-amber: #F59E0B;
    --accent-rose: #F43F5E;
    --accent-teal: #14B8A6;
    --accent-orange: #F97316;
    --accent-cyan: #06B6D4;

    /* Neutrals */
    --white: #FFFFFF;
    --off-white: #F8FAFC;
    --gray-50: #F1F5F9;
    --gray-100: #E2E8F0;
    --gray-200: #CBD5E1;
    --gray-300: #94A3B8;
    --gray-400: #64748B;
    --gray-500: #475569;
    --gray-600: #334155;
    --gray-700: #1E293B;
    --dark: #0F172A;

    /* Semantic */
    --success: #10B981;
    --success-light: #D1FAE5;
    --error: #EF4444;
    --error-light: #FEE2E2;

    /* Typography */
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Fluid Type */
    --text-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
    --text-base: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
    --text-lg: clamp(1.05rem, 0.98rem + 0.3vw, 1.125rem);
    --text-xl: clamp(1.15rem, 1.06rem + 0.45vw, 1.25rem);
    --text-2xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.5rem);
    --text-3xl: clamp(1.6rem, 1.35rem + 1.1vw, 2rem);
    --text-4xl: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
    --text-5xl: clamp(2.4rem, 1.8rem + 2.7vw, 3.5rem);
    --text-hero: clamp(2.8rem, 2rem + 3.5vw, 4.5rem);

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-3xl: 36px;
    --r-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 16px rgba(15,23,42,0.07), 0 2px 4px rgba(15,23,42,0.03);
    --shadow-lg: 0 12px 40px rgba(15,23,42,0.09), 0 4px 8px rgba(15,23,42,0.04);
    --shadow-xl: 0 24px 60px rgba(15,23,42,0.12), 0 8px 16px rgba(15,23,42,0.05);
    --shadow-2xl: 0 32px 80px rgba(15,23,42,0.16);
    --shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 6px 24px rgba(15,23,42,0.05);
    --shadow-card-hover: 0 12px 40px rgba(15,23,42,0.1), 0 4px 8px rgba(15,23,42,0.04);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 150ms var(--ease-out);
    --t-base: 280ms var(--ease-out);
    --t-slow: 450ms var(--ease-out);

    /* Layout */
    --container: 1200px;
    --container-narrow: 820px;
    --container-wide: 1400px;
    --header-h: 112px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--gray-500);
    background: var(--white);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-dark); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--dark);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

p + p { margin-top: var(--sp-4); }
::selection { background: var(--primary-subtle); color: var(--primary-dark); }

/* ============================================================
   Utilities
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-indigo) 50%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.skip-link {
    position: absolute; top: -100px; left: var(--sp-4); z-index: 10000;
    padding: var(--sp-3) var(--sp-6); background: var(--primary); color: white; border-radius: var(--r-md); font-weight: 600;
}
.skip-link:focus { top: var(--sp-4); color: white; }
.required { color: var(--error); font-weight: 700; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 0.7rem 1.6rem; font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 600; line-height: 1.5; border: 2px solid transparent;
    border-radius: var(--r-full); cursor: pointer; transition: all var(--t-base);
    text-decoration: none; white-space: nowrap;
}
.btn i { font-size: 0.85em; transition: transform var(--t-base); }
.btn:hover i.fa-arrow-right { transform: translateX(3px); }

.btn--primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white); border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(37,99,235,0.25);
}
.btn--primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), #1E40AF);
    color: var(--white); box-shadow: 0 8px 28px rgba(37,99,235,0.4); transform: translateY(-2px);
}

.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover {
    background: var(--primary); color: var(--white);
    transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,0.3);
}

.btn--white {
    background: var(--white); color: var(--primary); border-color: rgba(255,255,255,0.9);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.btn--white:hover {
    background: var(--off-white); color: var(--primary-dark);
    transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}

.btn--ghost {
    background: rgba(255,255,255,0.15); color: var(--white);
    border-color: rgba(255,255,255,0.3); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.25); color: var(--white); transform: translateY(-2px); }

.btn--soft { background: var(--primary-ghost); color: var(--primary); border-color: transparent; }
.btn--soft:hover { background: var(--primary-subtle); transform: translateY(-1px); }

.btn--lg { padding: 0.85rem 2rem; font-size: var(--text-base); }
.btn--sm { padding: 0.45rem 1rem; font-size: var(--text-xs); }
.btn--block { width: 100%; justify-content: center; }
.btn--nav { padding: 0.45rem 1rem; font-size: var(--text-sm); }
.btn--nav-secondary { margin-left: 0.15rem; }

/* ============================================================
   Header
   ============================================================ */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--header-h); transition: all var(--t-base);
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-bottom: 1px solid rgba(226,232,240,0);
}
.header--scrolled {
    background: rgba(255,255,255,0.92);
    border-bottom-color: rgba(226,232,240,0.6);
    box-shadow: 0 1px 12px rgba(15,23,42,0.04);
    height: 92px;
}

.header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-6);
    height: 100%;
}

/* Logo, alleen het logo-beeld, geen tekst */
.header__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.header__logo-img {
    height: 88px; width: auto; border-radius: var(--r-md);
    transition: transform var(--t-base);
}
.header--scrolled .header__logo-img { height: 76px; }
.header__logo:hover .header__logo-img { transform: scale(1.04) rotate(-2deg); }
.header__logo-text { display: none; }

/* Nav */
.nav {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 1;
    min-width: 0;
}
.nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; flex-wrap: nowrap; }
.nav__item--cta-secondary { margin-left: calc(-1 * var(--sp-1)); }
.nav__link {
    display: flex; align-items: center; gap: 4px;
    padding: 0.5rem 0.72rem; font-size: 0.9rem; font-weight: 500;
    color: var(--gray-500); border-radius: var(--r-full); transition: all var(--t-fast);
    border: none; background: none; cursor: pointer; font-family: var(--font-body); white-space: nowrap;
}
.nav__link:hover, .nav__link--active { color: var(--primary); background: var(--primary-ghost); }

.nav__item--has-children { position: static; }
.nav__chevron { transition: transform var(--t-fast); margin-left: 1px; }
.nav__item--has-children:hover .nav__chevron,
.nav__link--toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/* Mega Menu */
.mega-menu {
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 990;
    background: rgba(255,255,255,0.97); border-top: 1px solid rgba(226,232,240,0.8);
    border-bottom: 1px solid rgba(226,232,240,0.8);
    box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden;
    transform: translateY(-10px); transition: all var(--t-base); padding: var(--sp-6) 0 var(--sp-8);
}
.header--scrolled .mega-menu { top: 92px; }
.nav__item--has-children:hover .mega-menu,
.mega-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-menu__layout {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: var(--sp-6);
}

.mega-menu__intro {
    background:
        radial-gradient(circle at 0% 100%, rgba(59,130,246,0.24) 0%, rgba(59,130,246,0) 55%),
        linear-gradient(150deg, #eff6ff 0%, #f8fbff 52%, #ffffff 100%);
    border: 1px solid #dbeafe;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-6);
}

.mega-menu__kicker {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: var(--sp-3);
}

.mega-menu__title { font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--sp-3); }
.mega-menu__lead { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.7; margin-bottom: var(--sp-6); }

.mega-menu__intro-actions { display: flex; }

.mega-menu__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--gray-100);
}
.mega-menu__subtitle { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-400); }
.mega-menu__view-all {
    font-size: var(--text-sm); font-weight: 600; color: var(--primary);
    display: flex; align-items: center; gap: var(--sp-2);
}
.mega-menu__view-all:hover i { transform: translateX(4px); }
.mega-menu__view-all i { transition: transform var(--t-fast); }

.mega-menu__secondary-link {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
}

.mega-menu__secondary-link:hover { color: var(--primary); }

.mega-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }

.mega-menu__item {
    display: flex; gap: var(--sp-3); padding: var(--sp-4);
    border-radius: var(--r-lg); transition: all var(--t-fast); text-decoration: none;
    border: 1px solid var(--gray-100);
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
    min-height: 100%;
}
.mega-menu__item:hover {
    border-color: #bfdbfe;
    box-shadow: 0 10px 22px rgba(37,99,235,0.12);
    transform: translateY(-2px);
}

.mega-menu__icon {
    flex-shrink: 0; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); font-size: 0.95rem; transition: all var(--t-fast);
}
.mega-menu__item:nth-child(1) .mega-menu__icon { background: var(--pastel-sky); color: var(--accent-blue); }
.mega-menu__item:nth-child(2) .mega-menu__icon { background: var(--pastel-lilac); color: var(--accent-indigo); }
.mega-menu__item:nth-child(3) .mega-menu__icon { background: var(--pastel-mint); color: var(--accent-emerald); }
.mega-menu__item:nth-child(4) .mega-menu__icon { background: var(--pastel-teal); color: var(--accent-teal); }
.mega-menu__item:nth-child(5) .mega-menu__icon { background: var(--pastel-coral); color: var(--accent-rose); }
.mega-menu__item:nth-child(6) .mega-menu__icon { background: var(--pastel-sand); color: var(--accent-amber); }
.mega-menu__item:nth-child(7) .mega-menu__icon { background: var(--pastel-peach); color: var(--accent-orange); }
.mega-menu__item:nth-child(8) .mega-menu__icon { background: var(--pastel-sky); color: var(--accent-cyan); }
.mega-menu__item:hover .mega-menu__icon { transform: scale(1.1); }

.mega-menu__content { display: flex; flex-direction: column; gap: 3px; }
.mega-menu__item-title { font-size: var(--text-sm); font-weight: 600; color: var(--dark); }
.mega-menu__item-desc { font-size: var(--text-xs); color: var(--gray-400); line-height: 1.4; }

.mega-menu__quick-links {
    margin-top: var(--sp-4);
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.mega-menu__quick-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--primary-ghost);
    color: var(--primary-dark);
    border: 1px solid var(--primary-subtle);
}

.mega-menu__quick-link:hover {
    background: var(--white);
    border-color: var(--primary-soft);
}

/* Mobile Toggle */
.header__toggle {
    display: none; flex-direction: column; gap: 5px;
    width: 40px; height: 40px; justify-content: center; align-items: center;
    background: none; border: none; cursor: pointer; z-index: 1001;
    border-radius: var(--r-md); transition: background var(--t-fast);
}
.header__toggle:hover { background: var(--gray-50); }
.header__toggle-bar {
    display: block; width: 20px; height: 2px; background: var(--dark);
    border-radius: var(--r-full); transition: all var(--t-base); transform-origin: center;
}
.header__toggle.is-active .header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle.is-active .header__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.header__toggle.is-active .header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
    position: fixed; inset: 0; z-index: 999; background: var(--white);
    opacity: 0; visibility: hidden; transition: all var(--t-base);
    overflow-y: auto; padding-top: var(--header-h);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav__inner { padding: var(--sp-8) var(--sp-6); }
.mobile-nav__list { list-style: none; }
.mobile-nav__item { border-bottom: 1px solid var(--gray-100); }
.mobile-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) 0; font-size: var(--text-lg); font-weight: 600;
    color: var(--dark); text-decoration: none; background: none; border: none;
    width: 100%; cursor: pointer; font-family: var(--font-body);
}
.mobile-nav__link[target="_blank"]::after {
    content: '\2197';
    font-size: 0.95rem;
    color: var(--gray-400);
}
.mobile-nav__chevron { transition: transform var(--t-fast); }
.mobile-nav__link--toggle[aria-expanded="true"] .mobile-nav__chevron { transform: rotate(180deg); }

.mobile-nav__submenu { display: none; list-style: none; padding-bottom: var(--sp-4); }
.mobile-nav__submenu.is-open { display: block; }
.mobile-nav__sublink {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); color: var(--gray-500);
    font-size: var(--text-base); border-radius: var(--r-md); transition: all var(--t-fast);
}
.mobile-nav__sublink:hover { background: var(--gray-50); color: var(--primary); }
.mobile-nav__sublink i { width: 20px; text-align: center; color: var(--primary); }

/* ============================================================
   Hero, Home
   ============================================================ */
.hero {
    position: relative; overflow: hidden;
    padding-top: calc(var(--header-h) + var(--sp-16));
    min-height: 92vh; display: flex; align-items: center;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 80%, var(--pastel-peach) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 20%, var(--pastel-sky) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 50%, var(--pastel-lilac) 0%, transparent 70%),
        linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}
.hero--service .hero__gradient {
    background:
        radial-gradient(ellipse 70% 50% at 20% 80%, var(--pastel-mint) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, var(--pastel-sky) 0%, transparent 60%),
        linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}

.hero__shapes { position: absolute; inset: 0; overflow: hidden; }
.hero__shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; }
.hero__shape--1 {
    width: 600px; height: 600px; background: var(--pastel-sky-mid);
    top: -15%; right: -8%; animation: heroFloat1 25s ease-in-out infinite;
}
.hero__shape--2 {
    width: 450px; height: 450px; background: var(--pastel-peach-mid);
    bottom: -10%; left: -8%; animation: heroFloat2 30s ease-in-out infinite;
}
.hero__shape--3 {
    width: 300px; height: 300px; background: var(--pastel-mint-mid);
    top: 35%; left: 25%; animation: heroFloat3 20s ease-in-out infinite;
}
.hero__shape--4 {
    width: 200px; height: 200px; background: var(--pastel-lilac-mid);
    top: 15%; right: 20%; animation: heroFloat1 22s ease-in-out infinite reverse;
}
.hero__shape--5 {
    width: 150px; height: 150px; background: var(--pastel-sand-mid);
    bottom: 25%; right: 10%; animation: heroFloat3 18s ease-in-out infinite reverse;
}

@keyframes heroFloat1 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -40px); }
    66% { transform: translate(-20px, 20px); }
}
@keyframes heroFloat2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-25px, 30px); }
    66% { transform: translate(15px, -20px); }
}
@keyframes heroFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, -15px) scale(1.05); }
}

.hero__grid-pattern {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(37,99,235,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black, transparent);
}

.hero__container {
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-12); align-items: center; position: relative; z-index: 1;
}
.hero__content { position: relative; }

.hero__badge {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4); background: var(--white);
    border: 1px solid var(--gray-100); border-radius: var(--r-full);
    font-size: var(--text-xs); font-weight: 600; color: var(--gray-500);
    margin-bottom: var(--sp-6); box-shadow: var(--shadow-sm);
}
.hero__badge-dot {
    width: 8px; height: 8px; background: var(--success); border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.75); }
}

.hero__title {
    font-size: var(--text-hero); font-weight: 800; line-height: 1.08;
    letter-spacing: -0.035em; color: var(--dark); margin-bottom: var(--sp-6);
}
.hero__subtitle {
    font-size: var(--text-lg); color: var(--gray-400); line-height: 1.75;
    max-width: 520px; margin-bottom: var(--sp-8);
}
.hero__subtitle--wide { max-width: 680px; }
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

.hero__trust {
    display: flex; align-items: center; gap: var(--sp-4);
    margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid var(--gray-100);
}
.hero__trust-item {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-xs); color: var(--gray-400); font-weight: 500;
}
.hero__trust-item i { color: var(--success); font-size: 0.75rem; }

/* Hero Visual */
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; }

.hero__code-window {
    background: var(--dark); border-radius: var(--r-2xl); overflow: hidden;
    box-shadow: var(--shadow-2xl); width: 100%; max-width: 420px;
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
    transition: transform 0.5s var(--ease-out);
}
.hero__code-window:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }

.hero__code-header {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5); background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero__code-dot { width: 12px; height: 12px; border-radius: 50%; }
.hero__code-dot--red { background: #FF5F57; }
.hero__code-dot--yellow { background: #FFBD2E; }
.hero__code-dot--green { background: #28C840; }
.hero__code-tab { margin-left: var(--sp-4); font-size: var(--text-xs); color: var(--gray-300); font-family: var(--font-mono); }

.hero__code-body { padding: var(--sp-6); }
.hero__code-body pre { margin: 0; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.8; color: var(--gray-200); }
.code-keyword { color: #C792EA; }
.code-class { color: #FFCB6B; }
.code-function { color: #82AAFF; }

/* Floating cards */
.hero__float-card {
    position: absolute; background: var(--white); border-radius: var(--r-xl);
    padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-lg);
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--text-xs); font-weight: 600; color: var(--dark);
    z-index: 2; animation: floatCard 6s ease-in-out infinite; border: 1px solid var(--gray-100);
}
.hero__float-card i { font-size: 1rem; }
.hero__float-card--1 { top: 10%; right: -10%; animation-delay: 0s; }
.hero__float-card--1 i { color: var(--accent-emerald); }
.hero__float-card--2 { bottom: 15%; left: -5%; animation-delay: 2s; }
.hero__float-card--2 i { color: var(--accent-amber); }
.hero__float-card--3 { bottom: 50%; right: -15%; animation-delay: 4s; }
.hero__float-card--3 i { color: var(--accent-rose); }

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Scroll indicator */
.hero__scroll {
    position: absolute; bottom: var(--sp-8); left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); z-index: 1;
}
.hero__scroll span {
    font-size: var(--text-xs); color: var(--gray-300); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em;
}
.hero__scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--primary), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
    0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   Page Hero (inner pages)
   ============================================================ */
.hero--page {
    min-height: auto; padding-top: calc(var(--header-h) + var(--sp-16));
    padding-bottom: var(--sp-16);
}
.hero--compact { padding-bottom: var(--sp-10); }
.hero--404 { min-height: 72vh; }

.hero__page-content { text-align: center; max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }
.hero__page-content .hero__subtitle { margin-left: auto; margin-right: auto; }
.hero__page-content--narrow { max-width: 660px; }

.hero__breadcrumb {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-sm); color: var(--gray-400); margin-bottom: var(--sp-5);
}
.hero__breadcrumb a { color: var(--gray-400); }
.hero__breadcrumb a:hover { color: var(--primary); }

.hero__service-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: var(--r-xl);
    background: var(--primary-ghost); color: var(--primary); font-size: 1.8rem;
    margin-bottom: var(--sp-6);
}

.hero__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-5); }
.hero__title--blog { font-size: var(--text-4xl); }
.hero__title--legal { font-size: var(--text-4xl); }

.blog-detail__meta {
    display: flex; align-items: center; gap: var(--sp-4); justify-content: center;
    margin-bottom: var(--sp-4); font-size: var(--text-sm); color: var(--gray-400);
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding: var(--sp-24) 0; position: relative; }
.section--sm { padding: var(--sp-16) 0; }
.section--alt { background: var(--off-white); }
.section--pastel-sky { background: var(--pastel-sky); }
.section--pastel-mint { background: var(--pastel-mint); }

.section__header { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
.section__label {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--primary); background: var(--primary-ghost);
    padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full); margin-bottom: var(--sp-4);
    border: 1px solid var(--primary-subtle);
}
.section__title {
    font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.025em;
    margin-bottom: var(--sp-4);
}
.section__subtitle { font-size: var(--text-lg); color: var(--gray-400); line-height: 1.75; }
.section__actions { text-align: center; margin-top: var(--sp-10); }

/* ============================================================
   Stats Bar
   ============================================================ */
.stats { padding: var(--sp-12) 0; position: relative; z-index: 2; margin-top: var(--sp-6); }

.stats__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--white); padding: var(--sp-10) var(--sp-8);
    border-radius: var(--r-2xl); box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-100); position: relative; overflow: hidden;
}
.stats__grid::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-indigo), var(--accent-emerald), var(--accent-amber));
}

.stats__item { text-align: center; padding: var(--sp-4); position: relative; }
.stats__item:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--gray-100);
}
.stats__number {
    display: block; font-size: var(--text-4xl); font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent-indigo));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1; margin-bottom: var(--sp-2);
}
.stats__label { font-size: var(--text-sm); color: var(--gray-400); font-weight: 500; }

/* ============================================================
   Intro Section
   ============================================================ */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.intro__content .section__label { display: inline-flex; text-align: left; }
.intro__text { font-size: var(--text-lg); color: var(--gray-500); line-height: 1.85; margin-bottom: var(--sp-4); }

.intro__visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); position: relative; }
.intro__card {
    padding: var(--sp-6); border-radius: var(--r-xl);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    text-align: center; font-weight: 600; color: var(--dark); font-size: var(--text-sm);
    transition: all var(--t-base); border: 1px solid transparent;
}
.intro__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.intro__card--1 { background: var(--pastel-sky); }
.intro__card--2 { background: var(--pastel-mint); transform: translateY(var(--sp-8)); }
.intro__card--3 { background: var(--pastel-peach); transform: translateY(calc(-1 * var(--sp-4))); }
.intro__card--4 { background: var(--pastel-lilac); transform: translateY(var(--sp-4)); }
.intro__card--2:hover { transform: translateY(calc(var(--sp-8) - 4px)); }
.intro__card--3:hover { transform: translateY(calc(-1 * var(--sp-4) - 4px)); }
.intro__card--4:hover { transform: translateY(calc(var(--sp-4) - 4px)); }

.intro__card-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-lg); background: rgba(255,255,255,0.75); color: var(--primary); font-size: 1.25rem;
}

/* ============================================================
   Service Cards (home + overview)
   ============================================================ */
.services-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6);
}
.services-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4);
}

.service-card {
    background: var(--white); padding: var(--sp-8); border-radius: var(--r-xl);
    box-shadow: var(--shadow-card); border: 1px solid var(--gray-100);
    transition: all var(--t-base); text-decoration: none;
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--card-color, var(--primary)); opacity: 0; transition: opacity var(--t-base);
}
.service-card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: transparent;
}
.service-card:hover::before { opacity: 1; }

.service-card__icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-lg); font-size: 1.3rem; margin-bottom: var(--sp-5);
    transition: all var(--t-base);
}
.service-card:nth-child(1) .service-card__icon { background: var(--pastel-sky); color: var(--accent-blue); }
.service-card:nth-child(2) .service-card__icon { background: var(--pastel-lilac); color: var(--accent-indigo); }
.service-card:nth-child(3) .service-card__icon { background: var(--pastel-mint); color: var(--accent-emerald); }
.service-card:nth-child(4) .service-card__icon { background: var(--pastel-teal); color: var(--accent-teal); }
.service-card:nth-child(5) .service-card__icon { background: var(--pastel-coral); color: var(--accent-rose); }
.service-card:nth-child(6) .service-card__icon { background: var(--pastel-sand); color: var(--accent-amber); }
.service-card:nth-child(7) .service-card__icon { background: var(--pastel-peach); color: var(--accent-orange); }
.service-card:nth-child(8) .service-card__icon { background: var(--pastel-sky); color: var(--accent-cyan); }
.service-card:hover .service-card__icon { transform: scale(1.08); }

.service-card__title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-3); color: var(--dark); }
.service-card__desc { font-size: var(--text-sm); color: var(--gray-400); line-height: 1.7; flex: 1; margin-bottom: var(--sp-5); }
.service-card__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
.service-card__link i { transition: transform var(--t-fast); }
.service-card:hover .service-card__link i { transform: translateX(4px); }

.service-card--compact { padding: var(--sp-6); text-align: center; align-items: center; }
.service-card--compact .service-card__icon { width: 48px; height: 48px; font-size: 1.1rem; margin-bottom: var(--sp-4); }
.service-card--compact .service-card__title { font-size: var(--text-base); margin-bottom: var(--sp-2); }

/* ============================================================
   Service Rows (overview page)
   ============================================================ */
.services-overview { display: flex; flex-direction: column; gap: var(--sp-24); }

.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.service-row--reverse { direction: rtl; }
.service-row--reverse > * { direction: ltr; }

.service-row__icon {
    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-lg); font-size: 1.5rem; margin-bottom: var(--sp-5);
}
.service-row:nth-child(1) .service-row__icon { background: var(--pastel-sky); color: var(--accent-blue); }
.service-row:nth-child(2) .service-row__icon { background: var(--pastel-lilac); color: var(--accent-indigo); }
.service-row:nth-child(3) .service-row__icon { background: var(--pastel-mint); color: var(--accent-emerald); }
.service-row:nth-child(4) .service-row__icon { background: var(--pastel-teal); color: var(--accent-teal); }
.service-row:nth-child(5) .service-row__icon { background: var(--pastel-coral); color: var(--accent-rose); }
.service-row:nth-child(6) .service-row__icon { background: var(--pastel-sand); color: var(--accent-amber); }
.service-row:nth-child(7) .service-row__icon { background: var(--pastel-peach); color: var(--accent-orange); }
.service-row:nth-child(8) .service-row__icon { background: var(--pastel-sky); color: var(--accent-cyan); }

.service-row__title { font-size: var(--text-3xl); margin-bottom: var(--sp-2); }
.service-row__subtitle { font-size: var(--text-lg); color: var(--primary); font-weight: 500; margin-bottom: var(--sp-4); }
.service-row__desc { color: var(--gray-500); margin-bottom: var(--sp-6); line-height: 1.85; }
.service-row__features { list-style: none; margin-bottom: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.service-row__features li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--gray-600); font-weight: 500; }
.service-row__features i { color: var(--success); font-size: 0.8rem; }
.service-row__visual { display: flex; justify-content: center; }

.service-row__card {
    border-radius: var(--r-2xl); padding: var(--sp-10); width: 100%; max-width: 380px;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-6);
    box-shadow: var(--shadow-lg);
}
.service-row:nth-child(odd) .service-row__card { background: linear-gradient(135deg, var(--pastel-sky), var(--pastel-mint)); }
.service-row:nth-child(even) .service-row__card { background: linear-gradient(135deg, var(--pastel-peach), var(--pastel-sand)); }

.service-row__card-icon {
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    background: var(--white); border-radius: var(--r-xl); color: var(--primary);
    font-size: 2rem; box-shadow: var(--shadow-md);
}
.service-row__card-features { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.service-row__tag {
    padding: var(--sp-1) var(--sp-3); background: var(--white); border-radius: var(--r-full);
    font-size: var(--text-xs); font-weight: 500; color: var(--gray-600); box-shadow: var(--shadow-xs);
}

/* ============================================================
   Service Detail
   ============================================================ */
.service-detail__sections { display: flex; flex-direction: column; gap: var(--sp-16); }
.service-detail__section { max-width: 800px; margin: 0 auto; }
.service-detail__section-title {
    display: flex; align-items: center; gap: var(--sp-4);
    font-size: var(--text-2xl); margin-bottom: var(--sp-4);
}
.service-detail__section-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-lg); background: var(--primary-ghost); color: var(--primary);
    font-size: 1.15rem; flex-shrink: 0;
}
.service-detail__section-text { color: var(--gray-500); line-height: 1.85; font-size: var(--text-lg); }

/* Features Grid */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.feature-item {
    display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5);
    background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--gray-100);
    transition: all var(--t-fast); font-weight: 500; color: var(--gray-600);
}
.feature-item:hover { border-color: var(--primary-soft); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.feature-item__check {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--pastel-mint); color: var(--success); font-size: 0.75rem; flex-shrink: 0;
}

/* Process Timeline */
.process-timeline { max-width: 700px; margin: 0 auto; position: relative; }
.process-timeline::before {
    content: ''; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, var(--primary-subtle), var(--primary-soft), var(--primary-subtle));
}
.process-step { display: flex; gap: var(--sp-6); padding: var(--sp-6) 0; position: relative; }
.process-step__number {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white); font-weight: 700; font-size: var(--text-lg); flex-shrink: 0;
    position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--white), var(--shadow-md);
}
.process-step__title { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.process-step__desc { color: var(--gray-400); line-height: 1.75; }

/* FAQ */
.faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: var(--r-lg); overflow: hidden; transition: all var(--t-fast);
}
.faq-item:hover { border-color: var(--gray-200); }
.faq-item__question {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: var(--sp-5) var(--sp-6); background: none; border: none;
    cursor: pointer; font-family: var(--font-body); font-size: var(--text-base);
    font-weight: 600; color: var(--dark); text-align: left; gap: var(--sp-4);
}
.faq-item__icon { flex-shrink: 0; transition: transform var(--t-base); }
.faq-item__question[aria-expanded="true"] .faq-item__icon { transform: rotate(180deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height var(--t-slow), padding var(--t-slow); }
.faq-item__answer.is-open { max-height: 500px; }
.faq-item__answer p { padding: 0 var(--sp-6) var(--sp-5); color: var(--gray-500); line-height: 1.85; }

/* ============================================================
   Why Medevso
   ============================================================ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.why-card {
    padding: var(--sp-8); border-radius: var(--r-xl);
    transition: all var(--t-base); border: 1px solid transparent;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card:nth-child(1) { background: var(--pastel-sky); }
.why-card:nth-child(2) { background: var(--pastel-mint); }
.why-card:nth-child(3) { background: var(--pastel-peach); }
.why-card:nth-child(4) { background: var(--pastel-lilac); }
.why-card:nth-child(5) { background: var(--pastel-sand); }
.why-card:nth-child(6) { background: var(--pastel-teal); }

.why-card__icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-lg); background: rgba(255,255,255,0.8); font-size: 1.2rem;
    margin-bottom: var(--sp-5);
}
.why-card:nth-child(1) .why-card__icon { color: var(--accent-blue); }
.why-card:nth-child(2) .why-card__icon { color: var(--accent-emerald); }
.why-card:nth-child(3) .why-card__icon { color: var(--accent-orange); }
.why-card:nth-child(4) .why-card__icon { color: var(--accent-indigo); }
.why-card:nth-child(5) .why-card__icon { color: var(--accent-amber); }
.why-card:nth-child(6) .why-card__icon { color: var(--accent-teal); }

.why-card__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--sp-3); }
.why-card__text { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.75; }

/* ============================================================
   Portfolio
   ============================================================ */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.portfolio-grid--full { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.portfolio-card {
    background: var(--white); border-radius: var(--r-xl); overflow: hidden;
    border: 1px solid var(--gray-100); transition: all var(--t-base);
    text-decoration: none; display: flex; flex-direction: column;
}
.portfolio-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: transparent; }

.portfolio-card__image { aspect-ratio: 16 / 10; overflow: hidden; }
.portfolio-card__placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; transition: all var(--t-base);
}
.portfolio-card:nth-child(1) .portfolio-card__placeholder { background: linear-gradient(135deg, var(--pastel-sky), var(--pastel-mint)); color: var(--accent-blue); }
.portfolio-card:nth-child(2) .portfolio-card__placeholder { background: linear-gradient(135deg, var(--pastel-peach), var(--pastel-sand)); color: var(--accent-orange); }
.portfolio-card:nth-child(3) .portfolio-card__placeholder { background: linear-gradient(135deg, var(--pastel-lilac), var(--pastel-rose)); color: var(--accent-indigo); }
.portfolio-card:nth-child(4) .portfolio-card__placeholder { background: linear-gradient(135deg, var(--pastel-teal), var(--pastel-sky)); color: var(--accent-teal); }
.portfolio-card:nth-child(5) .portfolio-card__placeholder { background: linear-gradient(135deg, var(--pastel-rose), var(--pastel-peach)); color: var(--accent-rose); }
.portfolio-card:nth-child(6) .portfolio-card__placeholder { background: linear-gradient(135deg, var(--pastel-sand), var(--pastel-mint)); color: var(--accent-amber); }
.portfolio-card:hover .portfolio-card__placeholder { transform: scale(1.05); }

.portfolio-card__content { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.portfolio-card__meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    font-size: var(--text-xs); color: var(--gray-400); margin-bottom: var(--sp-3);
}
.portfolio-card__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }

.tag { padding: var(--sp-1) var(--sp-3); background: var(--primary-ghost); color: var(--primary); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; }
.tag--light { background: var(--primary-ghost); color: var(--primary); }
.tag--small { padding: 2px var(--sp-2); font-size: 0.65rem; }
.tag--mint { background: var(--pastel-mint); color: #065F46; }
.tag--sky { background: var(--pastel-sky); color: #0C4A6E; }
.tag--peach { background: var(--pastel-peach); color: #7C2D12; }
.tag--lilac { background: var(--pastel-lilac); color: #4C1D95; }

.portfolio-card__title { font-size: var(--text-xl); margin-bottom: var(--sp-2); color: var(--dark); }
.portfolio-card__desc { font-size: var(--text-sm); color: var(--gray-400); line-height: 1.65; flex: 1; margin-bottom: var(--sp-4); }
.portfolio-card__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--primary); }
.portfolio-card__link i { transition: transform var(--t-fast); }
.portfolio-card:hover .portfolio-card__link i { transform: translateX(4px); }

.portfolio-slider {
    position: relative; width: 100%; height: 100%; overflow: hidden;
}
.portfolio-slider__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    scroll-behavior: smooth; height: 100%;
}
.portfolio-slider__track::-webkit-scrollbar { display: none; }
.portfolio-slider__slide {
    flex: 0 0 100%; min-width: 100%; height: 100%; scroll-snap-align: start;
}
.portfolio-slider__slide img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.portfolio-slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: none; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,0.62); color: var(--white); cursor: pointer;
    transition: all var(--t-fast); z-index: 2;
}
.portfolio-slider__nav:hover { background: rgba(15,23,42,0.82); }
.portfolio-slider__nav--prev { left: 10px; }
.portfolio-slider__nav--next { right: 10px; }

.portfolio-showcase {
    margin-bottom: var(--sp-10); padding: var(--sp-8); border-radius: var(--r-2xl);
    background: linear-gradient(135deg, var(--pastel-sky), var(--pastel-lilac));
    border: 1px solid rgba(255,255,255,0.75);
}
.portfolio-showcase__head { margin-bottom: var(--sp-6); }
.portfolio-showcase__title { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.portfolio-showcase__subtitle { color: var(--gray-500); max-width: 760px; }
.portfolio-showcase__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px);
    gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2);
    scroll-snap-type: x proximity;
}
.portfolio-showcase__item {
    position: relative; display: block; border-radius: var(--r-xl); overflow: hidden;
    min-height: 170px; border: 1px solid rgba(255,255,255,0.75);
    box-shadow: var(--shadow-sm); scroll-snap-align: start;
}
.portfolio-showcase__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-showcase__item span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-3) var(--sp-4);
    background: linear-gradient(180deg, transparent, rgba(15,23,42,0.82)); color: var(--white);
    font-size: var(--text-sm); font-weight: 600;
}

/* Portfolio Filter */
.portfolio-filter { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-10); }
.portfolio-filter__btn {
    padding: 0.45rem 1.1rem; background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--r-full); font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 500; color: var(--gray-500); cursor: pointer; transition: all var(--t-fast);
}
.portfolio-filter__btn:hover { border-color: var(--primary); color: var(--primary); }
.portfolio-filter__btn--active { background: var(--primary); border-color: var(--primary); color: var(--white); }

/* ============================================================
   Blog
   ============================================================ */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.blog-grid--full { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.blog-card {
    background: var(--white); padding: var(--sp-8); border-radius: var(--r-xl);
    border: 1px solid var(--gray-100); transition: all var(--t-base);
    text-decoration: none; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.blog-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--r-xl) var(--r-xl) 0 0; opacity: 0; transition: opacity var(--t-base);
}
.blog-card:nth-child(1)::before { background: linear-gradient(90deg, var(--accent-blue), var(--accent-indigo)); }
.blog-card:nth-child(2)::before { background: linear-gradient(90deg, var(--accent-emerald), var(--accent-teal)); }
.blog-card:nth-child(3)::before { background: linear-gradient(90deg, var(--accent-amber), var(--accent-orange)); }
.blog-card:nth-child(4)::before { background: linear-gradient(90deg, var(--accent-rose), var(--accent-orange)); }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: transparent; }
.blog-card:hover::before { opacity: 1; }

.blog-card__meta { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.blog-card__category { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; }
.blog-card:nth-child(odd) .blog-card__category { background: var(--pastel-sky); color: #0C4A6E; }
.blog-card:nth-child(even) .blog-card__category { background: var(--pastel-mint); color: #065F46; }
.blog-card__date { font-size: var(--text-xs); color: var(--gray-300); }
.blog-card__title { font-size: var(--text-xl); margin-bottom: var(--sp-3); color: var(--dark); line-height: 1.3; }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--gray-400); line-height: 1.75; flex: 1; margin-bottom: var(--sp-5); }
.blog-card__footer { display: flex; align-items: center; justify-content: space-between; }
.blog-card__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.blog-card__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--primary); white-space: nowrap; }
.blog-card__link i { transition: transform var(--t-fast); }
.blog-card:hover .blog-card__link i { transform: translateX(4px); }

/* ============================================================
   Article (blog detail)
   ============================================================ */
.article { max-width: var(--container-narrow); margin: 0 auto; }
.article__content h2 { font-size: var(--text-2xl); margin: var(--sp-10) 0 var(--sp-4); }
.article__content p { color: var(--gray-500); line-height: 1.9; font-size: var(--text-lg); }

.article__footer {
    margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--gray-100);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
}
.article__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.article__share { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--gray-400); }
.article__share-link {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--gray-50); color: var(--gray-500); transition: all var(--t-fast);
}
.article__share-link:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }

/* ============================================================
   CTA Block
   ============================================================ */
.cta-block {
    position: relative; padding: var(--sp-16) var(--sp-8); border-radius: var(--r-2xl);
    overflow: hidden; text-align: center;
    background: linear-gradient(135deg, #1E40AF 0%, var(--primary) 40%, var(--accent-indigo) 100%);
}
.cta-block__bg { position: absolute; inset: 0; }
.cta-block__shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.06); }
.cta-block__shape--1 { width: 400px; height: 400px; top: -120px; right: -80px; }
.cta-block__shape--2 { width: 300px; height: 300px; bottom: -100px; left: -60px; }
.cta-block__content { position: relative; z-index: 1; }
.cta-block__title { font-size: var(--text-3xl); color: var(--white); margin-bottom: var(--sp-4); }
.cta-block__text { font-size: var(--text-lg); color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto var(--sp-8); line-height: 1.75; }

/* ============================================================
   About Page
   ============================================================ */
.about-story { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-16); align-items: center; }
.about-story__text { font-size: var(--text-lg); color: var(--gray-500); line-height: 1.85; margin-bottom: var(--sp-4); }
.about-story__visual { display: flex; justify-content: center; }

.about-story__decoration { position: relative; width: 280px; height: 280px; }
.about-story__circle { position: absolute; border-radius: 50%; border: 2px solid; }
.about-story__circle--1 { inset: 0; border-color: var(--pastel-sky-mid); animation: rotateSlow 40s linear infinite; }
.about-story__circle--2 { inset: 30px; border-color: var(--pastel-mint-mid); border-style: dashed; animation: rotateSlow 30s linear infinite reverse; }
.about-story__circle--3 { inset: 60px; border-color: var(--primary-soft); animation: rotateSlow 20s linear infinite; }
@keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.about-story__badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    text-align: center; background: var(--white); padding: var(--sp-6); border-radius: 50%;
    width: 130px; height: 130px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
}
.about-story__badge-number {
    font-size: var(--text-3xl); font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent-indigo));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1;
}
.about-story__badge-text { font-size: var(--text-xs); color: var(--gray-400); font-weight: 600; margin-top: var(--sp-1); }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.value-card { text-align: center; padding: var(--sp-8); border-radius: var(--r-xl); transition: all var(--t-base); border: 1px solid transparent; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value-card:nth-child(1) { background: var(--pastel-sky); }
.value-card:nth-child(2) { background: var(--pastel-mint); }
.value-card:nth-child(3) { background: var(--pastel-peach); }
.value-card:nth-child(4) { background: var(--pastel-lilac); }

.value-card__icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--sp-5); border-radius: var(--r-lg); background: rgba(255,255,255,0.75); font-size: 1.3rem;
}
.value-card:nth-child(1) .value-card__icon { color: var(--accent-blue); }
.value-card:nth-child(2) .value-card__icon { color: var(--accent-emerald); }
.value-card:nth-child(3) .value-card__icon { color: var(--accent-orange); }
.value-card:nth-child(4) .value-card__icon { color: var(--accent-indigo); }

.value-card__title { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.value-card__text { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.75; }

/* Approach Steps */
.approach-steps { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.approach-step { display: flex; gap: var(--sp-6); align-items: flex-start; }
.approach-step__number {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white);
    border-radius: 50%; font-weight: 700; font-size: var(--text-lg); flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37,99,235,0.3);
}
.approach-step__title { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.approach-step__text { color: var(--gray-400); line-height: 1.75; }

/* Tech Grid */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.tech-category { padding: var(--sp-6); border-radius: var(--r-xl); border: 1px solid var(--gray-100); }
.tech-category:nth-child(1) { background: var(--pastel-sky); border-color: transparent; }
.tech-category:nth-child(2) { background: var(--pastel-mint); border-color: transparent; }
.tech-category:nth-child(3) { background: var(--pastel-peach); border-color: transparent; }
.tech-category__title { font-size: var(--text-base); font-weight: 700; margin-bottom: var(--sp-4); }
.tech-category__items { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tech-tag {
    padding: var(--sp-1) var(--sp-3); background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 500; color: var(--gray-600);
    transition: all var(--t-fast);
}
.tech-tag:hover { background: var(--white); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* ============================================================
   Contact Page
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-12); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label { font-size: var(--text-sm); font-weight: 600; color: var(--dark); }
.form-input, .form-select, .form-textarea {
    padding: 0.7rem 1rem; border: 2px solid var(--gray-100); border-radius: var(--r-md);
    font-family: var(--font-body); font-size: var(--text-base); color: var(--gray-700);
    background: var(--white); transition: all var(--t-fast); outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray-300); }
.form-textarea { resize: vertical; min-height: 130px; }
.form-select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

/* Alerts */
.alert { display: flex; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.alert i { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.alert strong { display: block; margin-bottom: var(--sp-1); }
.alert p { font-size: var(--text-sm); line-height: 1.5; }
.alert--success { background: var(--success-light); border: 1px solid #6EE7B7; color: #065F46; }
.alert--success i { color: var(--success); }
.alert--error { background: var(--error-light); border: 1px solid #FCA5A5; color: #991B1B; }
.alert--error i { color: var(--error); }

/* Contact Info */
.contact-info { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
.contact-info__card { padding: var(--sp-8); border-radius: var(--r-xl); border: 1px solid var(--gray-100); }
.contact-info__card:first-child { background: var(--pastel-sky); border-color: transparent; }
.contact-info__card--dark { background: var(--dark); border-color: transparent; color: var(--white); }
.contact-info__card--dark .contact-info__title { color: var(--white); }
.contact-info__card--dark .contact-info__text { color: var(--gray-300); }
.contact-info__title { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.contact-info__text { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.75; margin-bottom: var(--sp-6); }
.contact-info__items { display: flex; flex-direction: column; gap: var(--sp-5); }
.contact-info__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-info__icon {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); background: rgba(255,255,255,0.7); color: var(--primary); flex-shrink: 0;
}
.contact-info__label { display: block; font-size: var(--text-xs); color: var(--gray-400); margin-bottom: 2px; }
.contact-info__item a { font-weight: 500; color: var(--dark); }
.contact-info__response { display: flex; flex-direction: column; gap: var(--sp-3); }
.contact-info__response-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--gray-300); }
.contact-info__response-item i { color: var(--primary-light); }
.contact-info__response-item strong { color: var(--white); }

/* ============================================================
   Case Detail
   ============================================================ */
.case-detail { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-12); align-items: start; }
.case-detail__main h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
.case-detail__main h3 { font-size: var(--text-xl); margin-top: var(--sp-10); margin-bottom: var(--sp-5); }
.case-detail__desc { font-size: var(--text-lg); color: var(--gray-500); line-height: 1.85; }

.case-detail__results { display: flex; flex-direction: column; gap: var(--sp-4); }
.case-detail__result {
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
    background: var(--pastel-mint); border-radius: var(--r-md); font-weight: 500; color: var(--gray-600);
}
.case-detail__result i { color: var(--success); font-size: 1.1rem; }

.case-detail__sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-6)); display: flex; flex-direction: column; gap: var(--sp-6); }
.case-detail__info-card { padding: var(--sp-8); background: var(--pastel-sky); border-radius: var(--r-xl); }
.case-detail__info-card h3 { font-size: var(--text-lg); margin-bottom: var(--sp-6); }
.case-detail__info-row { padding: var(--sp-4) 0; border-bottom: 1px solid rgba(255,255,255,0.5); }
.case-detail__info-row:last-child { border-bottom: none; }
.case-detail__info-label {
    display: block; font-size: var(--text-xs); color: var(--gray-400); margin-bottom: var(--sp-1);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.case-detail__info-value { font-weight: 600; color: var(--dark); }
.case-detail__tech-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

.case-gallery {
    border-radius: var(--r-2xl); overflow: hidden; position: relative;
    border: 1px solid var(--gray-100); box-shadow: var(--shadow-lg);
}
.case-gallery__slide { aspect-ratio: 16 / 9; }

/* ============================================================
   Legal Pages
   ============================================================ */
.legal-content { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-12); align-items: start; }
.legal-toc {
    position: sticky; top: calc(var(--header-h) + var(--sp-6));
    padding: var(--sp-6); background: var(--pastel-sky); border-radius: var(--r-xl);
}
.legal-toc__title { font-size: var(--text-base); margin-bottom: var(--sp-4); }
.legal-toc__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.legal-toc__list a {
    font-size: var(--text-sm); color: var(--gray-500); display: block;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); transition: all var(--t-fast); line-height: 1.4;
}
.legal-toc__list a:hover { background: rgba(255,255,255,0.7); color: var(--primary); }
.legal-body { max-width: var(--container-narrow); }

.legal-section { margin-bottom: var(--sp-10); scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }
.legal-section h2 { font-size: var(--text-xl); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--gray-100); }
.legal-section p { color: var(--gray-500); line-height: 1.85; margin-bottom: var(--sp-3); }
.legal-section ul { list-style: none; padding: 0; margin-bottom: var(--sp-3); }
.legal-section ul li { padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); position: relative; color: var(--gray-500); line-height: 1.75; }
.legal-section ul li::before {
    content: ''; position: absolute; left: 0; top: 14px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}

/* ============================================================
   404 Error Page
   ============================================================ */
.error-page { text-align: center; position: relative; z-index: 1; padding: var(--sp-16) 0; }
.error-page__code {
    font-size: clamp(6rem, 15vw, 12rem); font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--primary), var(--accent-indigo), var(--primary-light));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: var(--sp-4);
}
.error-page__title { font-size: var(--text-3xl); margin-bottom: var(--sp-4); }
.error-page__text { font-size: var(--text-lg); color: var(--gray-400); max-width: 480px; margin: 0 auto var(--sp-8); }
.error-page__actions { display: flex; gap: var(--sp-4); justify-content: center; }

/* ============================================================
   Footer
   ============================================================ */
.footer { position: relative; background: var(--dark); color: var(--gray-300); overflow: hidden; }
.footer__wave { color: var(--dark); margin-bottom: -1px; }
.footer__wave svg { display: block; width: 100%; height: 80px; }
.footer__inner { padding: var(--sp-16) 0 var(--sp-8); }

.footer__grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--sp-10); margin-bottom: var(--sp-12);
}
.footer__logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-bottom: var(--sp-5); }
.footer__logo-img {
    height: 86px;
    width: auto;
    max-width: min(100%, 220px);
    object-fit: contain;
    border-radius: var(--r-sm);
}
.footer__desc { font-size: var(--text-sm); color: var(--gray-400); line-height: 1.75; margin-bottom: var(--sp-6); }
.footer__desc a { color: var(--primary-light); text-decoration: underline; }
.footer__desc a:hover { color: var(--white); }
.footer__social { display: flex; gap: var(--sp-3); }
.footer__social-link {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); background: rgba(255,255,255,0.06); color: var(--gray-400);
    transition: all var(--t-fast);
}
.footer__social-link:hover { background: var(--primary); color: var(--white); transform: translateY(-2px); }

.footer__heading { font-size: var(--text-sm); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-5); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__links a { font-size: var(--text-sm); color: var(--gray-400); transition: all var(--t-fast); }
.footer__links a:hover { color: var(--primary-light); padding-left: var(--sp-2); }

.footer__contact { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); }
.footer__contact li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); }
.footer__contact i { color: var(--primary-light); width: 16px; text-align: center; }
.footer__contact a { color: var(--gray-400); }
.footer__contact a:hover { color: var(--primary-light); }

.footer__bottom {
    padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
}
.footer__bottom p { font-size: var(--text-xs); color: var(--gray-500); }
.footer__bottom p a { color: var(--primary-light); }
.footer__bottom p a:hover { color: var(--white); }
.footer__legal { display: flex; gap: var(--sp-6); list-style: none; }
.footer__legal a { font-size: var(--text-xs); color: var(--gray-500); transition: color var(--t-fast); }
.footer__legal a:hover { color: var(--primary-light); }

/* ============================================================
   Back to Top
   ============================================================ */
.back-to-top {
    position: fixed; bottom: var(--sp-6); right: var(--sp-6);
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 100;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: all var(--t-base); box-shadow: 0 4px 20px rgba(37,99,235,0.3);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(37,99,235,0.4); }

/* ============================================================
   Cookie Consent
   ============================================================ */
.cookie-consent {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--dark); padding: var(--sp-4); box-shadow: 0 -4px 30px rgba(0,0,0,0.12);
}
.cookie-consent__inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
    max-width: var(--container); margin: 0 auto;
}
.cookie-consent p { color: var(--gray-300); font-size: var(--text-sm); }
.cookie-consent a { color: var(--primary-light); }

/* ============================================================
   iOS Apps
   ============================================================ */
.section--ios { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.ios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}
.ios-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    border: 1px solid var(--gray-100);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.ios-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.ios-card__artwork-wrap {
    width: 86px;
    height: 86px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--pastel-lilac);
}
.ios-card__artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ios-card__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-indigo);
    font-size: 1.8rem;
}
.ios-card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--sp-1);
}
.ios-card__meta {
    color: var(--gray-400);
    font-size: var(--text-sm);
}
.ios-card__rating {
    margin-top: var(--sp-2);
    color: var(--gray-500);
    font-size: var(--text-xs);
}
.ios-card__rating i { color: var(--accent-amber); }
.ios-card__link {
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
}

/* ============================================================
   Animations
   ============================================================ */
[data-animate] {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-animate="fade-left"] { transform: translateX(30px); }
[data-animate].is-visible { opacity: 1; transform: translate(0) !important; }

[data-animate-stagger] > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 80ms; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 160ms; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 240ms; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 320ms; }
[data-animate-stagger].is-visible > *:nth-child(7) { transition-delay: 400ms; }
[data-animate-stagger].is-visible > *:nth-child(8) { transition-delay: 480ms; }
[data-animate-stagger].is-visible > * { opacity: 1; transform: translateY(0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
    :root { --header-h: 88px; }
    .header--scrolled { height: 80px; }
    .header__logo-img { height: 72px; }
    .header--scrolled .header__logo-img { height: 64px; }
    .hero__container { grid-template-columns: 1fr; text-align: center; }
    .hero__subtitle { margin-left: auto; margin-right: auto; }
    .hero__actions { justify-content: center; }
    .hero__visual { display: none; }
    .hero__trust { justify-content: center; }
    .nav { display: none; }
    .header__toggle { display: flex; }
    .mega-menu__grid { grid-template-columns: repeat(2, 1fr); }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .stats__item:nth-child(2)::after { display: none; }
    .intro { grid-template-columns: 1fr; }
    .intro__visual { max-width: 400px; margin: 0 auto; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-showcase__track { grid-auto-columns: minmax(210px, 240px); }
    .about-story { grid-template-columns: 1fr; }
    .about-story__visual { order: -1; }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .case-detail { grid-template-columns: 1fr; }
    .case-detail__sidebar { position: static; }
    .legal-content { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
    .service-row { grid-template-columns: 1fr; }
    .service-row--reverse { direction: ltr; }
    .service-row__visual { order: -1; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .ios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    :root { --header-h: 78px; }
    .header--scrolled { height: 72px; }
    .header__logo-img { height: 60px; }
    .header--scrolled .header__logo-img { height: 56px; }
    .hero { min-height: 72vh; padding-top: calc(var(--header-h) + var(--sp-10)); }
    .hero--page { padding-bottom: var(--sp-10); }
    .hero__scroll { display: none; }
    .hero__trust { flex-direction: column; align-items: center; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); padding: var(--sp-6); }
    .stats__item::after { display: none; }
    .hero__actions { flex-direction: column; align-items: center; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .ios-grid { grid-template-columns: 1fr; }
    .why-grid, .values-grid { grid-template-columns: 1fr; }
    .portfolio-grid, .portfolio-grid--full, .blog-grid, .blog-grid--full { grid-template-columns: 1fr; }
    .portfolio-card__meta { flex-direction: column; align-items: flex-start; }
    .portfolio-showcase { padding: var(--sp-6); }
    .portfolio-showcase__track { grid-auto-columns: minmax(190px, 220px); }
    .services-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .footer__legal { flex-wrap: wrap; justify-content: center; }
    .cta-block { padding: var(--sp-10) var(--sp-6); }
    .error-page__actions { flex-direction: column; }
    .tech-grid { grid-template-columns: 1fr; }
    .article__footer { flex-direction: column; align-items: flex-start; }
    .intro__visual { grid-template-columns: 1fr 1fr; }
    .intro__card--2, .intro__card--3, .intro__card--4 { transform: none; }
    .intro__card--2:hover, .intro__card--3:hover, .intro__card--4:hover { transform: translateY(-4px); }
    .features-grid { grid-template-columns: 1fr; }
    .section { padding: var(--sp-16) 0; }
    .section__header { margin-bottom: var(--sp-8); }
    .portfolio-filter__btn { font-size: var(--text-xs); padding: var(--sp-1) var(--sp-3); }
}

@media print {
    .header, .footer, .hero__shapes, .hero__scroll, .back-to-top, .cookie-consent, .btn, .mobile-nav { display: none !important; }
    body { font-size: 12pt; color: #000; }
    .hero { min-height: auto; padding: 2rem 0; }
    a { color: #000; }
    .section { padding: 1rem 0; }
}

/* ============================================================
   Promo Popup
   ============================================================ */
body.promo-popup-open { overflow: hidden; }

.promo-popup {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base), visibility var(--t-base);
}

.promo-popup.is-visible {
    opacity: 1;
    visibility: visible;
}

.promo-popup__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(96,165,250,0.18) 0%, rgba(96,165,250,0) 35%),
        radial-gradient(circle at 80% 15%, rgba(244,63,94,0.18) 0%, rgba(244,63,94,0) 30%),
        rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.promo-popup__dialog {
    position: relative;
    width: min(1080px, 100%);
    max-height: none;
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(186,230,253,0.95), rgba(186,230,253,0) 28%),
        radial-gradient(circle at 85% 12%, rgba(217,180,254,0.35), rgba(217,180,254,0) 24%),
        linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 52%, rgba(255,255,255,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: 0 32px 80px rgba(15,23,42,0.26);
    transform-origin: center center;
    transform: translateY(var(--promo-shift, 26px)) scale(var(--promo-scale, 1));
    transition: transform var(--t-slow), opacity var(--t-base);
}

.promo-popup__halo {
    position: absolute;
    inset: 10px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.52);
    pointer-events: none;
}

.promo-popup__watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(510px, 54vw, 750px);
    transform: translate(-50%, -50%) rotate(-10deg);
    opacity: 0.08;
    filter: saturate(1.1);
    pointer-events: none;
}

.promo-popup__watermark img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.promo-popup.is-visible .promo-popup__dialog {
    --promo-shift: 0px;
}

.promo-popup__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, 0.72fr);
    align-items: start;
}

.promo-popup__main {
    padding: clamp(1rem, 1.5vw, 1.6rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.85rem;
}

.promo-popup__aside {
    padding: clamp(0.8rem, 1.4vw, 1.1rem) clamp(0.8rem, 1.4vw, 1.1rem) clamp(0.8rem, 1.4vw, 1.1rem) 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.promo-popup__topline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-right: 4rem;
}

.promo-popup__topline-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.33rem 0.62rem;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(219,234,254,0.9);
    color: var(--primary-dark);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promo-popup__topline-pill--warm {
    background: rgba(255,247,237,0.9);
    border-color: rgba(253,186,116,0.55);
    color: #c2410c;
}

.promo-popup__aurora,
.promo-popup__spark {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.promo-popup__aurora--one {
    width: 240px;
    height: 240px;
    top: -60px;
    left: -40px;
    background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, rgba(59,130,246,0) 72%);
}

.promo-popup__aurora--two {
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: -140px;
    background: radial-gradient(circle, rgba(244,63,94,0.18) 0%, rgba(244,63,94,0) 72%);
}

.promo-popup__spark--one,
.promo-popup__spark--two {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--pastel-sand-mid), var(--pastel-peach-mid));
    box-shadow: 0 12px 22px rgba(249,115,22,0.24);
}

.promo-popup__spark--one {
    top: 14%;
    right: 32%;
    transform: rotate(22deg);
}

.promo-popup__spark--two {
    bottom: 18%;
    left: 44%;
    transform: rotate(-18deg) scale(0.84);
}

.promo-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 50%;
    background: rgba(255,255,255,0.78);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--t-base);
    box-shadow: var(--shadow-sm);
}

.promo-popup__close:hover {
    background: var(--white);
    color: var(--dark);
    transform: rotate(90deg);
}

.promo-popup__brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.promo-popup__brand-mark {
    width: 108px;
    height: 108px;
    border-radius: 28px;
    padding: 14px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.86) 46%, rgba(219,234,254,0.9) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
    border: 1px solid rgba(191,219,254,0.98);
    box-shadow: 0 22px 44px rgba(37,99,235,0.2), inset 0 1px 0 rgba(255,255,255,0.88);
    flex-shrink: 0;
}

.promo-popup__brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(37,99,235,0.16)) saturate(1.08);
}

.promo-popup__eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.promo-popup__brand-name {
    margin: 0 0 0.15rem;
    color: var(--dark);
    font-size: 0.96rem;
    font-weight: 800;
}

.promo-popup__brand-copy {
    min-width: 0;
}

.promo-popup__brand-tag {
    margin: 0;
    color: var(--gray-400);
    font-size: 0.8rem;
    line-height: 1.45;
    max-width: 28ch;
}

.promo-popup__copy {
    max-width: 560px;
}

.promo-popup__label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(239,246,255,0.92));
    border: 1px solid rgba(219,234,254,0.9);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: 800;
    margin-bottom: 0.55rem;
    box-shadow: 0 10px 22px rgba(37,99,235,0.08);
}

.promo-popup__title {
    font-size: clamp(1.55rem, 1.15rem + 1vw, 2.55rem);
    line-height: 1;
    margin-bottom: 0.5rem;
    max-width: 12ch;
}

.promo-popup__emphasis {
    margin: 0 0 0.55rem;
    font-size: clamp(0.94rem, 0.88rem + 0.22vw, 1.08rem);
    font-weight: 800;
    color: var(--accent-rose);
    letter-spacing: -0.03em;
}

.promo-popup__text {
    margin: 0;
    font-size: clamp(0.88rem, 0.84rem + 0.16vw, 0.98rem);
    line-height: 1.56;
    color: var(--gray-500);
    max-width: 54ch;
}

.promo-popup__highlights {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.promo-popup__highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.62rem 0.72rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,250,252,0.86));
    border: 1px solid rgba(226,232,240,0.8);
    box-shadow: 0 12px 24px rgba(15,23,42,0.06);
    color: var(--gray-600);
    font-size: 0.8rem;
    font-weight: 600;
}

.promo-popup__highlights i {
    color: var(--success);
    margin-top: 0.2rem;
}

.promo-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.promo-popup__cta {
    min-height: 42px;
    padding: 0.58rem 0.95rem;
}

.promo-popup__cta--secondary {
    background: rgba(255,255,255,0.84);
}

.promo-popup__terms {
    padding-top: 0.72rem;
    border-top: 1px solid rgba(226,232,240,0.85);
    color: var(--gray-400);
    font-size: 0.74rem;
}

.promo-popup__terms-title {
    margin: 0 0 var(--sp-2);
    color: var(--dark);
    font-weight: 800;
}

.promo-popup__footnote {
    color: var(--gray-300);
}

.promo-popup__offer-card {
    position: relative;
    width: 100%;
    border-radius: 24px;
    padding: clamp(0.82rem, 1.2vw, 1.05rem);
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(160deg, #0f172a 0%, #1d4ed8 54%, #2563eb 100%);
    color: var(--white);
    box-shadow: 0 28px 60px rgba(29,78,216,0.24);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.68rem;
    position: sticky;
    top: 0;
}

.promo-popup__offer-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 75%);
    pointer-events: none;
}

.promo-popup__offer-card::before,
.promo-popup__offer-card::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.promo-popup__offer-card::before {
    width: 220px;
    height: 220px;
    top: -100px;
    right: -50px;
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 72%);
}

.promo-popup__offer-card::after {
    width: 180px;
    height: 180px;
    bottom: -90px;
    left: -40px;
    background: radial-gradient(circle, rgba(16,185,129,0.26) 0%, rgba(16,185,129,0) 72%);
}

.promo-popup__offer-kicker {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255,255,255,0.72);
}

.promo-popup__offer-value {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}

.promo-popup__offer-number {
    font-size: clamp(2.8rem, 2.2rem + 1.6vw, 4rem);
    line-height: 0.9;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.promo-popup__offer-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.82);
}

.promo-popup__code-box,
.promo-popup__countdown {
    position: relative;
    z-index: 1;
    padding: 0.66rem 0.72rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
}

.promo-popup__code-box span,
.promo-popup__countdown-label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--sp-2);
}

.promo-popup__code-box strong,
.promo-popup__countdown strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.promo-popup__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.promo-popup__pills span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0.26rem 0.54rem;
    border-radius: var(--r-full);
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.64rem;
    font-weight: 700;
}

@media (max-width: 1366px) {
    .promo-popup__dialog {
        width: min(910px, 100%);
    }

    .promo-popup__content {
        grid-template-columns: minmax(0, 1fr) 230px;
    }

    .promo-popup__main {
        padding: 0.88rem 0.88rem 0.88rem 1rem;
        gap: 0.68rem;
    }

    .promo-popup__aside {
        padding: 0.88rem 0.88rem 0.88rem 0;
    }

    .promo-popup__topline {
        gap: 0.45rem;
    }

    .promo-popup__topline-pill {
        min-height: 30px;
        padding: 0.35rem 0.62rem;
        font-size: 0.66rem;
    }

    .promo-popup__brand {
        gap: 0.72rem;
    }

    .promo-popup__brand-mark {
        width: 92px;
        height: 92px;
        border-radius: 24px;
        padding: 12px;
    }

    .promo-popup__label {
        padding: 0.35rem 0.75rem;
        margin-bottom: 0.6rem;
    }

    .promo-popup__title {
        font-size: clamp(1.45rem, 1.1rem + 0.75vw, 2.1rem);
        margin-bottom: 0.55rem;
    }

    .promo-popup__emphasis {
        margin-bottom: 0.55rem;
        font-size: 0.92rem;
    }

    .promo-popup__text {
        font-size: 0.84rem;
        line-height: 1.48;
    }

    .promo-popup__highlights {
        gap: 0.55rem;
    }

    .promo-popup__highlights li {
        padding: 0.56rem 0.62rem;
        font-size: 0.75rem;
        gap: 0.55rem;
    }

    .promo-popup__cta {
        min-height: 40px;
        padding: 0.5rem 0.86rem;
    }

    .promo-popup__terms {
        padding-top: 0.62rem;
        font-size: 0.7rem;
    }

    .promo-popup__offer-card {
        padding: 0.78rem;
        gap: 0.6rem;
    }

    .promo-popup__offer-number {
        font-size: clamp(2.35rem, 2rem + 1vw, 3.1rem);
    }

    .promo-popup__offer-text {
        font-size: 0.82rem;
    }

    .promo-popup__code-box,
    .promo-popup__countdown {
        padding: 0.72rem 0.8rem;
    }

    .promo-popup__code-box strong,
    .promo-popup__countdown strong {
        font-size: 0.84rem;
    }

    .promo-popup__pills {
        gap: 0.38rem;
    }

    .promo-popup__pills span {
        min-height: 24px;
        padding: 0.22rem 0.45rem;
        font-size: 0.58rem;
    }
}

@media (max-height: 920px) {
    .promo-popup__content {
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .promo-popup__main {
        gap: 0.58rem;
    }

    .promo-popup__brand-mark {
        width: 90px;
        height: 90px;
        padding: 12px;
    }

    .promo-popup__title {
        font-size: clamp(1.38rem, 1.05rem + 0.7vw, 1.95rem);
        max-width: 14ch;
    }

    .promo-popup__text {
        font-size: 0.82rem;
    }

    .promo-popup__highlights li {
        padding: 0.5rem 0.58rem;
    }

    .promo-popup__terms {
        display: none;
    }

    .promo-popup__offer-number {
        font-size: clamp(2.15rem, 1.85rem + 0.8vw, 2.8rem);
    }
}

@media (max-width: 1366px) and (max-height: 900px) {
    .promo-popup {
        padding: 0.5rem;
    }

    .promo-popup__dialog {
        width: min(860px, 100%);
        max-height: none;
    }

    .promo-popup__content {
        grid-template-columns: minmax(0, 1fr) 210px;
    }

    .promo-popup__main {
        padding: 0.9rem 0.9rem 0.9rem 1rem;
        gap: 0.65rem;
    }

    .promo-popup__aside {
        padding: 0.9rem 0.9rem 0.9rem 0;
    }

    .promo-popup__highlights {
        grid-template-columns: 1fr;
    }

    .promo-popup__terms {
        display: none;
    }

    .promo-popup__watermark {
        width: 420px;
        left: 50%;
        opacity: 0.05;
    }

    .promo-popup__offer-card {
        position: relative;
        top: auto;
        min-height: 100%;
    }
}

@media (max-width: 980px) {
    .promo-popup {
        padding: var(--sp-3);
        align-items: flex-end;
    }

    .promo-popup__dialog {
        max-height: none;
    }

    .promo-popup__content {
        grid-template-columns: 1fr;
    }

    .promo-popup__main {
        padding-bottom: var(--sp-3);
    }

    .promo-popup__aside {
        padding: 0 var(--sp-4) var(--sp-4);
    }

    .promo-popup__highlights {
        grid-template-columns: 1fr;
    }

    .promo-popup__offer-card {
        position: relative;
        top: auto;
    }
}

@media (max-width: 640px) {
    .promo-popup {
        padding: 0;
    }

    .promo-popup__dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 24px 24px 0 0;
    }

    .promo-popup__halo,
    .promo-popup__spark--two {
        display: none;
    }

    .promo-popup__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }

    .promo-popup__topline {
        padding-right: 3.2rem;
    }

    .promo-popup__brand {
        gap: var(--sp-3);
        padding-right: 3.5rem;
    }

    .promo-popup__brand-mark {
        width: 74px;
        height: 74px;
        border-radius: 20px;
        padding: 10px;
    }

    .promo-popup__brand-mark {
        box-shadow: 0 14px 24px rgba(37,99,235,0.14);
    }

    .promo-popup__brand-tag,
    .promo-popup__watermark,
    .promo-popup__offer-grid {
        display: none;
    }

    .promo-popup__title {
        max-width: none;
    }

    .promo-popup__text {
        font-size: 0.95rem;
        line-height: 1.62;
    }

    .promo-popup__actions {
        flex-direction: column;
    }

    .promo-popup__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .promo-popup__offer-card {
        min-height: auto;
    }
}