:root {
  --coral: #ff6b6b; --teal: #00b894; --sky: #0984e3; --indigo: #6c5ce7;
  --theme-blue: #003E7E;
  --theme-blue-dark: #002855;
  --theme-blue-light: #e6f0fa;
  --theme-blue-accent: #0056B3;
  --theme-yellow: #FFB81C;
  --ink: #002855;
  --muted: #4a5568;
  --surface: #ffffff;
  --bg: #f5f9ff;
  --border: #dbe4f0;
  --shadow: 0 4px 24px rgba(0,62,126,0.08);
  --shadow-lg: 0 16px 56px rgba(0,62,126,0.12);
  --radius: 16px;
  --orb1: #cce0ff;
  --orb2: #ffe399;
  --orb3: #b3d4ff;
  --orb4: #e6f0fa;
}

[data-theme="dark"] {
  --ink: #e2eaf5;
  --muted: #94a3b8;
  --surface: #0f1d31;
  --bg: #0a1628;
  --border: #1e3352;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.5);
  --theme-blue-light: #0d2040;
  --orb1: #001f45;
  --orb2: #2a1f00;
  --orb3: #001633;
  --orb4: #0a1628;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; transition: background 0.35s ease, color 0.35s ease; }

.edu-wallpaper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -9; overflow: hidden; pointer-events: none; }
.edu-wallpaper svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.edu-sym { animation: eduFloat linear infinite; opacity: 0; transform-origin: center center; }
@keyframes eduFloat { 0% { transform: translateY(110vh) rotate(0deg) scale(0.6); opacity: 0; } 5% { opacity: 0.15; } 85% { opacity: 0.15; } 100% { transform: translateY(-15vh) rotate(360deg) scale(1.1); opacity: 0; } }
[data-theme="dark"] .edu-sym {
    opacity: 0;
    animation-name: eduFloatDark; 
}
@keyframes eduFloatDark {
    0% { transform: translateY(110vh) rotate(0deg) scale(0.6); opacity: 0; }
    5% { opacity: 0.07; }
    85% { opacity: 0.07; }
    100% { transform: translateY(-15vh) rotate(360deg) scale(1.1); opacity: 0; }
}
[data-theme="dark"] .edu-wallpaper .edu-sym { filter: brightness(2) saturate(0.3); }

.edu-sym:nth-child(1) { animation-duration:22s; animation-delay:0s; }
.edu-sym:nth-child(2) { animation-duration:28s; animation-delay:3s; }
.edu-sym:nth-child(3) { animation-duration:19s; animation-delay:7s; }
.edu-sym:nth-child(4) { animation-duration:25s; animation-delay:1s; }
.edu-sym:nth-child(5) { animation-duration:31s; animation-delay:5s; }
.edu-sym:nth-child(6) { animation-duration:21s; animation-delay:9s; }
.edu-sym:nth-child(7) { animation-duration:26s; animation-delay:2s; }
.edu-sym:nth-child(8) { animation-duration:24s; animation-delay:6s; }
.edu-sym:nth-child(9) { animation-duration:29s; animation-delay:4s; }
.edu-sym:nth-child(10){ animation-duration:18s; animation-delay:8s; }
.edu-sym:nth-child(11){ animation-duration:27s; animation-delay:11s; }
.edu-sym:nth-child(12){ animation-duration:23s; animation-delay:14s; }
.edu-sym:nth-child(13){ animation-duration:32s; animation-delay:0.5s; }
.edu-sym:nth-child(14){ animation-duration:20s; animation-delay:16s; }
.edu-sym:nth-child(15){ animation-duration:30s; animation-delay:12s; }
.edu-sym:nth-child(16){ animation-duration:17s; animation-delay:19s; }
.edu-sym:nth-child(17){ animation-duration:35s; animation-delay:2.5s; }
.edu-sym:nth-child(18){ animation-duration:22s; animation-delay:21s; }

.global-floating-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -10; overflow: hidden; background: var(--bg); transition: background 0.35s ease; }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: floatOrb 20s infinite alternate ease-in-out; }
.orb-1 { width:500px; height:500px; background:var(--orb1); top:-10%; left:-10%; animation-duration:25s; }
.orb-2 { width:400px; height:400px; background:var(--orb2); bottom:-10%; right:-5%; animation-duration:22s; animation-delay:-5s; }
.orb-3 { width:350px; height:350px; background:var(--orb3); top:40%; left:60%; animation-duration:28s; animation-delay:-10s; }
.orb-4 { width:300px; height:300px; background:var(--orb4); bottom:20%; left:10%; animation-duration:20s; animation-delay:-15s; }
@keyframes floatOrb { 0% { transform:translate(0,0) scale(1); } 33% { transform:translate(50px,-50px) scale(1.1); } 66% { transform:translate(-30px,30px) scale(0.9); } 100% { transform:translate(40px,60px) scale(1.05); } }

