/* ═══════════════════════════════════════════════════════════
   GrandShip Tech — company site
   Plain CSS, no build step. Safe to edit by hand.
   ═══════════════════════════════════════════════════════════ */

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

:root {
  /* ── Official brand ramp — "Deep water to open sky" (guidelines p.8) ──
     Six stops, no substitutes. Cyan is a spark, not a base: it must never
     cover more surface area than Navy Deep on the same page (p.9). */
  --cyan:   #04BFFC;   /* Signal Cyan  — signal dashes, highlights, hover   */
  --sky:    #0487ED;   /* Sky Blue     — links on dark, active states       */
  --ocean:  #0260D2;   /* Ocean Blue   — primary: CTAs, links, product      */
  --cobalt: #014BB6;   /* Cobalt       — gradients, secondary UI fills      */
  --harbor: #093891;   /* Harbor Blue  — sail shadow, dark-mode fills       */
  --navy:   #081F51;   /* Navy Deep    — darkest brand fill                 */

  /* Neutrals (p.9). Deep Space is the documented grandshiptech.com base. */
  --bg:     #060B18;
  --paper:  #F5F8FC;

  /* Semantic roles, so the ramp above stays the single source of truth. */
  --accent: var(--cyan);
  --link:   var(--sky);
  --cta:    var(--ocean);

  /* Product accents for the three-system suite, all on-ramp. */
  --rawatib:  #0487ED;
  --finance:  #04BFFC;
  --inventory:#014BB6;

  --green: #10B981;
  --amber: #F59E0B;

  --t1: #F2F6FC;
  --t2: #BFCCDE;
  --t3: #8493AC;

  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --border-accent: rgba(4,191,252,.28);

  /* Buttons ride the mid-ramp; text gradients get the cyan spark. */
  --grad:      linear-gradient(90deg,#0487ED,#0260D2);
  --grad-text: linear-gradient(90deg,#04BFFC,#0487ED);

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  --maxw: 1180px;

  /* Type system (p.10–11). Display sets the wordmark's geometry, body is
     built for dense trilingual content, mono carries system output. */
  --font-display: 'Space Grotesk','Sora','Poppins',sans-serif;
  --font:         'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:    'JetBrains Mono','SF Mono','Consolas',monospace;
}

/* Arabic and Kurdish pairing (p.11 multilingual note). Latin faces have no
   Arabic script, so both languages get their own display/body pair rather
   than falling back to whatever the OS happens to ship. */
html[lang="ar"], html[lang="ku"] {
  --font-display: 'Noto Kufi Arabic','Segoe UI',sans-serif;
  --font:         'IBM Plex Sans Arabic','Segoe UI',sans-serif;
}

/* Matches the scrolled header height: any in-page jump lands with the header
   already in its compact state. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Space for the fixed header at its full height. */
  padding-top: 132px;
  -webkit-font-smoothing: antialiased;
  /* Latin digits everywhere, including in Arabic */
  font-variant-numeric: lining-nums;
}

/* Display face, used large and tight, never for paragraphs (p.10). */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700; line-height: 1.18; letter-spacing: -.02em;
}
h1 { font-size: clamp(38px, 6.6vw, 78px); line-height: 1.08; }
h2 { font-size: clamp(27px, 3.9vw, 42px); }
h3 { font-size: 19px; font-weight: 600; }

/* Arabic and Kurdish letterforms join. Negative tracking pulls the joins
   apart and reads as a distortion of the script, which p.11 rules out.
   Noto Kufi also runs taller than the Latin faces: the Latin heading leading
   clips its ascenders, so the headings get their own. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ku"] h1, html[lang="ku"] h2, html[lang="ku"] h3 {
  letter-spacing: 0; line-height: 1.45;
}
html[lang="ar"] h1, html[lang="ku"] h1 { line-height: 1.35; }
a  { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }

::selection { background: rgba(4,191,252,.28); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Latin strings (emails, phones, tech names) inside RTL text */
.ltr { direction: ltr; display: inline-block; unicode-bidi: isolate; }

/* ── Background ─────────────────────────────────────────── */
.bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; }
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 100% 55% at 50% 0%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 55% at 50% 0%, #000 40%, transparent 100%);
}
.bg-glow { position: absolute; border-radius: 50%; filter: blur(18px); }
/* Mid-ramp blues carry the ambient wash. Cyan is deliberately absent here:
   at this size it would outweigh Navy Deep on the page (p.9). */
.bg-glow-1 { top: -16%; inset-inline-start: -12%; width: 56vw; height: 56vw;
  background: radial-gradient(circle, rgba(2,96,210,.16), transparent 62%); }
.bg-glow-2 { top: 26%; inset-inline-end: -18%; width: 52vw; height: 52vw;
  background: radial-gradient(circle, rgba(9,56,145,.22), transparent 62%); }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(60px, 8vw, 112px) 0; }
