/* ==========================================================================
   FONTS IN LOCALE
   ========================================================================== */

/* Space Grotesk - 500 (Medium) */
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); 
}
/* Space Grotesk - 700 (Bold) */
@font-face {
  font-display: swap; 
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); 
}

/* Inter - 400 (Regular) */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); 
}
/* Inter - 500 (Medium) */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); 
}
/* Inter - 600 (SemiBold) */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); 
}
/* Inter - 800 (ExtraBold) */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v20-latin-800.woff2') format('woff2'); 
}

:root{
  /* Colori base fusi con Universo */
  --void:        #03040a;
  --void-2:      #0a0e1f;
  --panel:       #0c111d;
  --panel-2:     #10182a;
  --line:        #1c2740;
  --line-soft:   #141d31;

  --ink:         #eaf2ff;
  --ink-dim:     #6b7590;
  --ink-faint:   #3a4058;

  --blue:        #4fb6ff;
  --blue-deep:   #1c5fd6;
  --cyan:        #7ee8ff;
  --violet:      #6a5cff;

  --ok:          #57e8a6;

  /* Type: JetBrains rimosso */
  --f-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', sans-serif;
  --f-mono:    'Space Grotesk', ui-monospace, monospace;

  /* layout */
  --wrap: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);letter-spacing:-0.02em;}
p{margin:0;}
button{font:inherit;cursor:pointer;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
}

/* Effetto Universo sui bordi laterali */
#starBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 100%);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(3, 4, 10, .72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.nav-logo{
  font-family:var(--f-display);
  font-weight:700;
  font-size:19px;
  display:flex; align-items:center; gap:9px;
}
.nav-logo .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 12px 2px rgba(79,182,255,.8);
}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{
  font-size:14px; color:var(--ink-dim);
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  padding:10px 20px;
  border-radius:999px;
  background:var(--blue);
  color:#031225;
  font-weight:600;
  font-size:14px;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 0 0 0 rgba(79,182,255,.5);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px -6px rgba(79,182,255,.6);}
.nav-toggle{display:none;}

/* ==========================================================================
   Hero + warp wordmark
   ========================================================================== */
.hero{
  position:relative;
  padding:104px 0 90px;
  overflow:hidden;
  text-align:center;
  z-index:1;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:36px;
}
.hero-tag span.live{
  width:6px;height:6px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px 1px var(--ok);
}

