/* ============================================================
   Qorvi marketing pages — v2 design layer
   ------------------------------------------------------------
   Loaded ONLY by the public pages (index, premium, ...). The
   dashboard does not link this file, so nothing here can alter
   it: base.css stays the shared floor, and this is hierarchy
   and polish laid on top of it.

   Rules of the layer:
     1. New classes only. Existing base.css selectors are
        overridden strictly under a .mk / .feat scope, so a
        change here cannot leak into the dashboard.
     2. Logical properties everywhere (inset-inline-end,
        margin-inline, text-align: start). Arabic flips the
        document to RTL via i18n.js and every one of these
        rules has to mirror correctly.
     3. No new colours. Everything is derived from the tokens
        base.css already defines -- black is the environment,
        purple is the energy.
     4. No content invented here. The markup carries real copy
        through data-i18n; this file only decides how it looks.
   ============================================================ */

:root {
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-line: rgba(var(--purple-rgb), 0.14);
  --mk-veil: rgba(var(--violet-rgb), 0.04);
}

/* ------------------------------------------------------------
   Accessibility first — before any decoration.
   :where() keeps specificity at zero, so the one existing
   .btn:focus-visible rule in base.css still wins where it
   applies, while everything else on the page gains a keyboard
   focus ring it previously did not have.
   ------------------------------------------------------------ */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Visually hidden but still read aloud. The comparison table marks its
   bare "✓" this way so a screen reader hears "Included" instead of
   silence, and the symbol never has to carry meaning on its own. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A skip link: invisible until focused, then pinned to the top.
   The nav is the first tab stop on every page, so keyboard users
   were previously tabbing through 8 links to reach the content. */
.skip {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -80px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  color: var(--text);
  font-weight: 600;
  transition: inset-block-start 0.2s var(--mk-ease);
}
.skip:focus { inset-block-start: 14px; }

/* ------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------ */
.mk { position: relative; }
.mk .container { position: relative; }

/* A soft vertical wash so consecutive sections read as separate
   bands rather than one undifferentiated scroll. */
.mk-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--mk-veil) 32%, var(--mk-veil) 68%, transparent);
  pointer-events: none;
}

/* Hairline rule between bands — cheaper and calmer than a full
   border, and it reads as a deliberate seam in both directions. */
.mk-seam { border-block-start: 1px solid var(--mk-line); }

/* ------------------------------------------------------------
   Kickers — the small uppercase label above every section title
   ------------------------------------------------------------ */
.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--purple);
}
/* Two mirrored rules instead of one, so the whole label is
   symmetric and needs no RTL flip of its own. */
.kicker::before,
.kicker::after {
  content: "";
  height: 1px;
  width: 26px;
  background: linear-gradient(90deg, transparent, var(--purple));
}
.kicker::after { background: linear-gradient(90deg, var(--purple), transparent); }
/* Those two rules are physical gradients, so in RTL they would fade *outward*
   -- bright at the outer ends and dark against the label. Swap them so the
   purple end always meets the word. */
[dir="rtl"] .kicker::before { background: linear-gradient(90deg, var(--purple), transparent); }
[dir="rtl"] .kicker::after { background: linear-gradient(90deg, transparent, var(--purple)); }

.sec-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.sec-head .section-title { margin-bottom: 16px; }
.sec-head .section-sub { margin-bottom: 0; }

/* ------------------------------------------------------------
   Hero v2
   ------------------------------------------------------------ */
.hero-v2 { padding: 92px 0 84px; text-align: center; }
.hero-v2 .hero-logo-wrap { margin-bottom: 40px; }
.hero-v2 h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  letter-spacing: -0.028em;
  line-height: 1.06;
  max-width: 16ch;
  margin-inline: auto;
}
.hero-v2 .sub {
  font-size: clamp(16px, 2.1vw, 20px);
  color: var(--muted);
  max-width: 620px;
  margin: 20px auto 34px;
  line-height: 1.65;
}
.hero-v2 .hero-cta { margin-bottom: 54px; }

/* The four verbs, promoted out of the logo orbit into a real row.
   In base.css they floated around the logo as decorative caps and
   were never translated; here they are content, so each one
   carries a data-i18n key and mirrors correctly in Arabic. */
.hero-strip {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 0;
  max-width: 660px;
}
.hero-strip li {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-inline: 22px;
}
.hero-strip li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple);
  opacity: 0.5;
  margin-inline-end: 22px;
  margin-inline-start: -22px;
}

/* ------------------------------------------------------------
   Feature cards v2
   ------------------------------------------------------------ */
.feat { position: relative; isolation: isolate; }

/* Gradient edge that fades in on hover or keyboard focus. Built
   with a masked 1px border so the card keeps its own background
   and nothing has to be redrawn underneath. */
.feat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(var(--purple-rgb), 0.6), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s var(--mk-ease);
  pointer-events: none;
}
.feat:hover::before,
.feat:focus-within::before { opacity: 1; }

/* Ghost index in the corner. It gives the twelve cards a sense of
   order and keeps the eye moving instead of re-reading each title
   as if it started a new list. */
.feat .idx {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.3s var(--mk-ease), color 0.3s var(--mk-ease);
}
.feat:hover .idx,
.feat:focus-within .idx { opacity: 1; color: var(--purple); }

.feat .card-icon { transition: transform 0.35s var(--mk-ease), box-shadow 0.35s var(--mk-ease); }
.feat:hover .card-icon {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px var(--glow);
}

.feat h3 { font-size: 17px; margin-bottom: 8px; }
.feat p.muted { font-size: 14px; line-height: 1.62; margin-bottom: 0; }

