@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 4px; }
}

@layer base {
  :root {
    /*
     * Fundal ALB, cerere Sile. Pagina nu mai urmeaza tema sistemului: `light`
     * singur inseamna „asa arata, oricum ar fi telefonul".
     *
     * ⚠️ Cand fundalul e alb curat, cardurile NU mai pot fi tot albe — ar
     * disparea. Deci se inverseaza: pagina alba, cardurile pe un gri-verzui
     * foarte deschis, cu contur subtire.
     */
    color-scheme: light;

    --ground:  oklch(100% 0 0);          /* alb curat */
    --panel:   oklch(97.6% 0.005 155);   /* cardurile, abia deosebite de alb */
    --panel-2: oklch(95.5% 0.008 155);
    --line:    oklch(91% 0.008 155);
    --chalk:   oklch(22% 0.020 160);
    --sand:    oklch(45% 0.014 160);
    --stone:   oklch(50% 0.012 160);
    --action:  oklch(40% 0.080 162);
    --on-action: oklch(100% 0 0);
    --soft:    oklch(94% 0.025 158);
    --cheap:   oklch(48% 0.110 150);
    --dear:    oklch(46% 0.100 70);

    /* O singura progresie de spatiu. */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
    --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

    --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;

    /* Fara fonturi de pe Google: in DE trebuie gazduite local, iar stiva de
       sistem incarca instant si arata bine pe Android si iOS. */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  }

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

  body {
    background: var(--ground);
    color: var(--chalk);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
  h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); font-weight: 800; }
  h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 750; }
  h3 { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); font-weight: 700; }
  p  { color: var(--sand); text-wrap: pretty; }
}

@layer layout {
  .wrap { width: min(1120px, 100% - var(--s5) * 2); margin-inline: auto; }
  .section { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
  .stack > * + * { margin-top: var(--s4); }

  header.top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4); padding-block: var(--s5);
  }
  .brand { display: flex; align-items: center; gap: var(--s3); font-weight: 800; }
  .brand .mark {
    inline-size: 38px; block-size: 38px; border-radius: 11px;
    background: var(--action); display: grid; place-items: center;
  }

  .hero { display: grid; gap: var(--s7); align-items: center; }
  @media (min-width: 900px) { .hero { grid-template-columns: 1.15fr .85fr; } }

  .split { display: grid; gap: var(--s6); align-items: center; }
  @media (min-width: 900px) {
    .split { grid-template-columns: .8fr 1.2fr; }
    .split.flip > :first-child { order: 2; }
  }
}

@layer components {
  .btn {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-block-size: 54px; padding-inline: var(--s5);
    border-radius: var(--r-md); border: 1px solid transparent;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .18s ease, opacity .18s ease;
  }
  .btn:active { transform: translateY(1px); }
  .btn-main { background: var(--action); color: var(--on-action); }
  .btn-ghost { background: transparent; color: var(--chalk); border-color: var(--line); }

  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s5);
  }

  /* O captura de telefon trebuie sa arate cat un telefon, nu cat un afis:
     fara plafon, coloana de 520 px domina toata pagina pe desktop. */
  .shot {
    inline-size: min(100%, 300px);
    margin-inline: auto;
    border-radius: 28px; border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 18px 44px -24px oklch(20% 0.03 160 / .28);
    overflow: clip;
  }
  .hero .shot { inline-size: min(100%, 330px); }

  /* ---- elementul-semnatura: fasia de distributie, ca in aplicatie ---- */
  .dist { display: grid; gap: var(--s3); }
  .bars { display: flex; align-items: flex-end; gap: 3px; block-size: 84px; }
  .bars i {
    flex: 1; border-radius: 3px; background: var(--stone); opacity: .5;
    block-size: var(--h, 20%);
    transform-origin: bottom;
    animation: grow .7s cubic-bezier(.2,.7,.3,1) backwards;
    animation-delay: calc(var(--i, 0) * 18ms);
  }
  .bars i.lo { background: var(--cheap); opacity: .75; }
  .bars i.hi { background: var(--dear); opacity: .75; }
  .bars i.you { background: var(--dear); opacity: 1; }
  @keyframes grow { from { transform: scaleY(.04); opacity: 0 } }
  .dist-axis {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: .8rem; color: var(--stone);
  }

  .steps { list-style: none; padding: 0; display: grid; }
  .steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); padding-block: var(--s5); }
  .steps li + li { border-top: 1px solid var(--line); }
  .steps b {
    inline-size: 34px; block-size: 34px; border-radius: var(--r-pill);
    background: var(--soft); color: var(--action);
    display: grid; place-items: center; font-family: var(--mono); font-size: .95rem;
  }

  .langs { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .langs span {
    border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 6px var(--s3); font-size: .95rem; color: var(--sand);
  }

  .facts { display: grid; gap: var(--s4); }
  @media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }
  .fact { display: grid; grid-template-columns: 26px 1fr; gap: var(--s3); align-items: start; }
  .fact svg { margin-block-start: 3px; color: var(--action); }

  details.faq {
    border-block-end: 1px solid var(--line); padding-block: var(--s4);
  }
  details.faq summary {
    cursor: pointer; font-weight: 700; list-style: none;
    display: flex; justify-content: space-between; gap: var(--s4);
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after { content: "+"; color: var(--stone); font-weight: 400; }
  details.faq[open] summary::after { content: "–"; }
  details.faq p { margin-block-start: var(--s3); }

  footer.bottom { border-top: 1px solid var(--line); padding-block: var(--s6) var(--s8); }
  footer.bottom nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
  footer.bottom a { color: var(--action); text-underline-offset: 3px; }
}

@layer utilities {
  .lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: var(--sand); }
  .eyebrow {
    font-family: var(--mono); font-size: .8rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--stone);
  }
  .muted { color: var(--stone); font-size: .95rem; }
  .row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
  .soft { background: var(--soft); border-color: transparent; }
  .center { text-align: center; }
  .price-big { font-family: var(--mono); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; }
}

@layer components {
  /* Pagini de text: Impressum si Datenschutz. Aceeasi fata, alta densitate. */
  .doc { max-inline-size: 68ch; }
  .doc h2 { font-size: 1.15rem; margin-block: var(--s6) var(--s2); }
  .doc p { margin-block-end: var(--s3); }
  .doc .back { display: inline-flex; gap: var(--s2); color: var(--action);
    text-decoration: none; font-weight: 600; margin-block-end: var(--s5); }
  /* Ce trebuie completat de om, marcat ca sa nu ajunga asa pe internet. */
  .todo { border-inline-start: 4px solid oklch(52% 0.18 20); padding-inline-start: var(--s4); }
}