/* =====================================================================
   ROKO — SITE STYLES
   ---------------------------------------------------------------------
   Colors and fonts come from tokens.css. You normally only need to
   edit tokens.css. This file controls layout and components.

   Contents
     1. Base
     2. Buttons & small parts
     3. Header / navigation
     4. Hero + terminal
     5. Trust strip
     6. Sections (shared)
     7. Services
     8. Compare
     9. AI approach
    10. Process
    11. Engagements (pricing)
    12. FAQ
    13. Call to action
    14. Footer
    15. Language switcher
    16. Arabic / right-to-left
   ===================================================================== */


/* 1. Base ------------------------------------------------------------ */

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 64px, var(--container)); } }

:focus-visible { outline: 3px solid var(--ember-500); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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


/* 2. Buttons & small parts ------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.85em 1.45em;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 1.1em; height: 1.1em; }

.btn-primary { background: var(--ember-500); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--ember-400); }

.btn-dark { background: var(--ink-900); color: var(--paper); }
.btn-dark:hover { background: var(--ink-700); }

.btn-outline { border-color: var(--paper-300); color: var(--ink-900); background: var(--white); }
.btn-outline:hover { border-color: var(--ink-900); }

.btn-ghost-light { border-color: rgb(255 255 255 / 0.2); color: var(--paper); }
.btn-ghost-light:hover { border-color: var(--paper); }

.btn-sm { padding: 0.6em 1.1em; font-size: 0.9375rem; }

/* Small monospace label above headings. The square is the logo "cursor". */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-bottom: 1rem;
  font: 500 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 2px; background: var(--ember-500);
}
.on-dark .eyebrow { color: var(--ember-400); }

/* Ember highlight inside headings: <em>like this</em> */
h1 em, h2 em { font-style: normal; color: var(--ember-500); }
.on-light h2 em { color: var(--ember-600); }

/* Checkmark list */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7em; }
.checks li { position: relative; padding-inline-start: 1.75em; }
.checks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.32em;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  background: var(--circuit-500)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% no-repeat;
}


/* 3. Header / navigation --------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink-950);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.nav-logo img { height: 34px; width: auto; }

.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--ink-300); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--paper); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.15); border-radius: 12px;
  background: transparent; color: var(--paper); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none;
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px 16px 24px;
    background: var(--ink-950);
    border-bottom: 1px solid rgb(255 255 255 / 0.07);
  }
  .site-header.is-open .nav-menu { display: flex; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid rgb(255 255 255 / 0.06); }
  .nav-menu .btn { margin-top: 12px; }
}


/* 4. Hero + terminal -------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 128px);
  background: var(--ink-950);
  color: var(--paper);
}
/* Faint blueprint grid */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, #000 20%, transparent 75%);
}
/* Ember glow */
.hero::after {
  content: ""; position: absolute;
  width: 720px; height: 720px; inset-inline-end: -220px; top: -260px;
  background: radial-gradient(circle, rgb(255 90 31 / 0.22), transparent 62%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); margin-bottom: 0.4em; }
.hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-300); max-width: 34em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 28px; }

.hero-points { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; color: var(--ink-300); font-size: 0.95rem; }
.hero-points li { display: inline-flex; align-items: center; gap: 0.5em; }
.hero-points li::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--ember-500); }

.terminal {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 8px rgb(255 255 255 / 0.02);
  font: 400 0.875rem/1.85 var(--font-mono);
  overflow: hidden;
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-700);
  color: var(--ink-500); font-size: 0.8rem;
}
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-700); }
.terminal-bar span { margin-inline-start: auto; }
.terminal-body { padding: 20px 22px 24px; color: var(--ink-300); overflow-wrap: anywhere; }
.terminal-body p { margin: 0; }
.t-prompt { color: var(--ember-500); }
.t-cmd    { color: var(--paper); }
.t-ok     { color: var(--circuit-500); }
.t-dim    { color: var(--ink-500); }
.t-hi     { color: var(--paper); font-weight: 500; }
.t-gap    { height: 0.8em; }
.cursor {
  display: inline-block; width: 0.6em; height: 1.1em;
  vertical-align: -0.2em; background: var(--ember-500);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }


/* 5. Trust strip ------------------------------------------------------ */