.cursor-glow { pointer-events:none; position:fixed; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(0,62,126,0.07) 0%,rgba(255,184,28,0.04) 50%,transparent 70%); transform:translate(-50%,-50%); transition:left 0.12s ease,top 0.12s ease; z-index:-1; mix-blend-mode:multiply; }
[data-theme="dark"] .cursor-glow { background:radial-gradient(circle,rgba(0,100,200,0.1) 0%,rgba(255,184,28,0.05) 50%,transparent 70%); mix-blend-mode:screen; }

.page-reveal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--theme-blue); z-index:9999; transform-origin:top; animation:revealPage 1s cubic-bezier(0.77,0,0.175,1) 0.1s forwards; }
@keyframes revealPage { 0% { transform:scaleY(1); } 100% { transform:scaleY(0); } }

.container { max-width:1140px; margin:0 auto; padding:0 24px; width:100%; }
.page-section, .team-section, .contact-section { padding:80px 0; background:transparent !important; }

img { max-width:100%; height:auto; display:block; }
.responsive-img { width:100%; max-width:100%; object-fit:contain; }
.responsive-hero-img { width:100%; max-width:900px; margin:0 auto; object-fit:cover; }
.img-zoom-container { overflow:hidden; border-radius:16px; }
.img-zoom-container img { transition:transform 0.4s ease; }
.bento-hover:hover .img-zoom-container img, .bento-card:hover .img-zoom-container img { transform:scale(1.04); }

.theme-toggle { width:48px; height:48px; border-radius:50%; border:2px solid var(--theme-blue); background:transparent; color:var(--theme-blue); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:.35s ease; flex-shrink:0; }

