/* ============ HOME PAGE STYLES ============ */

/* Hero Section */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:var(--nav-height); }
.hero::before { content:''; position:absolute; top:-50%; right:-30%; width:800px; height:800px; background:radial-gradient(circle, rgba(227,30,36,0.12) 0%, transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-20%; left:-20%; width:600px; height:600px; background:radial-gradient(circle, rgba(227,30,36,0.06) 0%, transparent 70%); pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:750px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; background:rgba(227,30,36,0.1); border:1px solid rgba(227,30,36,0.3); border-radius:50px; color:var(--primary); font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; margin-bottom:24px; animation: fadeInUp 0.8s ease; }
.hero h1 { font-size: clamp(1.8rem, 3.5vw, 3rem); margin-bottom:20px; animation: fadeInUp 0.8s ease 0.2s both; }
.hero h1 .typed-cursor { color:var(--primary); animation:blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.hero p { font-size:1.15rem; color:var(--gray-400); max-width:600px; margin-bottom:32px; animation: fadeInUp 0.8s ease 0.4s both; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; animation: fadeInUp 0.8s ease 0.6s both; }
.hero-stats { display:flex; gap:48px; margin-top:60px; animation: fadeInUp 0.8s ease 0.8s both; }
.hero-stat { text-align:center; }
.hero-stat .number { font-family:var(--font-heading); font-size:2.5rem; font-weight:800; color:#111111; }
.hero-stat .number span { color:#111111; }
.hero-stat .label { color:var(--gray-400); font-size:0.85rem; margin-top:4px; }

/* Hero Visual — Animated Circle */
.hero-visual { position:absolute; right:8%; top:50%; transform:translateY(-50%); width:40%; max-width:420px; z-index:1; }
.hero-glow { width:100%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(227,30,36,0.15) 0%, rgba(227,30,36,0.05) 40%, transparent 70%); animation: heroFloat 6s ease-in-out infinite; display:flex; align-items:center; justify-content:center; position:relative; }

/* Rotating Rings */
.hero-ring { position:absolute; border-radius:50%; border:1px solid transparent; }
.hero-ring-1 { inset:0; border-color:rgba(227,30,36,0.15); animation:ringRotateCW 20s linear infinite; }
.hero-ring-2 { inset:12%; border-color:rgba(227,30,36,0.10); border-style:dashed; animation:ringRotateCCW 30s linear infinite; }
.hero-ring-3 { inset:24%; border-color:rgba(227,30,36,0.06); animation:ringRotateCW 40s linear infinite; }

@keyframes ringRotateCW { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes ringRotateCCW { from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }

/* Inner glow core */
.hero-glow-inner { width:50%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(227,30,36,0.12) 0%, rgba(227,30,36,0.04) 50%, transparent 70%); border:1px solid rgba(227,30,36,0.1); position:relative; z-index:2; animation:coreBreath 4s ease-in-out infinite; }
@keyframes coreBreath { 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.08); opacity:0.85;} }

/* Orbiting Dots */
.hero-orbit-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 16px rgba(227,30,36,0.6), 0 0 40px rgba(227,30,36,0.2); z-index:3; }
.hero-orbit-dot-1 { top:8%; left:50%; transform:translateX(-50%); animation:orbitDot1 20s linear infinite; transform-origin:50% calc(50% / 0.08 - 50%); }
.hero-orbit-dot-2 { width:7px; height:7px; opacity:0.7; top:50%; right:5%; animation:orbitDot2 30s linear infinite reverse; }
.hero-orbit-dot-3 { width:6px; height:6px; opacity:0.5; bottom:15%; left:10%; animation:orbitDot3 25s linear infinite; }

@keyframes orbitDot1 {
  0% { top:0%; left:50%; }
  25% { top:50%; left:100%; }
  50% { top:100%; left:50%; }
  75% { top:50%; left:0%; }
  100% { top:0%; left:50%; }
}
@keyframes orbitDot2 {
  0% { top:50%; right:0%; }
  25% { top:0%; right:50%; }
  50% { top:50%; right:100%; }
  75% { top:100%; right:50%; }
  100% { top:50%; right:0%; }
}
@keyframes orbitDot3 {
  0% { bottom:0%; left:50%; }
  25% { bottom:50%; left:0%; }
  50% { bottom:100%; left:50%; }
  75% { bottom:50%; left:100%; }
  100% { bottom:0%; left:50%; }
}

