/* ============================================
   Antigravity — Sections v3.0
   Hero, Services, Products, Footer,
   Animations, Utilities, Responsive
   ============================================ */

/* ============================================
   Hero Section — Cinematic Full-Screen
   ============================================ */
.hero {
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:var(--space-16) var(--space-6);
    position:relative;overflow:hidden;
}

/* Floating orb decorations */
.hero::before {
    content:'';
    position:absolute;
    width:700px;height:700px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,246,0.18) 0%,transparent 70%);
    top:-250px;right:-250px;
    filter:blur(80px);
    animation:float-slow 22s ease-in-out infinite;
    pointer-events:none;
}
.hero::after {
    content:'';
    position:absolute;
    width:500px;height:500px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(34,211,238,0.14) 0%,transparent 70%);
    bottom:-150px;left:-150px;
    filter:blur(70px);
    animation:float-slow 18s ease-in-out infinite reverse;
    pointer-events:none;
}

.hero-content{text-align:center;max-width:900px;position:relative;z-index:2}

.hero-label {
    display:inline-flex;align-items:center;gap:var(--space-2);
    padding:7px 20px;
    background:rgba(139,92,246,0.1);
    border:1px solid rgba(139,92,246,0.25);
    border-radius:var(--radius-full);
    font-size:var(--text-sm);font-weight:600;
    color:var(--primary-400);
    margin-bottom:var(--space-8);
    animation:fadeInDown 0.8s ease 0.2s both;
    backdrop-filter:blur(8px);
    letter-spacing:0.02em;
    box-shadow:0 0 30px rgba(139,92,246,0.1);
}
.hero-label .status-dot {
    width:8px;height:8px;
    background:var(--success-400);
    border-radius:50%;
    animation:pulse-glow-green 2s ease infinite;
    box-shadow:0 0 8px var(--success-400);
}

.hero-title {
    font-family:var(--font-display);
    font-size:clamp(2.8rem,7vw,var(--text-7xl));
    font-weight:900;
    line-height:1;
    margin-bottom:var(--space-6);
    animation:fadeInUp 0.9s ease 0.35s both;
    letter-spacing:-0.04em;
}

.hero-description {
    font-size:var(--text-xl);
    color:var(--text-tertiary);
    max-width:640px;
    margin:0 auto var(--space-10);
    line-height:1.7;
    animation:fadeInUp 0.9s ease 0.5s both;
}

.hero-actions {
    display:flex;justify-content:center;gap:var(--space-4);
    flex-wrap:wrap;
    animation:fadeInUp 0.9s ease 0.65s both;
}

.hero-stats {
    display:flex;justify-content:center;align-items:center;
    gap:var(--space-2);
    margin-top:var(--space-16);
    animation:fadeInUp 0.9s ease 0.85s both;
}

.hero-stat-divider {
    width:1px;height:40px;
    background:linear-gradient(to bottom,transparent,var(--border-default),transparent);
    margin:0 var(--space-6);
}

.hero-stat{text-align:center;padding:0 var(--space-6)}
.hero-stat-value {
    font-family:var(--font-display);
    font-size:var(--text-4xl);
    font-weight:900;
    background:linear-gradient(135deg,var(--text-primary),var(--primary-400));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1;
    margin-bottom:4px;
}
.hero-stat-label {
    font-size:var(--text-xs);
    color:var(--text-muted);
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

/* Hero particles container */
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* ============================================
   Floating Card Decorations (Hero accents)
   ============================================ */
.hero-float-card {
    position:absolute;
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-xl);
    padding:14px 20px;
    display:flex;align-items:center;gap:12px;
    font-size:var(--text-sm);font-weight:600;
    color:var(--text-primary);
    box-shadow:var(--shadow-xl);
    animation:float-card 6s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
}
@keyframes float-card {
    0%,100%{transform:translateY(0px) rotate(-1deg)}
    50%{transform:translateY(-12px) rotate(1deg)}
}

/* ============================================
   Section Heading Styles
   ============================================ */
.section-label-tag {
    display:inline-flex;align-items:center;gap:6px;
    font-size:var(--text-xs);font-weight:700;
    text-transform:uppercase;letter-spacing:0.15em;
    color:var(--primary-400);
    padding:5px 16px;
    background:rgba(139,92,246,0.08);
    border:1px solid rgba(139,92,246,0.2);
    border-radius:var(--radius-full);
    margin-bottom:var(--space-4);
}

/* ============================================
   Service / Expertise Cards
   ============================================ */
.skill-icon-box {
    width:72px;height:72px;
    border-radius:var(--radius-xl);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto var(--space-5);
    position:relative;
    transition:all var(--transition-spring);
}
.skill-icon-box::before {
    content:'';
    position:absolute;inset:-1px;
    border-radius:inherit;
    background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
    pointer-events:none;
}
.card-glass:hover .skill-icon-box {
    transform:translateY(-4px) scale(1.08);
}

