/* ============================================================
   TELBOT.AI — MAIN STYLESHEET
   Direction: Warm dark / amber-first / premium unexpected
   ============================================================ */

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

:root {
  /* === Warm dark backgrounds (NOT cold blue-black) === */
  --bg:          #080602;        /* near-black, warm undertone */
  --bg-2:        #0E0B06;
  --surface:     #130F08;        /* warm dark chocolate */
  --surface-2:   #1A1409;
  --surface-3:   #221B0D;

  /* === Brand palette from logo — amber-first === */
  --amber:       #FFB703;
  --amber-2:     #FFC833;
  --orange:      #FB8500;
  --orange-2:    #FF9A2E;
  --teal:        #219EBC;
  --teal-light:  #8ECAE6;
  --lime:        #E1FF2D;
  --lime-2:      #CAEB00;

  /* === Glow / dim versions === */
  --amber-glow:  rgba(255, 183, 3,  0.28);
  --amber-dim:   rgba(255, 183, 3,  0.10);
  --orange-dim:  rgba(251, 133, 0,  0.10);
  --teal-glow:   rgba(33,  158, 188, 0.22);
  --teal-dim:    rgba(33,  158, 188, 0.10);
  --lime-dim:    rgba(225, 255, 45,  0.10);

  /* === Glass (warm-tinted) === */
  --glass-bg:         rgba(19, 15, 8,  0.60);
  --glass-bg-warm:    rgba(34, 27, 13, 0.50);
  --glass-border:     rgba(255, 183, 3, 0.09);
  --glass-border-h:   rgba(255, 183, 3, 0.24);

  /* === Text (warm white, not cold white) === */
  --text:        #FFF8EE;
  --text-muted:  #9E8B72;
  --text-subtle: #5C4F3A;

  /* === UI tokens === */
  --radius:      14px;
  --radius-sm:   8px;
  --radius-lg:   22px;
  --max-w:       1200px;
  --section-py:  110px;
  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --tr:          150ms ease;
  --tr-md:       280ms cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Warm grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 800;
}

h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
h4 { font-size: 0.975rem; }

p { color: var(--text-muted); line-height: 1.78; }

/* === LAYOUT === */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 28px;
  position: relative;
  z-index: 1;
}

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

/* === SECTION LABEL === */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid rgba(255, 183, 3, 0.22);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  transition: all var(--tr-md);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Shimmer sweep on hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.45s ease;
}
.btn:hover::before { left: 160%; }

.btn-primary {
  background: linear-gradient(135deg, var(--amber) 0%, var(--orange) 100%);
  color: #0A0700;
  box-shadow: 0 4px 24px var(--amber-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  box-shadow: 0 8px 40px rgba(255,183,3,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

.btn-ghost {
  background: var(--glass-bg);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-ghost:hover {
  border-color: var(--glass-border-h);
  color: var(--text);
  transform: translateY(-2px);
}

.btn-teal {
  background: linear-gradient(135deg, var(--teal) 0%, #1A7A94 100%);
  color: #fff;
  box-shadow: 0 4px 24px var(--teal-glow);
}
.btn-teal:hover {
  box-shadow: 0 8px 40px rgba(33,158,188,0.45);
  transform: translateY(-2px);
}

/* === GLASS CARD === */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color var(--tr-md), transform var(--tr-md), box-shadow var(--tr-md);
}
.card:hover {
  border-color: var(--glass-border-h);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(255,183,3,0.08);
}

/* === TAGS === */
.tag {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255, 183, 3, 0.07);
  border: 1px solid rgba(255, 183, 3, 0.14);
  border-radius: 6px;
  padding: 3px 10px;
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* === GLOW DOT === */
.glow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2.6s ease-in-out infinite;
}
.glow-dot.amber  { background: var(--amber);  box-shadow: 0 0 8px var(--amber); }
.glow-dot.orange { background: var(--orange); box-shadow: 0 0 8px var(--orange); animation-delay: 0.6s; }
.glow-dot.teal   { background: var(--teal);   box-shadow: 0 0 8px var(--teal);  animation-delay: 1.2s; }
.glow-dot.lime   { background: var(--lime);   box-shadow: 0 0 10px var(--lime); animation-delay: 1.8s; }
.glow-dot.muted  { background: var(--text-subtle); box-shadow: none; animation: none; }

/* === KEYFRAMES === */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.65); }
}

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 15px) scale(0.96); }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(-25px, 20px); }
}

@keyframes orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes card-glow-in {
  from { box-shadow: 0 0 0 0 rgba(255,183,3,0); }
  to   { box-shadow: 0 0 32px 0 rgba(255,183,3,0.12); }
}

@keyframes flow-line {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

/* === RESPONSIVE BASE === */
@media (max-width: 768px) {
  :root { --section-py: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal        { transition: none; opacity: 1; transform: none; }
  .glow-dot      { animation: none; }
  .orb, .drift   { animation: none; }
}