/* ============================================================
   APPSYNC — FUTURISTIC LANDING PAGE
   ============================================================ */
:root{--bg:#030405;--surface:rgba(12,15,18,.72);--text:#f4f7f8;--muted:#7e898f;--accent:#62f5d1;--accent-2:#7aa7ff;--border:rgba(255,255,255,.10);--ease:cubic-bezier(.22,1,.36,1)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;background:radial-gradient(circle at 50% 40%,rgba(49,87,83,.09),transparent 35%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
.intro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;transition:opacity 1s var(--ease),visibility 1s}
.intro.finished{opacity:0;visibility:hidden;pointer-events:none}
.core{position:absolute;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--accent) 15%,rgba(98,245,209,.65) 35%,rgba(98,245,209,.12) 65%,transparent 75%);box-shadow:0 0 15px var(--accent),0 0 45px rgba(98,245,209,.8),0 0 100px rgba(98,245,209,.4);animation:corePulse 1.2s ease-in-out infinite}
.core-inner{position:absolute;inset:-15px;border-radius:50%;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 25px rgba(98,245,209,.5);animation:innerSpin 2s linear infinite}
.energy-wave{position:absolute;width:20px;height:20px;border-radius:50%;border:1px solid rgba(98,245,209,.7);opacity:0;transform:scale(0)}
.intro.explode .wave-1{animation:energyWave 1.3s var(--ease) forwards}
.intro.explode .wave-2{animation:energyWave 1.4s .08s var(--ease) forwards}
.intro.explode .wave-3{animation:energyWave 1.5s .16s var(--ease) forwards}
#particles,#ambient-particles{position:absolute;inset:0;pointer-events:none}
.explosion-particle{position:absolute;left:50%;top:50%;width:var(--size);height:var(--size);border-radius:50%;background:var(--particle-color);box-shadow:0 0 8px var(--particle-color),0 0 22px var(--particle-color);opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(.2)}
.intro.explode .explosion-particle{animation:particleExplosion var(--duration) var(--delay) cubic-bezier(.12,.8,.2,1) forwards}
.explosion-flash{position:absolute;width:50px;height:50px;border-radius:50%;background:#fff;opacity:0;filter:blur(2px);transform:scale(0)}
.intro.explode .explosion-flash{animation:flashExplosion .65s ease-out forwards}
.main-content{position:relative;min-height:100vh;opacity:0;transform:scale(.985);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.main-content.visible{opacity:1;transform:scale(1)}
.ambient{position:fixed;width:500px;height:500px;border-radius:50%;filter:blur(100px);opacity:.10;pointer-events:none;z-index:-3}
.ambient-1{top:5%;left:15%;background:var(--accent);animation:ambientFloat 10s ease-in-out infinite}
.ambient-2{right:5%;bottom:10%;background:var(--accent-2);animation:ambientFloat 13s 2s ease-in-out infinite reverse}
.ambient-3{left:40%;top:45%;width:300px;height:300px;background:#9b7aff;opacity:.045}
.grid{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,black 0%,transparent 75%)}
.ambient-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:0 0 8px rgba(98,245,209,.5);animation:ambientParticle var(--duration) linear infinite;animation-delay:var(--delay)}
.navbar{width:min(1400px,calc(100% - 80px));margin:auto;padding:34px 0;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.22em}
.brand-mark{position:relative;width:27px;height:27px;display:block;border:1px solid rgba(98,245,209,.65);transform:rotate(45deg);box-shadow:0 0 15px rgba(98,245,209,.15)}
.brand-mark span:first-child{position:absolute;width:9px;height:9px;left:8px;top:8px;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.brand-mark span:last-child{position:absolute;width:9px;height:9px;left:8px;top:8px;border:1px solid var(--accent);transform:translate(6px,-6px)}
.nav-status{display:flex;align-items:center;gap:8px;color:#667176;font-size:9px;letter-spacing:.2em}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:statusPulse 2s ease-in-out infinite}
.hero{min-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center;text-align:center;padding:60px 20px 120px}
.hero-content{width:min(950px,100%)}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:30px;color:#657076;font-size:9px;letter-spacing:.35em;font-weight:600}
.eyebrow-line{width:35px;height:1px;background:linear-gradient(90deg,transparent,var(--accent));opacity:.7}
.eyebrow-line:last-child{background:linear-gradient(90deg,var(--accent),transparent)}
.hero h1{font-size:clamp(3rem,8vw,7.8rem);line-height:.95;letter-spacing:-.065em;font-weight:600;text-shadow:0 0 45px rgba(255,255,255,.06)}
.gradient-text{display:block;background:linear-gradient(100deg,#fff 0%,#a9fff0 35%,var(--accent) 55%,#9eb8ff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientMove 7s ease-in-out infinite}
.subtitle{margin:35px auto 0;max-width:500px;color:var(--muted);font-size:clamp(14px,1.5vw,18px);line-height:1.7;letter-spacing:.02em}
.hero-actions{margin-top:45px}
.explore-button{position:relative;display:inline-flex;align-items:center;gap:24px;padding:17px 24px 17px 28px;border:1px solid rgba(98,245,209,.35);border-radius:4px;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));backdrop-filter:blur(15px);text-decoration:none;overflow:hidden;transition:transform .45s var(--ease),border-color .45s ease,box-shadow .45s ease}
.explore-button::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.15) 50%,transparent 80%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.explore-button:hover{transform:translateY(-5px);border-color:rgba(98,245,209,.8);box-shadow:0 12px 45px rgba(0,0,0,.45),0 0 30px rgba(98,245,209,.15)}
.explore-button:hover::before{transform:translateX(120%)}
.button-text{position:relative;z-index:1;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.arrow{position:relative;z-index:1;color:var(--accent);font-size:21px;transition:transform .4s var(--ease)}
.explore-button:hover .arrow{transform:translateX(6px)}
.scroll-indicator{margin-top:90px;display:flex;align-items:center;justify-content:center;gap:12px;color:#3f484d;font-size:8px;letter-spacing:.3em}
.scroll-line{width:35px;height:1px;background:#3f484d}
.project-preview{width:min(1100px,calc(100% - 40px));margin:0 auto;padding-bottom:130px}
.section-label{display:flex;align-items:center;gap:12px;margin-bottom:25px;color:#4c565b;font-size:8px;letter-spacing:.25em}
.section-label span:first-child{color:var(--accent)}
.label-line{width:35px;height:1px;background:#333a3e}
.projects-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px}
.project-card{position:relative;min-height:230px;display:flex;align-items:flex-end;padding:30px;color:#fff;text-decoration:none;border:1px solid var(--border);background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.012));backdrop-filter:blur(18px);overflow:hidden;transition:transform .5s var(--ease),border-color .5s ease,background .5s ease}
.project-card::before{content:"";position:absolute;width:250px;height:250px;top:-130px;right:-80px;border-radius:50%;background:var(--accent);filter:blur(100px);opacity:.05;transition:opacity .5s ease}
.project-card:hover{transform:translateY(-7px);border-color:rgba(98,245,209,.35);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025))}
.project-card:hover::before{opacity:.14}
.project-number{position:absolute;top:28px;left:30px;color:#414a4e;font-size:9px;letter-spacing:.2em}
.project-info{position:relative;max-width:600px}
.project-tag{display:block;margin-bottom:10px;color:var(--accent);font-size:8px;letter-spacing:.22em}
.project-info h2{font-size:clamp(20px,3vw,30px);letter-spacing:-.03em;margin-bottom:10px}
.project-info p{color:var(--muted);font-size:13px;line-height:1.6}
.project-arrow{position:absolute;top:27px;right:30px;font-size:24px;color:#5b666b;transition:transform .4s var(--ease),color .4s ease}
.project-card:hover .project-arrow{color:var(--accent);transform:translate(3px,-3px)}
footer{width:min(1400px,calc(100% - 80px));margin:auto;padding:25px 0 35px;display:grid;grid-template-columns:1fr 1fr 1fr;color:#343c40;font-size:8px;letter-spacing:.22em;border-top:1px solid rgba(255,255,255,.06)}
footer>:last-child{text-align:right}.footer-center{text-align:center}
@keyframes corePulse{0%,100%{transform:scale(.85);filter:brightness(.8)}50%{transform:scale(1.2);filter:brightness(1.5)}}
@keyframes innerSpin{from{transform:rotate(0deg) scale(.8)}to{transform:rotate(360deg) scale(1.2)}}
@keyframes energyWave{0%{opacity:.9;transform:scale(0)}100%{opacity:0;transform:scale(75)}}
@keyframes particleExplosion{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(.2)}8%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(0)}}
@keyframes flashExplosion{0%{opacity:0;transform:scale(0)}15%{opacity:.9}100%{opacity:0;transform:scale(25)}}
@keyframes ambientFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-40px) scale(1.15)}}
@keyframes ambientParticle{0%{opacity:0;transform:translateY(30px) scale(.5)}20%{opacity:.5}80%{opacity:.15}100%{opacity:0;transform:translateY(-100px) scale(1)}}
@keyframes statusPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes gradientMove{0%,100%{background-position:0% center}50%{background-position:100% center}}
@media(max-width:700px){
.navbar{width:calc(100% - 36px);padding-top:24px}.nav-status{display:none}
.hero{min-height:calc(100vh - 80px);padding:40px 18px 90px}.eyebrow{font-size:7px;letter-spacing:.22em}.eyebrow-line{width:20px}
.hero h1{font-size:clamp(3rem,16vw,5rem)}.subtitle{margin-top:25px;font-size:14px}.hero-actions{margin-top:35px}
.explore-button{padding:15px 19px 15px 22px;gap:18px}.button-text{font-size:10px}.scroll-indicator{margin-top:65px}
.project-preview{width:calc(100% - 36px);padding-bottom:80px}.project-card{min-height:250px;padding:25px}.project-number{top:23px;left:25px}.project-arrow{top:20px;right:25px}
footer{width:calc(100% - 36px);grid-template-columns:1fr;gap:12px;padding-bottom:25px}footer>*,footer>:last-child,.footer-center{text-align:center}
.ambient{width:250px;height:250px;filter:blur(70px)}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.intro{transition:opacity .2s ease}.intro .core{animation:none}.main-content{opacity:1;transform:none}
}