/* Pulse ring */
.hero-pulse { position:absolute; inset:-8%; border-radius:50%; border:2px solid rgba(227,30,36,0.15); animation:pulseRing 3s ease-out infinite; z-index:0; }
.hero-pulse::after { content:''; position:absolute; inset:-12px; border-radius:50%; border:1px solid rgba(227,30,36,0.08); animation:pulseRing 3s ease-out 1.5s infinite; }
@keyframes pulseRing { 0%{transform:scale(0.95); opacity:0.7;} 100%{transform:scale(1.15); opacity:0;} }

@keyframes heroFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }

@media(max-width:1024px) {
  .hero-visual { display:none; }
  .hero-content { max-width:100%; }
  .hero-stats { gap:32px; }
}
@media(max-width:600px) {
  .hero-stats { flex-direction:column; gap:16px; align-items:flex-start; }
  .hero-stat { display:flex; align-items:center; gap:12px; }
  .hero-stat .number { font-size:2rem; }
}

/* Trusted By */
.trusted { padding:60px 0; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); overflow:hidden; }
.trusted p { text-align:center; color:var(--gray-500); font-size:0.85rem; text-transform:uppercase; letter-spacing:3px; margin-bottom:32px; }
.trusted-scroll { display:flex; gap:60px; animation: scroll-x 30s linear infinite; width:max-content; }
.trusted-scroll .logo-item { font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--gray-500); white-space:nowrap; opacity:0.5; transition:var(--transition); }
.trusted-scroll .logo-item:hover { opacity:1; color:var(--primary); }
@keyframes scroll-x { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* About Preview */
.about-preview { position:relative; }
.about-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-preview-content .lead { font-size:1.1rem; color:var(--gray-300); margin-bottom:24px; }
.about-preview-content p { color:var(--gray-400); margin-bottom:16px; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:32px 0; }
.about-feature-item { display:flex; align-items:center; gap:10px; color:var(--gray-300); font-size:0.95rem; }
.about-feature-item .check { color:var(--primary); font-size:1.2rem; }
.about-image-wrap { position:relative; }
.about-image-box { background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:32px; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.about-image-box .placeholder-art { font-size:6rem; opacity:0.3; }
.about-exp-badge { position:absolute; bottom:-20px; right:32px; background:var(--primary); color:#ffffff; padding:20px 28px; border-radius:var(--radius); text-align:center; box-shadow:var(--shadow-red); }
.about-exp-badge .num { font-family:var(--font-heading); font-size:2.5rem; font-weight:900; line-height:1; }
.about-exp-badge span { font-size:0.85rem; }

@media(max-width:768px) { .about-preview-grid{grid-template-columns:1fr;} .about-features{grid-template-columns:1fr;} }

/* Services Overview (tab/grid leftover) */
.services-tabs { display:flex; justify-content:center; gap:12px; margin-bottom:48px; flex-wrap:wrap; }
.services-tab { padding:12px 28px; border-radius:50px; background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--gray-400); cursor:pointer; font-weight:500; transition:var(--transition); font-family:var(--font-body); font-size:0.95rem; }
.services-tab:hover { border-color:var(--primary); color:var(--primary); }
.services-tab.active { background:var(--primary); border-color:var(--primary); color:#ffffff; }

/* Why Choose Us */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.why-card { text-align:center; padding:40px 24px; }
.why-card .icon { width:64px; height:64px; margin:0 auto 20px; background:rgba(227,30,36,0.1); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.8rem; transition:var(--transition); }
.why-card:hover .icon { background:var(--primary); transform:scale(1.1); }
.why-card h3 { font-size:1.05rem; margin-bottom:8px; }
.why-card p { color:var(--gray-400); font-size:0.88rem; }
@media(max-width:1024px) { .why-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px) { .why-grid{grid-template-columns:1fr;} }

/* Work Preview */
.work-filter { display:flex; justify-content:center; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.work-filter-btn { padding:8px 22px; border-radius:50px; background:transparent; border:1px solid var(--glass-border); color:var(--gray-400); cursor:pointer; font-family:var(--font-body); font-weight:500; font-size:0.88rem; transition:var(--transition); }
.work-filter-btn:hover, .work-filter-btn.active { background:var(--primary); border-color:var(--primary); color:#ffffff; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media(max-width:768px) { .work-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px) { .work-grid{grid-template-columns:1fr;} }

/* Testimonials */
.testimonial-slider { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:24px; }
.testimonial-card { padding:32px; position:relative; }
.testimonial-card .quote { font-size:3rem; color:var(--primary); opacity:0.3; line-height:1; margin-bottom:12px; }
.testimonial-card p { color:var(--gray-300); font-size:0.95rem; font-style:italic; margin-bottom:20px; }
.testimonial-card .stars { color:#ffd700; font-size:0.9rem; margin-bottom:12px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:48px; height:48px; border-radius:50%; background:rgba(227,30,36,0.2); display:flex; align-items:center; justify-content:center; color:var(--primary); font-weight:700; font-size:1.1rem; }
.testimonial-info .name { color:#111111; font-weight:600; font-size:0.95rem; }
.testimonial-info .company { color:var(--gray-500); font-size:0.8rem; }

/* Process */
.process-timeline { display:flex; justify-content:space-between; position:relative; padding:40px 0; }
.process-timeline::before { content:''; position:absolute; top:68px; left:0; right:0; height:2px; background:var(--glass-border); }
.process-step { text-align:center; flex:1; position:relative; z-index:1; }
.process-step .num { width:52px; height:52px; border-radius:50%; background:var(--dark-3); border:2px solid var(--glass-border); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-family:var(--font-heading); font-weight:700; color:var(--primary); transition:var(--transition); }
.process-step:hover .num { background:var(--primary); border-color:var(--primary); color:#ffffff; transform:scale(1.15); }
.process-step h3 { font-size:0.95rem; margin-bottom:4px; }
.process-step p { color:var(--gray-500); font-size:0.8rem; }
@media(max-width:768px) {
  .process-timeline { flex-direction:column; gap:24px; padding:0; }
  .process-timeline::before { top:0; bottom:0; left:26px; right:auto; width:2px; height:100%; }
  .process-step { display:flex; text-align:left; gap:20px; }
  .process-step .num { flex-shrink:0; }
}

/* FAQ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border:1px solid var(--glass-border); border-radius:var(--radius-sm); margin-bottom:12px; overflow:hidden; transition:var(--transition); }
.faq-item:hover { border-color:rgba(227,30,36,0.3); }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; cursor:pointer; color:#111111; font-weight:500; background:var(--glass-bg); }
.faq-question .icon { color:var(--primary); transition:var(--transition); font-size:1.2rem; }
.faq-item.open .faq-question .icon { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s ease; }
.faq-answer-inner { padding:0 24px 20px; color:var(--gray-400); font-size:0.95rem; line-height:1.8; }

/* CTA / Lead Gen */
.cta-section { background:linear-gradient(135deg, rgba(227,30,36,0.1), transparent); border:1px solid rgba(227,30,36,0.15); border-radius:var(--radius-lg); padding:60px; text-align:center; }
.cta-section h2 { margin-bottom:16px; }
.cta-section p { color:var(--gray-400); max-width:600px; margin:0 auto 32px; }
.cta-btns { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ============ GROUPED SERVICES — PREMIUM ACCORDION ============ */
.grouped-services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; perspective:1200px; }

.service-group-card { cursor:pointer; padding:0 !important; overflow:hidden; transform-origin:top center; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1), margin 0.55s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s ease; will-change:transform, box-shadow; }

/* Subtle lift on hover */
.service-group-card:hover { border-color:rgba(227,30,36,0.2); box-shadow:0 4px 24px rgba(227,30,36,0.06); z-index: 1; position: relative; transform: translateY(-4px); } /* Reduced translation so it doesn't jump too much */

/* Open state — premium shadow + full width spanning (no tilt) */
.service-group-card.open { grid-column:1 / -1; transform:scale(1.015) !important; box-shadow: 0 12px 48px rgba(227,30,36,0.1), 0 4px 16px rgba(0,0,0,0.05); border-color:rgba(227,30,36,0.25); z-index:10 !important; position:relative; }

.sg-header { display:flex; align-items:center; gap:20px; padding:28px 32px; transition:padding 0.4s ease; }
.service-group-card.open .sg-header { padding-bottom:18px; }

.sg-icon { font-size:2.5rem; flex-shrink:0; width:64px; height:64px; background:rgba(227,30,36,0.08); border-radius:14px; display:flex; align-items:center; justify-content:center; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.service-group-card:hover .sg-icon { background:rgba(227,30,36,0.12); transform:scale(1.05); }
.service-group-card.open .sg-icon { background:var(--primary); transform:scale(1.08) rotate(-5deg); box-shadow:0 4px 20px rgba(227,30,36,0.3); }
.service-group-card.open .sg-icon::after { content:''; position:absolute; }

.sg-info { flex:1; min-width:0; }
.sg-info h3 { font-size:1.15rem; margin-bottom:4px; color:#111; transition:color 0.3s ease; }
.service-group-card.open .sg-info h3 { color:var(--primary); }
.sg-info p { font-size:0.88rem; color:#666; line-height:1.4; }

.sg-toggle { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:rgba(227,30,36,0.08); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:700; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
.service-group-card.open .sg-toggle { transform:rotate(45deg); background:var(--primary); color:#fff; box-shadow:0 2px 12px rgba(227,30,36,0.3); }

/* Sub-services body — animated height via JS inline style */
.sg-body { overflow:hidden; transition: height 0.55s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease; opacity:0; height:0; }
.service-group-card.open .sg-body { opacity:1; }

/* Animate sub-items staggered */
.sg-sub { display:flex; align-items:flex-start; gap:14px; padding:14px 32px; border-top:1px solid rgba(0,0,0,0.04); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); opacity:0; transform:translateX(-16px); }
.service-group-card.open .sg-sub { opacity:1; transform:translateX(0); }
.service-group-card.open .sg-sub:nth-child(1) { transition-delay:0.05s; }
.service-group-card.open .sg-sub:nth-child(2) { transition-delay:0.1s; }
.service-group-card.open .sg-sub:nth-child(3) { transition-delay:0.15s; }
.service-group-card.open .sg-sub:nth-child(4) { transition-delay:0.2s; }
.service-group-card.open .sg-sub:nth-child(5) { transition-delay:0.25s; }
.service-group-card.open .sg-sub:nth-child(6) { transition-delay:0.3s; }

.sg-sub:hover { background:rgba(227,30,36,0.03); padding-left:48px; }
.sg-sub span { font-size:1.3rem; flex-shrink:0; margin-top:2px; }
.sg-sub strong { color:#111; font-size:0.95rem; }
.sg-sub small { color:#777; font-size:0.82rem; }
.sg-sub:last-child { padding-bottom:24px; }

/* Collapsing card style — visually recede */
.service-group-card.collapsing { transform:scale(0.995); opacity:0.7; }

@media(max-width:768px) {
  .grouped-services-grid { perspective:800px; grid-template-columns:1fr; }
  .service-group-card.open { transform:scale(1.01); }
  .sg-header { padding:20px 24px; }
  .sg-sub { padding:12px 24px; }
  .sg-sub:hover { padding-left:40px; }
}

/* ============ WORK ITEM CARDS (always visible) ============ */
.work-item-card { display:flex; align-items:center; gap:24px; padding:28px 32px !important; cursor:pointer; }
.work-card-icon { font-size:2.8rem; width:72px; height:72px; flex-shrink:0; background:rgba(227,30,36,0.06); border-radius:16px; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.work-item-card:hover .work-card-icon { background:rgba(227,30,36,0.12); transform:scale(1.08); }
.work-card-content { flex:1; }
.work-card-tag { display:inline-block; padding:3px 14px; background:var(--primary); color:#fff; border-radius:50px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.work-card-content h3 { font-size:1.1rem; margin-bottom:6px; color:#111; }
.work-card-content p { font-size:0.88rem; color:#666; line-height:1.5; }