/* ============================================================
   ALEXA (split from addons.css)
   ============================================================ */

/* ============================================================
   SKILL ALEXA + RSK (brascast-alexa.html)
   ============================================================ */

/* --- HERO --- */
.ax-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 80px) 0 88px; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); }
.ax-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ax-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.ax-blob-1 { width: 740px; height: 740px; background: radial-gradient(circle, rgba(0,168,225,.22) 0%, rgba(0,168,225,.08) 35%, transparent 70%); top: -200px; right: -180px; }
.ax-blob-2 { width: 540px; height: 540px; background: radial-gradient(circle, rgba(23,141,114,.22) 0%, rgba(23,141,114,.08) 35%, transparent 70%); bottom: -180px; left: -180px; }
.ax-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.ax-hero-text .tag { margin-bottom: 20px; }
.ax-hero-text h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text); margin: 0 0 18px; text-wrap: balance; }
.ax-hero-text h1 .accent { color: var(--green); }
.ax-hero-text .sub { font-size: 20px; color: var(--text-muted); line-height: 1.6; margin-bottom: 28px; max-width: 520px; text-wrap: pretty; }
.ax-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ax-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.ax-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border: 1.5px solid var(--border); border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text); }
.ax-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Echo visual + speech bubbles */
.ax-hero-visual { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; }

/* Echo Dot 4th gen - fabric sphere + LED ring + black base */
.ax-echo { position: relative; width: 280px; height: 280px; animation: axFloat 4s ease-in-out infinite; }

/* Sound waves radiating from Echo (sonar effect) - 4 rings with staggered delays */
.ax-echo-wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(78, 203, 255, .55);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  animation: axEchoWave 3.2s cubic-bezier(.2, .6, .35, 1) infinite;
}
.ax-echo-wave:nth-child(1) { animation-delay: 0s; }
.ax-echo-wave:nth-child(2) { animation-delay: .8s; }
.ax-echo-wave:nth-child(3) { animation-delay: 1.6s; }
.ax-echo-wave:nth-child(4) { animation-delay: 2.4s; }

@keyframes axEchoWave {
  0%   { transform: scale(.92); opacity: .55; border-color: rgba(78, 203, 255, .55); }
  60%  { opacity: .18; }
  100% { transform: scale(2.05); opacity: 0; border-color: rgba(78, 203, 255, .05); }
}

/* sphere must stay above the waves */
.ax-echo-sphere { z-index: 1; }
@keyframes axFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Sphere body */
/* Full sphere (new Echo Dot): grid-like fabric texture, slightly flattened at the base */
.ax-echo-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 50% / 52% 52% 48% 48%;
  background: radial-gradient(circle at 30% 28%, #6a6e76 0%, #4a4e56 24%, #2e3138 58%, #1c1f24 100%);
  box-shadow:
    inset 0 -50px 70px rgba(0,0,0,.5),
    inset 0 10px 22px rgba(255,255,255,.05),
    0 30px 50px -10px rgba(15,30,27,.3);
  overflow: hidden;
}

/* Fabric weave overlay - two thin diagonal directions to simulate fabric texture */
/* Mesh / cross-hatch texture (more visible than the previous one) */
.ax-echo-fabric {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1.2px, transparent 1.2px 4.5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.14) 0 1.2px, transparent 1.2px 4.5px),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.3) 100%);
  mix-blend-mode: overlay;
  opacity: .95;
}

/* Specular highlight on the top-left corner */
.ax-echo-highlight { position: absolute; top: 8%; left: 18%; width: 38%; height: 28%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 40%, transparent 70%); filter: blur(4px); pointer-events: none; }

/* Diffuse blue glow behind the ring */

/* Sharp LED ring on top of the glow */
/* Black top panel (perspective oval) with bright LED ring around */
.ax-echo-top {
  position: absolute;
  top: 8%;
  left: 22%;
  right: 22%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(ellipse 90% 90% at 50% 25%, #2c2e34 0%, #1a1c20 60%, #0c0d10 100%);
  box-shadow:
    /* bright blue LED ring (ring + outer glow) */
    0 0 0 3px #2eb1e8,
    0 0 0 4.5px rgba(160,225,255,.4),
    0 0 12px rgba(78,203,255,.8),
    0 0 28px rgba(0,180,240,.55),
    /* inner shadow to give depth to the sunken panel */
    inset 0 3px 6px rgba(0,0,0,.7),
    inset 0 -2px 4px rgba(255,255,255,.04);
  z-index: 2;
  animation: axGlow 2.4s ease-in-out infinite;
}

/* Controls inside the panel: minus / mic / plus */
.ax-echo-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12%;
  color: rgba(255,255,255,.55);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ax-echo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.ax-echo-btn--mic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  color: rgba(255,255,255,.7);
}
.ax-echo-btn--mic svg {
  width: 16px;
  height: 16px;
}
@keyframes axGlow { 0%, 100% { opacity: .85; filter: blur(0); } 50% { opacity: 1; filter: blur(.4px); } }

/* Black base under the ring (flat plastic) */