[data-theme="dark"] .theme-toggle { border-color:#93c5fd; color:#93c5fd; }
.theme-toggle:hover { transform:translateY(-4px) scale(1.05); }
.theme-toggle .icon-sun { display:none; }
.theme-toggle .icon-moon { display:block; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:50px; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.3s ease; border:none; text-decoration:none; white-space:nowrap; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; top:-50%; left:-75%; width:50%; height:200%; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.22) 50%,transparent 60%); transform:skewX(-20deg); transition:left 0.5s ease; pointer-events:none; }
.btn:hover::after { left:125%; }
.btn-primary { background:var(--theme-blue); color:#fff; box-shadow:0 4px 14px rgba(0,62,126,0.3); }
.btn-primary:hover { background:var(--theme-blue-dark); color:#fff; transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,62,126,0.4); }
.btn-yellow { background:var(--theme-yellow); color:var(--theme-blue-dark); box-shadow:0 4px 14px rgba(255,184,28,0.3); font-weight:700; }
.btn-yellow:hover { background:#e6a200; color:#fff; transform:translateY(-3px); box-shadow:0 6px 20px rgba(255,184,28,0.45); }
.btn-ghost { background:rgba(255,255,255,0.8); color:var(--theme-blue); border:1.5px solid var(--border); }
[data-theme="dark"] .btn-ghost { background:rgba(255,255,255,0.06); color:#93c5fd; border-color:var(--border); }
.btn-ghost:hover { background:#fff; border-color:var(--theme-yellow); transform:translateY(-3px); }
.btn-lg { padding:14px 28px; font-size:15px; }
.btn-block { width:100%; border-radius:8px; padding:14px; }
.btn-green { background:#25D366; color:#fff; box-shadow:0 4px 14px rgba(37,211,102,0.3); }
.btn-green:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(37,211,102,0.4); }
.btn-magnetic { transition:transform 0.3s cubic-bezier(0.23,1,0.32,1),box-shadow 0.3s ease !important; }

.section-header { text-align:center; margin-bottom:48px; }
.section-eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--theme-blue-dark); background:var(--theme-yellow); padding:4px 12px; border-radius:100px; margin-bottom:12px; transition:letter-spacing 0.3s ease,box-shadow 0.3s ease; }
.section-eyebrow:hover { letter-spacing:0.2em; box-shadow:0 4px 12px rgba(255,184,28,0.3); }
.section-title { font-family:'Fraunces',serif; font-size:36px; font-weight:900; line-height:1.2; margin-bottom:12px; color:var(--ink); }
.section-title em { font-style:italic; color:var(--theme-blue); }
[data-theme="dark"] .section-title em { color:#60a5fa; }
.section-desc { color:var(--muted); max-width:500px; margin:0 auto; }
.section-highlight-line { width:60px; height:3px; background:linear-gradient(90deg,var(--theme-yellow),transparent); border-radius:2px; margin:12px auto 0; }

.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.slide-left { opacity:0; transform:translateX(-44px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.slide-right { opacity:0; transform:translateX(44px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.scale-in { opacity:0; transform:scale(0.88); transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.fade-up.visible, .slide-left.visible, .slide-right.visible, .scale-in.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:0.12s; }
.delay-2 { transition-delay:0.24s; }
.delay-3 { transition-delay:0.36s; }

nav { position:fixed; top:0; left:0; right:0; height:72px; z-index:1000; transition:all 0.3s ease; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); border-bottom:1px solid transparent; }
[data-theme="dark"] nav { background:rgba(10,22,40,0.9); }
nav.stuck { border-bottom:1px solid var(--border); box-shadow:0 4px 20px rgba(0,62,126,0.06); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-logo { display:flex; align-items:center; gap:8px; font-family:'Fraunces',serif; font-size:20px; font-weight:900; text-decoration:none; color:var(--ink); }
.nav-links { display:flex; list-style:none; gap:4px; }
.nav-links a { font-size:14px; font-weight:600; color:var(--muted); padding:6px 12px; border-radius:6px; text-decoration:none; transition:color 0.2s,background 0.2s; }
.nav-links a:hover { color:var(--theme-blue); background:var(--theme-blue-light); }
[data-theme="dark"] .nav-links a:hover { color:#60a5fa; background:rgba(0,62,126,0.25); }
.nav-links a.active { color:#fff !important; background-color:var(--theme-blue) !important; }
.nav-actions { display:flex; align-items:center; gap:12px; }
.btn-whatsapp-nav { display:flex !important; align-items:center; justify-content:center; gap:8px; min-width:52px; border-radius:999px; box-shadow:0 12px 28px rgba(37,211,102,.28); }
.hamburger { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform 0.2s,opacity 0.2s; display:block; }
.hamburger.active span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.mobile-drawer { display:none; position:absolute; top:72px; left:0; width:100%; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); box-shadow:0 10px 20px rgba(0,0,0,0.1); padding:16px 24px; flex-direction:column; border-bottom:1px solid var(--border); }
[data-theme="dark"] .mobile-drawer { background:rgba(10,22,40,0.97); }
.mobile-drawer.open { display:flex; }
.mobile-drawer a { padding:12px 0; text-decoration:none; color:var(--ink); font-weight:600; border-bottom:1px solid var(--border); font-size:15px; }
.mobile-drawer a:last-child { border-bottom:none; }

#hero { padding-top:150px; padding-bottom:100px; display:flex; align-items:center; position:relative; background:transparent; }
.hero-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:32px; width:100%; align-items:center; }
.hero-pill { display:inline-flex; align-items:center; gap:8px; background:rgba(255,184,28,0.15); border:1px solid rgba(255,184,28,0.3); color:var(--ink); font-size:12px; font-weight:700; padding:6px 14px; border-radius:50px; margin-bottom:16px; text-transform:uppercase; letter-spacing:0.06em; animation:pillPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes pillPop { from { opacity:0; transform:scale(0.8) translateY(10px); } to { opacity:1; transform:none; } }
.pill-dot { width:6px; height:6px; background:var(--theme-yellow); border-radius:50%; animation:pulse-dot 1.8s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.4); } }
.hero-heading { font-family:'Fraunces',serif; font-size:52px; font-weight:900; line-height:1.1; margin-bottom:16px; color:var(--ink); animation:heroHeadIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-heading em { color:var(--theme-blue); font-style:italic; }
[data-theme="dark"] .hero-heading em { color:#60a5fa; }
@keyframes heroHeadIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.hero-sub { color:var(--muted); font-size:16px; margin-bottom:24px; line-height:1.7; animation:heroHeadIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; animation:heroHeadIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.scroll-hint { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; }
.scroll-mouse { width:20px; height:32px; border:2px solid var(--border); border-radius:10px; display:flex; justify-content:center; padding-top:5px; }
.scroll-wheel { width:3px; height:6px; background:var(--theme-yellow); border-radius:10px; animation:scroll-anim 1.6s ease-in-out infinite; }
@keyframes scroll-anim { 0%,100% { transform:translateY(0); opacity:1; } 100% { transform:translateY(8px); opacity:0; } }

.phone-scene { position:relative; width:280px; height:560px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.phone-scene::before { content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(0,62,126,0.12) 0%,transparent 70%); animation:glowPulse 3s ease-in-out infinite; z-index:1; }
@keyframes glowPulse { 0%,100% { transform:scale(1); opacity:0.6; } 50% { transform:scale(1.3); opacity:1; } }
.hero-phone-graphic { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 15px 35px rgba(0,62,126,0.15)); animation:heroFloat 4s ease-in-out infinite; will-change:transform; z-index:2; position:relative; }
@keyframes heroFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
.orbit { position:absolute; display:flex; align-items:center; justify-content:center; z-index:10; }
.orbit-1 { top:30px; right:-40px; } 
.orbit-2 { top:45%; left:-60px; transform:translateY(-50%); } 
.orbit-3 { bottom:60px; right:-40px; } 
.orbit-4 { top:12%; left:-50px; } 
.orbit-5 { top:60%; right:-50px; } 
.orbit-6 { bottom:12%; left:-40px; } 
.orbit-7 { top:-15px; left:50%; transform:translateX(-50%); } 
.orbit-8 { top: 30%; right: -60px; } 
.orbit-badge { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:50px; font-size:12px; font-weight:700; white-space:nowrap; box-shadow:var(--shadow-lg); animation:float-badge 3s ease-in-out infinite; }
.orbit-1 .orbit-badge { animation-delay:0s; } .orbit-2 .orbit-badge { animation-delay:0.7s; } .orbit-3 .orbit-badge { animation-delay:1.4s; } .orbit-4 .orbit-badge { animation-delay:0.3s; } .orbit-5 .orbit-badge { animation-delay:1.1s; } .orbit-6 .orbit-badge { animation-delay:0.9s; } .orbit-7 .orbit-badge { animation-delay:0.5s; } .orbit-8 .orbit-badge { animation-delay:1.6s; }
.ob-green { background:#e8faf5; color:var(--teal); border:1px solid rgba(0,184,148,0.2); } .ob-blue { background:#e8f4ff; color:var(--sky); border:1px solid rgba(9,132,227,0.2); } .ob-orange { background:#fffbea; color:#e17055; border:1px solid rgba(249,202,36,0.25); } .ob-coral { background:#fff0f0; color:var(--coral); border:1px solid rgba(255,107,107,0.2); } .ob-indigo { background:#f0edff; color:var(--indigo); border:1px solid rgba(108,92,231,0.2); } .ob-teal { background:#e0f7fa; color:#00838f; border:1px solid rgba(0,131,143,0.2); } .ob-amber { background:#fff8e1; color:#ff8f00; border:1px solid rgba(255,143,0,0.2); } .ob-sky { background:#e1f5fe; color:#0277bd; border:1px solid rgba(2,119,189,0.2); }
@keyframes float-badge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

.ticker-wrap { background:var(--theme-blue); overflow:hidden; padding:12px 0; position:relative; }
.ticker-wrap::before, .ticker-wrap::after { content:''; position:absolute; top:0; width:80px; height:100%; z-index:2; pointer-events:none; }
.ticker-wrap::before { left:0; background:linear-gradient(to right,var(--theme-blue),transparent); }
.ticker-wrap::after { right:0; background:linear-gradient(to left,var(--theme-blue),transparent); }
.ticker-track { display:flex; gap:32px; width:max-content; white-space:nowrap; animation:ticker 28s linear infinite; will-change:transform; transform:translateZ(0); }
.ticker-track span { color:rgba(255,255,255,0.8); font-size:13px; }
.ticker-track span i { margin-right:5px; color:var(--theme-yellow); }
.sep { color:rgba(255,255,255,0.3) !important; }
@keyframes ticker { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }

.stats-grid-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform 0.3s ease,box-shadow 0.3s ease; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:var(--radius) var(--radius) 0 0; }
.stat-card.sc-blue::before { background:var(--theme-blue); }
.stat-card.sc-yellow::before { background:var(--theme-yellow); }
.stat-card::after { content:''; position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; border-radius:50%; opacity:0.06; transition:transform 0.4s ease,opacity 0.4s ease; }
.stat-card.sc-blue::after { background:var(--theme-blue); }
.stat-card.sc-yellow::after { background:var(--theme-yellow); }
.stat-card:hover::after { transform:scale(3); opacity:0.1; }
.stat-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,62,126,0.1); z-index:10; }
.stat-icon-tile { width:44px; height:44px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:20px; transition:all 0.3s ease; }
.sit-blue { background:rgba(0,62,126,0.08); color:var(--theme-blue); }
.sit-yellow { background:rgba(255,184,28,0.15); color:#c48c00; }
.stat-card:hover .stat-icon-tile { transform:scale(1.1) rotate(-8deg); }
.stat-card:hover .sit-blue { background:var(--theme-blue); color:#fff; }
.stat-card:hover .sit-yellow { background:var(--theme-yellow); color:#fff; }
.stat-number { font-family:'Fraunces',serif; font-size:32px; font-weight:400; color:var(--ink); }
.stat-label { font-size:13px; color:var(--muted); text-transform:uppercase; margin-top:4px; font-weight:700; }

.software-showcase-card { display:flex; align-items:center; justify-content:space-between; gap:32px; background:var(--surface); border-radius:var(--radius); padding:40px; border:1px solid var(--border); transition:transform 0.4s ease,box-shadow 0.4s ease; box-shadow:var(--shadow); }
.software-showcase-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--theme-blue-light); }
.software-img-left, .software-img-right { flex:1; min-width:220px; text-align:center; }
.software-text-center { flex:1.5; min-width:280px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.windows-list { list-style:none; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; font-size:13px; color:var(--ink); font-weight:600; }
.software-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pc-badge { display:inline-block; width:fit-content; font-size:11px; font-weight:700; padding:4px 10px; border-radius:50px; margin-bottom:12px; }
.badge-blue { background:var(--theme-blue-light); color:var(--theme-blue); }
.badge-yellow { background:rgba(255,184,28,0.15); color:#c48c00; }
.pc-desc { font-size:14px; color:var(--muted); margin-bottom:16px; line-height:1.7; }

.bento-hover { transition:transform 0.4s ease,box-shadow 0.4s ease; border:1px solid var(--border); box-shadow:var(--shadow); }
.bento-hover:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--theme-blue-light); }
.features-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bento-card { padding:28px; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease; background:var(--surface); position:relative; overflow:hidden; }
.bento-card::before { content:''; position:absolute; top:0; right:0; width:60px; height:60px; border-radius:0 var(--radius) 0 100%; background:var(--theme-yellow); opacity:0; transform:scale(0); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s ease; }
.bento-card:hover::before { opacity:0.12; transform:scale(1); }
.bento-lg { grid-column:span 2; }
.bento-icon { font-size:26px; margin-bottom:12px; }
.bento-icon.theme-blue { color:var(--theme-blue); }
.bento-icon.theme-yellow { color:var(--theme-yellow); }
.bento-card h3 { font-family:'Fraunces',serif; font-size:18px; margin-bottom:8px; color:var(--ink); }
.bento-card p { font-size:13px; line-height:1.65; color:var(--muted); }
.bento-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--theme-yellow); }

.ext-card { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px; background:var(--surface); border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s ease,border-color 0.4s ease; margin-bottom:32px; position:relative; }
.ext-card::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.12),transparent); transform:translateX(-100%); transition:1s ease; }
.ext-card:hover::before { transform:translateX(100%); }
.ext-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:rgba(0,62,126,0.2); }
.ext-img-wrap { position:relative; overflow:hidden; min-height:340px; background:var(--theme-blue-light); display:flex; align-items:center; justify-content:center; }
[data-theme="dark"] .ext-img-wrap { background:var(--theme-blue-dark); }
.ext-img-wrap img { width:100%; height:100%; object-fit:contain; transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.ext-card:hover .ext-img-wrap img { transform:scale(1.05); }
.ext-img-label { position:absolute; top:16px; left:16px; background:rgba(0,62,126,0.85); color:#fff; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 12px; border-radius:50px; backdrop-filter:blur(8px); }
.ext-text-wrap { padding:40px 48px; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.ext-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--theme-blue); background:var(--theme-blue-light); padding:4px 12px; border-radius:50px; width:fit-content; }
[data-theme="dark"] .ext-eyebrow { background:rgba(0,62,126,0.35); color:#93c5fd; }
.ext-title { font-family:'Fraunces',serif; font-size:28px; font-weight:900; line-height:1.2; color:var(--ink); }
.ext-title em { font-style:italic; color:var(--theme-blue); }
[data-theme="dark"] .ext-title em { color:#60a5fa; }
.ext-desc { font-size:15px; color:var(--muted); line-height:1.75; }
.ext-feats { list-style:none; display:flex; flex-direction:column; gap:8px; }
.ext-feats li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.ext-feats li i { color:var(--theme-yellow); font-size:12px; flex-shrink:0; }
.ext-feats li strong { color:var(--ink); font-weight:600; }
.ext-btns { display:flex; gap:12px; flex-wrap:wrap; }

.stickers-card { display:flex; flex-wrap:wrap; gap:40px; align-items:center; padding:40px; background:var(--surface); }
.stickers-text { flex:1; min-width:280px; }
.stickers-text h3 { font-family:'Fraunces',serif; font-size:28px; color:var(--ink); margin-bottom:16px; }
.stickers-text p { color:var(--muted); font-size:16px; margin-bottom:20px; }
.stickers-text ul { list-style:none; margin-bottom:32px; font-size:15px; color:var(--muted); }
.stickers-text li { margin-bottom:12px; display:flex; align-items:flex-start; gap:8px; }
.stickers-text li i { color:var(--theme-yellow); margin-top:4px; }
.stickers-text li strong { color:var(--ink); }
.stickers-img { flex:1; min-width:280px; text-align:center; }
.stickers-img img { border-radius:16px; box-shadow:var(--shadow-lg); width:100%; max-width:320px; margin:0 auto; object-fit:contain; }

.founder-spotlight-card { background:var(--surface); border-radius:24px; padding:40px; position:relative; overflow:hidden; max-width:1000px; margin:0 auto; border:1px solid var(--border); box-shadow:var(--shadow); }
.founder-spotlight-card::after { content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,184,28,0.12),transparent 70%); pointer-events:none; }
.founder-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:center; }
.founder-image-col { text-align:center; }
.founder-photo-frame { width:220px; height:220px; margin:0 auto 16px; border-radius:20px; overflow:hidden; box-shadow:0 12px 32px rgba(0,62,126,0.15); border:4px solid var(--surface); outline:1px solid var(--border); transition:transform 0.4s ease,box-shadow 0.4s ease; }
.founder-photo-frame:hover { transform:scale(1.04) rotate(-1deg); box-shadow:0 20px 48px rgba(0,62,126,0.25); }
.founder-photo-frame img { width:100%; height:100%; object-fit:cover; }
.founder-name { font-family:'Fraunces',serif; font-size:24px; color:var(--ink); font-weight:900; }
.founder-title { font-size:13px; color:var(--theme-blue); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }
.founder-info-col { position:relative; }
.bio-accent-bar { width:40px; height:4px; background:var(--theme-yellow); border-radius:2px; margin-bottom:16px; }
.founder-bio { font-size:16px; line-height:1.6; color:var(--muted); margin-bottom:12px; }
.founder-bio-sub, .community-pitch { font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:16px; }
.community-pitch { border-left:3px solid var(--border); padding-left:12px; font-style:italic; }
.founder-skills-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.founder-skills-tags span { background:var(--bg); border:1px solid var(--border); color:var(--ink); font-size:12px; font-weight:600; padding:6px 12px; border-radius:50px; display:flex; align-items:center; gap:6px; transition:transform 0.2s,background 0.2s,box-shadow 0.2s; }
.founder-skills-tags span:hover { transform:translateY(-3px); background:var(--theme-blue-light); box-shadow:0 4px 12px rgba(0,62,126,0.1); }
.founder-skills-tags i { color:var(--theme-blue); }
.portfolio-cta-container { display:flex; align-items:center; gap:16px; margin-top:24px; flex-wrap:wrap; }
.portfolio-premium-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:14px; padding:16px 32px; background:var(--theme-blue); box-shadow:0 8px 24px rgba(0,62,126,0.35); transition:all 0.3s ease; overflow:hidden; border:none; cursor:pointer; }
.btn-content-wrap { display:flex; align-items:center; gap:10px; color:#fff; font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; z-index:2; }
.btn-icon-spin i { font-size:16px; transition:transform 0.4s ease; color:var(--theme-yellow); }
.btn-arrow-bounce i { font-size:13px; transition:transform 0.3s ease; }
.portfolio-premium-btn:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,62,126,0.5); background:var(--theme-blue-dark); }
.portfolio-premium-btn:hover .btn-icon-spin i { transform:rotate(20deg) scale(1.1); }
.portfolio-premium-btn:hover .btn-arrow-bounce i { transform:translateX(4px); }
.whatsapp-channel-btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--muted); font-size:14px; font-weight:600; padding:12px 20px; border-radius:12px; transition:all 0.2s ease; }
.whatsapp-channel-btn i { color:#25D366; font-size:18px; }
.whatsapp-channel-btn:hover { color:var(--ink); background:var(--bg); transform:translateY(-2px); }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-details { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.cd-item { display:flex; gap:14px; align-items:flex-start; }
.cd-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; flex-shrink:0; font-size:16px; transition:transform 0.3s ease; }
.cd-item:hover .cd-icon { transform:rotate(-8deg) scale(1.1); }
.ci-blue { background:rgba(0,62,126,0.1); color:var(--theme-blue); }
.ci-yellow { background:rgba(255,184,28,0.2); color:#c48c00; }
.cd-item div strong { display:block; font-size:13px; margin-bottom:2px; color:var(--ink); }
.cd-item div a { font-size:13px; color:var(--theme-blue); text-decoration:none; transition:color 0.2s; word-break:break-all; }
.cd-item div a:hover { color:var(--theme-yellow); }
.map-address-card { display:flex; gap:16px; background:var(--surface); padding:20px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow); align-items:flex-start; transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease; }
.map-address-card:hover, .click-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--theme-yellow); }
.campus-thumb { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--theme-blue-light); }
.address-text h4 { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.address-text p { font-size:13px; color:var(--muted); line-height:1.5; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:11px; font-weight:700; margin-bottom:5px; text-transform:uppercase; color:var(--muted); }
.form-group input, .form-group textarea { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:8px; font-family:inherit; font-size:14px; outline:none; transition:border-color 0.2s,background 0.2s,box-shadow 0.2s; background:var(--bg); color:var(--ink); }
.form-group input:focus, .form-group textarea:focus { border-color:var(--theme-yellow); background:var(--surface); box-shadow:0 4px 12px rgba(255,184,28,0.1); }
.form-group textarea { height:90px; resize:none; }
.form-group input.input-error, .form-group textarea.input-error { border-color:#ff6b6b; background:#fff5f5; }
.form-note { font-size:12px; font-weight:700; margin-top:10px; text-align:center; min-height:18px; }
.form-note.success { color:var(--theme-blue); }
.form-note.error { color:#ff6b6b; }

#scrollTop { position:fixed; bottom:24px; right:24px; width:42px; height:42px; background:var(--theme-yellow); color:var(--theme-blue-dark); border:none; border-radius:10px; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:100; box-shadow:0 4px 14px rgba(255,184,28,0.4); transition:background 0.2s,transform 0.2s; }
#scrollTop.show { display:flex; animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popIn { from { transform:scale(0); } to { transform:scale(1); } }
#scrollTop:hover { background:#e6a200; transform:translateY(-4px); color:#fff; box-shadow:0 6px 20px rgba(255,184,28,0.6); }

.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.25; pointer-events:none; animation:blobAnim 12s ease-in-out infinite alternate; }
.blob-1 { width:300px; height:300px; background:#a8c8ff; top:5%; left:5%; animation-duration:14s; }
.blob-2 { width:200px; height:200px; background:#ffe399; bottom:15%; right:10%; animation-duration:11s; animation-delay:-4s; }
.blob-3 { width:150px; height:150px; background:#b3d4ff; top:50%; left:40%; animation-duration:16s; animation-delay:-8s; }
@keyframes blobAnim { 0% { transform:translate(0,0) scale(1); } 33% { transform:translate(30px,-20px) scale(1.08); } 66% { transform:translate(-20px,15px) scale(0.94); } 100% { transform:translate(20px,30px) scale(1.04); } }

.upgrade-cta-section { padding-bottom: 0 !important; }
.upgrade-cta { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to right, #f2f3f7, #fdf1d9); border-radius: 60px; padding: 40px 60px; margin: 0 auto; max-width: 900px; box-shadow: var(--shadow); border: 1px solid var(--border); }
[data-theme="dark"] .upgrade-cta { background: linear-gradient(to right, #0f1d31, #1a2942); }
.cta-content h2 { margin: 0 0 8px 0; color: var(--ink); font-family: 'Fraunces', serif; font-size: 28px; }
.cta-content p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 650px) { .upgrade-cta { flex-direction: column; text-align: center; padding: 30px 20px; border-radius: 30px; gap: 20px; } }

.modern-footer { background:linear-gradient(135deg,#001f45 0%,var(--theme-blue) 50%,#002060 100%); color:#fff; position:relative; overflow:hidden; padding:0; margin-top:80px; }
[data-theme="dark"] .modern-footer { background:linear-gradient(135deg,#000d1a 0%,#001530 50%,#000a1e 100%); }
.footer-wave { display:block; width:100%; line-height:0; margin-bottom:-2px; }
.modern-footer::before { content:''; position:absolute; top:-100px; right:-100px; width:400px; height:400px; border-radius:50%; border:1px solid rgba(255,184,28,0.08); pointer-events:none; background:#3b82f6; filter:blur(90px); opacity:.18; left:-80px; }
.modern-footer::after { content:''; position:absolute; bottom:-140px; right:-100px; width:320px; height:320px; border-radius:50%; border:1px solid rgba(255,255,255,0.04); pointer-events:none; background:#facc15; filter:blur(90px); opacity:.18; }
.footer-inner { padding:60px 0 0; position:relative; z-index:2; }
.footer-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:48px; }
.footer-brand { display:flex; flex-direction:column; gap:14px; max-width:320px; }
.footer-logo-wrap { display:flex; align-items:center; gap:12px; transition:transform 0.3s ease; text-decoration:none; }
.footer-logo-wrap:hover { transform:translateX(4px); }
.footer-name { font-family:'Fraunces',serif; font-size:24px; font-weight:900; color:#fff; letter-spacing:0.5px; }
.footer-tagline { color:rgba(255,255,255,0.65); font-size:14px; line-height:1.7; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; transition:all 0.3s ease; border:1px solid rgba(255,255,255,0.1); }
.footer-social a:hover { background:var(--theme-yellow); color:var(--theme-blue-dark); transform:translateY(-4px) scale(1.1); border-color:var(--theme-yellow); box-shadow:0 6px 20px rgba(255,184,28,0.35); }
.footer-stats { display:flex; gap:32px; flex-wrap:wrap; }
.fstat { text-align:center; }
.fstat-num { font-family:'Fraunces',serif; font-size:28px; font-weight:900; color:var(--theme-yellow); display:block; }
.fstat-label { font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.5); font-weight:700; }
.footer-links-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:32px; }
.footer-col h4 { font-size:13px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--theme-yellow); margin-bottom:20px; }
.footer-col a { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,0.65); text-decoration:none; font-size:14px; margin-bottom:12px; transition:color 0.2s,transform 0.2s; border-radius:6px; }
.footer-col a i { font-size:12px; opacity:0.5; transition:opacity 0.2s,transform 0.2s; }
.footer-col a:hover { color:#fff; transform:translateX(6px); }
.footer-col a:hover i { opacity:1; transform:translateX(2px); }
.footer-app-strip { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:20px 28px; margin-bottom:32px; }
.footer-app-strip p { font-size:14px; color:rgba(255,255,255,0.75); max-width:400px; line-height:1.6; }
.footer-app-strip p strong { color:#fff; }
.footer-app-btns { display:flex; gap:10px; flex-wrap:wrap; }
.fapp-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:50px; font-size:13px; font-weight:700; text-decoration:none; transition:all 0.3s ease; border:1.5px solid rgba(255,255,255,0.2); color:#fff; background:rgba(255,255,255,0.08); }
.fapp-btn:hover { background:#fff; color:var(--theme-blue-dark); border-color:#fff; transform:translateY(-3px); }
.fapp-btn i { font-size:16px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:20px 0; }
.footer-copy { color:rgba(255,255,255,0.4); font-size:13px; }
.footer-copy span { color:rgba(255,255,255,0.6); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { color:rgba(255,255,255,0.4); font-size:12px; text-decoration:none; transition:color 0.2s; }
.footer-legal a:hover { color:var(--theme-yellow); }
.footer-made { font-size:12px; color:rgba(255,255,255,0.35); }
.footer-made i { color:#e25555; margin:0 3px; animation:heartBeat 1.4s ease-in-out infinite; }

@media (max-width:1200px) {
  .ext-card { gap:18px; }
}
@media (max-width:960px) {
  .hero-grid, .stats-grid-wrap, .features-bento, .contact-grid, .founder-grid { grid-template-columns:1fr; gap:24px; }
  .bento-lg { grid-column:auto; }
  .hero-grid { text-align:center; }
  .hero-right { display:block; margin-top:20px; }
  .phone-scene { width:200px; height:400px; }
  .ext-card.img-left, .ext-card.img-right { grid-template-columns:1fr; }
  .ext-card.img-right .ext-img-wrap { order:-1; }
  .ext-img-wrap { min-height:240px; }
  .ext-text-wrap { padding:28px; }
  .software-showcase-card { flex-direction:column; padding:24px; }
  .software-img-left { order:1; width:100%; }
  .software-text-center { order:2; width:100%; }
  .software-img-right { order:3; width:100%; }
  .section-title { font-size:28px; }
  .hero-heading { font-size:32px; }
  .footer-top { flex-direction:column; align-items:flex-start; }
  .footer-links-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .ext-card { grid-template-columns:1fr; }
  .ext-card.reverse { direction:ltr; }
  .ext-img-wrap { min-height:260px; }
}
@media (max-width:820px) {
  .founder-spotlight-card { padding:24px; }
  .founder-photo-frame { width:180px; height:180px; }
  .portfolio-cta-container { flex-direction:column; align-items:stretch; gap:12px; }
  .portfolio-premium-btn, .whatsapp-channel-btn { text-align:center; justify-content:center; width:100%; }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-actions .btn-whatsapp-nav { display:inline-flex !important; }
  .hamburger { display:flex; }
  .page-section { padding:48px 0 !important; }
  #hero { padding-top:100px; padding-bottom:48px; }
  .cursor-glow { display:none; }
  .footer-links-grid { grid-template-columns:1fr; }
  .footer-app-strip { flex-direction:column; align-items:flex-start; }
  .footer-bottom { flex-direction:column; text-align:center; gap:10px; }
  .btn-whatsapp-nav { padding:10px 12px !important; }
  .wa-label { display:none; }
  .theme-toggle { width:44px; height:44px; }
}
@media (max-width:600px) {
  .ext-card { padding:16px; border-radius:22px; }
  .ext-img-wrap { min-height:210px; }
  .ext-btns { display:flex; flex-wrap:wrap; gap:10px; }
  .ext-btns a { flex:1 1 100%; justify-content:center; text-align:center; }
  .navbar, .container, section { width:100%; max-width:100%; }
  
  .stickers-card { padding: 24px 20px; gap: 24px; }
  .stickers-text h3 { font-size: 24px; }
  .stickers-text li { font-size: 14px; }
}
@media (max-width:480px) {
  .container { padding:0 16px; }
  .section-title { font-size:24px; }
  .stat-number { font-size:24px; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .hero-ctas a { width:100%; text-align:center; justify-content:center; }
  .ext-btns { flex-direction:column; }
  .ext-btns .btn { justify-content:center; }
  .stats-grid-wrap { grid-template-columns:1fr 1fr; }
}