:root{
  --fons-1:#030607;
  --fons-2:#0b1220;
  --fons-3:#111a2d;
  --blau:#4cc9f0;
  --blau2:#00b4d8;
  --text:#ffffff;
  --text-soft:#dff4ff;
  --vidre:rgba(255,255,255,.06);
  --vidre-2:rgba(255,255,255,.04);
  --contorn:rgba(255,255,255,.12);
  --radius:24px;
  --ombra:0 18px 40px rgba(0,0,0,.38);
  --max:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--blau) transparent;
}
body{
  min-height:100vh;
  font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(90vmax 90vmax at 10% 10%, rgba(76,201,240,.08), transparent 60%),
    radial-gradient(80vmax 80vmax at 90% 80%, rgba(0,180,216,.08), transparent 60%),
    linear-gradient(180deg,var(--fons-1),var(--fons-2) 45%,var(--fons-3));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

*::-webkit-scrollbar{width:10px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--blau),var(--blau2));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.llum-fons{
  position:fixed;
  inset:-20vmax;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(70vmax 70vmax at 15% 20%, rgba(76,201,240,.12), transparent 60%),
    radial-gradient(60vmax 60vmax at 85% 75%, rgba(0,180,216,.10), transparent 60%);
  filter:blur(30px);
  opacity:.9;
}

main,.hero,.peu{position:relative;z-index:1}

.contenidor{
  width:min(var(--max), 92vw);
  margin:0 auto;
}

.seccio{
  padding:4.5rem 1rem;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .78rem;
  border-radius:999px;
  border:1px solid var(--contorn);
  background:rgba(255,255,255,.05);
  color:#eaf9ff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.02em;
}
.pill-highlight{
  border-color:rgba(76,201,240,.35);
  background:rgba(76,201,240,.12);
  color:#eafcff;
}

.blau{color:var(--blau)}

.boto{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:52px;
  padding:0 1.2rem;
  border-radius:16px;
  border:1px solid var(--contorn);
  font-weight:900;
  letter-spacing:.01em;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.boto:hover{
  transform:translateY(-2px);
}
.boto-principal{
  color:#001018;
  background:linear-gradient(90deg,var(--blau),var(--blau2));
  box-shadow:0 14px 34px rgba(76,201,240,.28);
}
.boto-principal:hover{
  box-shadow:0 20px 44px rgba(76,201,240,.36);
}
.boto-secundari{
  color:#f3fcff;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18);
}
.boto-secundari:hover{
  background:rgba(255,255,255,.08);
}

.hero{
  min-height:92vh;
  display:flex;
  align-items:center;
  padding:2rem 1rem 3rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:2rem;
  align-items:center;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(76,201,240,.12);
  border:1px solid rgba(76,201,240,.24);
  color:#dff8ff;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hero-title{
  margin:.9rem 0 .7rem;
  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 10px 34px rgba(0,0,0,.42);
}
.hero-subtitle{
  margin:0;
  max-width:760px;
  font-size:clamp(1rem,1.9vw,1.22rem);
  line-height:1.65;
  color:var(--text-soft);
  font-weight:600;
}
.hero-pills{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.hero-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.35rem;
}
.hero-note{
  margin-top:1rem;
  color:#d9f3ff;
  font-weight:700;
  opacity:.92;
}

.hero-panel{
  display:grid;
  gap:1rem;
}
.hero-card{
  border-radius:var(--radius);
  border:1px solid var(--contorn);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(76,201,240,.15), transparent 60%),
    linear-gradient(180deg,var(--vidre),rgba(255,255,255,.03));
  box-shadow:var(--ombra), inset 0 0 42px rgba(76,201,240,.10);
}
.hero-card-main{
  padding:1.25rem;
}
.hero-card-top{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}
.mini-tag{
  display:inline-flex;
  align-items:center;
  padding:.36rem .62rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:900;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.mini-tag-blue{
  background:rgba(76,201,240,.14);
  border-color:rgba(76,201,240,.28);
}
.hero-card-title{
  margin:.8rem 0 .45rem;
  font-size:clamp(1.35rem,2.2vw,2rem);
  line-height:1.08;
  font-weight:900;
}
.hero-card-text{
  margin:0;
  color:var(--text-soft);
  line-height:1.65;
  font-weight:600;
}
.hero-list{
  margin:1rem 0 0;
  padding-left:1.1rem;
  display:grid;
  gap:.45rem;
  color:#ecfaff;
  font-weight:700;
}
.hero-card-actions{
  margin-top:1.15rem;
}

.hero-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
}
.mini-stat{
  padding:1rem;
  border-radius:20px;
  border:1px solid var(--contorn);
  background:rgba(255,255,255,.04);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  text-align:center;
}
.mini-stat-num{
  font-size:clamp(1.2rem,2.8vw,1.7rem);
  font-weight:900;
  color:var(--blau);
}
.mini-stat-lab{
  margin-top:.2rem;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.92;
  text-transform:uppercase;
}

