*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
html{scroll-behavior:smooth}
body{background:#111;color:#222;overflow-x:hidden}
:root{--accent:#ff5a36;--accent-d:#e04a2a;--cream:#fff9f6}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;padding:0 5%;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;background:#0d0d10}
.grid{position:absolute;inset:0}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:float 14s ease-in-out infinite alternate}
.b1{width:520px;height:520px;background:var(--accent);top:-120px;right:-80px}
.b2{width:420px;height:420px;background:#7a2cff;bottom:-140px;left:10%;animation-delay:-5s}
.b3{width:300px;height:300px;background:#ffb347;top:40%;right:30%;animation-delay:-9s;opacity:.35}
@keyframes float{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}100%{transform:translate(-30px,40px) scale(.95)}}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:-1}
.hero-container{max-width:800px}
.badge{display:inline-block;background:rgba(255,255,255,.1);color:var(--accent);padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:600;margin-bottom:25px;letter-spacing:.5px}
.hero h1{font-size:4rem;line-height:1.1;margin-bottom:20px;font-weight:800}
.hero p{font-size:1.2rem;line-height:1.6;margin-bottom:35px;color:#e0e0e0;max-width:90%}
.hero-buttons{display:flex;gap:15px;margin-bottom:40px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;border-radius:8px;text-decoration:none;font-size:1rem;font-weight:700;transition:all .3s ease}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d)}
.btn-secondary{border:2px solid #fff;color:#fff}
.btn-secondary:hover{background:rgba(255,255,255,.15)}
.hero-features{list-style:none;display:flex;gap:25px;font-size:.95rem;color:#ccc;flex-wrap:wrap}

/* ABOUT */
.about-section{background:#fff;padding:90px 5%}
.about-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:50px;align-items:center}
.avatar{width:220px;height:220px;border-radius:24px;background:linear-gradient(135deg,var(--accent),#7a2cff);display:grid;place-items:center;box-shadow:0 20px 40px rgba(255,90,54,.25)}
.avatar span{font-size:6rem;font-weight:800;color:#fff}
.about-section h2{font-size:2.3rem;color:#222;margin-bottom:15px}
.about-section p{font-size:1.1rem;line-height:1.7;color:#555;margin-bottom:25px}
.stats{display:flex;gap:35px;flex-wrap:wrap}
.stats strong{display:block;font-size:2rem;color:var(--accent)}
.stats span{font-size:.9rem;color:#777}

/* PROJECTS */
.projects-section,.services-section{background:var(--cream);padding:80px 5%;text-align:center}
.services-section{background:#fff}
.section-header h2{font-size:2.5rem;color:#333;margin-bottom:10px}
.section-header p{font-size:1.1rem;color:#666;margin-bottom:50px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:25px;max-width:1100px;margin:0 auto}
.card{background:#fff;border:1px solid #f1e3dc;border-radius:12px;padding:30px 25px;text-align:left;box-shadow:0 10px 25px rgba(255,90,54,.08);transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(255,90,54,.18)}
.card-art{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.5rem;margin-bottom:18px}
.a1{background:linear-gradient(135deg,#ff5a36,#ff9a3d)}
.a2{background:linear-gradient(135deg,#2c7bff,#20c3a6)}
.a3{background:linear-gradient(135deg,#7a2cff,#ff5a8a)}
.a4{background:linear-gradient(135deg,#0f9bd7,#1b3b6f)}
.card h3{font-size:1.4rem;color:#333;margin-bottom:10px}
.card-subtitle{font-size:.95rem;color:#777;line-height:1.5;margin-bottom:20px}
.card-link{color:var(--accent);font-weight:700;text-decoration:none}
.tag{display:inline-block;font-size:.8rem;font-weight:700;color:var(--accent);background:#fff0ec;border:1px dashed var(--accent);padding:4px 10px;border-radius:6px}

/* SERVICES */
.single-plan{display:flex;justify-content:center}
.feature-card{width:100%;max-width:450px;background:#fff;border:2px solid var(--accent);border-radius:12px;padding:40px 30px;text-align:left;box-shadow:0 10px 25px rgba(255,90,54,.15);position:relative;transition:transform .3s ease}
.feature-card:hover{transform:translateY(-5px)}
.badge-recommended{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;padding:5px 15px;border-radius:20px;white-space:nowrap}
.feature-card h3{font-size:1.5rem;color:#333;margin-bottom:10px}
.feature-card .btn-primary{display:block;text-align:center;padding:12px}
.feature-card hr{border:none;border-top:1px dashed #ddd;margin:25px 0}
.features-list{list-style:none}
.features-list li{font-size:.95rem;color:#555;margin-bottom:12px}

/* FOOTER */
.footer-section{background:#222;color:#fff;padding:60px 5% 20px;text-align:center}
.footer-content{max-width:600px;margin:0 auto 50px}
.footer-content h2{font-size:2rem;margin-bottom:15px}
.footer-content p{color:#ccc;font-size:1.1rem;margin-bottom:30px}
.btn-cta{background:var(--accent);color:#fff;font-size:1.1rem;padding:15px 30px}
.btn-cta:hover{background:var(--accent-d)}
.footer-bottom{border-top:1px solid #444;padding-top:20px;color:#777;font-size:.9rem}

/* REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.blob{animation:none}.reveal{opacity:1;transform:none;transition:none}}

@media (max-width:768px){
  .hero{padding:80px 16px}
  .hero h1{font-size:2.5rem}
  .hero p{max-width:100%}
  .hero-buttons{flex-direction:column}
  .hero-buttons .btn{text-align:center}
  .hero-features{flex-direction:column;gap:10px}
  .about-inner{grid-template-columns:1fr;text-align:center;gap:30px}
  .avatar{margin:0 auto;width:160px;height:160px}
  .stats{justify-content:center}
  .about-section,.projects-section,.services-section{padding:60px 16px}
  .section-header h2{font-size:2rem}
}