*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --glass-bg:     rgba(255,255,255,0.08);
      --glass-border: rgba(255,255,255,0.18);
      --glass-hover:  rgba(255,255,255,0.15);
      --glass-shadow: rgba(0,0,0,0.40);
      --text-main:    #ffffff;
      --text-sub:     rgba(255,255,255,0.62);
      --text-muted:   rgba(255,255,255,0.35);
      --accent:       rgba(120,200,255,0.85);
      --accent-glow:  rgba(100,180,255,0.3);
      --radius-card:  20px;
      --radius-sm:    10px;
      --blur:         20px;
    }

    html, body {
  min-height: 100vh;
  font-family: 'Outfit', sans-serif;
  color: var(--text-main);
  overflow-x: hidden;
  overflow-y: auto; /* asigură control complet pentru JS */
}



    /* ────────────────────────────────────────────────────────────
       BACKGROUND — 100% CSS, zero external image requests
       NIS2 compliant: no third-party asset loading
    ──────────────────────────────────────────────────────────── */
    #bg {
      position: fixed;
      inset: 0;
      z-index: 0;

      /* Deep mountain-dusk atmosphere built entirely in CSS */
      background:
        /* Top vignette */
        radial-gradient(ellipse 120% 60% at 50% 0%,
          rgba(10,20,60,0.55) 0%,
          transparent 70%
        ),
        /* Bottom vignette / ground shadow */
        radial-gradient(ellipse 140% 50% at 50% 110%,
          rgba(3,8,20,0.80) 0%,
          transparent 65%
        ),
        /* Left atmospheric haze */
        radial-gradient(ellipse 60% 80% at 0% 60%,
          rgba(20,40,110,0.45) 0%,
          transparent 70%
        ),
        /* Right warm horizon glow */
        radial-gradient(ellipse 55% 45% at 100% 70%,
          rgba(60,30,100,0.35) 0%,
          transparent 65%
        ),
        /* Central subtle light — moon/sun bleed */
        radial-gradient(ellipse 40% 30% at 55% 35%,
          rgba(140,180,255,0.10) 0%,
          transparent 70%
        ),
        /* Base sky gradient — deep navy to midnight blue */
        linear-gradient(175deg,
          #060c1e 0%,
          #0b1535 18%,
          #0d1d4a 35%,
          #0a1838 55%,
          #080f28 75%,
          #040a18 100%
        );

      background-attachment: fixed;
      transition: transform 0.08s linear;
    }

    /* Star field — pure CSS SVG data URI, self-contained */
    #bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1px 1px at 12% 8%,  rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 15%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 43% 6%,  rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 10%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 81% 4%,  rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 7%  22%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 28%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 56% 20%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 74% 25%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 19% 12%, rgba(200,220,255,0.80) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 9%,  rgba(200,220,255,0.70) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 16%, rgba(200,220,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 3%  30%, rgba(255,255,255,0.40) 0%, transparent 100%),
        radial-gradient(1px 1px at 62% 32%, rgba(255,255,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 95% 28%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 23% 35%, rgba(255,255,255,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 77% 38%, rgba(255,255,255,0.55) 0%, transparent 100%);
      pointer-events: none;
      animation: starTwinkle 6s ease-in-out infinite alternate;
    }
    @keyframes starTwinkle {
      0%   { opacity: 0.7; }
      50%  { opacity: 1.0; }
      100% { opacity: 0.6; }
    }

    /* Mountain silhouette — inline SVG as data URI, fully self-contained */
    #bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('https://wallpaperhub.app/api/v1/wallpapers/10254/download/3840x2160');
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      pointer-events: none;
    }

    /* ── LAYOUT ─────────────────────────────────── */
    #page {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }




    /* ── TOPBAR ─────────────────────────────────── */
    #topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 40px;
      animation: fadeDown 0.7s ease both;
    }

    #company-name {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .logo-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent-glow);
      animation: blink 3s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes blink {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.4; transform:scale(0.65); }
    }

    /* ── LANGUAGE SWITCHER ──────────────────────── */
    #lang-switcher {
      display: flex;
      gap: 3px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 40px;
      padding: 5px;
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
    }
    .lang-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 30px;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .lang-btn .flag { font-size: 14px; }
    .lang-btn:hover { color: var(--text-main); background: var(--glass-hover); }
    .lang-btn.active {
      background: rgba(255,255,255,0.16);
      color: var(--text-main);
      box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    }

    /* ── HERO ───────────────────────────────────── */
    #hero {
      text-align: center;
      padding: 44px 20px 16px;
      animation: fadeUp 0.8s 0.15s ease both;
    }
    #hero h1 {
      font-size: clamp(26px, 4.5vw, 50px);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.1;
      text-shadow: 0 2px 30px rgba(0,0,0,0.5);
    }
    #hero h1 span {
      background: linear-gradient(90deg, #78c8ff, #b8a9ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    #hero p {
      margin-top: 12px;
      font-size: 15px;
      font-weight: 400;
      color: var(--text-sub);
      max-width: 460px;
      margin-inline: auto;
      line-height: 1.6;
    }

    /* ── APPS GRID ──────────────────────────────── */
    #apps-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 40px 60px;
    }

    /* 3 cards — fixed 3-col layout on desktop, collapses on mobile */
    #apps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      max-width: 820px;
      width: 100%;
    }

    /* ── APP CARD ───────────────────────────────── */
    .app-card {
      position: relative;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-card);
      padding: 32px 22px 26px;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      backdrop-filter: blur(var(--blur));
      -webkit-backdrop-filter: blur(var(--blur));
      box-shadow:
        0 8px 32px var(--glass-shadow),
        inset 0 1px 0 rgba(255,255,255,0.12);
      transition:
        transform 0.30s cubic-bezier(.34,1.4,.64,1),
        background  0.25s,
        border-color 0.25s,
        box-shadow  0.30s;
      animation: cardIn 0.55s both;
      overflow: hidden;
      /* open in same tab — no target="_blank" */
    }

    .app-card:nth-child(1) { animation-delay: 0.12s; }
    .app-card:nth-child(2) { animation-delay: 0.22s; }
    .app-card:nth-child(3) { animation-delay: 0.32s; }

    @keyframes cardIn {
      from { opacity:0; transform: translateY(28px) scale(0.94); }
      to   { opacity:1; transform: translateY(0)    scale(1);    }
    }

    /* top gloss sheen */
    .app-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-card);
      background: radial-gradient(ellipse 80% 50% at 50% 0%,
        rgba(255,255,255,0.10) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .app-card:hover {
      transform: translateY(-8px) scale(1.025);
      background: var(--glass-hover);
      border-color: rgba(255,255,255,0.32);
      box-shadow:
        0 22px 55px rgba(0,0,0,0.50),
        0 0 0 1px rgba(255,255,255,0.10),
        inset 0 1px 0 rgba(255,255,255,0.22);
    }
    .app-card:active { transform: translateY(-2px) scale(0.99); }

    /* per-card bottom glow */
    .app-card::after {
      content: '';
      position: absolute;
      bottom: -30px; left: 50%;
      transform: translateX(-50%);
      width: 90px; height: 90px;
      border-radius: 50%;
      background: var(--card-color, rgba(120,200,255,0.3));
      filter: blur(32px);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
      z-index: 0;
    }
    .app-card:hover::after { opacity: 1; }

    /* ── CARD CONTENTS ──────────────────────────── */
    .card-icon-wrap {
      position: relative;
      z-index: 1;
      width: 68px; height: 68px;
      margin: 0 auto 18px;
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 32px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.16);
      transition: transform 0.3s cubic-bezier(.34,1.4,.64,1);
    }
    .app-card:hover .card-icon-wrap { transform: scale(1.14) rotate(-4deg); }

    .card-icon-wrap img {
      width: 38px; height: 38px;
      object-fit: contain;
      border-radius: 8px;
    }

    .card-title {
      position: relative; z-index: 1;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .card-desc {
      position: relative; z-index: 1;
      font-size: 12px;
      color: var(--text-sub);
      line-height: 1.55;
      font-weight: 400;
    }
    .card-tag {
      position: relative; z-index: 1;
      display: inline-flex;
      align-items: center;
      margin-top: 16px;
      padding: 4px 11px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 20px;
      font-size: 9.5px;
      font-family: 'DM Mono', monospace;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: all 0.2s;
    }
    .app-card:hover .card-tag {
      background: rgba(255,255,255,0.13);
      color: var(--text-sub);
    }

    /* "IN CURÂND" badge styling */
    .card-tag.soon {
      background: rgba(255,180,60,0.10);
      border-color: rgba(255,180,60,0.22);
      color: rgba(255,190,80,0.70);
    }
    .app-card:hover .card-tag.soon {
      background: rgba(255,180,60,0.16);
      color: rgba(255,200,100,0.90);
    }

    /* ── FOOTER ─────────────────────────────────── */
    #footer {
      text-align: center;
      padding: 0 20px 26px;
      font-size: 11px;
      color: var(--text-muted);
      font-family: 'DM Mono', monospace;
      animation: fadeUp 0.8s 0.6s ease both;
    }

    /* ── KEYFRAMES ──────────────────────────────── */
    @keyframes fadeDown {
      from { opacity:0; transform:translateY(-14px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(14px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ── RESPONSIVE ─────────────────────────────── */
    @media (max-width: 680px) {
      #topbar { padding: 16px 18px; flex-wrap: wrap; gap: 12px; }
      .lang-btn .label { display: none; }
      #apps-wrapper { padding: 20px 16px 50px; }
      #apps-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        gap: 14px;
      }
      .app-card { padding: 26px 18px 22px; }
      #hero { padding: 22px 16px 10px; }
    }

    /* ── SCROLLBAR ──────────────────────────────── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 5px; }