/* ============================================
   Footer — Layered Glass Panel
   ============================================ */
.footer {
    background:var(--surface-1);
    position:relative;overflow:hidden;
    margin-top:var(--space-16);
}
.footer::before {
    content:'';
    position:absolute;bottom:0;left:0;right:0;
    height:300px;
    background:radial-gradient(ellipse 80% 100% at 50% 100%, rgba(139,92,246,0.06) 0%,transparent 70%);
    pointer-events:none;
}

/* Top Tier: Newsletter Banner */
.footer-newsletter-banner {
    padding:var(--space-8) 0;
    position:relative;z-index:2;
    border-top:1px solid var(--border-subtle);
    border-bottom:1px solid var(--border-subtle);
    background:rgba(139,92,246,0.02);
}
.newsletter-inner {
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-8);
    padding:var(--space-6) var(--space-8);
    border-radius:var(--radius-xl);
}
.newsletter-content {
    flex:1;
}
.newsletter-form-wrapper {
    flex:1;
    max-width:450px;
    position:relative;
}
.newsletter-form {
    display:flex;gap:var(--space-3);
    width:100%;
}

/* Middle Tier: Main Grid */
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:var(--space-10);
    padding:var(--space-12) 0;
    position:relative;z-index:1;
}
.footer-brand{max-width:320px}
.footer-brand-name {
    font-family:var(--font-display);
    font-size:var(--text-2xl);
    font-weight:900;
    color:var(--text-primary);
    margin-bottom:var(--space-4);
    letter-spacing:-0.03em;
    display:flex;align-items:center;
}
.footer-brand p{color:var(--text-tertiary);font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--space-6)}
.footer-title {
    font-size:var(--text-xs);
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:var(--space-5);
    text-transform:uppercase;letter-spacing:0.15em;
}

/* Links & Contacts */
.footer-links {
    display:flex;flex-direction:column;gap:var(--space-3);
}
.footer-links a, .contact-address {
    color:var(--text-tertiary);
    font-size:var(--text-sm);
    transition:all var(--transition-fast);
    display:flex;align-items:center;gap:10px;
    line-height:1.6;
}
.contact-address {
    align-items:flex-start;
}
.contact-address i, .contact-link i {
    width:18px;height:18px;
    color:var(--primary-400);
    flex-shrink:0;
    margin-top:2px;
}
.contact-link i { margin-top:0; }
.footer-links a:hover {
    color:var(--primary-400);
    transform:translateX(6px);
}

/* Social Icons */
.footer-social {
    display:flex;flex-wrap:wrap;gap:12px;
}
.footer-social a {
    width:38px;height:38px;
    border-radius:var(--radius-lg);
    background:var(--surface-2);
    border:1px solid var(--border-subtle);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-secondary);
    font-size:1.1rem;
    transition:all var(--transition-spring);
}
.footer-social a:hover {
    background:linear-gradient(135deg,var(--primary-500),var(--primary-400));
    border-color:transparent;
    color:#fff;
    transform:translateY(-5px) scale(1.1);
    box-shadow:0 8px 25px rgba(139,92,246,0.3);
}

/* Bottom Tier: Legal */
.footer-bottom {
    padding:var(--space-6) 0;
    border-top:1px solid var(--border-subtle);
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:var(--space-4);
    position:relative;z-index:1;
}
.footer-bottom-text {
    font-size:var(--text-sm);
    color:var(--text-muted);
    margin:0;
    line-height:1.6;
}
.footer-bottom-text a {
    color:var(--primary-400);
    text-decoration:none;
    font-weight:500;
    transition:opacity var(--transition-fast);
}
.footer-bottom-text a:hover {
    opacity:0.8;
    text-decoration:underline;
}

/* ============================================
   Scroll Animations
   ============================================ */
.animate-on-scroll {
    opacity:0;
    transform:translateY(40px);
    filter:blur(8px);
    transition:all 0.9s cubic-bezier(0.16,1,0.3,1);
}
.animate-on-scroll.visible {
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}
.stagger-1{transition-delay:0.08s}.stagger-2{transition-delay:0.16s}
.stagger-3{transition-delay:0.24s}.stagger-4{transition-delay:0.32s}
.stagger-5{transition-delay:0.4s}.stagger-6{transition-delay:0.48s}

/* ============================================
   Keyframe Animations
   ============================================ */
