@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --bg-base: #FFFAF3;
  --bg-section: #FFF2DB;
  --bg-dark: #1a0a0e;
  --bg-dark-card: #2a1018;
  --primary: #F62440;
  --primary-hover: #d91e38;
  --primary-light: #ff4d63;
  --primary-lighter: #ff8090;
  --primary-dark: #c01d33;
  --accent: #FFE5BF;
  --accent-dark: #e6c48a;
  --text-dark: #1a0a0e;
  --text-body: #4a3540;
  --text-muted: #7a6070;
  --text-light: #9a8890;
  --text-white: #FFFAF3;
  --border-default: #FFE5BF;
  --border-hover: #F62440;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 100px;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(246,36,64,0.08);
  --shadow-lg: 0 12px 40px rgba(246,36,64,0.12);
  --shadow-xl: 0 24px 60px rgba(246,36,64,0.15);
  --shadow-primary: 0 8px 32px rgba(246,36,64,0.3);
  --transition-fast: 0.2s cubic-bezier(0.16,1,0.3,1);
  --transition-smooth: 0.4s cubic-bezier(0.16,1,0.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg-base); }
body { font-family:var(--font-sans); background:var(--bg-base); color:var(--text-dark); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; color:var(--text-dark); line-height:1.15; }
p { color:var(--text-body); font-size:1.05rem; line-height:1.8; }
a { text-decoration:none; color:inherit; transition:color var(--transition-fast); }
img { max-width:100%; height:auto; }

.container { max-width:1320px; margin:0 auto; padding:0 2rem; }
.section { padding:7rem 0; position:relative; }
.section-title { text-align:center; margin-bottom:4rem; }
.section-title h2 { font-size:clamp(2.2rem,4.5vw,3.2rem); margin-bottom:1rem; }
.section-title p { max-width:620px; margin:0 auto; font-size:1.15rem; color:var(--text-muted); }

