/* QRing Apps — design system (Apple-inspired, orange). Același limbaj vizual ca qring.click */
:root {
  --bg: #fbfbfd; --gray: #f5f5f7; --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7;
  --orange: #ff7a00; --orange-ink: #d94f00;
  --grad: linear-gradient(135deg, #ffa31a 0%, #ff7a00 45%, #f05a00 100%);
  --btn: linear-gradient(180deg, #f26b0f 0%, #d94f00 100%);
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI",
          Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Thai",
          "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Malgun Gothic", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
svg { flex: none; }
button, input { font: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 22px; }
.wrap.narrow { max-width: 720px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid rgba(255,122,0,.55); outline-offset: 2px; border-radius: 10px; }

/* ---------- Bara de navigare ---------- */
.suggest { text-align: center; padding: 11px 20px; background: var(--gray); font-size: 14px; }
.suggest a { color: var(--orange-ink); font-weight: 600; text-decoration: none; }
.nav { position: sticky; top: 0; z-index: 30; background: rgba(251,251,253,.72);
       -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid rgba(0,0,0,.07); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 34px; height: 25px; color: var(--ink); }
.word { font-size: 20px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
.word b { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word em { font-style: normal; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }
.langmenu { position: relative; }
.langmenu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 14px;
                    font-weight: 500; padding: 7px 12px; border-radius: 980px; transition: background .2s; }
.langmenu summary:hover, .langmenu[open] summary { background: rgba(0,0,0,.05); }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary svg { width: 17px; height: 17px; color: var(--muted); }
.langmenu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40; list-style: none; margin: 0; padding: 8px;
               border-radius: 18px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
               box-shadow: 0 24px 60px -18px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
               display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px;
               max-height: 70vh; overflow: auto; width: max-content; max-width: calc(100vw - 32px); }
.langmenu li a { display: block; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; }
.langmenu li a:hover { background: rgba(0,0,0,.05); }
.langmenu li a[aria-current] { background: var(--ink); color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: 72px 0 56px; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; left: 50%; top: -60px; width: min(1100px, 150vw); aspect-ratio: 1;
                transform: translateX(-50%) rotate(-7deg); background: var(--qr-bg) center / contain no-repeat; opacity: .05;
                -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(900px, 120vw); height: 560px;
               transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255,140,0,.18), rgba(255,140,0,0)); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--orange-ink);
           background: rgba(255,122,0,.09); padding: 7px 14px; border-radius: 980px; }
.eyebrow svg { width: 16px; height: 16px; }
.display { font-size: clamp(38px, 6.6vw, 74px); font-weight: 700; line-height: 1.05; letter-spacing: -.038em; margin: 0 auto 20px; max-width: 15em; }
.display span { display: inline-block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
:lang(ja) .display, :lang(zh-Hans) .display, :lang(ko) .display, :lang(th) .display, :lang(ar) .display,
:lang(fa) .display, :lang(he) .display, :lang(hi) .display { letter-spacing: 0; line-height: 1.22; }
.lead { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.45; color: var(--muted); margin: 0 auto; max-width: 34em; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; font-size: 16px; font-weight: 600;
       border: 0; border-radius: 980px; cursor: pointer; text-decoration: none; background: var(--btn); color: #fff; white-space: nowrap;
       box-shadow: 0 8px 20px -8px rgba(217,79,0,.55); transition: transform .15s ease, filter .15s ease, opacity .15s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn svg { width: 18px; height: 18px; }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--gray); filter: none; }
.btn.sm { padding: 10px 14px; font-size: 14px; }
.btn.wide { width: 100%; margin-top: 22px; padding: 16px 22px; font-size: 17px; }
.btn.wide { white-space: normal; text-align: center; line-height: 1.25; }
.btn.xl { padding: 19px 24px; font-size: 19px; }
.btn.loading { pointer-events: none; opacity: .75; }
.btn.loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
           color: var(--orange-ink); font-weight: 600; font-size: 15px; }
.linkbtn svg { width: 17px; height: 17px; }
.linkbtn.center { display: flex; margin: 18px auto 0; }

/* beneficii */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 56px auto 0; text-align: start; }
.tile { background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 12px 30px -20px rgba(0,0,0,.18); }
.tile .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; margin-bottom: 16px;
            box-shadow: 0 8px 18px -8px rgba(255,110,0,.7); }