.strip { background: var(--ink-900); color: var(--ink-300); border-top: 1px solid rgb(255 255 255 / 0.06); }
.strip ul {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px;
  list-style: none; margin: 0; padding: 22px 0;
  font: 500 0.875rem/1.4 var(--font-mono);
}
.strip li { display: inline-flex; align-items: center; gap: 0.6em; }
.strip li strong { color: var(--paper); font-weight: 500; }
@media (max-width: 640px) { .strip ul { justify-content: flex-start; } }


/* 6. Sections (shared) ----------------------------------------------- */

.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-alt  { background: var(--color-surface-alt); }
.section-dark { background: var(--ink-950); color: var(--paper); }
.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 56px); }
.section-head p:not(.eyebrow) { font-size: 1.15rem; color: var(--color-text-muted); }
.section-dark .section-head p:not(.eyebrow) { color: var(--ink-300); }


/* 7. Services --------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--ink-100); }
.card p { color: var(--color-text-muted); margin: 0; }
.card-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 22px;
  border-radius: 14px;
  background: var(--ink-900); color: var(--ember-500);
}
.card-icon svg { width: 24px; height: 24px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 0; list-style: none; }
.card-tags li {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--color-border);
  font: 500 0.75rem/1.6 var(--font-mono); color: var(--ink-500);
}


/* 8. Compare ---------------------------------------------------------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }

.compare-col { border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px); }
.compare-col h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.compare-col h3 img { width: 32px; height: 32px; }
.compare-col ul { list-style: none; margin: 0; padding: 0; }
.compare-col li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid; }
.compare-col li strong { display: block; font-weight: 600; }
.compare-col li span { font-size: 0.95rem; }

.compare-old { background: var(--paper-200); border: 1px solid var(--paper-300); color: var(--ink-500); }
.compare-old li { border-color: var(--paper-300); }
.compare-old li::before { content: "✕"; color: var(--ink-300); font-weight: 700; }
.compare-old strong { color: var(--ink-700); }

.compare-new { background: var(--ink-900); color: var(--ink-300); }
.compare-new h3 { color: var(--paper); }
.compare-new li { border-color: var(--ink-700); }
.compare-new li::before { content: "✓"; color: var(--ember-500); font-weight: 700; }
.compare-new strong { color: var(--paper); }


/* 9. AI approach ------------------------------------------------------ */

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink-700); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
.pillar { padding-block: 36px 8px; padding-inline: 0 32px; }
.pillar + .pillar { padding-inline-start: 32px; border-inline-start: 1px solid var(--ink-700); }
@media (max-width: 860px) {
  .pillar, .pillar + .pillar { padding: 28px 0; border-inline-start: 0; border-bottom: 1px solid var(--ink-700); }
}
.pillar-label { font: 500 0.8rem/1 var(--font-mono); color: var(--ember-500); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.pillar h3 { color: var(--paper); }
.pillar p:not(.pillar-label) { color: var(--ink-300); margin: 0; }


/* 10. Process --------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding: 28px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block; margin-bottom: 28px;
  font: 500 0.875rem/1 var(--font-mono); color: var(--ember-700);
}
.step-time {
  display: inline-block; margin-top: 16px; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--ember-50);
  font: 500 0.75rem/1.6 var(--font-mono); color: var(--ember-700);
}
.step p { color: var(--color-text-muted); margin: 0; font-size: 0.975rem; }


/* 11. Engagements (pricing) ------------------------------------------ */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 560px; } }

.plan {
  display: flex; flex-direction: column;
  padding: 34px 30px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.plan-name { font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-700); margin-bottom: 14px; }
.plan h3 { font-size: 1.6rem; margin-bottom: 0.35em; }
.plan-desc { color: var(--color-text-muted); }
.plan-price { font: 700 1.5rem/1.2 var(--font-display); margin: 8px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); }
.plan-price small { display: block; margin-top: 4px; font: 400 0.875rem/1.4 var(--font-body); color: var(--color-text-muted); }
.plan .checks { margin-bottom: 32px; font-size: 0.975rem; }
.plan .btn { margin-top: auto; }

.plan-featured { background: var(--ink-900); border-color: var(--ink-900); color: var(--ink-300); position: relative; }
.plan-featured h3, .plan-featured .plan-price { color: var(--paper); }
.plan-featured .plan-name { color: var(--ember-400); }
.plan-featured .plan-desc, .plan-featured .plan-price small { color: var(--ink-300); }
.plan-featured .plan-price { border-color: var(--ink-700); }
.plan-badge {
  position: absolute; top: 28px; inset-inline-end: 26px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--ember-500); color: var(--color-on-accent);
  font: 600 0.72rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
}