.text-gradient { background:linear-gradient(135deg,var(--primary) 0%,#ff6b7a 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.85rem 2.2rem; font-family:var(--font-display); font-weight:700; font-size:1rem; border-radius:var(--radius-sm); transition:all var(--transition-fast); cursor:pointer; border:2px solid transparent; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-primary); }
.btn-outline { background:transparent; border:2px solid var(--border-default); color:var(--text-dark); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.btn-send { background:var(--primary); color:#fff; border:none; padding:1rem 2.5rem; font-family:var(--font-display); font-weight:700; font-size:1rem; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition-fast); width:100%; }
.btn-send:hover { background:var(--primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-primary); }

/* Navigation */
nav { position:fixed; top:0; width:100%; padding:1rem 0; background:rgba(255,250,243,0.92); backdrop-filter:blur(20px); z-index:1000; border-bottom:1px solid rgba(255,229,191,0.6); transition:all 0.3s ease; }
nav.scrolled { padding:0.6rem 0; box-shadow:var(--shadow-sm); }
nav .container { display:flex; justify-content:space-between; align-items:center; }
.logo img { height:54px; transition:transform var(--transition-fast); }
.logo img:hover { transform:scale(1.03); }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-links a { font-size:0.95rem; font-weight:600; color:var(--text-body); padding:0.4rem 0; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--primary); transition:width var(--transition-fast); }
.nav-links a:hover { color:var(--primary); }
.nav-links a:hover::after { width:100%; }
.nav-links .btn::after { display:none; }
.hamburger { display:none; font-size:1.8rem; cursor:pointer; color:var(--text-dark); z-index:1001; background:none; border:none; }

/* Hero */
.hero { min-height:90vh; display:flex; align-items:center; padding-top:7.5rem; padding-bottom:4rem; position:relative; overflow:hidden; background:linear-gradient(180deg,#FFFAF3 0%,#FFF2DB 100%); }
.hero-container { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:2; }
.hero-content { max-width:600px; }
.hero-badge { display:inline-flex; align-items:center; gap:0.6rem; padding:0.5rem 1.2rem; background:linear-gradient(135deg,rgba(246,36,64,0.08),rgba(246,36,64,0.03)); border:1px solid rgba(246,36,64,0.2); border-radius:var(--radius-pill); color:var(--primary); font-size:0.85rem; font-weight:700; margin-bottom:1.5rem; letter-spacing:0.03em; text-transform:uppercase; }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); animation:pulse-dot 2s ease-in-out infinite; display:inline-block; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }
.hero h1 { font-size:clamp(2.8rem,5.5vw,4.5rem); line-height:1.08; margin-bottom:1.5rem; letter-spacing:-0.04em; }
.hero-description { font-size:1.15rem; color:var(--text-muted); margin-bottom:2.5rem; max-width:500px; line-height:1.8; }
.hero-cta-row { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }
.hero-stats { display:flex; gap:2.5rem; padding-top:2rem; border-top:1px solid var(--border-default); }
.hero-stat .stat-number { font-family:var(--font-display); font-size:2rem; font-weight:800; letter-spacing:-0.03em; }
.hero-stat .stat-label { font-size:0.85rem; color:var(--text-muted); font-weight:500; }

.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.hero-image-wrapper { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); border:3px solid rgba(255,255,255,0.8); width:100%; max-width:560px; height:480px; }
.hero-image-wrapper img { width:100%; height:100%; object-fit:cover; display:block; }

.floating-badge { position:absolute; display:flex; align-items:center; gap:0.6rem; padding:0.65rem 1.2rem; background:rgba(255,250,243,0.95); backdrop-filter:blur(12px); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); font-size:0.85rem; font-weight:600; color:var(--text-dark); z-index:5; border:1px solid rgba(255,229,191,0.8); white-space:nowrap; }
.floating-badge .badge-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.badge-icon.red { background:rgba(246,36,64,0.1); color:var(--primary); }
.badge-icon.gold { background:rgba(255,229,191,0.5); color:#c08a30; }
.badge-icon.warm { background:rgba(246,36,64,0.08); color:var(--primary-dark); }
.badge-float-1 { top:8%; right:-10%; animation:float-gentle 6s ease-in-out infinite; }
.badge-float-2 { bottom:25%; left:-15%; animation:float-gentle 5s ease-in-out 1s infinite; }
.badge-float-3 { top:35%; right:-18%; animation:float-gentle 7s ease-in-out .5s infinite; }
.badge-float-4 { bottom:8%; right:-5%; animation:float-gentle 5.5s ease-in-out 1.5s infinite; }
@keyframes float-gentle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.hero-decoration { position:absolute; border-radius:50%; opacity:0.06; pointer-events:none; }
.hero-deco-1 { width:500px; height:500px; background:var(--primary); top:-150px; right:-100px; }
.hero-deco-2 { width:300px; height:300px; background:var(--accent-dark); bottom:-50px; left:-80px; }

/* Particles */
.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:1; }
.particle { position:absolute; border-radius:50%; bottom:-10px; animation:rise linear infinite; opacity:0; }
@keyframes rise { 0%{opacity:0;transform:translateY(0) scale(1)} 10%{opacity:0.6} 90%{opacity:0.2} 100%{opacity:0;transform:translateY(-100vh) scale(0.5)} }

/* Clients */
.clients { padding:3.5rem 0; background:var(--bg-base); border-top:1px solid var(--border-default); border-bottom:1px solid var(--border-default); }
.clients h6 { text-align:center; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.15em; margin-bottom:2rem; font-size:0.8rem; }
.clients-flex { display:flex; justify-content:center; align-items:center; gap:4rem; flex-wrap:wrap; }
.clients-flex img { height:40px; filter:grayscale(100%); opacity:0.5; transition:all 0.4s ease; }
.clients-flex img:hover { filter:grayscale(0%); opacity:1; transform:scale(1.1); }

/* Bento Grid */
.bento-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.bento-card { background:var(--bg-base); border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:2.5rem; display:flex; flex-direction:column; transition:all var(--transition-smooth); position:relative; overflow:hidden; }
.bento-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--primary-light),var(--primary)); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-smooth); }
.bento-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.bento-card:hover::before { transform:scaleX(1); }
.bento-card .icon-square { width:52px; height:52px; background:linear-gradient(135deg,rgba(246,36,64,0.08),rgba(246,36,64,0.03)); border:1px solid rgba(246,36,64,0.12); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.3rem; margin-bottom:1.5rem; transition:all var(--transition-fast); }
.bento-card:hover .icon-square { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; border-color:transparent; transform:scale(1.1) rotate(-3deg); }
.bento-card h3 { font-size:1.25rem; margin-bottom:0.75rem; font-weight:700; }
.bento-card p { font-size:0.95rem; color:var(--text-muted); flex-grow:1; line-height:1.7; }
.bento-large { grid-column:span 2; }