.band { background: rgba(255,255,255,.015); border-block: 1px solid var(--border); }
.mt-lg { margin-top: 46px; }
.mt-sm { margin-top: 12px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ── Type helpers ───────────────────────────────────────── */
/* Section labels read as system output, so they take the mono face (p.11). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
/* Neither the tracking nor the uppercasing applies to Arabic script. */
html[lang="ar"] .eyebrow, html[lang="ku"] .eyebrow {
  font-family: var(--font); letter-spacing: 0; text-transform: none;
}

h2 { margin-top: 14px; }
.h-md { font-size: clamp(23px, 3.2vw, 34px); }
.sub  { color: var(--t2); font-size: clamp(15px, 1.6vw, 18px); max-width: 64ch; margin-top: 14px; }
.lead { color: var(--t2); font-size: clamp(16px, 1.9vw, 19px); max-width: 62ch; margin-top: 22px; }
.muted-sm { color: var(--t3); font-size: 13px; }
.card-body { color: var(--t2); font-size: 15px; margin-top: 10px; }
.grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Header ─────────────────────────────────────────────── */
/* Fixed, not sticky, and this matters. A sticky header occupies flow, so
   shrinking it on scroll shortens the document, the browser clamps the scroll
   position, that fires another scroll event, and the header oscillates. Taken
   out of flow, its height can change without touching layout at all. The body
   padding below reserves the space it used to take. */
.header {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.header.is-scrolled {
  background: rgba(6,11,24,.82);
  border-bottom-color: var(--border);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
/* Tall enough to carry the stacked lockup above the 120px width floor.
   It does not stay tall: see the scrolled state below. */
.header-inner { display: flex; align-items: center; gap: 16px; height: 132px; transition: height .3s ease; }

/* Page 12: below the lockup's minimum size, use the mark alone rather than
   shrink the wordmark past legibility. That is exactly what a compact sticky
   header needs, so scrolling drops to the mark instead of squeezing both. */
.header.is-scrolled .header-inner { height: 68px; }
.header.is-scrolled .brand .mark { height: 40px; }
.header.is-scrolled .brand .wordmark { display: none; }

/* Misuse rule 6: the mark sits above the wordmark, never beside it. Both
   halves are the untouched artwork, split at the gap the designer left
   between them in the primary lockup. Composing from the two files beats
   shrinking a pre-composited lockup, where the rules flanking TECH close up
   on the letters. */
.brand {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px; flex-shrink: 0;
}
.brand .mark { width: auto; height: 66px; transition: height .3s ease; }
.brand .wordmark { width: 160px; height: auto; }

.footer .brand { gap: 12px; }
.footer .brand .mark { height: 68px; }
.footer .brand .wordmark { width: 232px; }

.menu { display: flex; align-items: center; gap: 16px; margin-inline-start: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 14px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; color: var(--t2);
  transition: color .2s ease, background .2s ease;
}
.nav a:hover { color: var(--t1); background: rgba(255,255,255,.06); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.langs {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: rgba(255,255,255,.04);
}
.langs button {
  padding: 5px 12px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--t2);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.langs button.is-active { background: var(--grad); color: #fff; }

.burger {
  display: none; width: 42px; height: 42px; margin-inline-start: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); cursor: pointer;
}
.burger span { width: 17px; height: 2px; background: var(--t1); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
/* Ocean Blue is the documented CTA colour. Cyan stays a spark, so it is not
   used as a button fill anywhere on the page. */
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 12px 30px rgba(2,96,210,.28); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: var(--border-strong); color: var(--t1); }
.btn-ghost:hover { border-color: var(--border-accent); background: rgba(4,191,252,.07); }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--t2);
}
html[lang="ar"] .badge, html[lang="ku"] .badge {
  font-family: var(--font); font-size: 12px; letter-spacing: 0; text-transform: none;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-live { color: var(--green); border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.09); }
.badge-soon { color: var(--amber); border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.09); }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: clamp(50px, 8vw, 104px) 0 clamp(44px, 6vw, 84px); }
.hero h1 { margin-top: 18px; max-width: 14ch; }

.stats {
  display: grid; gap: 20px; margin-top: 54px; padding-top: 32px;
  border-top: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* Stats are system output, so they take the mono face (p.11). */
.stat b {
  display: block; font-family: var(--font-mono);
  font-size: clamp(27px, 3.7vw, 38px); font-weight: 600;
  line-height: 1.1; letter-spacing: -.02em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; color: var(--t3); font-size: 14px; margin-top: 4px; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px; height: 100%;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,0,0,.35); }

.card-head { display: flex; align-items: center; gap: 14px; }
.card-head h3 { font-size: 19px; }
/* The mono face is wider than the body face, and these are product URLs that
   must not break across lines. */
.card-head .muted-sm { white-space: nowrap; }
.pmark {
  width: 46px; height: 46px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  color: var(--c); font-weight: 700; font-size: 20px;
}
.card-head .badge { margin-inline-start: auto; flex-shrink: 0; }

