/* ==========================================================================
   NetWelop — base layer: fonts, reset, elements, layout primitives, utilities
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted. No third-party font host means no extra DNS/TLS round trip on
   the critical path, and no `font-src` exception in the CSP. */

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
    u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+2074, u+20ac, u+2122, u+2191,
    u+2193, u+2212, u+2215, u+feff, u+fffd;
}

@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: u+0100-02af, u+0304, u+0308, u+0329, u+1e00-1e9f, u+1ef2-1eff,
    u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}

@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/vazirmatn-var.woff2") format("woff2");
}

@layer base {
  /* ----------------------------------------------------------------- reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sticky nav height + breathing room, so #anchor targets are not hidden */
    scroll-padding-top: 6.5rem;
  }

  body {
    min-height: 100svh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
    font-variant-numeric: tabular-nums;
    overflow-x: clip;
  }

  /* The old stylesheet justified all body text. Justification without
     hyphenation opens rivers of whitespace, badly in Persian. Left/start
     aligned with balanced wrapping reads better and is what modern editorial
     sites do. */
  p {
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
  h4 { font-size: var(--fs-lg); }
  h5 { font-size: var(--fs-md); }
  h6 { font-size: var(--fs-base); }

  a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.22em;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  /* Default box for the inline icon set. Without it an SVG with only a
     viewBox stretches to fill whatever flex or grid track it lands in. */
  .ic {
    display: inline-block;
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
    vertical-align: -0.2em;
  }

  img,
  video {
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  ul,
  ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--line);
  }

  ::selection {
    background: color-mix(in oklab, var(--indigo-500) 45%, transparent);
    color: #fff;
  }

  /* --------------------------------------------------------- focus & a11y */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--sp-3);
    inset-inline-start: var(--sp-3);
    z-index: var(--z-toast);
    padding: 0.7rem 1.15rem;
    background: var(--indigo-500);
    color: #fff;
    border-radius: var(--r-sm);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--dur) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* --------------------------------------------------------- scrollbars */
  @supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-track {
      background: var(--ink-900);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--ink-600);
      border-radius: var(--r-full);
      border: 2px solid var(--ink-900);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--ink-500);
    }
  }

  html {
    scrollbar-color: var(--ink-600) var(--ink-900);
  }
}

@layer layout {
  /* ------------------------------------------------------------ container */
  .wrap {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  .wrap-narrow {
    width: min(100% - (var(--gutter) * 2), var(--container-narrow));
    margin-inline: auto;
  }

  .wrap-wide {
    width: min(100% - (var(--gutter) * 2), var(--container-wide));
    margin-inline: auto;
  }

  .section {
    position: relative;
    padding-block: var(--section-y);
  }

  .section-tight {
    padding-block: clamp(3rem, 6vw, 5rem);
  }

  /* --------------------------------------------------------------- stacks */
  .stack > * + * {
    margin-block-start: var(--flow, var(--sp-4));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, var(--sp-3));
    align-items: center;
  }

  .grid {
    display: grid;
    gap: var(--gap, var(--sp-6));
  }

  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

  .split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    grid-template-columns: 1fr;
  }

  @media (min-width: 62rem) {
    .split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .split-wide-start { grid-template-columns: 1.15fr 0.85fr; }
    .split-wide-end { grid-template-columns: 0.85fr 1.15fr; }
  }
}

@layer utilities {
  /* --------------------------------------------------------------- text */
  .t-hero { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
  .t-4xl { font-size: var(--fs-4xl); }
  .t-3xl { font-size: var(--fs-3xl); }
  .t-2xl { font-size: var(--fs-2xl); }
  .t-xl { font-size: var(--fs-xl); }
  .t-lg { font-size: var(--fs-lg); }
  .t-md { font-size: var(--fs-md); }
  .t-sm { font-size: var(--fs-sm); }
  .t-xs { font-size: var(--fs-xs); }

  .lead {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    max-width: 62ch;
  }

  .muted { color: var(--text-muted); }
  .dim { color: var(--text-dim); }
  .strong-text { color: var(--text-strong); }

  .w-400 { font-weight: 400; }
  .w-500 { font-weight: 500; }
  .w-600 { font-weight: 600; }
  .w-700 { font-weight: 700; }
  .w-800 { font-weight: 800; }
  .w-900 { font-weight: 900; }

  .measure { max-width: 65ch; }
  .measure-tight { max-width: 48ch; }

  .center { text-align: center; }
  .center-x { margin-inline: auto; }

  .mono {
    font-family: var(--font-mono);
    font-size: 0.86em;
    letter-spacing: 0;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--brand-alt);
  }

  .eyebrow::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background: linear-gradient(
      to inline-end,
      transparent,
      color-mix(in oklab, var(--cyan-400) 90%, transparent)
    );
  }

  .eyebrow-center::before { display: none; }

  /* Gradient text. -webkit-* prefixes are still required in Safari. */
  .grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .grad-text-brand {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .grad-text-product {
    background: var(--grad-product);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .ltr { direction: ltr; unicode-bidi: isolate; }
  .rtl { direction: rtl; unicode-bidi: isolate; }
  .nowrap { white-space: nowrap; }

  /* ------------------------------------------------------------- spacing */
  .mt-0 { margin-block-start: 0; }
  .mt-2 { margin-block-start: var(--sp-2); }
  .mt-3 { margin-block-start: var(--sp-3); }
  .mt-4 { margin-block-start: var(--sp-4); }
  .mt-6 { margin-block-start: var(--sp-6); }
  .mt-8 { margin-block-start: var(--sp-8); }
  .mt-10 { margin-block-start: var(--sp-10); }
  .mt-12 { margin-block-start: var(--sp-12); }
  .mt-16 { margin-block-start: var(--sp-16); }
  .mb-4 { margin-block-end: var(--sp-4); }
  .mb-6 { margin-block-end: var(--sp-6); }
  .mb-8 { margin-block-end: var(--sp-8); }
  .mb-12 { margin-block-end: var(--sp-12); }

  .full { inline-size: 100%; }

  /* --------------------------------------------------------- decoration */
  .hairline {
    block-size: 1px;
    border: 0;
    background: linear-gradient(
      to inline-end,
      transparent,
      var(--line-strong) 20%,
      var(--line-strong) 80%,
      transparent
    );
  }

  .hide { display: none !important; }

  @media (max-width: 47.99rem) {
    .hide-sm { display: none !important; }
  }

  @media (min-width: 48rem) {
    .only-sm { display: none !important; }
  }

  @media (max-width: 61.99rem) {
    .hide-md { display: none !important; }
  }
}

/* --------------------------------------------------- reduced motion global */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}