/* Stats */
.stats-section { padding:5rem 0; background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-dark-card) 100%); position:relative; overflow:hidden; }
.stats-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--primary-light),var(--primary),transparent); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-item .stat-value { font-family:var(--font-display); font-size:3rem; font-weight:900; color:var(--text-white); margin-bottom:0.3rem; }
.stat-item .stat-value span { color:var(--primary-light); }
.stat-item .stat-desc { font-size:0.9rem; color:rgba(255,250,243,0.5); font-weight:500; }

/* About Grid */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-visual-card { width:100%; border-radius:var(--radius-xl); background:linear-gradient(135deg,var(--bg-dark) 0%,#2a1018 100%); padding:3rem; position:relative; overflow:hidden; min-height:400px; display:flex; flex-direction:column; justify-content:flex-end; }
.about-visual-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--primary),var(--primary-dark)); }
.about-visual-card .big-number { font-family:var(--font-display); font-size:5rem; font-weight:900; color:rgba(255,255,255,0.06); position:absolute; top:1rem; right:2rem; }
.about-visual-card h3 { color:var(--text-white); font-size:1.5rem; margin-bottom:1rem; }
.about-visual-card p { color:rgba(255,250,243,0.6); font-size:1rem; }

.pro-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.5rem; }
.pro-list li { display:flex; align-items:flex-start; gap:1rem; }
.pro-list .icon-check { color:var(--primary); font-size:1.15rem; margin-top:0.25rem; flex-shrink:0; }
.pro-list h4 { font-size:1.05rem; margin-bottom:0.2rem; font-weight:700; }
.pro-list p { font-size:0.9rem; color:var(--text-muted); }