@keyframes fadeInUp {
    from{opacity:0;transform:translateY(35px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInDown {
    from{opacity:0;transform:translateY(-20px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

@keyframes slideInRight {
    from{opacity:0;transform:translateX(120px)}
    to{opacity:1;transform:translateX(0)}
}
@keyframes float-slow {
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(-25px,35px)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes skeleton-loading {
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}
@keyframes bg-drift {
    0%{transform:scale(1) rotate(0deg)}
    100%{transform:scale(1.08) rotate(8deg)}
}
@keyframes pulse-glow {
    0%,100%{box-shadow:0 0 20px rgba(139,92,246,0.3)}
    50%{box-shadow:0 0 50px rgba(139,92,246,0.6),0 0 25px rgba(34,211,238,0.3)}
}
@keyframes pulse-glow-green {
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:0.7;transform:scale(1.4)}
}
@keyframes gradient-shift {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes shimmer {
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}
@keyframes glow-pulse-border {
    0%,100%{border-color:rgba(139,92,246,0.2)}
    50%{border-color:rgba(139,92,246,0.5);box-shadow:0 0 30px rgba(139,92,246,0.15)}
}
@keyframes slide-up {
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes neon-flicker {
    0%,19%,21%,23%,25%,54%,56%,100%{text-shadow:0 0 12px rgba(139,92,246,0.8),0 0 30px rgba(139,92,246,0.5)}
    20%,24%,55%{text-shadow:none}
}

/* CTA card animated border */
.cta-card-animated {
    animation:glow-pulse-border 4s ease-in-out infinite;
}

/* Shimmer button effect */
.btn-shimmer::after {
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
    transform:skewX(-20deg);
    animation:btn-shimmer-anim 3s infinite;
}
@keyframes btn-shimmer-anim {
    0%{left:-100%}
    60%,100%{left:150%}
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.text-white{color:var(--text-primary)}.text-muted{color:var(--text-muted)}
.text-success{color:var(--success-400)}.text-danger{color:var(--danger-400)}.text-warning{color:var(--warning-400)}
.font-bold{font-weight:700}.font-medium{font-weight:500}
.mt-4{margin-top:var(--space-4)}.mt-8{margin-top:var(--space-8)}
.mb-4{margin-bottom:var(--space-4)}.mb-8{margin-bottom:var(--space-8)}
.hidden{display:none!important}
.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-xl)}
.w-full{width:100%}.relative{position:relative}.overflow-hidden{overflow:hidden}

/* Glassmorphism helper */
.glass {
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
}

/* Neon glow text */
.neon-text {
    color:var(--primary-400);
    text-shadow:0 0 12px rgba(139,92,246,0.7),0 0 30px rgba(139,92,246,0.4);
}

/* Separator line */
.divider {
    height:1px;
    background:linear-gradient(90deg,transparent,var(--border-default),transparent);
    border:none;
    margin:var(--space-8) 0;
}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:1024px) {
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px) {
    :root{--nav-height:64px}
    h1{font-size:var(--text-4xl)}
    h2{font-size:var(--text-3xl)}
    h3{font-size:var(--text-2xl)}
    .container{padding:0 var(--space-4)}
    .section{padding:var(--space-12) 0}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .hero-stats{gap:0;flex-wrap:wrap}
    .hero-stat-divider{display:none}
    .hero-stat{padding:var(--space-4)}

    /* Mobile nav drawer */
    .nav-links {
        position:fixed;
        top:var(--nav-height);left:0;right:0;
        background:var(--glass-bg);
        backdrop-filter:var(--glass-blur);
        -webkit-backdrop-filter:var(--glass-blur);
        flex-direction:column;
        padding:var(--space-6);
        gap:var(--space-1);
        border-bottom:1px solid var(--glass-border);
        transform:translateY(-110%);
        opacity:0;visibility:hidden;
        transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
        box-shadow:0 20px 40px rgba(0,0,0,0.5);
    }
    .nav-links.open{transform:translateY(0);opacity:1;visibility:visible}
    .nav-links a{border-radius:var(--radius-lg);padding:12px 16px}
    .nav-toggle{display:flex}
    .nav-actions{display:none}

    .hero-title{font-size:clamp(2.2rem,9vw,3.5rem)}
    .hero-description{font-size:var(--text-base)}
    .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
    .newsletter-inner {flex-direction:column;text-align:center;gap:var(--space-4)}
    .newsletter-form-wrapper {max-width:100%}
    .footer-bottom{flex-direction:column;text-align:center}
    .hero-actions{flex-direction:column;align-items:stretch}
    .hero-actions .btn{width:100%;justify-content:center}
    .toast{min-width:auto;max-width:calc(100vw - 48px)}
    .toast-container{left:var(--space-6)}
}

@media(max-width:480px) {
    h1{font-size:var(--text-3xl)}
    h2{font-size:var(--text-2xl)}
    .btn-lg{padding:13px 28px;font-size:var(--text-sm)}
    .hero{padding:var(--space-16) var(--space-4)}
    .hero-title{letter-spacing:-0.02em}
}