/* =========================================================
   HelvexHosting — FINAL STABLE CSS (Hero moved left + down)
   - Background fixed on all site
   - Hero title + buttons moved LEFT and DOWN (like your screenshot)
   - Mascot locked right and never moves when text changes
   - Keeps your Discord animated button + magic CPU text
   ========================================================= */

/* =========================
   Base / Variables
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --brand:#5469ff;
  --brand-dark:#3848e0;
  --radius-lg:16px;
  --radius-pill:999px;
  --transition-fast:.2s ease-out;
}

html, body{ min-height:100%; overflow-x:hidden; }
img, svg{ max-width:100%; height:auto; }

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;

  /* FIXED BACKGROUND (whole website) */
  background-image: url("./bg.jpg"); /* <-- change to your real file name */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Overlay so text stays clear */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(8,12,24,.38),
    rgba(8,12,24,.18),
    rgba(8,12,24,.48)
  );
}

/* =========================
   Header
   ========================= */
.header{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 999;
  padding: 12px 40px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.logo-img{
  height: 80px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

.nav{
  display: flex;
  gap: 32px;
}

.nav-link{
  text-decoration:none;
  color: rgba(255,255,255,.92);
  font-size: .98rem;
  font-weight: 600;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  transition: width var(--transition-fast);
}

.nav-link:hover{ color:#fff; transform: translateY(-1px); }
.nav-link:hover::after{ width:100%; }

/* =========================
   Discord Button + floating logo
   ========================= */
.discord-btn{
  position: relative;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.15rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #5865F2, #3443D8);
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 12px 30px rgba(56,69,240,.45);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* glow */
.discord-btn::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(88,101,242,.55), transparent 55%);
  filter: blur(14px);
  opacity:.85;
  z-index:-1;
  pointer-events:none;
  animation: discordPulse 2.6s ease-in-out infinite;
}

/* shine sweep */
.discord-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.28) 45%, transparent 70%);
  transform: translateX(-140%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.7;
  animation: discordShine 3.1s ease-in-out infinite;
}

.discord-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 40px rgba(56,69,240,.62);
  filter: saturate(1.04);
}

/* floating logo chip */
.discord-logo.discord-icon-float{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  position: relative;
  isolation: isolate;
  animation: discordFloat 1.8s ease-in-out infinite;
}
.discord-svg.discord-icon{
  width: 16px;
  height: 16px;
  display:block;
  fill: #ffffff;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

/* =========================
   Sections
   ========================= */
.section{ padding: 80px 16px; background: transparent; }
.section-light{ background: transparent; }

.section-inner{
  max-width: 1120px;
  margin: 0 auto;
}

.section-title{
  font-size: 1.9rem;
  text-align: center;
  margin-bottom: 32px;
  color:#fff;
  text-shadow: 0 14px 36px rgba(0,0,0,.55);
}

.section p,
.section li{
  color: rgba(255,255,255,.88);
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}

/* =========================
   HERO (THIS IS THE FIX)
   - content moved left + down
   - mascot locked right
   ========================= */
.hero{
  min-height: 100vh;
  padding: 110px 16px 80px;
}

/* position context for absolute mascot */
.hero-inner{
  max-width: 1120px;
  margin: 0 auto;
  min-height: calc(100vh - 190px);
  position: relative;

  /* IMPORTANT: more space on the LEFT area like your screenshot */
  padding-left: 28px; /* moved left */
  padding-right: 28px;
}

/* Title container area (moved down + stays left) */
.typing-hero{
  font-size: clamp(42px, 4.8vw, 66px);
  font-weight: 900;
  color:#fff;
  line-height: 1.05;
  text-shadow: 0 18px 45px rgba(0,0,0,.6);

  /* starts from the LEFT like your screenshot */
  margin-top: 140px;
  margin-bottom: 26px;

  /* allow full title without clipping */
  max-width: 920px;

  text-align: left;
}

/* typing text itself */
#typing-text{
  display:inline-block;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* cursor */
#typing-text::after{
  content:"|";
  margin-left: 6px;
  animation: blink 1s infinite;
  opacity: .9;
}