.seccio-kpis{
  padding-top:0;
}
.kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:1rem;
}
.kpi{
  min-height:170px;
  border-radius:var(--radius);
  border:1px solid var(--contorn);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg,var(--vidre),rgba(255,255,255,.03));
  box-shadow:var(--ombra), inset 0 0 28px rgba(76,201,240,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
}
.kpi-num{
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:900;
  color:var(--blau);
}
.kpi-lab{
  margin-top:.35rem;
  font-size:.9rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kpi-sub{
  margin-top:.15rem;
  font-size:.75rem;
  font-weight:800;
  opacity:.88;
  color:#d5f1ff;
}

.video-embedit{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--contorn);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}
.video-embedit video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.plans-nota,
.plans-intro,
.fils-desc{
  text-align:center;
  max-width:840px;
  margin:.9rem auto 0;
  color:var(--text-soft);
  font-weight:600;
  line-height:1.7;
}

.seccio-app-highlight{
  padding-top:3.2rem;
}
.app-highlight{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:1.25rem;
  align-items:center;
  padding:1.25rem;
  border-radius:var(--radius);
  border:1px solid var(--contorn);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(76,201,240,.12), transparent 60%),
    linear-gradient(180deg,var(--vidre),rgba(255,255,255,.03));
  box-shadow:var(--ombra), inset 0 0 40px rgba(76,201,240,.08);
}
.section-kicker{
  font-size:.8rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#dff8ff;
  opacity:.9;
}
.t-seccio{
  margin:0 0 1.4rem;
  text-align:center;
  font-size:clamp(1.8rem,3.4vw,3rem);
  line-height:1.06;
  font-weight:900;
  letter-spacing:-.02em;
}
.t-seccio.left{
  text-align:left;
  margin:.35rem 0 .8rem;
}
.app-text{
  margin:0;
  color:var(--text-soft);
  line-height:1.72;
  font-weight:600;
}
.app-list{
  margin:1rem 0 0;
  padding-left:1.1rem;
  display:grid;
  gap:.45rem;
  font-weight:700;
  color:#ecfaff;
}
.app-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

.app-box{
  display:grid;
  gap:.8rem;
  justify-items:center;
}
.app-screen{
  width:min(100%, 440px);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:0 24px 58px rgba(0,0,0,.42), inset 0 0 30px rgba(76,201,240,.08);
  padding:1rem;
}
.app-screen-top{
  display:flex;
  gap:.35rem;
  margin-bottom:.9rem;
}
.app-screen-top span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
}
.app-screen-body{
  display:grid;
  gap:.65rem;
}
.mock-line.big,
.mock-question,
.mock-option,
.mock-footer,
.mock-pill{
  border-radius:12px;
  background:rgba(255,255,255,.08);
}
.mock-line.big{height:18px;width:64%}
.mock-pill-row{display:flex;gap:.5rem;flex-wrap:wrap}
.mock-pill{width:70px;height:24px;border-radius:999px}
.mock-question{height:82px}
.mock-option{height:58px}
.mock-option.active{
  background:linear-gradient(90deg, rgba(76,201,240,.24), rgba(0,180,216,.16));
  border:1px solid rgba(76,201,240,.28);
}
.mock-footer{height:46px;width:48%}
.app-glow-text{
  color:var(--blau);
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:.82rem;
}

.caracteristiques{
  display:grid;
  grid-template-columns:repeat(3,minmax(240px,1fr));
  gap:1rem;
}
.card,
.thread,
.pla,
.cta-box{
  border-radius:var(--radius);
  border:1px solid var(--contorn);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg,var(--vidre),rgba(255,255,255,.03));
  box-shadow:var(--ombra), inset 0 0 30px rgba(76,201,240,.07);
}
.card{
  padding:1.15rem;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 56px rgba(0,0,0,.5), inset 0 0 36px rgba(76,201,240,.12);
}
.card-featured{
  border-color:rgba(76,201,240,.3);
  box-shadow:0 18px 42px rgba(0,0,0,.38), inset 0 0 36px rgba(76,201,240,.13);
}
.card-t{
  margin:0 0 .45rem;
  font-size:1.18rem;
  font-weight:900;
}
.card-p{
  margin:0 0 .8rem;
  color:var(--text-soft);
  line-height:1.65;
  font-weight:600;
}
.card-ul{
  margin:0;
  padding-left:1.1rem;
  display:grid;
  gap:.42rem;
  color:#ebfbff;
  font-weight:700;
}