.warp{
  position:relative;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(52px, 10vw, 132px);
  line-height:1;
  margin:0 auto;
  width:fit-content;
  letter-spacing:-.03em;
}
.warp .fill{
  display:block;
  background: linear-gradient(120deg, #1c5fd6, #4fb6ff 40%, #7ee8ff 70%, #6a5cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  white-space:nowrap;
}
.warp canvas{
  position:absolute;
  left:0; top:0;
  pointer-events:none;
}
.warp canvas.warp-glow{
  filter:blur(26px);
  opacity:.65;
  transform:scale(1.15);
  transform-origin:center;
  z-index:0;
}
.warp canvas.warp-crisp{
  z-index:1;
}
.hero-sub{
  max-width:560px;
  margin:30px auto 0;
  color:var(--ink-dim);
  font-size:17px;
}
.hero-actions{
  display:flex; gap:14px; justify-content:center;
  margin-top:40px;
  flex-wrap:wrap;
}
.btn{
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.btn-primary{
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  color:#031225;
  box-shadow:0 10px 30px -10px rgba(79,182,255,.55);
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{
  border-color:var(--line);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}

.hero-strip{
  display:flex; justify-content:center; gap:44px;
  margin-top:64px;
  flex-wrap:wrap;
}
.hero-strip .stat b{
  display:block;
  font-family:var(--f-display);
  font-size:26px;
  color:var(--ink);
}
.hero-strip .stat span{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ==========================================================================
   Section shell
   ========================================================================== */
.section{
  position:relative;
  z-index:1;
  padding:96px 0;
  border-top:1px solid var(--line-soft);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(28px,3.6vw,40px);
  margin-top:10px;
}
.section-head p{
  color:var(--ink-dim);
  max-width:420px;
  font-size:15px;
}

/* ==========================================================================
   Names / collections grid
   ========================================================================== */
.names-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:20px;
}
.name-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  aspect-ratio:3/4;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .25s ease, border-color .25s ease;
}
.name-card:hover{transform:translateY(-4px);border-color:var(--blue);}
.name-card .thumb{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05);
}
.name-card .shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,4,10,0) 30%, rgba(3,4,10,.92) 100%);
}
.name-card .body{
  position:relative;
  padding:18px;
  display:flex; flex-direction:column; gap:4px;
}
.name-card .count{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan);
}
.name-card h3{font-size:19px;}
.name-card .lock{
  position:absolute; top:14px; right:14px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(3,4,10,.55);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
}
.name-card .lock svg{width:13px;height:13px;stroke:var(--ink);}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.plan{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 26px;
  display:flex; flex-direction:column;
  gap:22px;
  position:relative;
}
.plan.featured{
  border-color:var(--blue);
  background:linear-gradient(180deg, rgba(79,182,255,.08), var(--panel) 40%);
}
.plan.featured::before{
  content:"Più scelto";
  position:absolute; top:-12px; left:26px;
  background:var(--blue);
  color:#031225;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  font-weight:700;
}
.plan-name{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);}
.plan-price{display:flex;align-items:baseline;gap:6px;}
.plan-price b{font-family:var(--f-display);font-size:42px;}
.plan-price span{color:var(--ink-faint);font-size:13px;}
.plan-note{font-size:12.5px;color:var(--cyan);font-family:var(--f-mono);}
.plan ul{display:flex;flex-direction:column;gap:12px;}
.plan li{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--ink-dim);
}
.plan li svg{width:15px;height:15px;stroke:var(--blue);flex-shrink:0;}
.plan .btn{justify-content:center;width:100%;}

/* ==========================================================================
   How it works
   ========================================================================== */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.step{
  background:var(--void-2);
  padding:34px 28px;
}
.step .idx{
  font-family:var(--f-mono);
  color:var(--blue);
  font-size:13px;
  margin-bottom:16px;
  display:block;
}
.step h3{font-size:18px;margin-bottom:8px;}
.step p{color:var(--ink-dim);font-size:14px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  border-top:1px solid var(--line-soft);
  padding:56px 0 34px;
  position:relative; z-index:1;
}
.footer-top{
  display:flex; justify-content:space-between; gap:32px;
  flex-wrap:wrap;
  padding-bottom:40px;
}
.footer-brand{max-width:280px;}
.footer-brand .nav-logo{margin-bottom:12px;}
.footer-brand p{color:var(--ink-faint);font-size:13.5px;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h4{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:16px;
}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:var(--ink-dim);font-size:14px;}
.footer-col a:hover{color:var(--blue);}
.footer-bottom{
  border-top:1px solid var(--line-soft);
  padding-top:24px;
  display:flex; justify-content:space-between;
  font-size:12.5px; color:var(--ink-faint);
  font-family:var(--f-mono);
  flex-wrap:wrap; gap:12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:860px){
  .nav-links{display:none;}
  .pricing-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .hero{padding:80px 0 60px;}
  .footer-top{flex-direction:column;}
}

/* ==========================================================================
   Page: profilo (name page)
   ========================================================================== */
.profile-hero{
  padding:56px 0 40px;
  border-bottom:1px solid var(--line-soft);
  position:relative; z-index:1;
}
.breadcrumb{
  font-family:var(--f-mono);
  font-size:12px; color:var(--ink-faint);
  margin-bottom:26px;
}
.breadcrumb a{color:var(--ink-dim);}
.breadcrumb a:hover{color:var(--blue);}
.profile-head{
  display:flex; gap:24px; align-items:center;
  flex-wrap:wrap;
}
.avatar{
  width:88px;height:88px;border-radius:50%;
  background-size:cover;background-position:center;
  border:2px solid var(--line);
  box-shadow:0 0 0 4px rgba(79,182,255,.08);
}
.profile-info h1{font-size:clamp(26px,4vw,36px);}
.profile-meta{
  display:flex; gap:18px; margin-top:10px; flex-wrap:wrap;
}
.profile-meta span{
  font-family:var(--f-mono);
  font-size:12.5px; color:var(--ink-dim);
  display:flex; align-items:center; gap:6px;
}
.profile-meta span svg{width:13px;height:13px;stroke:var(--blue);}