/* 12. FAQ ------------------------------------------------------------- */

.faq-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; } }

.faq details { border-bottom: 1px solid var(--color-border); }
.faq details:first-child { border-top: 1px solid var(--color-border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 600 1.1rem/1.35 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--color-border);
  font: 400 1.2rem/1 var(--font-mono); color: var(--ink-500);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--ember-500); border-color: var(--ember-500); color: var(--ink-950); }
.faq details p { color: var(--color-text-muted); padding-inline-end: 54px; margin: -6px 0 24px; }


/* 13. Call to action -------------------------------------------------- */

.cta { background: var(--ember-500); color: var(--ink-950); padding: clamp(64px, 9vw, 112px) 0; position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(10 13 18 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(10 13 18 / 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.cta .container { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
@media (max-width: 860px) { .cta .container { grid-template-columns: 1fr; align-items: start; } }
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0; }
.cta h2 em { color: inherit; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.cta p { font-size: 1.15rem; margin-bottom: 24px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta .btn-outline { background: transparent; border-color: rgb(10 13 18 / 0.35); }
.cta .btn-outline:hover { border-color: var(--ink-950); }


/* 14. Footer ---------------------------------------------------------- */

.site-footer { background: var(--ink-950); color: var(--ink-300); padding: 72px 0 32px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand img { height: 36px; width: auto; margin-bottom: 18px; }
.footer-brand p { max-width: 30em; }
.site-footer h4 { font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); margin: 6px 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--paper); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink-800);
  font: 400 0.8125rem/1.5 var(--font-mono); color: var(--ink-500);
}


/* 15. Language switcher ---------------------------------------------- */

.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-300); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  padding: 6px 12px; border: 1px solid rgb(255 255 255 / 0.15); border-radius: var(--radius-pill);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lang-switch:hover { color: var(--paper); border-color: var(--paper); }
.lang-switch svg { width: 16px; height: 16px; }
@media (max-width: 920px) { .nav-menu .lang-switch { align-self: flex-start; margin-top: 12px; } }


/* 16. Arabic / right-to-left ------------------------------------------
   Layout flips automatically (the CSS uses logical properties like
   padding-inline-start). These rules handle what Arabic needs on top:
   no letter-spacing (it breaks the joins between letters), taller line
   heights for dots and diacritics, and mirrored arrows. */

[dir="rtl"] body { line-height: 1.8; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] .hero h1 { line-height: 1.3; }

[dir="rtl"] .eyebrow,
[dir="rtl"] .strip ul,
[dir="rtl"] .pillar-label,
[dir="rtl"] .plan-name,
[dir="rtl"] .plan-badge,
[dir="rtl"] .step-time,
[dir="rtl"] .card-tags li,
[dir="rtl"] .site-footer h4,
[dir="rtl"] .footer-bottom { letter-spacing: 0; text-transform: none; }

/* The monospace font's wide spaces look broken between Arabic words */
[dir="rtl"] .eyebrow,
[dir="rtl"] .strip ul,
[dir="rtl"] .pillar-label,
[dir="rtl"] .plan-name,
[dir="rtl"] .plan-badge,
[dir="rtl"] .step-time,
[dir="rtl"] .card-tags li,
[dir="rtl"] .site-footer h4,
[dir="rtl"] .footer-bottom { font-family: var(--font-body); }

/* Arabic reads smaller than Latin at the same size */
[dir="rtl"] .eyebrow     { font-size: 0.95rem; }
[dir="rtl"] .pillar-label,
[dir="rtl"] .plan-name   { font-size: 0.95rem; line-height: 1.4; }
[dir="rtl"] .strip ul    { font-size: 0.95rem; }
[dir="rtl"] .site-footer h4 { font-size: 0.9rem; }

[dir="rtl"] .btn svg { transform: scaleX(-1); }

[dir="rtl"] .hero::before {
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 35%, #000 20%, transparent 75%);
}

/* Code stays left-to-right inside Arabic pages */
[dir="rtl"] .terminal { direction: ltr; text-align: left; }