/* ============================================================
   CLIRO.COM — INDEX / HOME PAGE CSS
============================================================ */

/* ─── HERO ─── */
.hero {
  min-height:100vh;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:56px;
  padding:100px 80px 64px;
  background:linear-gradient(150deg,var(--red-pale) 0%,#fff 55%);
  position:relative; overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute; top:-120px; right:-120px;
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(255,59,59,0.05) 0%,transparent 70%);
  pointer-events:none;
}

/* Word-by-word animation */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--red);
  font-weight:600; font-size:0.84rem;
  padding:8px 18px; border-radius:50px;
  border:1px solid var(--border); margin-bottom:24px;
  box-shadow:var(--shadow-sm);
  opacity:0; transform:translateX(-20px);
  animation:slideRight 0.6s 0.2s var(--ease) forwards;
}
@keyframes slideRight {
  to { opacity:1; transform:translateX(0); }
}
.hero-title {
  font-family:var(--font-h);
  font-size:clamp(2.4rem,4.5vw,3.8rem);
  font-weight:800; line-height:1.08;
  color:var(--dark); margin-bottom:20px;
}
.hero-title .word {
  display:inline-block;
  opacity:0; transform:translateY(28px);
  animation:wordUp 0.5s var(--ease) forwards;
}
.hero-title .word.red { color:var(--red); }
@keyframes wordUp {
  to { opacity:1; transform:translateY(0); }
}
.hero-sub {
  font-size:1.08rem; color:var(--gray); line-height:1.65;
  margin-bottom:32px; max-width:460px;
  opacity:0; animation:fadeUp 0.6s 0.9s var(--ease) forwards;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero .search-wrap {
  max-width:480px; margin-bottom:40px;
  opacity:0; animation:fadeUp 0.6s 1.1s var(--ease) forwards;
}
.hero-stats {
  display:flex; align-items:center; gap:28px;
  opacity:0; animation:fadeUp 0.6s 1.3s var(--ease) forwards;
}
.stat-item strong {
  display:block; font-family:var(--font-h);
  font-size:1.5rem; font-weight:800; color:var(--red);
}
.stat-item span { font-size:0.8rem; color:var(--gray); font-weight:500; }
.stat-div { width:1px; height:36px; background:var(--border); }

/* ─── HERO VISUAL ─── */
.hero-visual {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:520px;
}
.blob {
  position:absolute;
  width:360px; height:360px;
  background:var(--red); opacity:0.07;
  border-radius:60% 40% 70% 30% / 40% 60% 30% 70%;
  animation:blobMorph 8s ease-in-out infinite;
}
@keyframes blobMorph {
  0%,100% { border-radius:60% 40% 70% 30% / 40% 60% 30% 70%; }
  33%      { border-radius:40% 60% 30% 70% / 60% 40% 70% 30%; }
  66%      { border-radius:70% 30% 40% 60% / 30% 70% 60% 40%; }
}
.hero-mockup {
  background:#fff; border-radius:28px;
  border:1px solid var(--border);
  box-shadow:0 28px 72px rgba(255,59,59,0.16);
  padding:20px; width:290px;
  position:relative; z-index:2;
  animation:floatMain 4.5s ease-in-out infinite;
  opacity:0; animation:heroMockIn 0.8s 0.6s var(--ease) forwards,
             floatMain 4.5s 1.4s ease-in-out infinite;
}
@keyframes heroMockIn {
  from { opacity:0; transform:translateY(30px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes floatMain {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-14px); }
}
.mock-bar {
  display:flex; gap:6px; padding-bottom:14px;
  border-bottom:1px solid var(--gray-light); margin-bottom:14px;
}
.mock-bar span { width:11px; height:11px; border-radius:50%; }
.mock-bar span:nth-child(1) { background:#FF5F57; }
.mock-bar span:nth-child(2) { background:#FFBD2E; }
.mock-bar span:nth-child(3) { background:#28CA41; }
.mock-item {
  display:flex; align-items:center; gap:12px;
  padding:9px 10px; border-radius:10px;
  margin-bottom:4px; transition:background var(--t);
}
.mock-item:hover { background:var(--red-pale); }
.mock-icon { font-size:1.9rem; width:44px; text-align:center; flex-shrink:0; }
.mock-info b { display:block; font-size:0.84rem; color:var(--dark); font-weight:700; }
.mock-info small { color:var(--red); font-weight:600; font-size:0.78rem; }

/* ─── FLOATING CARDS ─── */
.float-card {
  position:absolute; z-index:3;
  background:#fff; border-radius:16px;
  padding:12px 18px;
  border:1.5px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,0.10);
  display:flex; align-items:center; gap:10px;
  font-size:0.82rem; font-weight:600; color:var(--dark);
  white-space:nowrap;
  opacity:0; animation:fadeInPop 0.5s var(--ease) forwards;
}
.float-card .fc-icon { font-size:1.4rem; }
.float-card.fc1 {
  top:8%; left:-60px;
  animation-delay:1.0s;
  animation: fadeInPop 0.5s 1.0s var(--ease) forwards,
             float1 3.8s 1.5s ease-in-out infinite;
}
.float-card.fc2 {
  top:8%; right:-55px;
  animation: fadeInPop 0.5s 1.2s var(--ease) forwards,
             float2 4.2s 1.7s ease-in-out infinite;
}
.float-card.fc3 {
  bottom:10%; left:-40px;
  animation: fadeInPop 0.5s 1.4s var(--ease) forwards,
             float3 3.5s 1.9s ease-in-out infinite;
}
@keyframes fadeInPop {
  from { opacity:0; transform:scale(0.85); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes float1 {
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50%     { transform:translateY(-10px) rotate(1deg); }
}
@keyframes float2 {
  0%,100% { transform:translateY(0) rotate(1deg); }
  50%     { transform:translateY(-13px) rotate(-1deg); }
}
@keyframes float3 {
  0%,100% { transform:translateY(0) rotate(0.5deg); }
  50%     { transform:translateY(-8px) rotate(-0.5deg); }
}
.fc-label { display:flex; flex-direction:column; }
.fc-label strong { font-size:0.88rem; }
.fc-label small { font-size:0.72rem; color:var(--gray); font-weight:400; }

/* ─── CAROUSEL ─── */
.carousel-section {
  padding:0 80px 64px;
}
.carousel-wrap {
  border-radius:24px; overflow:hidden;
  position:relative; box-shadow:var(--shadow);
}
.carousel-track {
  display:flex; transition:transform 0.55s var(--ease);
}
.carousel-slide {
  min-width:100%; height:280px;
  display:flex; align-items:center; justify-content:center;
  padding:48px 64px; position:relative; overflow:hidden;
}
.cs1 { background:linear-gradient(135deg,#FF3B3B 0%,#CC2A2A 100%); }
.cs2 { background:linear-gradient(135deg,#1A0A0A 0%,#2D1515 100%); }
.cs3 { background:linear-gradient(135deg,#FFF0F0 0%,#FFD6D6 100%); }
.cs4 { background:linear-gradient(135deg,#FF6B35 0%,#FF3B3B 100%); }

.cs-content { text-align:center; z-index:2; position:relative; }
.cs-content h2 {
  font-family:var(--font-h); font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:800; margin-bottom:10px; color:#fff;
}
.cs1 .cs-content h2, .cs2 .cs-content h2, .cs4 .cs-content h2 { color:#fff; }
.cs3 .cs-content h2 { color:var(--dark); }
.cs-content p { font-size:1rem; margin-bottom:20px; }
.cs1 .cs-content p, .cs2 .cs-content p, .cs4 .cs-content p { color:rgba(255,255,255,0.8); }
.cs3 .cs-content p { color:var(--gray); }
.cs-emoji {
  position:absolute; font-size:8rem; opacity:0.12;
  right:80px; top:50%; transform:translateY(-50%);
  pointer-events:none;
}

.carousel-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.22); border:1.5px solid rgba(255,255,255,0.35);
  color:#fff; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5;
  transition:background var(--t), transform var(--t);
  backdrop-filter:blur(4px);
}
.carousel-btn:hover { background:rgba(255,255,255,0.4); transform:translateY(-50%) scale(1.1); }
.cs-prev { left:18px; }
.cs-next { right:18px; }

.carousel-dots {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:5;
}
.carousel-dots button {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.45); border:none;
  cursor:pointer; padding:0;
  transition:width 0.3s var(--ease), background var(--t);
}
.carousel-dots button.active {
  width:24px; border-radius:4px; background:#fff;
}

/* ─── SATISFACTION BUBBLES ─── */
.satisfaction-strip {
  padding:0 80px 72px;
}
.satisfaction-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.sat-bubble {
  background:#fff; border-radius:var(--radius);
  border:1.5px solid var(--border);
  padding:24px 20px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sat-bubble:hover { border-color:var(--red); box-shadow:var(--shadow); }
.sat-bubble:nth-child(1) { animation:floatB1 3.0s 0s ease-in-out infinite; }
.sat-bubble:nth-child(2) { animation:floatB1 4.0s 0.5s ease-in-out infinite; }
.sat-bubble:nth-child(3) { animation:floatB1 3.5s 1.0s ease-in-out infinite; }
.sat-bubble:nth-child(4) { animation:floatB1 4.5s 1.5s ease-in-out infinite; }
@keyframes floatB1 {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
.sat-icon { font-size:2.2rem; flex-shrink:0; }
.sat-text strong { display:block; font-weight:700; font-size:0.9rem; color:var(--dark); }
.sat-text small { color:var(--gray); font-size:0.78rem; }

/* ─── CATEGORIES ─── */
.categories-section { padding:0 80px 72px; }
.cat-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
}
.cat-card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:var(--radius); padding:28px 16px;
  display:flex; flex-direction:column;
  align-items:center; gap:12px;
  text-decoration:none; cursor:pointer;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t);
}
.cat-card:hover {
  border-color:var(--red); background:var(--red-pale);
  transform:translateY(-5px); box-shadow:var(--shadow);
}
.cat-card:hover .cat-emoji { animation:emojiPop 0.4s var(--ease); }
@keyframes emojiPop {
  0%   { transform:scale(1) rotate(0deg); }
  40%  { transform:scale(1.3) rotate(-8deg); }
  70%  { transform:scale(0.9) rotate(4deg); }
  100% { transform:scale(1) rotate(0deg); }
}
.cat-emoji { font-size:2.2rem; display:block; }
.cat-card span:last-child {
  font-size:0.83rem; font-weight:600; color:var(--dark); text-align:center;
}

/* ─── FEATURED ─── */
.featured-section { padding:0 80px 80px; }
.featured-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:24px;
}

/* ─── PROMO ─── */
.promo-section { padding:0 80px 80px; }
.promo-inner {
  background:linear-gradient(135deg,var(--red) 0%,var(--red-dark) 100%);
  border-radius:28px; padding:60px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center; overflow:hidden; position:relative;
}
.promo-inner::after {
  content:'🛍️'; font-size:12rem; opacity:0.06;
  position:absolute; right:-20px; bottom:-20px;
  line-height:1; pointer-events:none;
}
.promo-badge {
  display:inline-block; background:rgba(255,255,255,0.2);
  color:#fff; padding:6px 16px; border-radius:50px;
  font-size:0.82rem; font-weight:700; margin-bottom:16px;
}
.promo-text h3 {
  font-family:var(--font-h); font-size:2rem; font-weight:800;
  color:#fff; margin-bottom:12px;
}
.promo-text p { color:rgba(255,255,255,0.8); font-size:1rem; line-height:1.6; margin-bottom:28px; }
.promo-text .btn-white { align-self:flex-start; }

/* ─── RESPONSIVE ─── */
@media(max-width:1100px){
  .hero { padding:100px 40px 60px; gap:40px; }
  .carousel-section,
  .satisfaction-strip,
  .categories-section,
  .featured-section,
  .promo-section { padding-left:40px; padding-right:40px; }
}
@media(max-width:900px){
  .hero { grid-template-columns:1fr; padding:100px 24px 60px; text-align:center; }
  .hero-visual { display:none; }
  .hero .search-wrap { max-width:100%; }
  .hero-stats { justify-content:center; }
  .satisfaction-grid { grid-template-columns:repeat(2,1fr); }
  .cat-grid { grid-template-columns:repeat(3,1fr); }
  .promo-inner { grid-template-columns:1fr; padding:40px; }
  .promo-vid { display:none; }
}
@media(max-width:600px){
  .carousel-section,
  .satisfaction-strip,
  .categories-section,
  .featured-section,
  .promo-section { padding-left:18px; padding-right:18px; }
  .carousel-slide { padding:32px 40px; height:220px; }
  .cs-content h2 { font-size:1.3rem; }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .satisfaction-grid { grid-template-columns:1fr; }
}