/* ADONIS TELECOM — light surface, red accent
   ---------------------------------------------------------------------------
   Every value below is measured, not picked by eye. The load-bearing number:
   #E50914 scores 4.79:1 against white, clearing AA in both directions — it
   works as type on the page AND as a button fill under white text. That is
   what lets one colour carry the identity instead of needing a separate
   "text red" and "fill red".

   Anything lighter (#F4404E 3.69, #FF4D5A 3.25) is decorative only: gradients,
   glows, hairlines. Never type.

   The --gold* names are kept as aliases so no existing rule has to be
   rewritten to find its colour; they resolve to red now. */

:root {
  /* Red scale */
  --red-50:  #FFF1F2;   /* wash / hover surface        */
  --red-100: #FFE4E6;   /* soft fill                   */
  --red-200: #FECDD3;   /* border on tinted surface    */
  --red-400: #FF4D5A;   /* 3.25 — decorative only      */
  --red-500: #F4404E;   /* 3.69 — gradient highlight   */
  --red-600: #E50914;   /* 4.79 — PRIMARY, type + fill */
  --red-700: #D40812;   /* 5.46 — hover                */
  --red-800: #C2070F;   /* 6.30 — links, pressed       */
  --red-900: #A3060E;   /* 8.11 — deep accent          */

  /* Ink */
  --ink-900: #0B1220;   /* 18.7 */
  --ink-800: #14213D;   /* 16.0 — headings */
  --ink-600: #334155;   /* 10.4 — body     */
  --ink-400: #64748B;   /*  4.8 — muted    */

  /* Semantic aliases — the names components already reference. */
  --gold:      var(--red-600);
  --gold-2:    var(--red-700);
  --gold-glow: rgba(229, 9, 20, .28);
  --line-gold: rgba(229, 9, 20, .32);

  --bg:   #FFFFFF;
  --bg-2: #FAFAFB;
  --bg-3: #FFF1F2;

  --surface:   #FFFFFF;
  --surface-2: #FAFAFB;
  --line:      #E8EAEF;

  --text:   #14213D;
  --text-2: #334155;
  --text-3: #64748B;

  --shadow-sm:  0 1px 2px rgba(11, 18, 32, .05);
  --shadow-md:  0 4px 16px rgba(11, 18, 32, .07);
  --shadow-lg:  0 18px 48px rgba(11, 18, 32, .10);
  --shadow-red: 0 12px 32px rgba(229, 9, 20, .22);

  --font: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --container: min(1480px, 92vw);
  --radius: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); font-size: 17px; line-height: 1.65;
  color: var(--text-2); background: var(--bg); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { color: var(--text); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
a { color: var(--red-700); text-decoration: none; transition: all .25s ease; }
a:hover { color: var(--red-800); }
img { max-width: 100%; }

.t2-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* Sections stack, so every boundary is padding-bottom + padding-top: a flat
   110 meant 220px of white between one block of content and the next, and the
   same 110 on a phone where it is most of a screen. Fluid instead — 88 on a
   desktop (176 per boundary, a fifth tighter) down to 56 on a narrow screen. */
.t2-section { padding: clamp(56px, 6vw, 88px) 0; position: relative; }
.t2-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--red-600); font-weight: 700; font-size: 13px;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px;
}
.t2-kicker::before { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--red-600)); }
.t2-h2 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 18px; text-wrap: balance; }
.t2-lead { font-size: 19px; color: var(--text-2); max-width: 620px; }

/* Accent words inside a heading. Solid red, not a gradient: at display weight
   a gradient's pale end drops under the contrast floor. */
.t2-grad-text { color: var(--red-600); }

/* Buttons */
.t2-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px;
  border-radius: 999px; font-weight: 700; font-size: 16px; font-family: var(--font);
  cursor: pointer; border: 0; transition: all .25s ease; position: relative;
}
.t2-btn--gold { background: var(--red-600); color: #FFFFFF; box-shadow: var(--shadow-sm); }
.t2-btn--gold:hover {
  background: var(--red-700); color: #FFFFFF;
  transform: translateY(-2px); box-shadow: var(--shadow-red);
}
.t2-btn--ghost { background: #FFFFFF; color: var(--text); border: 1px solid var(--line); backdrop-filter: none; }
.t2-btn--ghost:hover { border-color: var(--red-600); color: var(--red-600); box-shadow: var(--shadow-md); }

/* Cards. The name stays "glass" because every template references it, but on
   a light page the effect is a raised white card, not a frosted panel. */
.t2-glass {
  background: #FFFFFF; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.t2-glass:hover { transform: translateY(-5px); border-color: var(--red-200); box-shadow: var(--shadow-lg); }

/* Ambient wash behind section headers. */
.t2-orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
.t2-orb--gold { background: rgba(229, 9, 20, .10); }
.t2-orb--blue { background: rgba(244, 64, 78, .07); }

/* scroll reveal (activated by shared.js) */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="left"].is-in, [data-reveal="right"].is-in { transform: none; }

[data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .15s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .25s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .35s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .45s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .55s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .65s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .75s; }

/* marquee */
.t2-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.t2-marquee__track { display: flex; gap: 14px; width: max-content; animation: t2marquee 36s linear infinite; }
.t2-marquee:hover .t2-marquee__track { animation-play-state: paused; }
@keyframes t2marquee { to { transform: translateX(-50%); } }

/* typewriter caret */
.t2-caret { display: inline-block; width: 3px; height: .95em; background: var(--red-600); margin-left: 6px; vertical-align: -.08em; animation: t2blink 1s step-end infinite; }
@keyframes t2blink { 50% { opacity: 0; } }

:focus-visible { outline: 3px solid var(--red-600); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .t2-marquee__track { animation: none; }
  .t2-caret { animation: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 768px) { .t2-section { padding: 72px 0; } body { font-size: 16px; } }

/* Wide desktops: let the layout claim the screen instead of floating in it. */
@media (min-width: 1900px) {
  :root { --container: 1720px; }
  body { font-size: 18px; }
}

/* ===== RTL (Persian / Arabic) ===== */
html[dir="rtl"] body { font-family: "Vazirmatn", "Inter", Tahoma, sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; }
html[dir="rtl"] .t2-kicker { letter-spacing: 0; }
html[dir="rtl"] .t2-kicker::before { background: linear-gradient(-90deg, transparent, var(--red-600)); }
html[dir="rtl"] .t2-caret { margin-left: 0; margin-right: 6px; }

/* ===== Network mesh =====
   The drifting grid from the Business section, extracted so it can be reused
   without copying the paint. It means something specific — network reach — so
   it belongs on sections about coverage, not anywhere that needs decorating.
   Host must be position:relative + overflow:hidden.
   Applied as an element (.t2-mesh) or as a section's ::before. */
.t2-mesh, .t23-biz__grid, .tp-hero::before {
  position: absolute; inset: -70px; z-index: 0; pointer-events: none; opacity: .55;
  /* ink at 16%, knocked back by the opacity to roughly the weight of --line —
     a hint of structure on white, not a visible net */
  background:
    linear-gradient(rgba(20, 33, 61, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 33, 61, .16) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  /* transform-only tile scroll: 56px == one grid cell, so the loop is seamless */
  animation: t23-mesh 16s linear infinite;
  will-change: transform;
}
@keyframes t23-mesh { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(56px, 56px, 0); } }

/* The vertical wash the mesh sits on: white edges, faintest lift at the middle,
   so the section reads as lit rather than as a flat panel. */
.t2-wash { background: linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg)); }

@media (prefers-reduced-motion: reduce) {
  .t2-mesh, .t23-biz__grid, .tp-hero::before { animation: none !important; }
}

/* ===== Language switcher ===== */
.lang-switcher { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.lang-switcher .lang-pill, .cur-switcher .lang-pill {
  border: 1px solid var(--line); background: #FFFFFF; color: var(--text-2);
  font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  padding: 5px 9px; border-radius: 999px; cursor: pointer; line-height: 1;
  transition: all .2s ease;
}
.lang-switcher .lang-pill:hover, .cur-switcher .lang-pill:hover { border-color: var(--red-600); color: var(--red-600); }
.lang-switcher .lang-pill.active, .cur-switcher .lang-pill.active { background: var(--red-600); border-color: var(--red-600); color: #FFFFFF; }
/* On the ink topbar. Scoped, so the floating fallback stays light-on-white.
   Inactive pills carry no fill at all — the red active pill is then the only
   filled thing in the bar, which is the whole job of the control. */
.t21-topbar .lang-pill { background: transparent; border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .72); }
.t21-topbar .lang-pill:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
/* .active needs no override — the base red-600 fill already reads correctly
   on ink, and is now the only filled pill in the bar. */
.lang-switcher--floating { position: fixed; top: 12px; right: 12px; z-index: 1001; }
html[dir="rtl"] .lang-switcher .lang-pill, html[dir="rtl"] .cur-switcher .lang-pill { font-family: "Inter", sans-serif; }
@media (max-width: 1250px) {
  .lang-switcher { max-width: none; overflow-x: auto; scrollbar-width: none; }
  .lang-switcher::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) { .lang-switcher { max-width: none; } }

/* [hidden] lives in the UA stylesheet, so any author `display` rule on the
   same element outranks it — a card set to display:flex stayed visible even
   with the attribute applied, which is why destination search filtered
   nothing. Global because every list that filters hits this. */
[hidden] { display: none !important; }