/* ==========================================================================
   Tekyerden landing — global foundation
   Tokens extracted verbatim via getComputedStyle from the design.
   ========================================================================== */

:root {
  /* --- ink & text ------------------------------------------------------ */
  --ink: #181D4E;          /* primary text (178 elements) */
  --muted: #4A4F7E;        /* secondary body text */
  --muted-2: #7A7FA8;      /* tertiary text */
  --muted-3: #9A9EC2;      /* eyebrow / label text */
  --white: #FFFFFF;

  /* --- brand ----------------------------------------------------------- */
  --pink: #6C63FF;
  --pink-mid: #7A70FF;
  --pink-deep: #2E259C;
  --pink-soft: #9A93FF;
  --pink-tint: #EEEDFF;
  --pink-line: #E6E4F7;
  --pink-line-2: #DEDBF5;
  --indigo: #6C63FF;
  --navy-800: #161C8E;
  --navy-900: #0D1060;

  /* --- surfaces -------------------------------------------------------- */
  --bg: #FFFFFF;
  --bg-tint: #F8F9FE;
  --bg-tint-2: #F6F7FC;

  /* --- lines ----------------------------------------------------------- */
  --line-soft: #ECEEF8;
  --line: #E4E7F6;
  --line-2: #E6E9F6;
  --line-3: #D9DDF1;
  --line-4: #E8EAF5;
  --line-5: #F0F1F9;

  /* --- status ---------------------------------------------------------- */
  --green: #18A06A;
  --green-bright: #3DDC97;

  /* --- gradients ------------------------------------------------------- */
  --grad-hero: linear-gradient(#FFFFFF 0%, #F8F9FE 100%);
  --grad-trust: linear-gradient(165deg, #161C8E 0%, #0D1060 100%);
  --grad-dark: linear-gradient(135deg, #6C63FF, #0D1060);
  --grad-dark-alt: linear-gradient(135deg, #161C8E, #0D1060);
  --grad-pink: linear-gradient(135deg, #6C63FF, #2E259C);
  --grad-pink-red: linear-gradient(#7A70FF, #5A4FEE);
  --grad-slot: linear-gradient(135deg, #EEF0FB 0%, #EAE7F9 100%);

  /* --- elevation ------------------------------------------------------- */
  --shadow-card: 0 24px 50px rgba(24, 29, 78, .12);
  --shadow-card-lg: 0 30px 70px rgba(24, 29, 78, .12);
  --shadow-cta: 0 14px 34px rgba(108, 99, 255, .28);

  /* --- radii ----------------------------------------------------------- */
  --r-pill: 999px;
  --r-xl: 28px;
  --r-lg: 24px;
  --r-card: 22px;
  --r-md: 14px;
  --r-sm: 12px;
  --r-xs: 10px;

  /* --- layout ---------------------------------------------------------- */
  --container: 1180px;
  --container-pad: 32px;
  --header-h: 78px;

  /* --- motion ---------------------------------------------------------- */
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- reset (matches the design's own reset) ---------------------------- */
html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

::selection { background: var(--pink-mid); color: #fff; }

input, button, select, textarea { font-family: inherit; }

img { max-width: 100%; display: block; }

/* --- layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Section vertical rhythm. The design uses 90–130px desktop padding,
   collapsing to 56/64px at <=860px. */
.section-pad    { padding-top: 110px; padding-bottom: 110px; }
.section-pad-lg { padding-top: 130px; padding-bottom: 130px; }
.section-pad-sm { padding-top: 96px;  padding-bottom: 96px;  }

/* --- shared type ---------------------------------------------------------- */
.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted-3);
  margin: 0 0 14px;
}

.h2 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.92px;
  color: var(--ink);
  margin: 0;
}

.card {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* --- keyframes (verbatim from the design) ------------------------------- */
@keyframes waveDrift { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes pulseDot  { 0%, 100% { opacity: 1; }              50% { opacity: .35; } }
@keyframes mobMenu   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- scroll reveal --------------------------------------------------------
   JS adds .is-hidden only to elements that start below 92vh, then removes it
   on intersection. Elements above the fold never get the class, so they never
   animate — matching the design's _initReveal() early-return. */
[data-reveal] {
  transition: opacity .8s ease, transform .8s var(--reveal-ease);
}

[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-hidden { opacity: 1; transform: none; transition: none; }
  .wave-track, .strip-track, .pulse-dot { animation: none !important; }
}

/* --- inline SVG fidelity switch -------------------------------------------
   On the design every one of the 8 inline SVGs renders at 0×0 — verified
   computed width/height of 0px on all of them, despite each carrying correct
   width/height attributes and a viewBox. The cause is a bug in the design's
   hand-rolled renderer: it builds elements with document.createElement("svg")
   in the HTML namespace instead of createElementNS(SVG_NS, …), so the result is
   an unknown HTML element that ignores width/height and collapses. The same
   code path also emits a stray lowercase `viewbox` attribute alongside the
   correct one, which is the tell.

   Net effect on the design: the product-card waves, the trust section's large
   background swoosh, the hero badge check, and the PCI DSS lock are all present
   in the DOM but invisible. This page reproduces that, because pixel-perfect
   emulation is the goal.

   TO SHOW THE ICONS AS THE DESIGNER INTENDED: delete this one rule. The markup
   and the SVG source are already correct and complete in every section, so the
   graphics light up immediately. Page geometry is unaffected either way — the
   decorative SVGs are absolutely positioned and the two inline ones sit in flex
   rows whose gaps apply regardless. */
body svg { width: 0; height: 0; }

/* --- nav dropdowns (CSS hover, exactly like the design) ------------------ */
.dc-dd-panel { display: none; }
.dc-dropdown:hover .dc-dd-panel { display: block; }

/* --- responsive visibility ------------------------------------------------- */
[data-mobile-only] { display: none; }

/* Verified against the design at 390px: the horizontal container padding stays
   32px all the way down — it does NOT shrink. --container-pad is deliberately
   not overridden here. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  [data-desktop-only] { display: none !important; }
  [data-mobile-only]  { display: flex !important; }

  .section-pad,
  .section-pad-lg { padding-top: 64px; padding-bottom: 64px; }
  .section-pad-sm { padding-top: 56px; padding-bottom: 56px; }

  .h2 { font-size: 32px; letter-spacing: -0.64px; }
}