/* Buttons stay UNDER title (left) */
.hero-buttons{
  display:flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  position: relative;
  z-index: 10;
}

/* mascot locked on the RIGHT side (won't jump with text) */
.hero-mascot{
  position: absolute;
  right: 24px;
  top: 55%;
  transform: translateY(-50%); /* stable */
  width: min(520px, 34vw);
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.45));
  pointer-events: none;
  z-index: 2;
}

/* Mascot animation (pure float, no layout movement) */
.hero-mascot img{
  width: 100%;
  height: auto;
  display: block;
  animation: mascotFloat 3.6s ease-in-out infinite;
  transform-origin: 60% 60%;
}

/* Subtle glow/shimmer behind mascot */
.hero-mascot::before{
  content:"";
  position:absolute;
  inset: 8% 10%;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 40%, rgba(88,101,242,.22), transparent 60%),
    radial-gradient(circle at 70% 55%, rgba(6,182,212,.18), transparent 62%);
  filter: blur(18px);
  opacity: .9;
  z-index: -1;
  animation: mascotGlow 3.6s ease-in-out infinite;
}
.hero-mascot::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 35%, transparent 70%);
  transform: translateX(-120%) skewX(-10deg);
  opacity: 0;
  animation: mascotShimmer 4.8s ease-in-out infinite;
  pointer-events: none;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .65rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: .95rem;
  font-weight: 700;
  cursor:pointer;
  text-decoration:none;
  transition: all var(--transition-fast);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}

.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff;
  border: 1px solid rgba(255,255,255,.12);
}
.btn-outline{
  background: rgba(10,14,28,.30);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn:hover:not(.disabled){
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
}
.btn.full{ width:100%; }
.disabled{ opacity:.6; cursor:not-allowed; }

/* =========================
   Cards
   ========================= */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
}

.plans-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.6rem;
  max-width: 960px;
  margin: 0 auto;
}