/* ------------------------------------------------------------
   Workflow v2 — scoped under .mk so the dashboard's flow steps
   (if any) are untouched.
   ------------------------------------------------------------ */
.mk .flow-step {
  background: linear-gradient(180deg, rgba(var(--purple-rgb), 0.07), transparent 70%);
  border-color: var(--mk-line);
}
.mk .flow-step .num { color: var(--purple); opacity: 0.65; }
.mk .flow-arrow { opacity: 0.85; }

/* ------------------------------------------------------------
   Security band v2
   ------------------------------------------------------------ */
.mk .status-item { border-color: var(--mk-line); transition: border-color 0.3s var(--mk-ease), background 0.3s var(--mk-ease); }
.mk .status-item:hover { border-color: var(--border-strong); background: var(--glass-2); }
.mk .status-item .stat-desc { line-height: 1.45; }

/* ------------------------------------------------------------
   Buttons — a slightly larger primary for hero use only
   ------------------------------------------------------------ */
.btn-lg { padding: 14px 28px; font-size: 15.5px; }

/* ------------------------------------------------------------
   Premium teaser (landing) + page (premium.html)
   ------------------------------------------------------------ */
.prem-shell {
  position: relative;
  text-align: center;
  padding: 60px 32px;
  border-color: var(--border-strong);
  box-shadow: 0 0 100px -34px var(--glow);
  overflow: hidden;
}
/* A slow sheen across the shell so the tier reads as the one
   elevated thing on the page without introducing a new colour. */
.prem-shell::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(var(--purple-rgb), 0.09), transparent);
  transform: skewX(-12deg);
  animation: premSheen 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes premSheen {
  0%, 62% { inset-inline-start: -40%; }
  100% { inset-inline-start: 140%; }
}

.prem-shell .gate-ic {
  width: 68px;
  height: 68px;
  margin-inline: auto;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.22), rgba(var(--violet-rgb), 0.10));
  border: 1px solid var(--border-strong);
  color: var(--purple);
  font-size: 26px;
  box-shadow: 0 0 40px -12px var(--glow);
}

.prem-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--glass-2);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text);
}
.prem-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
  animation: premPulse 2.6s ease-in-out infinite;
}
@keyframes premPulse { 50% { opacity: 0.35; } }

/* ------------------------------------------------------------
   Free-vs-Premium comparison (premium.html)
   Deliberately a real table: it is tabular data, so <table> with
   a caption and scope'd headers is the correct semantic, not a
   grid of divs pretending to be one.
   ------------------------------------------------------------ */
.cmp { width: 100%; border-collapse: collapse; text-align: start; }
.cmp caption {
  caption-side: top;
  padding-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}
.cmp th, .cmp td { padding: 15px 18px; border-block-end: 1px solid var(--mk-line); vertical-align: middle; }
.cmp thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-block-end-color: var(--border-strong);
}
.cmp tbody th { font-weight: 550; color: var(--text); text-align: start; }
.cmp td { text-align: center; }
.cmp .col-free { color: var(--muted); }
.cmp .col-prem { color: var(--purple); background: rgba(var(--purple-rgb), 0.045); }
.cmp tbody tr:hover td { background: var(--glass); }
.cmp tbody tr:hover .col-prem { background: rgba(var(--purple-rgb), 0.07); }
.cmp .yes { color: var(--success); font-weight: 700; }
.cmp .no { color: var(--faint); }
.cmp-note { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------
   CTA band
   ------------------------------------------------------------ */
.cta-band { text-align: center; padding: 88px 0; }
.cta-band .section-title { margin-bottom: 14px; }
.cta-band .hero-cta { margin-top: 30px; }

/* ------------------------------------------------------------
   Responsive
   The 960px and 560px breakpoints in base.css stay as they are;
   these only finish the job for the markup this layer adds.
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  .mk { padding: 84px 0; }
  .hero-v2 { padding: 72px 0 64px; }
  .sec-head { margin-bottom: 42px; }
  .prem-shell { padding: 46px 22px; }
}

@media (max-width: 620px) {
  .kicker { letter-spacing: 0.16em; }
  .kicker::before, .kicker::after { width: 16px; }
  .hero-strip { gap: 8px 0; }
  .hero-strip li { padding-inline: 12px; font-size: 11px; }
  .hero-strip li + li::before { margin-inline-end: 12px; margin-inline-start: -12px; }
  .feat .idx { display: none; }   /* the number is decoration; the title is the content */
  .btn-lg { padding: 13px 22px; font-size: 15px; }

  /* The comparison table would otherwise overflow the viewport.
     Two-row cells keep it readable without a horizontal scroller. */
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp tbody th { border-block-end: 0; padding-block-end: 4px; font-weight: 650; }
  .cmp td { text-align: start; padding-block: 6px; }
  /* The header row is hidden above, so each cell has to say which
     column it belongs to. Derived from the table's own headers via
     attr(), so translating the <th> translates these labels too --
     no second set of strings to keep in sync. */
  .cmp .col-free, .cmp .col-prem { display: flex; align-items: center; gap: 8px; }
  .cmp .col-free::before { content: attr(data-label); color: var(--muted); font-size: 12px; min-width: 52px; }
  .cmp .col-prem::before { content: attr(data-label); color: var(--muted); font-size: 12px; min-width: 52px; }
}

/* The reduced-motion block in base.css already flattens every
   animation on the page, so the sheen and pulse above are covered
   by it. This repeats the two that matter for comprehension: the
   content must be readable and in place, never mid-transition. */
@media (prefers-reduced-motion: reduce) {
  .prem-shell::after { display: none; }
  .prem-badge .dot { animation: none; }
  .skip { transition: none; }
}