.threads{
  display:grid;
  grid-template-columns:repeat(3,minmax(240px,1fr));
  gap:1rem;
}
.thread{
  padding:1.15rem;
}
.fil-t{
  margin:0 0 .45rem;
  font-size:1.1rem;
  font-weight:900;
}
.thread p{
  margin:0;
  line-height:1.65;
  color:var(--text-soft);
  font-weight:600;
}

.plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:1rem;
  margin-top:1.3rem;
}
.pla{
  padding:1.3rem;
  display:flex;
  flex-direction:column;
  min-height:420px;
}
.pla.destacat{
  border-color:rgba(76,201,240,.34);
  box-shadow:0 22px 54px rgba(0,0,0,.45), inset 0 0 38px rgba(76,201,240,.12);
}
.pla-cap{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
}
.pla-selo{
  display:inline-flex;
  align-items:center;
  padding:.32rem .6rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:900;
  color:#001018;
  background:linear-gradient(90deg,#c9f1ff,#82e1ff);
}
.pla-selo-pro{
  background:linear-gradient(90deg,#67efff,#22d3ff);
}
.pla-ribbon{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  padding:.32rem .6rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  color:#001018;
  background:linear-gradient(90deg,var(--blau),var(--blau2));
}
.pla-title{
  width:100%;
  margin:.55rem 0 0;
  font-size:1.6rem;
  font-weight:900;
}
.pla-preu{
  display:flex;
  align-items:baseline;
  gap:.35rem;
  margin:.9rem 0 .3rem;
}
.preu-act{
  font-size:2.2rem;
  font-weight:900;
  color:var(--blau);
}
.preu-sub{
  font-weight:800;
  opacity:.88;
}
.pla-estalvi{
  display:inline-flex;
  width:max-content;
  margin:.2rem 0 .2rem;
  padding:.34rem .6rem;
  border-radius:999px;
  background:rgba(76,201,240,.12);
  border:1px solid rgba(76,201,240,.24);
  color:#ddfaff;
  font-size:.78rem;
  font-weight:900;
}
.pla-ul{
  margin:1rem 0 0;
  padding-left:1.1rem;
  display:grid;
  gap:.5rem;
  color:#ebfbff;
  font-weight:700;
  flex:1;
}
.pla-cta{
  margin-top:1.2rem;
  width:100%;
}

.plans-banner{
  margin-top:1.15rem;
  padding:1rem 1.1rem;
  border-radius:var(--radius);
  border:1px solid rgba(76,201,240,.22);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(76,201,240,.10), transparent 60%),
    rgba(255,255,255,.04);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.plans-banner-kicker{
  font-size:.8rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#d8f8ff;
}
.plans-banner-title{
  margin-top:.2rem;
  font-size:1.08rem;
  font-weight:900;
}

.seccio-cta{
  padding-top:3.4rem;
}
.cta-box{
  padding:2rem 1.2rem;
  text-align:center;
}
.cta-title{
  margin:0 0 .55rem;
  font-size:clamp(1.8rem,3vw,2.8rem);
  font-weight:900;
}
.cta-text{
  max-width:820px;
  margin:0 auto;
  line-height:1.75;
  color:var(--text-soft);
  font-weight:600;
}
.cta-actions{
  display:flex;
  justify-content:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

.peu{
  padding:2rem 1rem 2.6rem;
  text-align:center;
}
.contacte{
  margin:0;
  color:#e5f6ff;
  font-size:.95rem;
  font-weight:600;
  opacity:.9;
}
.contacte a{
  color:var(--blau);
  font-weight:800;
}
.contacte a:hover{
  text-decoration:underline;
}

@media (max-width:1100px){
  .caracteristiques{grid-template-columns:repeat(2,minmax(240px,1fr))}
  .threads{grid-template-columns:repeat(2,minmax(240px,1fr))}
}

@media (max-width:980px){
  .hero-grid,
  .app-highlight{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .seccio{padding:3.5rem 1rem}
  .hero{min-height:auto;padding:2rem 1rem 2.5rem}
  .kpis,
  .plans,
  .caracteristiques,
  .threads{
    grid-template-columns:1fr;
  }
  .hero-mini-stats{
    grid-template-columns:1fr;
  }
  .hero-actions,
  .app-actions,
  .cta-actions{
    flex-direction:column;
  }
  .hero-actions .boto,
  .app-actions .boto,
  .cta-actions .boto{
    width:100%;
  }
}