.feature-card,
.plan-card{
  background: rgba(12,18,38,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  border-radius: var(--radius-lg);
  color: rgba(255,255,255,.92);
}

.feature-card{
  padding: 1.4rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.feature-card h3{ margin-bottom:.35rem; font-size:1.05rem; color:#fff; }
.feature-card p{ font-size:.92rem; color: rgba(255,255,255,.82); }
.feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
}

.plan-card{
  padding: 1.6rem 1.5rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.plan-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
}
.plan-card.premium{
  border-width: 2px;
  border-color: rgba(84,105,255,.85);
}
.plan-badge{
  position:absolute;
  top: 12px;
  right: 14px;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(84,105,255,.15);
  color: rgba(255,255,255,.95);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan-sub{
  margin-top: .1rem;
  font-size: .9rem;
  color: rgba(255,255,255,.72);
}
.plan-list{
  list-style:none;
  margin-top: .9rem;
  margin-bottom: 1.1rem;
}
.plan-list li{
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  margin-bottom: .35rem;
}

/* =========================
   Unlimited CPU Usage magic
   ========================= */
.magic-cpu{
  display:flex;
  align-items:center;
  gap: 10px;
  position: relative;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(84,105,255,0.08);
  border: 1px solid rgba(84,105,255,0.18);
}
.magic-cpu .magic-icon{ font-size: 1rem; opacity:.95; }
.magic-cpu .magic-text{
  font-weight: 800;
  letter-spacing: .25px;
  background: linear-gradient(90deg, #6d28d9, #2563eb, #06b6d4, #f59e0b, #6d28d9);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cpuGradient 3.2s ease-in-out infinite;
}

/* =========================
   Footer / Language bar (kept)
   ========================= */
.main-footer{
  background: rgba(2,6,23,.92);
  color: #e5e7eb;
  padding: 2.6rem 1.5rem 2.1rem;
  margin-top: 3rem;
  backdrop-filter: blur(10px);
}
.footer-inner{ max-width:1120px; margin:0 auto; }

.language-bar{
  background: #000;
  border-top: 1px solid rgba(148,163,184,.35);
  padding: .7rem 1rem .9rem;
  display:flex;
  justify-content:center;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  /* Header: keep logo visible + prevent overflow */
  .header{
    padding-inline: 16px;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .header-left{ flex: 1 1 auto; min-width: 140px; }
  .logo-img{ height: 56px; }

  /* Keep nav on a new row on mobile (so logo doesn't disappear) */
  .nav{
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
  }

  .discord-btn{ order: 2; }
  .nav{ gap: 18px; }

  .hero-inner{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Prevent layout jump: keep typing on one line on mobile */
  .typing-hero{ min-height: 1.15em; }
  #typing-text{ white-space: nowrap; }

  /* Mascot becomes normal flow for mobile */
  .hero-mascot{
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: min(480px, 92vw);
    margin-top: 14px;
  }

  .typing-hero{
    margin-top: 90px;
    max-width: 100%;
  }

  .hero-buttons{
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
  }
  .btn{ width: 100%; }
}

@media (max-width: 768px){
  body{
    background-attachment: scroll;
    background-position: 55% center;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .discord-btn::before,
  .discord-btn::after,
  .discord-logo.discord-icon-float,
  #typing-text::after,
  .magic-cpu .magic-text,
  .hero-mascot img,
  .hero-mascot::before,
  .hero-mascot::after{
    animation: none !important;
  }
}

/* =========================
   Keyframes
   ========================= */
@keyframes blink{ 0%,50%,100%{opacity:1} 25%,75%{opacity:0} }
@keyframes discordPulse{ 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.08);opacity:1} }
@keyframes discordShine{ 0%{transform:translateX(-140%);opacity:.20} 45%{opacity:.75} 100%{transform:translateX(140%);opacity:.20} }
@keyframes discordFloat{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-4px) rotate(-2deg)} }
@keyframes cpuGradient{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes mascotFloat{ 0%,100%{transform:translateY(0) rotate(0) scale(1)} 50%{transform:translateY(-10px) rotate(-1.2deg) scale(1.01)} }
@keyframes mascotGlow{ 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes mascotShimmer{
  0%{opacity:0;transform:translateX(-120%) skewX(-10deg)}
  20%{opacity:.55}
  50%{opacity:0;transform:translateX(120%) skewX(-10deg)}
  100%{opacity:0;transform:translateX(120%) skewX(-10deg)}
}


/* Mascot is part of the hero on all devices */
.hero-mascot{display:block;}


/* =========================================================
   HERO FEATURE BADGES (beautiful + subtle animation)
   ========================================================= */
.hero-badges{
  position: absolute;
  left: 38%;
  top: 60%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 12px;
  z-index: 1;
  pointer-events: none;
}

.hero-badges .badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,14,28,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .2px;
  width: fit-content;
  max-width: 320px;
}

.hero-badges .badge .icon{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(84,105,255,.16);
  border: 1px solid rgba(84,105,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.hero-badges .badge b{
  color: #fff;
  font-weight: 900;
}

.hero-badges .badge small{
  display:block;
  margin-top: 2px;
  font-weight: 700;
  color: rgba(255,255,255,.72);
}

/* floating motion (very gentle) */
.hero-badges .b1{ animation: badgeFloat 5.4s ease-in-out infinite; }
.hero-badges .b2{ animation: badgeFloat 6.2s ease-in-out infinite; margin-left: 48px; }
.hero-badges .b3{ animation: badgeFloat 5.8s ease-in-out infinite; margin-left: 18px; }
.hero-badges .b4{ animation: badgeFloat 6.6s ease-in-out infinite; margin-left: 70px; }

@keyframes badgeFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* =========================================================
   FOOTER + LANGUAGE SELECTOR (final stable)
   ========================================================= */
.main-footer{
  background: rgba(2,6,23,.95);
  color: #e5e7eb;
  padding: 2.4rem 1.25rem 1.8rem;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-inner{
  max-width: 1120px;
  margin: 0 auto;
}

.footer-cols{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.footer-col{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-col h3,
.footer-col h4{
  margin: 0 0 8px 0;
  color: #fff;
  font-weight: 800;
}

.footer-col p{
  margin: 0;
  color: rgba(255,255,255,.82);
  max-width: 40ch;
  line-height: 1.55;
}

.footer-col a{
  display:block;
  width: fit-content;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 600;
  margin-top: 4px;
  transition: transform .18s ease, color .18s ease;
}

.footer-col a:hover{
  color: #fff;
  transform: translateX(2px);
}

.footer-copy{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.70);
  font-size: .92rem;
}

.language-bar{
  background: #000;
  border-top: 1px solid rgba(255,255,255,.25);
  padding: .9rem 1rem 1rem;
  display: flex;
  justify-content: center;
}

.language-buttons{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 1120px;
}

.language-buttons button{
  appearance:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .88rem;
  cursor: pointer;
  min-height: 38px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.language-buttons button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

/* Mobile optimizations */
@media (max-width: 900px){
  /* Keep one-line typing to avoid button jump */
  #typing-text{ white-space: nowrap; }
  .typing-hero{ max-width: 100%; margin-top: 120px; }
  .hero-badges{
    position: static;
    transform: none;
    margin-top: 22px;
    left: auto;
    top: auto;
    justify-items: start;
  }
  .hero-badges .b2,
  .hero-badges .b3,
  .hero-badges .b4{ margin-left: 0; }

  .footer-cols{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 480px){
  .language-buttons button{
    width: calc(50% - 6px);
    text-align: center;
  }
}
html{
  scroll-behavior: smooth;
}

/* Footer layout: keep Nav left + Social right on mobile */
@media (max-width: 900px){
  .footer-cols{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "brand brand"
      "nav   social" !important;
    gap: 18px !important;
  }

  /* first column (HelvexHosting text) */
  .footer-cols .footer-col:first-child{
    grid-area: brand;
  }

  /* second column = Navigation */
  .footer-cols .footer-col:nth-child(2){
    grid-area: nav;
  }

  /* third column = Social */
  .footer-cols .footer-col:nth-child(3){
    grid-area: social;
  }

  /* keep links vertical */
  .footer-col a{
    display: block;
  }
}




/* =========================================================
   LEGAL PAGES + CONSENT MODAL (added)
   ========================================================= */
.legal-page{
  min-height: 100vh;
  padding: 110px 16px 60px;
}
.legal-wrap{
  max-width: 980px;
  margin: 0 auto;
  background: rgba(12,18,38,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.legal-wrap h1{
  font-size: 2rem;
  margin: 4px 0 6px;
  text-shadow: 0 18px 45px rgba(0,0,0,.6);
}
.legal-updated{
  opacity: .8;
  margin-bottom: 18px;
}
.legal-wrap h2{
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #fff;
}
.legal-wrap p,
.legal-wrap li{
  color: rgba(255,255,255,.88);
  line-height: 1.65;
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.legal-wrap ul{ padding-left: 18px; margin: 10px 0 8px; }
.legal-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.9);
  font-weight: 800;
  margin-bottom: 12px;
}
.legal-back:hover{ color:#fff; transform: translateX(-1px); }

/* Consent modal */
.consent-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 99999;
}
.consent-overlay.active{ display:flex; }

.consent-modal{
  width: min(540px, 100%);
  background: rgba(20,20,25,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  position: relative;
}
.consent-close{
  position:absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  opacity: .8;
  cursor: pointer;
}
.consent-text{ opacity:.92; line-height:1.5; }
.consent-text a{ text-decoration: underline; color: rgba(255,255,255,.95); }

.consent-check{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.consent-check input{ transform: scale(1.1); }

.consent-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}
.consent-btn{
  border: 0;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  color: #fff;
  background: rgba(84,105,255,.85);
}
.consent-btn.ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.consent-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}