/* CTA Banner */
.cta-banner { padding:6rem 0; background:var(--bg-section); text-align:center; }
.cta-banner-inner { background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%); border-radius:var(--radius-xl); padding:4rem 3rem; position:relative; overflow:hidden; }
.cta-banner-inner::before { content:''; position:absolute; top:-50%; right:-20%; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,0.06); }
.cta-banner-inner h2 { color:#fff; font-size:2.5rem; margin-bottom:1rem; }
.cta-banner-inner p { color:rgba(255,255,255,0.8); margin-bottom:2rem; font-size:1.15rem; }
.cta-banner-inner .btn-primary { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); color:#fff; }
.cta-banner-inner .btn-primary:hover { background:rgba(255,255,255,0.25); transform:translateY(-2px); }

/* Contact */
.contact-section { padding:7rem 0; background:var(--bg-base); }
.contact-header { text-align:center; margin-bottom:4rem; }
.contact-header h2 { font-size:2.5rem; margin-bottom:0.5rem; }
.contact-subtitle { font-size:1.2rem; color:var(--primary); font-weight:600; }
.contact-desc { color:var(--text-muted); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-info h3 { font-size:1.3rem; margin-bottom:2rem; }
.contact-info-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.contact-icon { color:var(--primary); font-size:1.1rem; margin-top:0.2rem; flex-shrink:0; }
.contact-info-item a { color:var(--text-body); }
.contact-info-item a:hover { color:var(--primary); }
.contact-address-block { margin-top:2rem; }
.contact-address-block h4 { font-size:1rem; font-weight:700; margin-bottom:1rem; color:var(--text-dark); }
.contact-form-wrapper { background:var(--bg-section); border-radius:var(--radius-lg); padding:2.5rem; border:1px solid var(--border-default); }
.form-group { margin-bottom:1.2rem; }
.input-dark { width:100%; padding:0.9rem 1.2rem; background:var(--bg-base); border:1px solid var(--border-default); border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:0.95rem; color:var(--text-dark); transition:border-color var(--transition-fast); outline:none; }
.input-dark:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(246,36,64,0.1); }
textarea.input-dark { resize:vertical; min-height:100px; }

/* Footer */
footer { background:var(--bg-dark); color:var(--text-white); padding:4rem 0 0; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand p { color:rgba(255,250,243,0.6); font-size:0.95rem; margin-bottom:1.5rem; }
.footer-contact-info { display:flex; flex-direction:column; gap:0.8rem; }
.footer-contact-item { display:flex; align-items:center; gap:0.8rem; font-size:0.9rem; color:rgba(255,250,243,0.6); }
.footer-contact-item a { color:rgba(255,250,243,0.6); }
.footer-contact-item a:hover { color:var(--primary-light); }
.footer-socials { display:flex; gap:1rem; margin-top:1.5rem; }
.footer-socials a { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:var(--text-white); transition:all var(--transition-fast); }
.footer-socials a:hover { background:var(--primary); transform:translateY(-2px); }
footer h3 { font-size:1.1rem; margin-bottom:1.2rem; color:var(--text-white); }
footer ul { list-style:none; }
footer ul li { margin-bottom:0.6rem; }
footer ul a { color:rgba(255,250,243,0.6); font-size:0.9rem; }
footer ul a:hover { color:var(--primary-light); }
.footer-bottom { text-align:center; padding:1.5rem 0; }
.footer-bottom p { color:rgba(255,250,243,0.4); font-size:0.85rem; }

/* AOS-like animations */
[data-animate] { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease,transform 0.7s ease; }
[data-animate].visible { opacity:1; transform:translateY(0); }
[data-animate="fade-left"] { transform:translateX(-40px); }
[data-animate="fade-left"].visible { transform:translateX(0); }
[data-animate="fade-right"] { transform:translateX(40px); }
[data-animate="fade-right"].visible { transform:translateX(0); }
[data-animate="scale-in"] { transform:scale(0.9); }
[data-animate="scale-in"].visible { transform:scale(1); }

/* Responsive */
@media(max-width:1024px) {
  .hero-container,.about-grid,.contact-grid { grid-template-columns:1fr; }
  .bento-grid { grid-template-columns:1fr 1fr; }
  .bento-large { grid-column:span 1; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .hero-visual { display:flex; margin-top:3rem; width:100%; justify-content:center; }
  .hero-image-wrapper { height:360px; max-width:100%; }
  .floating-badge { display:none; }
  .footer-top { grid-template-columns:1fr; }
  .pro-list { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .nav-links { position:fixed; top:0; right:-100%; width:75%; height:100vh; flex-direction:column; background:var(--bg-base); padding:5rem 2rem; gap:1.5rem; transition:right 0.3s ease; box-shadow:-5px 0 30px rgba(0,0,0,0.1); }
  .nav-links.active { right:0; }
  .hamburger { display:block; }
  .bento-grid { grid-template-columns:1fr; }
  .hero { padding-top:6.5rem; padding-bottom:3rem; }
  .hero h1 { font-size:2.5rem; }
  .hero-image-wrapper { height:260px; }
  .logo img { height:46px; }
  .section { padding:4rem 0; }
  .hero-stats { flex-direction:column; gap:1rem; }
}