.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:22px;
}
.video-card{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--panel);
  transition:transform .2s ease, border-color .2s ease;
}
.video-card:hover{transform:translateY(-3px);border-color:var(--blue);}
.video-thumb{
  position:relative;
  aspect-ratio:16/9;
  background-size:cover; background-position:center;
}
.video-thumb .play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(3,4,10,.28);
  opacity:0; transition:opacity .2s ease;
}
.video-card:hover .video-thumb .play{opacity:1;}
.video-thumb .play span{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
}
.video-thumb .play svg{width:16px;height:16px;fill:var(--void);margin-left:2px;}
.video-thumb .dur{
  position:absolute; bottom:8px; right:8px;
  background:rgba(3,4,10,.75);
  font-family:var(--f-mono);
  font-size:11px; padding:3px 7px; border-radius:5px;
}
.video-thumb .locked-tag{
  position:absolute; top:8px; left:8px;
  background:rgba(3,4,10,.75);
  border:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px;
  display:flex; align-items:center; gap:5px;
  color:var(--cyan);
}
.video-card .body{padding:14px 16px 18px;}
.video-card h4{font-size:15px;font-weight:600;margin-bottom:6px;}
.video-card .tags{display:flex;gap:6px;flex-wrap:wrap;}
.video-card .tags a{
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--ink-faint);
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:999px;
}
.video-card .tags a:hover{color:var(--blue);border-color:var(--blue);}

.filter-bar{
  display:flex; gap:10px; align-items:center;
  margin-bottom:32px; flex-wrap:wrap;
}
.filter-bar .chip{
  font-family:var(--f-mono);
  font-size:12px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--ink-dim);
}
.filter-bar .chip.active{
  border-color:var(--blue);
  color:var(--blue);
  background:rgba(79,182,255,.08);
}

/* ==========================================================================
   Page: video watch
   ========================================================================== */
.watch{
  padding:48px 0 90px;
  position:relative; z-index:1;
}
.watch-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:36px;
}
.player{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel) center/cover;
}
.player .gate{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  background:rgba(3,4,10,.72);
  backdrop-filter:blur(6px);
  text-align:center;
  padding:24px;
}
.player .gate .lockcircle{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,17,29,.8);
}
.player .gate .lockcircle svg{width:18px;height:18px;stroke:var(--cyan);}
.player .gate h3{font-size:19px;}
.player .gate p{color:var(--ink-dim);font-size:13.5px;max-width:320px;}

.watch-title{margin-top:26px;}
.watch-title h1{font-size:clamp(22px,3vw,30px);}
.watch-meta{
  display:flex; gap:16px; margin-top:12px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12.5px; color:var(--ink-dim);
}
.watch-names{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.watch-names a{
  font-size:13px; padding:6px 13px;
  border-radius:999px; border:1px solid var(--line);
  color:var(--ink-dim);
}
.watch-names a:hover{color:var(--blue);border-color:var(--blue);}

.side-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}
.side-card h4{font-size:15px;margin-bottom:14px;}
.side-list{display:flex;flex-direction:column;gap:14px;}
.side-item{display:flex;gap:12px;}
.side-item .thumb{
  width:96px;aspect-ratio:16/9;border-radius:7px;
  background-size:cover;background-position:center;flex-shrink:0;
}
.side-item .meta h5{font-size:13px;font-weight:600;line-height:1.35;}
.side-item .meta span{font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);}

@media (max-width:900px){
  .watch-layout{grid-template-columns:1fr;}
}