/* =========================================
   CARKING HOME PRO - v2.0 - 2026 Edition
   Inspirado en Linear, Stripe, Vercel
   ========================================= */

:root{
  --bg-900:#070a19;
  --bg-800:#0b1028;
  --bg-700:#111735;
  --accent:#00E676;
  --accent-2:#00E5FF;
  --accent-soft:rgba(0,230,118,0.12);
  --text-100:#ffffff;
  --text-300:#a1a8c3;
  --text-500:#6b728f;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --radius-xl:28px;
  --radius-lg:18px;
  --radius-full:999px;
  --shadow-glow:0 0 80px rgba(0,230,118,0.18);
  --shadow-card:0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* HERO */
.carking-hero{
  position:relative; background:var(--bg-900);
  padding:clamp(90px, 12vh, 140px) 24px 90px;
  overflow:hidden; min-height:94vh; display:flex; align-items:center;
  font-family:'Poppins',system-ui,sans-serif; isolation:isolate;
}
.carking-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(800px 600px at 15% 20%, rgba(0,230,118,0.14), transparent 60%),
    radial-gradient(1000px 700px at 85% 75%, rgba(99,102,241,0.22), transparent 60%),
    radial-gradient(600px 500px at 50% 0%, rgba(0,229,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 100%);
  z-index:0;
}
.carking-hero::after{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:1;
}

.carking-hero-container{
  max-width:1240px; margin:0 auto; width:100%; position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
}

/* Badge */
.section-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  padding:7px 14px 7px 8px; border-radius:var(--radius-full);
  font-size:11px; font-weight:700; letter-spacing:0.9px; color:var(--text-300);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.section-badge.light{
  background:rgba(0,230,118,0.08); border-color:rgba(0,230,118,0.18); color:#b7ffcf;
}
.section-badge .section-badge-dot{
  width:22px; height:22px; border-radius:50%; background:var(--bg-700);
  display:grid; place-items:center; position:relative;
}
.section-badge .section-badge-dot::after{
  content:''; width:8px; height:8px; background:var(--accent); border-radius:50%;
  box-shadow:0 0 0 4px rgba(0,230,118,0.2); animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{ 0%{box-shadow:0 0 0 0 rgba(0,230,118,0.4)} 70%{box-shadow:0 0 0 8px rgba(0,230,118,0)} 100%{box-shadow:0 0 0 0 rgba(0,230,118,0)} }

/* Left */
.carking-hero-left h1{
  font-size:clamp(46px, 6vw, 78px); line-height:0.9; font-weight:800;
  letter-spacing:-0.05em; color:var(--text-100); margin:22px 0 20px;
  font-variation-settings:'wght' 800;
}
.carking-hero-left h1 span{
  background:linear-gradient(100deg, var(--accent) 0%, #7dffb2 35%, var(--accent-2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  position:relative;
}
.hero-desc{
  font-size:clamp(15px, 1.6vw, 18px); line-height:1.7; color:var(--text-300);
  max-width:520px; margin:0 0 32px; font-weight:400;
}
.hero-desc strong{ color:var(--text-100); font-weight:600; }

.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; }
.btn-hero-primary{
  position:relative; background:var(--text-100); color:#080a14;
  padding:16px 28px; border-radius:var(--radius-full); font-size:15px; font-weight:700;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1); overflow:hidden;
}
.btn-hero-primary::before{
  content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--accent), var(--accent-2));
  opacity:0; transition:opacity 0.4s ease; z-index:-1;
}
.btn-hero-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,0.4); color:#000; }
.btn-hero-primary:hover::before{ opacity:1; }

.hero-social-proof{
  display:flex; align-items:center; gap:14px; padding:10px 14px 10px 10px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  border-radius:var(--radius-full); backdrop-filter:blur(12px);
}
.avatars{ display:flex; isolation:isolate; }
.avatars img{ width:30px; height:30px; border-radius:50%; border:2px solid var(--bg-800); margin-left:-8px; object-fit:cover; }
.avatars img:first-child{ margin-left:0; }
.social-text b{ display:block; font-size:12.5px; color:var(--text-100); line-height:1.1; font-weight:700; }
.social-text span{ font-size:11.5px; color:var(--text-500); font-weight:500; }

.hero-compatible{
  margin-top:24px; font-size:11px; font-weight:600; letter-spacing:0.4px;
  color:var(--text-500); display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  padding:8px 14px; border-radius:var(--radius-full);
}
.mobbin-badge-dot{ width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 8px var(--accent); }

