/* ---------- Hero (variação: colunas iguais, título menor) ---------- */
.hero{padding:168px 0 100px;position:relative;overflow:hidden;}
.hero .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size:clamp(32px,4.2vw,52px);margin-bottom:22px;}
.hero h1 .accent{
  background:linear-gradient(96deg,var(--color-primary-light),var(--color-primary) 60%,#5B54D6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:18px;color:var(--color-text-secondary);max-width:500px;margin-bottom:38px;}

/* ---------- Layout de duas colunas (usado nas seções de recursos) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.split.reverse .split-media{order:2;}
.split.reverse .split-text{order:1;}
.split-text p.body-text{color:var(--color-text-secondary);font-size:16px;margin-bottom:20px;}
.benefit-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--color-text-secondary);padding:8px 0;}
.benefit-list svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--color-green);}

.coin-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0;}
.coin-chip{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;
  padding:8px 13px;border-radius:var(--radius-full);border:1px solid var(--color-border-strong);
  color:var(--color-text-secondary);
}
.coin-chip .dot{width:8px;height:8px;border-radius:50%;}

/* ---------- Sistema de placeholders de mídia (imagem / vídeo / gif) ---------- */
.media-placeholder{
  position:relative;border-radius:var(--radius-lg);border:1px solid var(--color-border);
  background:linear-gradient(160deg, rgba(128,121,255,.08), var(--color-bg-elevated) 65%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:14px;padding:28px;overflow:hidden;
  aspect-ratio:16/10;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.media-placeholder:hover{border-color:var(--color-primary-glow);transform:translateY(-3px);}
.media-placeholder .corner{position:absolute;width:20px;height:20px;border-color:var(--color-border-strong);transition:border-color .35s var(--ease);}
.media-placeholder:hover .corner{border-color:var(--color-primary-light);}
.corner.tl{top:14px;left:14px;border-top:2px solid;border-left:2px solid;border-radius:6px 0 0 0;}
.corner.tr{top:14px;right:14px;border-top:2px solid;border-right:2px solid;border-radius:0 6px 0 0;}
.corner.bl{bottom:14px;left:14px;border-bottom:2px solid;border-left:2px solid;border-radius:0 0 0 6px;}
.corner.br{bottom:14px;right:14px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 6px 0;}
.ph-tag{
  position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  padding:5px 10px;border-radius:var(--radius-full);border:1px solid var(--color-border-strong);
  color:var(--color-text-tertiary);background:var(--color-card);z-index:2;
}
.ph-tag.video{color:var(--color-primary-light);border-color:rgba(128,121,255,.35);}
.ph-tag.gif{color:#F0B429;border-color:rgba(240,180,41,.35);}
.ph-icon{
  width:52px;height:52px;border-radius:50%;background:var(--color-card);
  border:1px solid var(--color-border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);
}
.ph-icon svg{width:22px;height:22px;}
.ph-play{
  width:56px;height:56px;border-radius:50%;background:var(--color-primary);
  display:flex;align-items:center;justify-content:center;animation:playPulse 2.6s infinite;
}
.ph-play svg{width:20px;height:20px;margin-left:3px;color:#0A0A0D;}
@keyframes playPulse{
  0%{box-shadow:0 0 0 0 var(--color-primary-glow);}
  70%{box-shadow:0 0 0 16px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
.ph-caption{font-size:13.5px;color:var(--color-text-tertiary);max-width:280px;}
.ph-caption strong{color:var(--color-text-secondary);font-weight:500;}
.media-placeholder.ph-tall{aspect-ratio:9/14;}
.media-placeholder.ph-square{aspect-ratio:4/3;}
.media-placeholder.ph-wide{aspect-ratio:21/9;}
.media-placeholder.ph-portrait{aspect-ratio:3/4;}

/* ---------- Mini feature cards ---------- */
.mini-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;}
.mini-feature{
  display:flex;align-items:center;gap:12px;background:var(--color-card);
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px 16px;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.mini-feature:hover{transform:translateY(-3px);border-color:var(--color-primary-glow);}
.mini-icon{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(150deg, rgba(128,121,255,.18), rgba(128,121,255,.05));
  border:1px solid rgba(128,121,255,.25);color:var(--color-primary-light);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mini-icon svg{width:16px;height:16px;}
.mini-feature span{font-size:13.5px;font-weight:500;}

/* ---------- Filtros ---------- */
.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px;}

/* ---------- Página individual da criptomoeda ---------- */
.coin-showcase{display:grid;grid-template-columns:220px 1fr 220px;gap:22px;align-items:center;}
.coin-side{display:flex;flex-direction:column;gap:14px;}
.coin-side .card{padding:18px;}
.coin-side .icon-badge{width:34px;height:34px;margin-bottom:10px;}
.coin-side .icon-badge svg{width:16px;height:16px;}
.coin-side h3{font-size:14px;}
.coin-side p{font-size:12.5px;}

/* ---------- Fluxo visual (alertas por preço) ---------- */
.flow-row{display:flex;align-items:stretch;justify-content:center;gap:6px;flex-wrap:wrap;margin:44px 0;}
.flow-step{
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:20px 22px;text-align:center;min-width:170px;flex:1;max-width:220px;
}
.flow-step .flow-num{font-family:var(--font-mono);color:var(--color-primary-light);font-size:11.5px;letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase;}
.flow-step h4{font-size:15px;}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);flex:0 0 auto;padding:0 4px;}
.flow-arrow svg{width:20px;height:20px;}

/* ---------- Exemplos de volatilidade ---------- */
.example-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px;}
.example-chip{
  font-family:var(--font-mono);font-size:13px;padding:9px 16px;border-radius:var(--radius-full);
  border:1px solid var(--color-border-strong);color:var(--color-text-secondary);
  display:inline-flex;align-items:center;gap:8px;
}
.example-chip .arrow-up{color:var(--color-green);}
.example-chip .arrow-down{color:var(--color-red);}

/* ---------- Mockups de dispositivo ---------- */
.device-row{display:flex;align-items:flex-end;justify-content:center;gap:52px;flex-wrap:wrap;padding:30px 0 10px;}
.device{display:flex;flex-direction:column;align-items:center;}
.device-screen{
  border-radius:10px;border:1px solid var(--color-border-strong);
  background:linear-gradient(160deg, rgba(128,121,255,.08), var(--color-bg-elevated) 65%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.device-screen svg{width:26px;height:26px;color:var(--color-text-tertiary);}
.device-desktop .device-screen{width:320px;height:200px;border-width:8px;border-radius:12px;}
.device-desktop .device-stand{width:54px;height:30px;background:var(--color-card);border:1px solid var(--color-border-strong);border-top:none;}
.device-desktop .device-base{width:130px;height:8px;background:var(--color-border-strong);border-radius:4px;margin-top:-1px;}
.device-laptop .device-screen{width:270px;height:170px;border-width:7px;border-radius:12px 12px 4px 4px;}
.device-laptop .device-base{width:320px;height:12px;background:var(--color-card);border:1px solid var(--color-border-strong);border-radius:0 0 8px 8px;margin-top:-1px;}
.device-tablet .device-screen{width:150px;height:200px;border-width:8px;border-radius:20px;}
.device-phone .device-screen{width:90px;height:190px;border-width:7px;border-radius:24px;}
.device-label{margin-top:16px;font-family:var(--font-mono);font-size:12px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;}

/* ---------- Galeria ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
.gallery-item{
  background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.gallery-item:hover{transform:translateY(-5px);border-color:var(--color-primary-glow);}
.gallery-item .media-placeholder{border-radius:0;border:none;border-bottom:1px solid var(--color-border);aspect-ratio:4/3;}
.gallery-body{padding:18px 20px 22px;}
.gallery-body h4{font-size:15px;margin-bottom:6px;}
.gallery-body p{font-size:13px;color:var(--color-text-secondary);}

/* ---------- Responsive (exclusivo desta página) ---------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:36px;}
  .split.reverse .split-media{order:1;}
  .split.reverse .split-text{order:2;}
  .mini-feature-grid{grid-template-columns:repeat(2,1fr);}
  .filter-grid{grid-template-columns:repeat(2,1fr);}
  .coin-showcase{grid-template-columns:1fr;}
  .coin-side{flex-direction:row;flex-wrap:wrap;}
  .coin-side .card{flex:1;min-width:220px;}
  .hero .container{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .flow-row{flex-direction:column;align-items:stretch;}
  .flow-step{max-width:none;}
  .flow-arrow svg{transform:rotate(90deg);}
}
@media (max-width:760px){
  .hero{padding:126px 0 56px;}
  .mini-feature-grid{grid-template-columns:1fr;}
  .filter-grid{grid-template-columns:1fr;}
  .device-row{gap:30px;}
}


.video-create-alert{
  max-width: 500px !important;
  height: 500px !important;
}

.screen{
  width: 100%;
  height: 100%;
}

.img-dashboard{
  width: 800px;
}

.large{
  width: 700px;
}