.tile .ic svg { width: 22px; height: 22px; }
.tile h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tile p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* secțiuni */
.section { padding-block: 96px; }
.section.alt { background: var(--gray); }
.section h2 { text-align: center; font-size: clamp(32px, 4.6vw, 52px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 48px; }
:lang(ja) .section h2, :lang(zh-Hans) .section h2, :lang(ko) .section h2, :lang(ar) .section h2, :lang(fa) .section h2,
:lang(he) .section h2, :lang(hi) .section h2, :lang(th) .section h2 { letter-spacing: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { position: relative; background: #fff; border-radius: 26px; padding: 30px 28px 32px; font-size: 17px; line-height: 1.5; color: #424245; }
.steps .n { display: block; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; margin-bottom: 14px;
            background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps .s-ic { position: absolute; top: 30px; inset-inline-end: 28px; width: 44px; height: 44px; border-radius: 13px; background: var(--gray);
               display: grid; place-items: center; color: var(--orange-ink); }
.steps .s-ic svg { width: 22px; height: 22px; }
.steps p { margin: 0; }
.faq .wrap { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
               padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex: none; transition: transform .25s ease;
  background: linear-gradient(var(--orange-ink),var(--orange-ink)) center/14px 2px no-repeat, linear-gradient(var(--orange-ink),var(--orange-ink)) center/2px 14px no-repeat; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 40em; }

footer.site { background: var(--gray); border-top: 1px solid rgba(0,0,0,.06); padding-block: 28px 40px; color: var(--muted); font-size: 12px; }
footer.site .row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
footer.site .row .word { font-size: 16px; color: var(--ink); }
footer.site .sister { margin: 0 0 16px; font-size: 13px; }
footer.site .sister a { color: var(--orange-ink); text-decoration: none; font-weight: 600; }
footer.site nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer.site nav a { text-decoration: none; color: #424245; }
footer.site nav a:hover { text-decoration: underline; }

footer.site .family { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font-size: 13px; }
footer.site .family a { color: var(--orange-ink); text-decoration: none; font-weight: 600; }


/* ===================== QRing Apps (portal) ===================== */
:root { --green: #1a9f4b; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 10px; }
.chips { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #424245; background: #fff;
            padding: 7px 13px 7px 10px; border-radius: 980px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.chips svg { width: 16px; height: 16px; color: var(--green); stroke-width: 2.6; }
.hero { padding-bottom: 64px; }

/* dock: lansare rapidă, ca pe ecranul telefonului */
.dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 760px; margin: 44px auto 0; padding: 14px;
        background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
        border-radius: 30px; box-shadow: 0 40px 90px -40px rgba(80,40,0,.35), 0 0 0 1px rgba(0,0,0,.05); }
.dock a { display: grid; justify-items: center; gap: 8px; padding: 10px 4px 8px; border-radius: 20px; text-decoration: none; color: var(--ink);
          font-size: 13px; font-weight: 600; transition: background .2s, transform .2s; min-width: 0; }
.dock a:hover { background: rgba(255,122,0,.07); }
.dock a:hover .dock-ic { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 26px -12px rgba(240,90,0,.7); }
.dock-ic { width: 60px; height: 60px; border-radius: 15px; display: block; transition: transform .25s cubic-bezier(.2,.8,.2,1.2), box-shadow .25s;
           box-shadow: 0 10px 20px -12px rgba(240,90,0,.6); }
.dock span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* grila de aplicații */
.apps { padding-top: 40px; scroll-margin-top: 56px; }
.apps:focus { outline: none; }
.apps h2 { margin-bottom: 12px; }
.sub { text-align: center; color: var(--muted); font-size: 19px; line-height: 1.45; margin: 0 auto 44px; max-width: 34em; }
.appgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.appgrid li { display: flex; min-width: 0; }
.appcard-l { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 20px; border-radius: 26px; background: #fff; text-decoration: none; color: var(--ink);
             box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 12px 30px -20px rgba(0,0,0,.18); transition: transform .25s ease, box-shadow .25s ease; min-width: 0; }
.appcard-l:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,122,0,.35), 0 28px 50px -26px rgba(120,50,0,.35); }
.a-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-ic { width: 56px; height: 56px; border-radius: 14px; flex: none; box-shadow: 0 10px 20px -12px rgba(240,90,0,.65); }
.a-name { display: grid; gap: 2px; min-width: 0; }
.a-name strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.a-name small { font-size: 14px; color: var(--orange-ink); font-weight: 600; line-height: 1.3; }
.a-desc { color: var(--muted); font-size: 15px; line-height: 1.55; flex: 1; }
.a-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.06); min-width: 0; }
.a-host { font-size: 12px; letter-spacing: -.02em; color: #86868b; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; line-height: 1.35; min-width: 0; }
.a-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: #fff; background: var(--btn); padding: 8px 14px 8px 16px;
          border-radius: 980px; flex: none; box-shadow: 0 8px 18px -10px rgba(217,79,0,.7); }
.a-open svg { width: 16px; height: 16px; transition: transform .2s; }
.appcard-l:hover .a-open svg { transform: translateX(3px); }
[dir=rtl] .arrow { transform: scaleX(-1); }
[dir=rtl] .appcard-l:hover .a-open svg { transform: scaleX(-1) translateX(3px); }

/* de ce ai nevoie */
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.needs a { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; background: #fff; border-radius: 18px; text-decoration: none; color: var(--ink);
           box-shadow: 0 0 0 1px rgba(0,0,0,.04); transition: box-shadow .2s, transform .2s; }
.needs a:hover { box-shadow: 0 0 0 1px rgba(255,122,0,.4), 0 14px 30px -20px rgba(120,50,0,.35); transform: translateY(-1px); }
.n-ic { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.n-t { flex: 1; font-size: 17px; font-weight: 600; line-height: 1.35; min-width: 0; }
.n-app { font-size: 13px; color: var(--muted); white-space: nowrap; }
.needs .arrow { width: 18px; height: 18px; color: var(--orange-ink); flex: none; }

.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
footer.site .family { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font-size: 13px; }
footer.site .family a { color: var(--orange-ink); text-decoration: none; font-weight: 600; }

@media (max-width: 960px) {
  .appgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .section { padding-block: 64px; }
  .section h2 { margin-bottom: 32px; }
  .apps { padding-top: 24px; }
  .apps h2 { margin-bottom: 10px; }
  .sub { margin-bottom: 30px; font-size: 17px; }
}
@media (max-width: 640px) {
  .hero { padding: 40px 0 40px; }
  .wrap { padding-inline: 16px; }
  .dock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 10px; border-radius: 26px; margin-top: 30px; }
  .dock-ic { width: 54px; height: 54px; border-radius: 13px; }
  .appgrid, .tiles.four { grid-template-columns: minmax(0, 1fr); }
  .appcard-l { padding: 20px 18px 16px; border-radius: 22px; }
  .n-app { display: none; }
  .n-t { font-size: 16px; }
  .chips li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }