/* =========================================================
   Visual system inspired by koipay.partners — MOBILE FIRST.
   Base rules target small phones (~360px). Layout is enhanced
   progressively at 480 / 640 / 860 / 1100 / 1400px.
   Black canvas, neon-green accent, glass/chrome circular
   ornaments, huge outline wordmark, ticker marquee, light FAQ.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #050606;
  --bg-raised: #0c0f0e;
  --bg-panel: #0f1412;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --text: #f3f5f4;
  --text-muted: #98a19c;
  --text-faint: #5c6560;
  --green: #34ff7a;
  --green-strong: #1fe266;
  --green-deep: #0f8f43;
  --tg-blue: #2aabee;
  --tg-blue-light: #3fb8f7;
  --tg-blue-deep: #229ed9;
  --tg-plane-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%3E%3Cpath%20d='M446.7%2098.6l-67.6%20318.8c-5.1%2022.5-18.4%2028.1-37.3%2017.5l-103-75.9-49.7%2047.8c-5.5%205.5-10.1%2010.1-20.6%2010.1l7.4-104.9%20190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8%20284%2016.2%20252.2c-22.1-6.9-22.5-22.1%204.6-32.7L418.2%2066.4c18.4-6.9%2034.5%204.1%2028.5%2032.2z'/%3E%3C/svg%3E");
  --mint: #a5ecc6;
  --light-bg: #eeefec;
  --light-line: rgba(0,0,0,.10);
  --light-text: #0c0f0e;
  --light-muted: #565f5a;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --container: 1240px;
  --pad: 18px;
  --font-display: 'Space Grotesk', 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-hindi: 'Noto Sans Devanagari', 'Manrope', sans-serif;
}

/* Hindi mode: swap the type family site-wide so Devanagari renders with a
   font actually designed for it, instead of falling back to a random OS font */
html[data-lang="hi"]{ --font-display: var(--font-hindi); --font-body: var(--font-hindi); }

/* Hindi labels run longer than their English equivalents — tighten a few
   tight spots so nothing wraps or overflows */
html[data-lang="hi"] .main-nav{ gap: 16px; }
html[data-lang="hi"] .main-nav a{ font-size: 12px; }
@media (min-width: 1300px){
  html[data-lang="hi"] .main-nav{ gap: 22px; }
  html[data-lang="hi"] .main-nav a{ font-size: 13px; }
}
html[data-lang="hi"] .tab-label{ font-size: 9px; }
html[data-lang="hi"] .marquee-track span{ font-size: 10px; }
@media (min-width: 640px){ html[data-lang="hi"] .marquee-track span{ font-size: 11px; } }

/* ---------- reset / base (mobile) ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* overflow-x:clip (not hidden) on purpose: "hidden" on html/body is a known
   bug that breaks position:sticky on iOS Safari. clip keeps the no-horizontal-
   scroll guarantee without turning body into a scroll container. */
html, body{ max-width: 100%; overflow-x: clip; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px;
}
@media (min-width: 1100px){ body{ padding-bottom: 0; } }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 640px){ :root{ --pad: 28px; } }
@media (min-width: 1100px){ :root{ --pad: 32px; } body{ font-size:16px; } }

section{ position: relative; }
.section-pad{ padding: 56px 0; }
@media (min-width: 640px){ .section-pad{ padding: 80px 0; } }
@media (min-width: 1100px){ .section-pad{ padding: 120px 0; } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before{ content:""; width:14px; height:1px; background: var(--green); display:inline-block; }

h1, .h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 9vw, 70px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}
.intro-text{
  font-size: 16px;
  color: var(--text-muted);
  max-width: 720px;
}
@media (min-width: 640px){ .intro-text{ font-size:18px; } }

/* ---------- scroll-reveal (JS adds/removes these classes; placed early in the
   cascade so later component :hover rules always win on equal specificity) ---------- */
.reveal-init{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal-init.is-revealed{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity:1; transform:none; transition:none; }
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom: 36px;
}
@media (min-width: 640px){ .section-head{ gap:18px; margin-bottom:48px; } }
@media (min-width: 1100px){ .section-head{ margin-bottom:56px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
  width: 100%;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
@media (min-width: 480px){ .btn{ width:auto; font-size:15px; height:52px; padding:0 26px; } }
.btn-primary{ background: var(--green); color: #06110a; }
.btn-primary:hover{ background: var(--green-strong); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover{ border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.btn-pill-light{ background: #fff; color: #0a0a0a; }
.btn-pill-light:hover{ transform: translateY(-2px); }
.btn-block{ width:100% !important; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

.hero-actions, .cta-actions, .rates-cta{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 480px){
  .hero-actions, .cta-actions, .rates-cta{ flex-direction: row; flex-wrap:wrap; gap:14px; }
}

/* ---------- header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 60;
  padding: 12px 0 0;
  background: rgba(5,6,6,.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
}
.site-header.is-scrolled{
  background: rgba(5,6,6,.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
@media (min-width: 1100px){ .site-header{ padding: 18px 0 0; } .site-header.is-scrolled{ padding:12px 0 0; } }

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
  flex:none;
}
.brand-logo{
  height: 24px;
  width: auto;
  display:block;
}
@media (min-width: 640px){ .brand-logo{ height: 28px; } }
@media (min-width: 1100px){ .brand-logo{ height: 30px; } }

/* header brand shows the wordmark by default, swaps to the fish icon once
   the header is in its compact/scrolled state (keeps the header short) */
.brand-logo-icon{ display:none; }
.site-header.is-scrolled .brand-logo-word{ display:none; }
.site-header.is-scrolled .brand-logo-icon{ display:block; }

.main-nav{ display:none; }
@media (min-width: 1100px){
  .main-nav{ display:flex; align-items:center; gap:26px; }
  .main-nav a{ font-size: 13px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted); transition: color .2s ease; }
  .main-nav a:hover, .main-nav a.is-active{ color: var(--text); }
}

.header-actions{ display:flex; align-items:center; gap: 6px; }
@media (min-width: 480px){ .header-actions{ gap:10px; } }

/* language switch: always visible (even on the smallest phones), just
   compacted at narrow widths so it never pushes the header to overflow */
.lang-switch{ display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color: var(--text-muted); flex: none; white-space:nowrap; }
.lang-switch button{ background:none; border:none; color:inherit; padding:2px 3px; }
.lang-switch button.is-active{ color: var(--text); }
.lang-switch .sep{ color: var(--text-faint); }
@media (min-width: 480px){ .lang-switch{ gap:6px; font-size:12px; } .lang-switch button{ padding:2px 4px; } }
@media (min-width: 1100px){ .lang-switch{ font-size:13px; } }

/* "Talk to manager" pill: always visible in the header. On the narrowest
   phones it collapses to an icon-only circle (Telegram plane via the
   ::before rule below) so the label doesn't force a wrap; the text
   returns once there's room. */
.header-actions > .btn-pill-light{
  display:inline-flex; width:auto; flex:none;
  height:36px; padding:0 10px; gap:0;
}
.header-actions > a.btn[href^="https://t.me/"].btn-pill-light::before{ margin-right:0; width:15px; height:15px; }
.header-actions > .btn-pill-light .btn-label{ display:none; }
@media (min-width: 420px){
  .header-actions > .btn-pill-light{ font-size:13px; padding:0 16px; }
  .header-actions > a.btn[href^="https://t.me/"].btn-pill-light::before{ margin-right:7px; }
  .header-actions > .btn-pill-light .btn-label{ display:inline; }
}
@media (min-width: 640px){ .header-actions > .btn-pill-light{ height:40px; } }
@media (min-width: 1100px){ .header-actions > .btn-pill-light{ height:44px; font-size:14px; } }

.mobile-drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5,6,6,.98);
  display:flex;
  flex-direction:column;
  padding: 20px 20px 32px;
  transform: translateY(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
.mobile-drawer.is-open{ transform: translateY(0); }
.mobile-drawer .drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap:18px; }
.mobile-drawer nav a{ font-size: 21px; font-family: var(--font-display); font-weight:600; }
.mobile-drawer .drawer-cta{ margin-top:32px; display:flex; flex-direction:column; gap:12px; }
@media (min-width: 1100px){ .mobile-drawer{ display:none !important; } }

/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 28px 0 0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(52,255,122,.08), transparent 55%),
    radial-gradient(ellipse at 80% 10%, rgba(255,255,255,.05), transparent 45%),
    var(--bg);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events:none;
}
.hero-wordmark{
  display:none;
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-align:center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(70px, 13vw, 240px);
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.13);
  white-space: nowrap;
  pointer-events:none;
  user-select:none;
  z-index: 0;
}
@media (min-width: 860px){ .hero-wordmark{ display:block; } }

.hero-tags{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--text-muted);
  padding-top: 22px;
  margin-bottom: 4px;
}
@media (min-width: 700px){ .hero-tags{ padding-top: 56px; font-size:12px; } }
@media (min-width: 1100px){ .hero-tags{ padding-top: 80px; } }

.hero-body{
  position: relative;
  z-index: 2;
  padding: 22px 0 36px;
  display:flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 860px){
  .hero-body{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items:center; padding: 26px 0 40px; }
}
.hero-copy{ display:flex; flex-direction:column; gap: 20px; }
/* hero photo only shows once there's room for the two-column layout —
   on phones/tablets it gets dropped rather than squeezed in awkwardly */
.hero-visual{ display:none; }
@media (min-width: 860px){ .hero-visual{ display:flex; justify-content:flex-end; align-items:center; } }

.img-placeholder{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  color: var(--text-faint);
  font-size: 12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  line-height:1.6;
  text-align:center;
  padding: 24px;
}
.hero-photo-frame{
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-panel);
}
.hero-photo-frame img{ width:100%; height:100%; object-fit: cover; display:block; }
@media (min-width: 480px){ .hero-photo-frame{ max-width: 300px; } }
@media (min-width: 860px){ .hero-photo-frame{ max-width: 380px; } }

.chrome-rings{ position:relative; width: 160px; height: 160px; }
@media (min-width: 860px){ .chrome-rings{ width: 220px; height: 220px; } }
.chrome-ring{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,.03) 40%, rgba(0,0,0,.4) 75%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 0 30px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  color: rgba(255,255,255,.75);
}
.chrome-ring.r1{ width:70%; height:70%; top:0; left:0; font-size: 24px; }
.chrome-ring.r2{ width:70%; height:70%; bottom:0; right:0; font-size: 18px; background: radial-gradient(circle at 30% 25%, rgba(52,255,122,.5), rgba(0,0,0,.2) 55%, rgba(0,0,0,.6) 80%); }
@media (min-width: 860px){ .chrome-ring.r1, .chrome-ring.r2{ font-size:30px; } .chrome-ring.r2{ font-size:22px; } }

/* ticker now lives inside the sticky header, so it is always in view */
.marquee{
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}
.marquee-track{ display:flex; width: max-content; animation: marquee 22s linear infinite; }
.marquee-seq{ display:flex; flex:none; }
.marquee-track span{
  display:flex; align-items:center; gap: 8px;
  padding: 7px 16px;
  font-family: var(--font-display);
  font-weight:700;
  font-size: 10.5px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color: var(--text-muted);
  white-space:nowrap;
}
@media (min-width: 640px){ .marquee-track span{ font-size:11.5px; padding:8px 20px; } }
.marquee-track span::after{ content:""; width:4px; height:4px; border-radius:50%; background: var(--green); flex:none; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- metrics ---------- */
.metric-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 480px){ .metric-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .metric-grid{ grid-template-columns: repeat(4, 1fr); } }
.metric-card{ background: var(--bg-panel); padding: 24px 20px; display:flex; flex-direction:column; gap: 8px; }
@media (min-width: 640px){ .metric-card{ padding: 34px 26px; gap:10px; } }
.metric-card .metric-icon{ font-size: 20px; }
.metric-card .metric-value{ font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--green); }
@media (min-width: 640px){ .metric-card .metric-value{ font-size:34px; } }
.metric-card .metric-label{ font-size: 13px; color: var(--text-muted); }
@media (min-width: 640px){ .metric-card .metric-label{ font-size:14px; } }

/* ---------- feature rows ---------- */
.feature-row{ display:flex; flex-direction:column; gap: 24px; }
@media (min-width: 860px){ .feature-row{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items:center; } }
.feature-visual{
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), rgba(0,0,0,.2) 60%), var(--bg-panel);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
@media (min-width: 860px){ .feature-visual{ aspect-ratio:1; } }
.feature-visual .img-placeholder{ position:absolute; inset: 14px; width:auto; }

.feature-list{ display:flex; flex-direction:column; }
.feature-item{ padding: 18px 0; border-top: 1px solid var(--line); }
.feature-item:last-child{ border-bottom: 1px solid var(--line); }
.feature-item .tag{ color: var(--green); font-family: var(--font-display); font-weight: 700; margin-right: 8px; }
.feature-item h3{ display:inline; }
.feature-item p{ margin-top: 8px; color: var(--text-muted); font-size:14px; }
@media (min-width: 640px){ .feature-item{ padding:22px 0; } .feature-item p{ margin-top:10px; font-size:15px; } }

/* ---------- card grids ---------- */
.card-grid, .blog-grid, .visual-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px){ .card-grid, .blog-grid, .visual-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 960px){ .card-grid, .blog-grid, .visual-grid{ grid-template-columns: repeat(3, 1fr); } }

.feature-card{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition: border-color .2s ease, transform .2s ease;
}
@media (min-width: 640px){ .feature-card{ padding: 30px 26px; gap:16px; } }
.feature-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.feature-card .icon{
  width: 40px; height:40px; border-radius:12px;
  background: rgba(52,255,122,.1); color: var(--green);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.feature-card p{ color: var(--text-muted); font-size:14px; }
@media (min-width: 640px){ .feature-card p{ font-size:15px; } }

/* ---------- workflow ---------- */
.workflow{ display:flex; flex-direction:column; }
@media (min-width: 860px){ .workflow{ display:grid; grid-template-columns: repeat(3, 1fr); } }
.workflow-step{ position:relative; padding: 0 0 28px; border-left:none; border-top: 1px solid var(--line); padding-top:22px; margin-top:22px; }
.workflow-step:first-child{ border-top:none; padding-top:0; margin-top:0; }
@media (min-width: 860px){
  .workflow-step{ border-top:none; margin-top:0; padding-top:0; padding-right:28px; border-left: 1px solid var(--line); padding-left:28px; }
  .workflow-step:first-child{ border-left:none; padding-left:0; }
}
.workflow-step .step-no{ font-family: var(--font-display); font-weight:700; font-size: 14px; color: var(--green); margin-bottom: 12px; display:block; }
.workflow-step h3{ margin-bottom: 8px; }
.workflow-step p{ color: var(--text-muted); font-size:14px; }
@media (min-width: 640px){ .workflow-step p{ font-size:15px; } }

/* ---------- rates panel ---------- */
.rates-panel{
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-raised));
  border: 1px solid var(--line);
  border-top: 2px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
}
@media (min-width: 640px){ .rates-panel{ padding: 36px 30px; } }
@media (min-width: 1100px){ .rates-panel{ padding: 48px; } }
.pill-row{ display:flex; flex-wrap:wrap; gap: 8px; margin: 18px 0 28px; }
.pill{ border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
@media (min-width: 640px){ .pill{ font-size:13px; padding:8px 16px; } .pill-row{ gap:10px; margin:22px 0 40px; } }
.rates-panel .metric-grid{ border:none; background:none; }
.rates-panel .metric-card{ background: rgba(255,255,255,.02); border-radius: var(--radius-sm); padding: 20px 16px; }
.rates-cta{ margin-top: 28px; }
@media (min-width: 640px){ .rates-cta{ margin-top:36px; } }

/* ---------- primary CTA ---------- */
.cta-section{ text-align:center; }
.cta-section .section-head{ align-items:center; text-align:center; margin: 0 auto 32px; }
.cta-section .intro-text{ margin: 0 auto; }
.cta-actions{ justify-content:center; margin: 24px auto 40px; max-width: 320px; }
@media (min-width: 480px){ .cta-actions{ max-width:none; } }
.telegram-orb{
  width: 150px; height:150px;
  margin: 0 auto 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px;
  transition: border-color .2s ease, transform .2s ease;
  padding: 0 14px;
  text-align:center;
}
@media (min-width: 640px){ .telegram-orb{ width:190px; height:190px; gap:14px; margin-bottom:40px; } }
.telegram-orb:hover{ border-color: var(--tg-blue); transform: translateY(-4px); }
.telegram-orb .tg-label{ font-family: var(--font-display); font-weight:700; font-size:15px; }
@media (min-width: 640px){ .telegram-orb .tg-label{ font-size:18px; } }
.telegram-orb .tg-icon{ width:40px; height:40px; border-radius:50%; background: linear-gradient(155deg, var(--tg-blue-light), var(--tg-blue-deep)); color:#fff; display:flex; align-items:center; justify-content:center; }
.telegram-orb .tg-icon svg{ width:18px; height:18px; fill:#fff; }
@media (min-width: 640px){
  .telegram-orb .tg-icon{ width:44px; height:44px; }
  .telegram-orb .tg-icon svg{ width:20px; height:20px; }
}

/* ---------- Telegram brand-blue: applies automatically to every link that
   points at Telegram, so any future CTA is instantly recognizable ---------- */
a.btn[href^="https://t.me/"]{
  background: linear-gradient(155deg, var(--tg-blue-light), var(--tg-blue-deep));
  color: #ffffff;
  border-color: transparent;
}
a.btn[href^="https://t.me/"]:hover{ background: linear-gradient(155deg, #5cc4fb, var(--tg-blue)); transform: translateY(-2px); }
a.btn.btn-outline[href^="https://t.me/"]{ background: transparent; color: var(--tg-blue); border-color: var(--tg-blue); }
a.btn.btn-outline[href^="https://t.me/"]:hover{ background: rgba(42,171,238,.12); color: #ffffff; }
a.btn-pill-light[href^="https://t.me/"]{ background: linear-gradient(155deg, var(--tg-blue-light), var(--tg-blue-deep)); color:#ffffff; }
a.btn[href^="https://t.me/"]::before{
  content:"";
  display:inline-block;
  width:15px; height:15px;
  margin-right:8px;
  background-color: currentColor;
  -webkit-mask-image: var(--tg-plane-icon);
  mask-image: var(--tg-plane-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -2px;
}

.footer-links a[href^="https://t.me/"]{ color: var(--tg-blue); font-weight:700; }
.footer-links a[href^="https://t.me/"]:hover{ color: #5cc4fb; }
.footer-links a[href^="https://t.me/"]::before{
  content:"";
  display:inline-block;
  width:13px; height:13px;
  margin-right:6px;
  background-color: currentColor;
  -webkit-mask-image: var(--tg-plane-icon);
  mask-image: var(--tg-plane-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -1px;
}

.tab-item[href^="https://t.me/"]{ color: var(--tg-blue); }
.tab-item[href^="https://t.me/"]:hover{ color: #5cc4fb; }

.quick-overview{
  display:flex; justify-content:center; flex-wrap:wrap; gap: 22px 30px;
  padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 30px 0;
}
@media (min-width: 640px){ .quick-overview{ gap:40px; padding:34px 0; margin:40px 0; } }
.quick-overview .qo-item{ text-align:center; }
.quick-overview .qo-value{ font-family: var(--font-display); font-weight:700; font-size:22px; color: var(--green); }
@media (min-width: 640px){ .quick-overview .qo-value{ font-size:26px; } }
.quick-overview .qo-label{ font-size: 12px; color: var(--text-muted); margin-top:6px; }
.support-line{ color: var(--text-muted); font-size:14px; }

/* ---------- product visual language ---------- */
.visual-card{ border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px 22px; background: var(--bg-panel); }
@media (min-width: 640px){ .visual-card{ padding:30px; } }
.visual-card .glyph{ font-family: var(--font-display); font-size: 26px; color: var(--green); margin-bottom: 14px; }
@media (min-width: 640px){ .visual-card .glyph{ font-size:30px; margin-bottom:18px; } }
.visual-card p{ color: var(--text-muted); margin-top: 8px; font-size:14px; }
@media (min-width: 640px){ .visual-card p{ font-size:15px; margin-top:10px; } }

/* ---------- blog cards ---------- */
.blog-card{
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; background: var(--bg-panel);
  display:flex; flex-direction:column; gap: 12px; transition: border-color .2s ease, transform .2s ease;
}
@media (min-width: 640px){ .blog-card{ padding:28px; gap:16px; } }
.blog-card:hover{ border-color: var(--green); transform: translateY(-4px); }
.blog-card .meta{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.blog-card h3{ font-size:17px; }
@media (min-width: 640px){ .blog-card h3{ font-size:19px; } }
.blog-card p{ color: var(--text-muted); font-size:14px; }
.blog-card .arrow{ margin-top:auto; color: var(--green); font-weight:700; font-size:14px; }

/* ---------- footer ---------- */
/* ---------- footer (kept deliberately minimal: logo, one link row, copyright) ---------- */
.site-footer{ border-top: 1px solid var(--line); padding: 30px 0; background: var(--bg-raised); }
.footer-simple{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap: 10px 18px; }
.footer-links a{ color: var(--text-muted); font-size:13px; }
.footer-links a:hover{ color: var(--text); }
.footer-bottom{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size: 12px; color: var(--text-faint); }
@media (min-width: 640px){
  .footer-bottom{ flex-direction:row; justify-content:center; gap:14px; }
}

/* ---------- FAQ (light section) ---------- */
.faq-section{ background: var(--light-bg); color: var(--light-text); }
.faq-section .eyebrow{ color: var(--green-deep); }
.faq-section .eyebrow::before{ background: var(--green-deep); }
.faq-section .intro-text{ color: var(--light-muted); }
.faq-list{ border-top: 1px solid var(--light-line); }
.faq-item{ border-bottom: 1px solid var(--light-line); }
.faq-q{
  width:100%; display:flex; align-items:center; gap: 14px;
  padding: 18px 0; background:none; border:none; text-align:left; color: var(--light-text);
}
@media (min-width: 640px){ .faq-q{ gap:24px; padding:26px 0; } }
.faq-q .faq-no{ font-family: var(--font-display); font-weight:700; color: var(--light-muted); min-width: 26px; font-size:14px; }
@media (min-width: 640px){ .faq-q .faq-no{ min-width:34px; font-size:16px; } }
.faq-q .faq-title{ flex:1; font-family: var(--font-display); font-weight:600; font-size: 16px; }
@media (min-width: 640px){ .faq-q .faq-title{ font-size:19px; } }
.faq-q .faq-chevron{ transition: transform .2s ease; color: var(--light-muted); flex:none; }
.faq-item.is-open .faq-chevron{ transform: rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .28s ease; }
.faq-a-inner{ padding: 0 0 22px; color: var(--light-muted); max-width: 760px; font-size:14px; }
@media (min-width: 640px){ .faq-a-inner{ padding: 0 0 28px 58px; font-size:15px; } }
.faq-closing{ text-align:center; margin-top: 46px; }
@media (min-width: 640px){ .faq-closing{ margin-top:60px; } }

/* ---------- calculator ---------- */
.calc-shell{ display:flex; flex-direction:column; gap: 20px; }
@media (min-width: 900px){ .calc-shell{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px; } }
.calc-panel{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px; }
@media (min-width: 640px){ .calc-panel{ padding: 36px; } }
.calc-presets{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 22px; }
.preset-btn{
  border:1px solid var(--line-strong); background:transparent; color: var(--text-muted);
  border-radius:999px; padding: 7px 14px; font-size:12px; font-weight:700;
}
@media (min-width: 640px){ .preset-btn{ padding:8px 18px; font-size:13px; } }
.preset-btn.is-active{ border-color: var(--green); color: var(--green); }
.field{ margin-bottom: 20px; }
.field label{ display:flex; justify-content:space-between; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--text-muted); margin-bottom:10px; }
.field label .field-value{ color: var(--green); }
.field input[type=range]{ width:100%; accent-color: var(--green); }
.field input[type=number]{
  width:100%; background: var(--bg-raised); border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: 12px 14px; font-size:16px; margin-top:8px;
}
.calc-result-value{ font-family: var(--font-display); font-weight:700; font-size: 36px; color: var(--green); }
@media (min-width: 640px){ .calc-result-value{ font-size:46px; } }
.calc-breakdown{ margin-top: 20px; display:flex; flex-direction:column; gap:12px; }
.calc-breakdown .row{ display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:12px; font-size:13px; color:var(--text-muted); }
.calc-breakdown .row span:last-child{ color: var(--text); font-weight:600; text-align:right; }
.projection-table{ margin-top:14px; }
.projection-table .row span:last-child{ font-family: var(--font-display); color: var(--green); }
.proj-growth-note{
  margin-top: 14px; font-size:13px; font-weight:700; color: var(--green);
  background: rgba(52,255,122,.08); border: 1px solid rgba(52,255,122,.25);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.calc-disclaimer{ font-size:12px; color: var(--text-faint); margin-top: 20px; }

/* ---------- apply form ---------- */
.form-shell{ display:flex; flex-direction:column; gap: 30px; }
@media (min-width: 900px){ .form-shell{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; } }
.form-panel{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 20px; }
@media (min-width: 640px){ .form-panel{ padding: 36px; } }
.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-size:12px; font-weight:700; color: var(--text-muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.05em; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: 13px 14px; font-size:16px; font-family: inherit;
}
.form-row textarea{ resize: vertical; min-height: 100px; }
.form-row .hint{ font-size:12px; color: var(--text-faint); margin-top:6px; }
.form-row.has-error input, .form-row.has-error select{ border-color:#ff5c5c; }
.form-row .error-msg{ font-size:12px; color:#ff8585; margin-top:6px; display:none; }
.form-row.has-error .error-msg{ display:block; }
.privacy-note{ font-size:12px; color: var(--text-faint); margin-top: 16px; }
.success-panel{ display:none; text-align:center; padding: 44px 16px; }
.success-panel.is-visible{ display:block; }
.success-panel .check{ width:56px; height:56px; border-radius:50%; background: rgba(52,255,122,.12); color: var(--green); display:flex; align-items:center; justify-content:center; font-size:24px; margin: 0 auto 18px; }
.benefit-list{ display:flex; flex-direction:column; }
.benefit-item{ padding: 16px 0; border-top:1px solid var(--line); }
.benefit-item:last-child{ border-bottom:1px solid var(--line); }
.step-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
@media (min-width: 480px){ .step-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }

/* ---------- misc ---------- */
.divider{ height:1px; background: var(--line); border:none; margin: 44px 0; }
@media (min-width: 640px){ .divider{ margin:60px 0; } }
.text-center{ text-align:center; }
.mt-lg{ margin-top: 44px; }
@media (min-width: 640px){ .mt-lg{ margin-top:60px; } }
.badge-note{
  display:inline-flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.5; color: var(--text-faint);
  border:1px dashed var(--line-strong); border-radius: var(--radius-sm); padding:12px 16px; margin-top:16px;
}
.back-to-top{
  position: fixed; right: 16px; bottom: 78px; width: 42px; height:42px; border-radius:50%;
  background: var(--green); color:#06110a; display:flex; align-items:center; justify-content:center; font-size:16px;
  opacity:0; pointer-events:none; transition: opacity .25s ease; z-index: 50;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }
@media (min-width: 1100px){ .back-to-top{ right:24px; bottom:24px; width:46px; height:46px; font-size:18px; } }

.breadcrumbs{ font-size:12px; color: var(--text-faint); margin-bottom: 16px; }
.breadcrumbs a:hover{ color: var(--text); }

.page-hero{ padding: 108px 0 40px; border-bottom: 1px solid var(--line); }
@media (min-width: 700px){ .page-hero{ padding: 150px 0 56px; } }
.page-hero .eyebrow{ margin-bottom: 14px; }
.page-hero .intro-text{ margin-top: 14px; }

.values-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 560px){ .values-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
.value-chip{ border:1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; }
.value-chip::before{ content:"//"; color: var(--green); font-family: var(--font-display); }

.bullet-list{ display:flex; flex-direction:column; gap:14px; }
.bullet-list li{ display:flex; gap:12px; font-size:15px; }
.bullet-list li::before{ content:"//"; color: var(--green); font-family: var(--font-display); font-weight:700; flex:none; }

/* ---------- mobile bottom tab bar (replaces the old plain CTA bar) ---------- */
.mobile-tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index: 56;
  display:flex; align-items:stretch;
  background: rgba(5,6,6,.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  gap: 4px;
}
@media (min-width: 1100px){ .mobile-tabbar{ display:none; } }
.tab-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  padding: 6px 2px;
  border:none; background:none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size:10px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius: 12px;
  transition: color .2s ease, background .2s ease, transform .15s ease;
}
.tab-item .tab-icon{ font-size:18px; line-height:1; }
.tab-item .tab-icon svg{ width:18px; height:18px; fill:currentColor; display:block; }
.tab-item:active{ transform: scale(.92); }
.tab-item.is-active{ color: var(--green); }
.tab-item-primary{
  background: linear-gradient(155deg, var(--green), var(--green-deep));
  color:#04150c;
}
.tab-item-primary.is-active{ color:#04150c; }

/* ---------- ambient cursor glow (desktop / mouse pointers only) ---------- */
.cursor-glow{
  position: fixed;
  top:0; left:0;
  width: 360px; height:360px;
  margin-left:-180px; margin-top:-180px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(52,255,122,.18), rgba(52,255,122,.06) 45%, transparent 72%);
  pointer-events:none;
  z-index: 40;
  opacity:0;
  transition: opacity .5s ease;
  will-change: transform;
}
.cursor-glow.is-active{ opacity:1; }