/* Phone - Pro */
.carking-hero-right{ display:flex; justify-content:center; perspective:1200px; }
.phone-mockup{
  position:relative; width:340px; height:680px; background:linear-gradient(180deg, #151a2e, #080a14);
  border-radius:56px; padding:10px; box-shadow:var(--shadow-card), 0 0 120px rgba(99,102,241,0.18);
  transform:rotateY(-8deg) rotateX(4deg); transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.phone-mockup:hover{ transform:rotateY(-4deg) rotateX(2deg) translateY(-6px); }
.phone-mockup::before{
  content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:96px; height:22px; background:#000; border-radius:0 0 14px 14px; z-index:5;
}
.phone-glow{
  position:absolute; inset:-60px; background:conic-gradient(from 0deg at 50% 50%, rgba(0,230,118,0.2), rgba(99,102,241,0.25), rgba(0,229,255,0.2), rgba(0,230,118,0.2));
  filter:blur(45px); opacity:0.6; z-index:-1; border-radius:50%; animation:rotate-glow 10s linear infinite;
}
@keyframes rotate-glow{ to{ transform:rotate(360deg); } }
.phone-screen{ width:100%; height:100%; object-fit:cover; border-radius:46px; display:block; background:#000; }

.floating-card{
  position:absolute; background:rgba(255,255,255,0.92); backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-radius:16px; padding:14px 16px; box-shadow:0 10px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
  min-width:200px; border:1px solid rgba(255,255,255,0.7); transform:translateZ(40px);
}
.floating-card .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:7px; }
.dot.green{ background:var(--accent); box-shadow:0 0 10px var(--accent); } .dot.blue{ background:#0ea5e9; }
.floating-card b{ font-size:13px; color:#0f172a; display:block; font-weight:700; letter-spacing:-0.2px; }
.floating-card p{ font-size:12px; color:#64748b; margin:3px 0 0; font-weight:500; }
.card-1{ top:16%; right:-36px; animation:float-pro 5s ease-in-out infinite; }
.card-2{ bottom:18%; left:-36px; animation:float-pro 5s ease-in-out infinite 1.2s; }
@keyframes float-pro{ 0%,100%{ transform:translateZ(40px) translateY(0); } 50%{ transform:translateZ(50px) translateY(-10px); } }

.mobbin-trust{
  background:var(--text-100); color:#070a19; text-align:center; padding:12px 20px;
  font-size:11.5px; font-weight:800; letter-spacing:1.2px; position:relative; z-index:3;
  border-top:1px solid #e2e8f0; border-bottom:1px solid #e2e8f0;
}

/* Ecosystem - Pro Grid */
.ecosystem-section{ padding:100px 24px; background:#fcfcfd; position:relative; }
.ecosystem-section::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.container{ max-width:1180px; margin:0 auto; }
.ecosystem-header{ text-align:center; max-width:720px; margin:0 auto 64px; }
.ecosystem-header h2{ font-size:clamp(32px, 4vw, 52px); line-height:0.95; letter-spacing:-0.04em; color:#0f172a; font-weight:800; margin-bottom:16px; }
.ecosystem-header h2 span{
  background:linear-gradient(100deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.ecosystem-header p{ color:#64748b; font-size:18px; line-height:1.6; font-weight:400; }

.ecosystem-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.eco-card{
  position:relative; background:#fff; border:1px solid #eef0f3; border-radius:24px; padding:24px;
  text-decoration:none; color:#0f172a; transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
}
.eco-card::before{
  content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 0% 0%, rgba(0,230,118,0.06), transparent);
  opacity:0; transition:opacity 0.4s ease; pointer-events:none;
}
.eco-card.active:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.08); border-color:#0f172a; }
.eco-card.active:hover::before{ opacity:1; }
.eco-card.disabled{ background:#f8fafc; border-style:dashed; }
.eco-icon-wrap{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.eco-icon-wrap img{ width:60px; height:60px; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); }
.eco-placeholder{ width:60px; height:60px; border-radius:16px; background:#fff; border:1px solid #eef0f3; display:grid; place-items:center; font-size:26px; }
.eco-badge{ font-size:10px; font-weight:800; letter-spacing:0.6px; padding:6px 11px; border-radius:var(--radius-full); border:1px solid; }
.eco-badge.live{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.eco-badge.soon{ background:#fffbeb; color:#92400e; border-color:#fde68a; }
.eco-card h3{ font-size:17px; font-weight:700; letter-spacing:-0.3px; margin:0 0 4px; }
.eco-cat{ font-size:11.5px; color:#059669; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:12px; display:block; }
.eco-card p{ font-size:14px; color:#64748b; line-height:1.6; flex:1; margin-bottom:18px; }
.eco-cta{ font-size:13px; font-weight:700; display:inline-flex; align-items:center; gap:6px; color:#0f172a; }
.eco-cta.muted{ color:#94a3b8; }
.eco-cta::after{ content:'→'; transition:transform 0.3s ease; }
.eco-card:hover .eco-cta::after{ transform:translateX(4px); }

.center-btn{ text-align:center; margin-top:40px; }
.btn-secondary-outline{
  display:inline-flex; padding:13px 26px; border-radius:var(--radius-full); border:1px solid #e2e8f0;
  font-size:13.5px; font-weight:600; color:#0f172a; text-decoration:none; background:#fff;
  transition:all 0.3s ease; box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.btn-secondary-outline:hover{ border-color:#0f172a; background:#0f172a; color:#fff; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,0.12); }

/* How mini - Dark Pro */
.how-mini-section{ padding:100px 24px; background:#080a14; border-top:1px solid var(--border); position:relative; overflow:hidden; }
.how-mini-section::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(800px 500px at 80% 0%, rgba(99,102,241,0.12), transparent);
  pointer-events:none;
}
.how-mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; position:relative; z-index:2; }
.how-mini-left h2{ font-size:clamp(28px, 3.2vw, 42px); line-height:0.95; letter-spacing:-0.04em; color:#fff; font-weight:800; margin:18px 0 28px; }
.steps-mini{ display:flex; flex-direction:column; gap:12px; }
.step-mini{
  display:flex; gap:18px; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  padding:18px; border-radius:var(--radius-lg); backdrop-filter:blur(12px);
  transition:all 0.3s ease;
}
.step-mini:hover{ background:rgba(255,255,255,0.07); border-color:var(--border-strong); transform:translateX(4px); }
.step-mini b{ font-size:14px; font-weight:800; color:var(--accent); background:rgba(0,230,118,0.1); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.step-mini h4{ font-size:14.5px; font-weight:700; margin:0 0 4px; color:#fff; letter-spacing:-0.2px; }
.step-mini p{ font-size:13px; color:var(--text-300); margin:0; line-height:1.5; }
.how-mini-right{ position:relative; display:flex; gap:18px; justify-content:center; }
.how-mini-right img{
  width:240px; height:480px; object-fit:cover; border-radius:32px; border:1px solid var(--border);
  box-shadow:0 30px 60px rgba(0,0,0,0.5); background:#000;
}
.how-mini-right .img-2{ margin-top:48px; opacity:0.7; transform:scale(0.96); }

/* Final CTA - Pro */
.final-cta-section{
  position:relative; padding:120px 24px; background:#050711; text-align:center;
  overflow:hidden; isolation:isolate; border-top:1px solid var(--border);
}
.cta-glow-bg{
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  width:900px; height:600px;
  background:radial-gradient(ellipse, rgba(0,230,118,0.14) 0%, rgba(99,102,241,0.16) 35%, transparent 70%);
  filter:blur(60px); pointer-events:none; z-index:0;
}
.final-cta-container{ position:relative; z-index:2; max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.final-cta-logo{
  width:80px; height:80px; border-radius:20px; object-fit:cover; display:block; margin-bottom:28px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08); animation:float-pro 6s ease-in-out infinite;
}
.final-cta-section h2{ font-size:clamp(36px, 5vw, 56px); font-weight:800; color:#fff; letter-spacing:-0.05em; margin:0 0 16px; line-height:0.95; }
.final-cta-section p{ font-size:18px; color:var(--text-300); margin:0 0 36px; max-width:560px; line-height:1.6; }
.cta-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.final-cta-button{
  background:#fff; color:#050711; padding:18px 36px; border-radius:var(--radius-full); font-size:14.5px; font-weight:700;
  letter-spacing:-0.2px; text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 12px 32px rgba(255,255,255,0.12); transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.final-cta-button:hover{ background:#f8fafc; transform:translateY(-3px) scale(1.02); box-shadow:0 18px 48px rgba(255,255,255,0.18); }
.cta-note{ font-size:12.5px; color:var(--text-500); font-weight:500; display:flex; gap:8px; align-items:center; }
.cta-note::before, .cta-note::after{ content:''; width:20px; height:1px; background:var(--border); display:inline-block; }

@media(max-width:980px){
  .carking-hero-container{ grid-template-columns:1fr; gap:48px; text-align:center; }
  .carking-hero-left{ display:flex; flex-direction:column; align-items:center; }
  .hero-desc{ margin-left:auto; margin-right:auto; }
  .carking-hero-right{ order:-1; }
  .phone-mockup{ width:300px; height:620px; transform:none; }
  .phone-mockup:hover{ transform:translateY(-4px); }
  .card-1{ right:-10px; } .card-2{ left:-10px; }
  .ecosystem-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .how-mini-grid{ grid-template-columns:1fr; gap:48px; }
  .how-mini-right{ justify-content:center; }
  .how-mini-right img{ width:46%; height:auto; aspect-ratio:9/18; }
}
@media(max-width:640px){
  .carking-hero{ padding:90px 18px 60px; }
  .hero-social-proof{ width:100%; justify-content:center; }
  .how-mini-right img{ width:48%; }
  .final-cta-section{ padding:80px 18px; }
}