.ticks { display: grid; gap: 9px; margin-top: 18px; }
.ticks li {
  position: relative; padding-inline-start: 24px;
  font-size: 14.5px; color: var(--t2);
}
.ticks li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 0;
  color: var(--c, var(--accent)); font-weight: 700; font-size: 13px;
}
.card-link {
  display: inline-block; margin-top: 20px; color: var(--link);
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 500;
}
.card-link:hover { text-decoration: underline; }

.icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-md); background: rgba(4,135,237,.12);
  border: 1px solid var(--border-accent); color: var(--accent);
  font-size: 19px; margin-bottom: 16px;
}

.row-card { display: flex; gap: 18px; align-items: flex-start; }
.num {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border-accent); border-radius: var(--r-pill);
  color: var(--accent); font-family: var(--font-mono); font-weight: 500; font-size: 13px;
}

.steps li { padding-top: 22px; border-top: 2px solid var(--border-accent); }
.steps b { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }

/* Data, labels, timestamps and URLs — anything that should read as system
   output rather than a sentence (p.11). */
.mono { font-family: var(--font-mono); font-weight: 500; }
.steps h3 { font-size: 18px; margin-top: 6px; }

/* ── Rawatib spotlight ──────────────────────────────────── */
.spotlight {
  display: grid; gap: clamp(26px, 5vw, 54px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: clamp(26px, 5vw, 52px);
  background: radial-gradient(90% 120% at 100% 0%, rgba(46,133,236,.16), transparent 60%), rgba(255,255,255,.02);
}
.spot-logo { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.spot-logo img { height: 40px; width: auto; }
.feature-list { display: grid; gap: 12px; }
.feature-list li {
  position: relative; padding: 15px 18px; padding-inline-start: 44px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(255,255,255,.03); color: var(--t2); font-size: 15px;
}
.feature-list li::before {
  content: '✓'; position: absolute; inset-inline-start: 18px; top: 15px;
  color: var(--rawatib); font-weight: 700;
}

/* ── About ──────────────────────────────────────────────── */
.about { display: grid; gap: clamp(24px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.about .card-body + .card-body { margin-top: 16px; }
.tech { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tech li {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); color: var(--t2);
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 500; direction: ltr;
}

/* ── Contact ────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(26px, 4vw, 52px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.channels { display: grid; gap: 14px; margin-top: 30px; }
.channels li { display: flex; align-items: center; gap: 14px; }
.ch-ico {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--r-md); border: 1px solid var(--border-accent);
  background: rgba(4,135,237,.12); color: var(--accent); font-size: 17px;
}
.ch-label { display: block; color: var(--t3); font-size: 12.5px; }
.channels a { color: var(--t1); font-weight: 500; }
.channels a:hover { color: var(--link); }

.form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; color: var(--t2); font-weight: 500; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: rgba(255,255,255,.04); color: var(--t1);
  font-size: 15px; transition: border-color .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--link); background: rgba(4,135,237,.08);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:user-invalid { border-color: #EF4444; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { font-size: 14px; margin: 0; min-height: 22px; }
.form-note.ok  { color: var(--green); }
.form-note.err { color: #F87171; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); margin-top: 30px; }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between;
  padding-block: 48px 26px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: flex-start; }
.footer-nav a { color: var(--t2); font-size: 15px; }
.footer-nav a:hover { color: var(--link); }
.footer-base {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding-block: 20px 30px; border-top: 1px solid var(--border);
  color: var(--t3); font-size: 13.5px;
}
.footer-base a { color: var(--t2); }

/* ── Scroll reveal ──────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in { opacity: 1; transform: none; }
/* If JavaScript never runs, nothing should stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .menu { display: none; }
  .burger { display: flex; }

  /* Mobile drawer: nav links stacked above the language switch + CTA. */
  .header.is-open .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 18px;
    /* Follows the header instead of a fixed offset, since its height changes. */
    position: absolute; inset-inline: 0; top: 100%; margin: 0;
    padding: 18px 24px 24px;
    background: rgba(6,11,24,.98);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-block: 1px solid var(--border);
  }
  .header.is-open .nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .header.is-open .nav a { padding: 12px 14px; border-radius: var(--r-md); font-size: 16px; }
  .header.is-open .header-actions .btn { flex: 1; }
}

@media (max-width: 620px) {
  /* Still the full stacked lockup, just tightened. 132px keeps the wordmark
     above its 120px floor. */
  body { padding-top: 112px; }
  .header-inner { height: 112px; }
  .brand .mark { height: 54px; }
  .brand .wordmark { width: 132px; }
  .header.is-scrolled .header-inner { height: 62px; }
  .header.is-scrolled .brand .mark { height: 36px; }
  .footer .brand .mark { height: 58px; }
  .footer .brand .wordmark { width: 196px; }

  .form { grid-template-columns: 1fr; }
  .card-head { flex-wrap: wrap; }
  .card-head .badge { margin-inline-start: 0; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}