/* ============================================================
   LUNA DESIGN STUDIO — Portfolio Designer Styles
   Theme: Creative gradients / deep navy / vibrant accents
   ============================================================ */

body { font-family:'DM Sans','Inter',sans-serif;background:#08050f;color:#d0c8e8; }
h1,h2,h3 { font-family:'Plus Jakarta Sans','DM Sans',sans-serif; }

/* Nav */
.site-nav { position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 0;transition:all 0.4s ease; }
.site-nav.scrolled { background:rgba(8,5,15,0.96);backdrop-filter:blur(14px);box-shadow:0 2px 30px rgba(168,85,247,0.12);padding:0.75rem 0; }
.nav-logo { font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-0.5px; }
.nav-logo em { font-style:normal;background:linear-gradient(90deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.nav-links { display:flex;gap:2.5rem;list-style:none; }
.nav-links a { font-size:0.87rem;font-weight:500;color:rgba(208,200,232,0.6);position:relative;transition:color 0.3s; }
.nav-links a::after { content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:linear-gradient(90deg,#a855f7,#ec4899);transition:width 0.3s; }
.nav-links a:hover,.nav-links a.active { color:#a855f7; }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }
.nav-cta { background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff !important;padding:0.6rem 1.5rem;border-radius:25px;font-size:0.85rem;font-weight:700;transition:opacity 0.3s,transform 0.3s; }
.nav-cta:hover { opacity:0.85;transform:scale(1.04); }
.hamburger { background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px; }
.hamburger span { width:24px;height:2px;background:#a855f7;display:block;border-radius:2px;transition:all 0.3s; }
.mobile-nav { list-style:none;max-height:0;overflow:hidden;background:rgba(8,5,15,0.98);transition:max-height 0.4s ease; }
.mobile-nav.open { max-height:300px;padding:1rem 0; }
.mobile-nav li a { display:block;padding:0.85rem 1.5rem;font-size:0.9rem;color:rgba(208,200,232,0.6);border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.3s; }
.mobile-nav li a:hover { color:#a855f7; }

/* Hero */
.hero-section { position:relative;min-height:100vh;background:#08050f;display:flex;align-items:center;overflow:hidden; }
.hero-content { position:relative;z-index:2;padding-top:100px; }
.hero-tagline { display:inline-flex;align-items:center;gap:0.5rem;background:rgba(168,85,247,0.12);border:1px solid rgba(168,85,247,0.25);color:#a855f7;font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;padding:0.4rem 1rem;border-radius:20px;margin-bottom:1.5rem; }
.hero-title { font-size:clamp(2.5rem,6vw,5rem);color:#fff;line-height:1.05;font-weight:800;margin-bottom:1.5rem; }
.hero-title .gradient-word { background:linear-gradient(90deg,#a855f7,#ec4899,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-subtitle { font-size:1.05rem;color:rgba(208,200,232,0.6);max-width:480px;line-height:1.7;margin-bottom:2.5rem; }
.hero-cta { display:flex;flex-wrap:wrap;gap:1rem;align-items:center; }
.btn-luna-primary { background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff;padding:0.9rem 2.2rem;border-radius:25px;font-weight:700;font-size:0.95rem;border:none;cursor:pointer;transition:opacity 0.3s,transform 0.3s; }
.btn-luna-primary:hover { opacity:0.85;transform:translateY(-2px); }
.btn-luna-outline { border:2px solid rgba(168,85,247,0.35);color:#a855f7;padding:0.9rem 2.2rem;border-radius:25px;font-weight:600;font-size:0.95rem;background:transparent;cursor:pointer;transition:all 0.3s; }
.btn-luna-outline:hover { border-color:#a855f7;background:rgba(168,85,247,0.07); }

/* Stats */
.stats-bar { background:linear-gradient(90deg,#a855f7,#ec4899,#f97316);padding:2.5rem 0; }
.stats-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;text-align:center; }
.stat-item { color:#fff; }
.stat-num { display:block;font-size:2.4rem;font-weight:800; }
.stat-label { font-size:0.82rem;opacity:0.9; }

/* Section */
.section-label { font-size:0.75rem;letter-spacing:3px;text-transform:uppercase;color:#a855f7;font-weight:600;margin-bottom:0.75rem;display:block; }
.section-title { font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;line-height:1.2;margin-bottom:1.5rem;font-weight:800; }
.section-body { color:rgba(208,200,232,0.6);line-height:1.8;margin-bottom:1rem;max-width:520px;font-size:0.95rem; }
.section-header { text-align:center;margin-bottom:3.5rem; }
.section-cta { text-align:center;margin-top:3rem; }

/* Portfolio Grid */
.portfolio-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem; }
.portfolio-card { position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;cursor:pointer; }
.portfolio-card-bg { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;transition:transform 0.5s; }
.portfolio-card:hover .portfolio-card-bg { transform:scale(1.1); }
.portfolio-overlay { position:absolute;inset:0;background:linear-gradient(135deg,rgba(168,85,247,0.85),rgba(236,72,153,0.75));opacity:0;transition:opacity 0.4s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center; }
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-cat { font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.8);margin-bottom:0.5rem; }
.portfolio-title { font-size:1.3rem;font-weight:700;color:#fff;margin-bottom:0.5rem; }
.portfolio-desc { font-size:0.82rem;color:rgba(255,255,255,0.8); }

/* Service Cards */
.services-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem; }
.service-card { background:rgba(255,255,255,0.04);border:1px solid rgba(168,85,247,0.15);border-radius:16px;padding:2rem;transition:border-color 0.3s,transform 0.3s; }
.service-card:hover { border-color:rgba(168,85,247,0.4);transform:translateY(-5px); }
.service-icon { font-size:2.5rem;margin-bottom:1rem;display:block; }
.service-name { font-size:1rem;font-weight:700;color:#fff;margin-bottom:0.5rem; }
.service-desc { font-size:0.83rem;color:rgba(208,200,232,0.5);line-height:1.6; }

/* Testimonials */
.testimonials-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem; }
.t-card { background:rgba(255,255,255,0.04);border:1px solid rgba(168,85,247,0.15);border-radius:16px;padding:2rem;transition:border-color 0.3s; }
.t-card:hover { border-color:rgba(168,85,247,0.4); }
.t-card p { color:rgba(208,200,232,0.7);font-size:0.9rem;line-height:1.7;margin:1rem 0; }
.reviewer { font-size:0.8rem;color:rgba(208,200,232,0.4); }
.reviewer strong { color:#fff; }
.stars { color:#fbbf24;font-size:0.95rem; }

/* Pricing */
.pricing-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem; }
.pricing-card { background:rgba(255,255,255,0.03);border:1px solid rgba(168,85,247,0.15);border-radius:20px;padding:2.5rem 2rem;transition:border-color 0.3s,transform 0.3s; }
.pricing-card.featured { background:linear-gradient(135deg,rgba(168,85,247,0.15),rgba(236,72,153,0.1));border-color:rgba(168,85,247,0.4);transform:scale(1.03); }
.pricing-card:hover { border-color:rgba(168,85,247,0.4);transform:translateY(-5px); }
.pricing-card.featured:hover { transform:scale(1.03) translateY(-5px); }
.pricing-tier { font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:#a855f7;margin-bottom:0.5rem; }
.pricing-price { font-size:2.8rem;font-weight:800;color:#fff;margin:0.5rem 0; }
.pricing-period { font-size:0.8rem;color:rgba(208,200,232,0.4); }
.pricing-desc { font-size:0.83rem;color:rgba(208,200,232,0.5);line-height:1.5;margin:1rem 0; }
.pricing-features { list-style:none;margin:1.5rem 0;display:flex;flex-direction:column;gap:0.6rem; }
.pricing-features li { font-size:0.83rem;color:rgba(208,200,232,0.7);display:flex;align-items:center;gap:0.5rem; }
.pricing-features li::before { content:'✓';color:#a855f7;font-weight:700; }

/* CTA */
.cta-banner { background:linear-gradient(135deg,#08050f,#13081e);padding:5rem 0;text-align:center;border-top:1px solid rgba(168,85,247,0.1); }
.cta-banner h2 { font-size:clamp(1.8rem,3vw,2.5rem);color:#fff;margin-bottom:1rem;font-weight:800; }
.cta-banner p { color:rgba(208,200,232,0.55);margin-bottom:2rem; }

/* Footer */
.site-footer { background:#04020a;color:rgba(208,200,232,0.5);padding:4rem 0 2rem;border-top:1px solid rgba(168,85,247,0.08); }
.footer-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:3rem;margin-bottom:3rem; }
.footer-grid h4 { color:#fff;font-size:0.85rem;font-weight:600;margin-bottom:1rem; }
.footer-grid ul { list-style:none; }
.footer-grid ul li,.footer-grid p { font-size:0.83rem;line-height:2; }
.footer-grid ul li a { color:rgba(208,200,232,0.45);transition:color 0.3s; }
.footer-grid ul li a:hover { color:#a855f7; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.05);padding-top:1.5rem;text-align:center;font-size:0.8rem;opacity:0.4; }

@media(max-width:640px) { .hero-title{font-size:2.3rem} .hero-cta{flex-direction:column} .portfolio-grid{grid-template-columns:1fr} }