/* Elliptical shadow on the ground */
.ax-echo-shadow { position: absolute; bottom: -18px; left: 12%; right: 12%; height: 18px; background: radial-gradient(ellipse, rgba(15,30,27,.4) 0%, rgba(15,30,27,.15) 50%, transparent 80%); filter: blur(4px); pointer-events: none; }

.ax-bubble { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 12px 16px; box-shadow: 0 12px 32px rgba(15,30,27,.12); z-index: 2; max-width: 275px; }
.ax-bubble--top { top: 30px; left: -10px; transform: rotate(-2deg); }
.ax-bubble--bottom { bottom: 30px; right: -10px; transform: rotate(1.5deg); }
.ax-bubble-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ax-bubble-icon svg { width: 18px; height: 18px; }
.ax-bubble-icon--alexa { background: #e0f4fc; color: #00a8e1; }
.ax-bubble-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ax-bubble-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.ax-bubble-text strong { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }

/* Typewriter: radio name + blinking caret */
.ax-type { color: var(--green); font-weight: 700; }
.ax-caret { display: inline-block; width: 2px; height: 1em; background: var(--green); margin-left: 2px; vertical-align: text-bottom; animation: axCaretBlink 1s steps(1) infinite; }
@keyframes axCaretBlink { 50% { opacity: 0; } }

/* --- SKILL vs RSK --- */
.ax-compare { padding: 96px 0; background: var(--bg); }
.ax-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ax-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 36px 32px 32px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ax-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-light); }
.ax-card--featured { border: 2px solid var(--green); box-shadow: 0 14px 36px rgba(23,141,114,.14); }
.ax-card-head { margin-bottom: 18px; }
.ax-card-badge { display: inline-flex; align-items: center; padding: 5px 12px; font-size: 11.5px; font-weight: 800; background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.ax-card-badge--featured { background: var(--green); color: #fff; border-color: var(--green); }
.ax-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--text); line-height: 1.2; }
.ax-card-desc { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }
.ax-card-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ax-card-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.5; }
.ax-card-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ax-card-check svg { width: 11px; height: 11px; }
.ax-compare-foot { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 36px; padding: 16px 22px; background: var(--green-light); border: 1px solid var(--green-mid); border-radius: 12px; font-size: 14.5px; color: var(--green-dark); font-weight: 600; max-width: 720px; margin-left: auto; margin-right: auto; }
.ax-compare-foot svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }

/* --- VOICE COMMANDS --- */
.ax-voice { padding: 96px 0; background: var(--bg-soft); }
.ax-voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ax-voice-item { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px 24px; position: relative; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ax-voice-item:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 6px 18px rgba(23,141,114,.08); }
.ax-voice-quote { width: 36px; height: 36px; border-radius: 10px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ax-voice-quote svg { width: 18px; height: 18px; }
.ax-voice-item p { font-size: 17px; color: var(--text); line-height: 1.45; margin-bottom: 8px; font-weight: 500; }
.ax-voice-item p strong { color: var(--green-dark); font-weight: 700; }
.ax-voice-item span { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* --- DEVICES ALEXA --- */
.ax-devices { padding: 96px 0; background: var(--bg); }
.ax-devices-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ax-dev { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 22px 16px 22px; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ax-dev:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 6px 18px rgba(23,141,114,.08); }
.ax-dev strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.ax-dev span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ax-dev-img { width: 80px; height: 100px; margin: 0 auto 14px; position: relative; }

/* Echo (cilindro vertical) */
.ax-dev-img--echo .ax-dev-echo-top { position: absolute; top: 4px; left: 14px; right: 14px; height: 16px; background: linear-gradient(180deg, #1a2926, #0e1c19); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; display: flex; align-items: center; justify-content: center; }
.ax-dev-img--echo .ax-dev-echo-top span { width: 80%; height: 3px; border-radius: 2px; background: #00a8e1; box-shadow: 0 0 8px rgba(0,168,225,.6); }
.ax-dev-img--echo .ax-dev-echo-mesh { position: absolute; top: 14px; left: 14px; right: 14px; bottom: 0; background: linear-gradient(135deg, #2a3a36, #0e1c19); border-radius: 4px; }

/* Echo Dot (low puck) */
.ax-dev-img--dot { padding-top: 20px; }
.ax-dev-img--dot .ax-dev-dot-top { position: absolute; top: 42px; left: 10px; right: 10px; height: 24px; background: linear-gradient(180deg, #1a2926, #0e1c19); border-radius: 50%; z-index: 99; }
.ax-dev-img--dot .ax-dev-dot-body { position: absolute; top: 42px; left: 8px; right: 8px; bottom: 14px; background: linear-gradient(180deg, #2a3a36, #0a1a16); border-radius: 50% / 36%; }

/* Echo Show (screen with base) */
.ax-dev-img--show .ax-dev-show-screen { position: absolute; top: 8px; left: 4px; right: 4px; height: 64px; background: linear-gradient(135deg, #0e1c19, #1a2926); border-radius: 6px; border: 2px solid #1a2926; overflow: hidden; z-index: 99; }
.ax-dev-img--show .ax-dev-show-screen::before { content: ''; position: absolute; inset: 6px; background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); border-radius: 3px; opacity: .85; }
.ax-dev-img--show .ax-dev-show-stand { position: absolute; bottom: 13px; left: 24px; right: 24px; height: 24px; background: linear-gradient(180deg, #2a3a36, #0e1c19); border-radius: 4px 4px 8px 8px; }

/* Echo Auto (horizontal rectangle) */
.ax-dev-img--auto { padding-top: 30px; }
.ax-dev-img--auto .ax-dev-auto-body { position: absolute; top: 38px; left: 4px; right: 4px; bottom: 16px; background: linear-gradient(180deg, #1a2926, #0a1a16); border-radius: 8px; }
.ax-dev-img--auto .ax-dev-auto-lights { position: absolute; top: 50px; left: 14px; right: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; justify-items: center; }
.ax-dev-img--auto .ax-dev-auto-lights span { width: 12px; height: 10px; border-radius: 2px; background: #00a8e1; opacity: .8; box-shadow: 0 0 6px rgba(0,168,225,.5); }

/* Fire TV (TV ampla) */
.ax-dev-img--firetv .ax-dev-tv-screen { position: absolute; top: 8px; left: 0; right: 0; height: 60px; background: linear-gradient(135deg, #0e1c19, #1a2926); border-radius: 4px; border: 2px solid #1a2926; overflow: hidden; z-index: 99; }
.ax-dev-img--firetv .ax-dev-tv-screen::before { content: ''; position: absolute; inset: 4px; background: linear-gradient(135deg, var(--green-mid), var(--green-dark)); opacity: .65; }
.ax-dev-img--firetv .ax-dev-tv-stand { position: absolute; bottom: -7px; left: 32px; right: 32px; height: 40px; background: linear-gradient(180deg, #2a3a36, #0e1c19); border-radius: 2px 2px 6px 6px; }

/* Alexa app (phone) */
.ax-dev-img--app { padding-top: 0; }
.ax-dev-img--app .ax-dev-app-screen { position: absolute; top: 6px; left: 20px; right: 20px; bottom: 6px; background: linear-gradient(135deg, #0e1c19, #1a2926); border-radius: 10px; overflow: hidden; }
.ax-dev-img--app .ax-dev-app-screen::before { content: ''; position: absolute; top: 16px; left: 8px; right: 8px; height: 40px; background: linear-gradient(135deg, #00a8e1, #4ecbff); border-radius: 6px; opacity: .9; }
.ax-dev-img--app .ax-dev-app-screen::after { content: ''; position: absolute; bottom: 16px; left: 8px; right: 8px; height: 18px; background: rgba(255,255,255,.15); border-radius: 4px; }
.ax-dev-img--app .ax-dev-app-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 24px; height: 4px; border-radius: 0 0 4px 4px; background: #0a1a16; }

/* --- COMO ATIVAR --- */
.ax-howto { padding: 96px 0; background: var(--bg-soft); }
.ax-howto-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.ax-howto-steps::before { content: ''; position: absolute; top: 60px; left: 14%; right: 14%; height: 2px; background: repeating-linear-gradient(90deg, var(--green-mid) 0 8px, transparent 8px 16px); opacity: .5; z-index: 0; }
.ax-step { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 32px 28px 28px; text-align: center; position: relative; z-index: 1; transition: transform .2s, border-color .2s, box-shadow .2s; }
.ax-step:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 8px 24px rgba(23,141,114,.08); }
.ax-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; margin: 0 auto 18px; box-shadow: 0 6px 16px rgba(23,141,114,.25); border: 4px solid #fff; }
.ax-step--mid .ax-step-num { background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%); }
.ax-step h3 { font-size: 18px; font-weight: 800; letter-spacing: -.005em; color: var(--text); margin-bottom: 8px; }
.ax-step p { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .ax-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .ax-hero-visual { min-height: 420px; }
  .ax-compare-grid { grid-template-columns: 1fr; gap: 18px; }
  .ax-voice-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-devices-grid { grid-template-columns: repeat(3, 1fr); }
  .ax-howto-steps::before { display: none; }
}
@media (max-width: 768px) {
  .ax-hero { padding: calc(var(--nav-h) + 30px) 0 64px; }
  .ax-compare, .ax-voice, .ax-devices, .ax-howto { padding: 64px 0; }
  .ax-hero-visual { min-height: 380px; }
  .ax-echo { width: 200px; height: 214px; }
  .ax-bubble { max-width: 200px; padding: 10px 12px; }
  .ax-bubble--top { left: -4px; }
  .ax-bubble--bottom { right: -4px; }
  .ax-bubble-text strong { font-size: 13px; }
  .ax-voice-grid { grid-template-columns: 1fr; }
  .ax-devices-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-howto-steps { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 480px) {
  .ax-hero-cta { flex-direction: column; align-items: stretch; }
  .ax-hero-cta .btn { justify-content: center; }
  .ax-hero-visual { min-height: 340px; }
  .ax-echo { width: 160px; height: 172px; }
  .ax-bubble { max-width: 170px; }
  .ax-card { padding: 28px 22px 24px; }
}