/* ============================================
   PIXCRAFT - Animated Bright Design
   ============================================ */

:root {
    --primary: #6366f1;
    --primary-l: #818cf8;
    --accent: #f43f5e;
    --teal: #14b8a6;
    --orange: #f97316;
    --bg: #ffffff;
    --bg2: #f7f7fb;
    --text: #1a1a2e;
    --text2: #555570;
    --text3: #999;
    --border: #ebebf0;
    --grad: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
    --font: 'DM Sans', sans-serif;
    --font2: 'Sora', sans-serif;
    --ease: cubic-bezier(.4,0,.2,1);
    --bounce: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:var(--font); background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:rgba(99,102,241,.15); }
a { text-decoration:none; color:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== PRELOADER ===== */
.preloader {
    position:fixed; inset:0; z-index:9999; background:#fff;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .6s, visibility .6s;
}
.preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner { text-align:center; }
.preloader-blocks { display:grid; grid-template-columns:1fr 1fr; gap:6px; width:44px; margin:0 auto 16px; }
.preloader-blocks span {
    width:19px; height:19px; border-radius:4px;
    animation: preload-pulse 1.2s ease-in-out infinite;
}
.preloader-blocks span:nth-child(1) { background:#6366f1; animation-delay:0s; }
.preloader-blocks span:nth-child(2) { background:#8b5cf6; animation-delay:.15s; }
.preloader-blocks span:nth-child(3) { background:#a78bfa; animation-delay:.3s; }
.preloader-blocks span:nth-child(4) { background:#c4b5fd; animation-delay:.45s; }
@keyframes preload-pulse {
    0%,100% { transform:scale(1); opacity:1; }
    50% { transform:scale(.6); opacity:.4; }
}
.preloader-inner p { font-family:var(--font2); font-weight:700; font-size:1.1rem; color:var(--text); letter-spacing:.02em; }

/* ===== FLOATING SHAPES ===== */
.floating-shapes { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.shape {
    position:absolute; border-radius:50%; opacity:.07;
    animation: shape-float 20s ease-in-out infinite;
}
.shape-1 { width:300px; height:300px; background:#6366f1; top:-5%; left:10%; animation-duration:22s; }
.shape-2 { width:200px; height:200px; background:#f43f5e; top:20%; right:5%; animation-duration:18s; animation-delay:-4s; }
.shape-3 { width:250px; height:250px; background:#14b8a6; bottom:10%; left:5%; animation-duration:25s; animation-delay:-8s; }
.shape-4 { width:180px; height:180px; background:#f97316; top:60%; right:15%; animation-duration:20s; animation-delay:-12s; }
.shape-5 { width:120px; height:120px; background:#8b5cf6; top:10%; left:50%; animation-duration:16s; animation-delay:-6s; }
.shape-6 { width:160px; height:160px; background:#ec4899; bottom:30%; right:30%; animation-duration:23s; animation-delay:-10s; }
.shape-7 { width:100px; height:100px; background:#6366f1; top:40%; left:25%; animation-duration:19s; animation-delay:-3s; }
.shape-8 { width:140px; height:140px; background:#14b8a6; bottom:5%; right:10%; animation-duration:21s; animation-delay:-7s; }
@keyframes shape-float {
    0%,100% { transform:translate(0,0) scale(1) rotate(0deg); }
    25% { transform:translate(40px,-60px) scale(1.1) rotate(90deg); }
    50% { transform:translate(-30px,40px) scale(.9) rotate(180deg); }
    75% { transform:translate(50px,20px) scale(1.05) rotate(270deg); }
}

/* ===== NAV ===== */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:18px 0; transition: all .35s var(--ease);
}
.nav.scrolled {
    background:rgba(255,255,255,.92); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border); padding:12px 0;
    box-shadow:0 4px 30px rgba(0,0,0,.04);
}
.nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo {
    display:flex; align-items:center; gap:10px;
    font-family:var(--font2); font-size:1.4rem; font-weight:700; color:var(--text);
}
.nav-logo span { color:var(--primary); }
.logo-pixels { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.logo-pixels span { width:10px; height:10px; border-radius:2px; transition: transform .3s var(--bounce); }
.nav-logo:hover .logo-pixels span { transform:scale(1.2) rotate(10deg); }
.nav-logo:hover .logo-pixels span:nth-child(2) { transform:scale(1.2) rotate(-10deg); }
.nav-logo:hover .logo-pixels span:nth-child(3) { transform:scale(1.2) rotate(-10deg); }

.nav-menu { display:flex; gap:4px; }
.nav-item {
    position:relative; padding:8px 18px; font-size:.9rem; font-weight:500;
    color:var(--text2); border-radius:10px; overflow:hidden; transition: all .3s var(--ease);
}
.nav-item::after {
    content:''; position:absolute; bottom:4px; left:50%; width:0; height:2px;
    background:var(--grad); border-radius:2px; transition: all .3s var(--ease); transform:translateX(-50%);
}
.nav-item:hover, .nav-item.active { color:var(--primary); }
.nav-item:hover::after, .nav-item.active::after { width:20px; }

.nav-btn {
    position:relative; overflow:hidden;
    padding:10px 26px; font-size:.9rem; font-weight:600; color:#fff;
    background:var(--grad); border-radius:12px;
    box-shadow:0 4px 15px rgba(99,102,241,.25); transition: all .3s var(--ease);
}
.nav-btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(99,102,241,.35); }
.btn-shine {
    position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation: btn-shine 3s ease-in-out infinite;
}
@keyframes btn-shine { 0%{left:-100%} 50%,100%{left:150%} }

.hamburger { display:none; background:none; border:none; cursor:pointer; padding:4px; flex-direction:column; gap:5px; }
.hamburger span { width:24px; height:2px; background:var(--text); border-radius:2px; transition: all .3s var(--ease); }

/* ===== HERO ===== */
.hero {
    position:relative; min-height:100vh; display:flex; align-items:center;
    padding:120px 24px 100px; overflow:hidden;
    background:linear-gradient(160deg, #f5f3ff 0%, #ffffff 30%, #fdf2f8 60%, #fff 100%);
}
.hero-particles { position:absolute; inset:0; z-index:0; }
.hero-content { position:relative; z-index:2; flex:1; max-width:560px; padding-left: calc((100vw - 1200px)/2 + 24px); }
@media (max-width:1248px) { .hero-content { padding-left:24px; } }

.hero-tag {
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 20px 8px 14px; background:rgba(99,102,241,.07);
    border:1px solid rgba(99,102,241,.12); border-radius:50px;
    font-size:.85rem; font-weight:600; color:var(--primary); margin-bottom:28px;
}
.tag-pulse {
    width:8px; height:8px; background:var(--primary); border-radius:50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow:0 0 0 0 rgba(99,102,241,.4);
}
@keyframes pulse {
    0% { box-shadow:0 0 0 0 rgba(99,102,241,.4); }
    70% { box-shadow:0 0 0 10px rgba(99,102,241,0); }
    100% { box-shadow:0 0 0 0 rgba(99,102,241,0); }
}

.hero-heading {
    font-family:var(--font2); font-size:clamp(2.4rem,5.5vw,4rem);
    font-weight:800; line-height:1.12; letter-spacing:-.03em;
    margin-bottom:24px;
}
.hero-heading .line { display:block; }
.hero-heading .highlight {
    position:relative; font-style:normal; color:var(--primary);
}
.hero-heading .highlight::after {
    content:''; position:absolute; bottom:2px; left:0; width:100%; height:8px;
    background:rgba(99,102,241,.12); border-radius:4px; z-index:-1;
    animation: highlight-grow .8s var(--bounce) forwards; transform-origin:left;
}
@keyframes highlight-grow { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

.hero-desc { font-size:1.1rem; color:var(--text2); line-height:1.8; margin-bottom:36px; max-width:480px; }

.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }

.btn-main {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; font-size:.95rem; font-weight:600; color:#fff; font-family:var(--font);
    background:var(--grad); border:none; border-radius:14px; cursor:pointer;
    box-shadow:0 4px 20px rgba(99,102,241,.25); transition: all .3s var(--ease);
}
.btn-main svg { width:18px; height:18px; transition: transform .3s var(--ease); }
.btn-main:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(99,102,241,.4); }
.btn-main:hover svg { transform:translateX(4px); }
.btn-main.light { background:#fff; color:var(--primary); box-shadow:0 4px 20px rgba(0,0,0,.1); }
.btn-main.light:hover { box-shadow:0 8px 30px rgba(0,0,0,.15); }
.btn-main.full { width:100%; justify-content:center; }

.btn-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 30px; font-size:.95rem; font-weight:600; color:var(--text); font-family:var(--font);
    background:#fff; border:1.5px solid var(--border); border-radius:14px; cursor:pointer;
    transition: all .3s var(--ease);
}
.btn-outline:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-3px); box-shadow:0 8px 30px rgba(99,102,241,.1); }
.btn-outline.light { background:transparent; border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.85); }
.btn-outline.light:hover { border-color:rgba(255,255,255,.6); color:#fff; }

/* Hero Visual */
.hero-visual {
    position:relative; z-index:2; flex:1; display:flex; justify-content:center;
    padding:20px; min-height:400px;
}
.hero-mockup { position:relative; }
.mockup-screen {
    width:380px; background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:0 30px 80px rgba(99,102,241,.15), 0 0 0 1px rgba(0,0,0,.04);
    animation: float-main 6s ease-in-out infinite;
}
@keyframes float-main {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(-12px) rotate(.5deg); }
}
.screen-header { display:flex; gap:6px; padding:12px 16px; background:#fafafa; border-bottom:1px solid #eee; }
.dot { width:10px; height:10px; border-radius:50%; }
.dot.red { background:#ff5f57; } .dot.yellow { background:#ffbd2e; } .dot.green { background:#28ca41; }
.screen-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.screen-nav { height:10px; border-radius:6px; background:#f0f0f0; }
.screen-hero-block { height:80px; border-radius:12px; background:linear-gradient(135deg,#ece9ff,#f3e8ff); }
.screen-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.screen-card { height:60px; border-radius:10px; background:#f5f5ff; }

.mockup-phone {
    position:absolute; right:-30px; bottom:-20px;
    width:140px; background:#fff; border-radius:20px; padding:6px;
    box-shadow:0 20px 60px rgba(244,63,94,.12), 0 0 0 1px rgba(0,0,0,.04);
    animation: float-phone 5s ease-in-out infinite; animation-delay:-2s;
}
@keyframes float-phone {
    0%,100% { transform:translateY(0) rotate(0deg); }
    50% { transform:translateY(-10px) rotate(-1deg); }
}
.phone-notch { width:40px; height:6px; background:#eee; border-radius:4px; margin:6px auto 12px; }
.phone-body { padding:8px 10px 16px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.phone-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#ece9ff,#fce7f3); }
.phone-bar { height:6px; border-radius:4px; background:#f0f0f0; }
.phone-list { width:100%; display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.phone-item { height:24px; border-radius:8px; background:#f8f8ff; }

/* Float animation for cards */
.float-card { animation: float-card 4s ease-in-out infinite; }
@keyframes float-card {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-6px); }
}
.float-card { animation-delay: var(--fd, 0s); }

/* Shimmer */
.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
    animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* Pulse bar */
.pulse-bar { animation: pulse-bar 2s ease-in-out infinite; }
@keyframes pulse-bar { 0%,100%{opacity:.6} 50%{opacity:1} }

/* Hero Scroll */
.hero-scroll {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-line { width:1.5px; height:40px; background:var(--border); position:relative; overflow:hidden; }
.scroll-line::after {
    content:''; position:absolute; top:-100%; left:0; width:100%; height:50%;
    background:var(--primary); animation: scroll-down 2s ease-in-out infinite;
}
@keyframes scroll-down { 0%{top:-50%} 100%{top:150%} }
.hero-scroll span { font-size:.72rem; color:var(--text3); text-transform:uppercase; letter-spacing:.15em; font-weight:600; }

/* Marquee */
.hero-marquee {
    position:absolute; bottom:0; left:0; right:0; padding:18px 0;
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.8); backdrop-filter:blur(10px); overflow:hidden;
}
.marquee-track {
    display:flex; gap:0; white-space:nowrap;
    animation: marquee 25s linear infinite;
}
.marquee-track span { font-family:var(--font2); font-size:.85rem; font-weight:600; color:var(--text2); padding:0 12px; }
.marquee-track .sep { color:var(--primary); opacity:.4; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===== REVEAL ANIMATIONS ===== */
.reveal-up {
    opacity:0; transform:translateY(40px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--d, 0s);
}
.reveal-up.visible { opacity:1; transform:translateY(0); }

.scroll-reveal {
    opacity:0; transform:translateY(50px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--d, 0s);
}
.scroll-reveal.visible { opacity:1; transform:translateY(0); }

/* ===== STATS ===== */
.stats-strip { padding:60px 0; position:relative; z-index:2; background:var(--bg); }
.stats-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
    padding:40px; background:#fff; border-radius:24px;
    box-shadow:0 8px 40px rgba(0,0,0,.05); border:1px solid var(--border);
}
.stat-box { text-align:center; padding:16px; }
.stat-num {
    font-family:var(--font2); font-size:2.8rem; font-weight:700;
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-num::after { content:'+'; }
.stat-lbl { display:block; font-size:.85rem; color:var(--text3); margin-top:4px; font-weight:500; }

/* ===== SERVICES ===== */
.services { padding:100px 0; position:relative; z-index:2; }
.section-top { margin-bottom:50px; }
.section-top.center { text-align:center; }
.section-label {
    display:inline-block; padding:6px 18px; background:rgba(99,102,241,.07);
    border:1px solid rgba(99,102,241,.1); border-radius:50px;
    font-size:.78rem; font-weight:700; color:var(--primary);
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;
}
.section-heading {
    font-family:var(--font2); font-size:clamp(1.8rem,4vw,2.8rem);
    font-weight:700; letter-spacing:-.02em; line-height:1.2;
}
.text-gradient {
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-light {
    background:linear-gradient(135deg,#fff,#e0e7ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.services-list { display:flex; flex-direction:column; gap:0; }
.service-row {
    display:flex; align-items:center; gap:24px; padding:28px 32px;
    border-bottom:1px solid var(--border); cursor:pointer;
    transition: all .4s var(--ease); position:relative; border-radius:16px;
}
.service-row::before {
    content:''; position:absolute; inset:0; border-radius:16px;
    background:linear-gradient(135deg, rgba(99,102,241,.03), rgba(139,92,246,.03));
    opacity:0; transition: opacity .4s var(--ease);
}
.service-row:hover { padding-left:40px; }
.service-row:hover::before { opacity:1; }
.service-num { font-family:var(--font2); font-size:1rem; font-weight:700; color:var(--primary); opacity:.5; min-width:36px; position:relative; z-index:1; }
.service-title { font-family:var(--font2); font-size:1.35rem; font-weight:600; min-width:220px; position:relative; z-index:1; transition: color .3s; }
.service-row:hover .service-title { color:var(--primary); }
.service-desc { font-size:.9rem; color:var(--text2); flex:1; position:relative; z-index:1; }
.service-tags { display:flex; gap:6px; position:relative; z-index:1; }
.service-tags span {
    padding:4px 12px; background:var(--bg2); border:1px solid var(--border);
    border-radius:6px; font-size:.75rem; font-weight:500; color:var(--text3);
}
.service-arrow {
    position:relative; z-index:1;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--bg2); transition: all .3s var(--bounce);
}
.service-arrow svg { width:16px; height:16px; color:var(--text3); transition: all .3s; }
.service-row:hover .service-arrow { background:var(--primary); transform:rotate(0deg) scale(1.1); }
.service-row:hover .service-arrow svg { color:#fff; }

/* ===== PORTFOLIO ===== */
.portfolio { padding:100px 0; background:var(--bg2); position:relative; z-index:2; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.p-card {
    border-radius:20px; overflow:hidden; background:#fff;
    border:1px solid var(--border); transition: all .4s var(--ease);
    box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.p-card:hover { transform:translateY(-10px) scale(1.01); box-shadow:0 20px 50px rgba(99,102,241,.12); }
.p-card-wide { grid-column:span 2; }
.p-card-bg { height:240px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.p-card-wide .p-card-bg { height:280px; }
.p-card-mockup { padding:24px; transition: transform .6s var(--bounce); }
.p-card:hover .p-card-mockup { transform:translateY(-8px) scale(1.02); }

.mini-browser {
    width:280px; background:rgba(255,255,255,.18); border-radius:10px;
    overflow:hidden; backdrop-filter:blur(8px);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.p-card-wide .mini-browser { width:360px; }
.mini-browser.small { width:200px; }
.mb-dots { display:flex; gap:5px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.15); }
.mb-dots span { width:7px; height:7px; border-radius:50%; }
.mb-dots span:first-child { background:#ff5f57; }
.mb-dots span:nth-child(2) { background:#ffbd2e; }
.mb-dots span:last-child { background:#28ca41; }
.mb-body { padding:10px; display:flex; flex-direction:column; gap:8px; }
.mb-block { border-radius:6px; background:rgba(255,255,255,.18); }
.mb-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.mb-row.three { grid-template-columns:1fr 1fr 1fr; }

.mini-phone {
    width:100px; background:rgba(255,255,255,.18); border-radius:16px;
    padding:6px; backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.mp-notch { width:30px; height:5px; background:rgba(255,255,255,.2); border-radius:3px; margin:5px auto 10px; }
.mp-body { padding:8px; display:flex; flex-direction:column; gap:8px; align-items:center; min-height:120px; }
.mp-circle { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); margin-bottom:4px; }

.mini-chart { display:flex; align-items:flex-end; gap:5px; height:60px; }
.mc-bar { flex:1; background:rgba(255,255,255,.2); border-radius:3px 3px 0 0; }

.p-card-info { padding:24px 28px; }
.p-tag {
    font-size:.75rem; font-weight:700; color:var(--primary);
    text-transform:uppercase; letter-spacing:.06em;
}
.p-card-info h3 { font-family:var(--font2); font-size:1.15rem; font-weight:600; margin:8px 0 6px; }
.p-card-info p { font-size:.88rem; color:var(--text2); line-height:1.6; }

/* ===== ABOUT ===== */
.about { padding:100px 0; position:relative; z-index:2; }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-desc { font-size:1rem; color:var(--text2); line-height:1.8; margin-top:16px; margin-bottom:28px; }

.about-checks { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.check-item {
    display:flex; align-items:center; gap:12px;
    font-size:.9rem; font-weight:500; color:var(--text);
}
.check-icon {
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    background:rgba(99,102,241,.08); border-radius:8px; flex-shrink:0;
}
.check-icon svg { width:14px; height:14px; color:var(--primary); }

/* About Cards */
.about-right { position:relative; height:400px; }
.about-cards-visual { position:relative; width:100%; height:100%; }
.a-card {
    position:absolute; display:flex; align-items:center; gap:14px;
    padding:20px 26px; background:#fff; border:1px solid var(--border);
    border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition: all .3s var(--ease);
}
.a-card:hover { transform:translateY(-6px) !important; box-shadow:0 20px 40px rgba(99,102,241,.12); }
.a-card-icon {
    width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    border-radius:14px; flex-shrink:0;
}
.a-card-icon svg { width:22px; height:22px; }
.a-card strong { display:block; font-size:.95rem; }
.a-card span { font-size:.8rem; color:var(--text3); }

.a-card-1 { top:10px; left:5%; animation: a-float-1 6s ease-in-out infinite; }
.a-card-2 { top:45%; right:0; animation: a-float-2 5s ease-in-out infinite; animation-delay:-2s; }
.a-card-3 { bottom:10px; left:10%; animation: a-float-3 7s ease-in-out infinite; animation-delay:-4s; }
@keyframes a-float-1 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(1deg)} }
@keyframes a-float-2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-12px) rotate(-1deg)} }
@keyframes a-float-3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(.5deg)} }

.about-bg-circle {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:250px; height:250px; border-radius:50%; border:1px dashed rgba(99,102,241,.15);
    animation: spin-slow 30s linear infinite;
}
.about-bg-circle-2 {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:180px; height:180px; border-radius:50%; border:1px dashed rgba(244,63,94,.1);
    animation: spin-slow 20s linear infinite reverse;
}
@keyframes spin-slow { 0%{transform:translate(-50%,-50%) rotate(0)} 100%{transform:translate(-50%,-50%) rotate(360deg)} }

/* ===== REVIEWS ===== */
.reviews { padding:100px 0; background:var(--bg2); position:relative; z-index:2; }
.reviews-slider { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card {
    padding:36px 32px; background:#fff; border:1px solid var(--border);
    border-radius:20px; transition: all .4s var(--ease);
    box-shadow:0 2px 10px rgba(0,0,0,.03); position:relative;
}
.review-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(99,102,241,.1); }
.review-quote {
    font-family:var(--font2); font-size:3.5rem; font-weight:800; line-height:1;
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:12px;
}
.review-card p { font-size:.92rem; color:var(--text2); line-height:1.8; margin-bottom:24px; }
.review-author { display:flex; align-items:center; gap:14px; }
.review-avatar {
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; color:#fff; flex-shrink:0;
}
.review-author strong { display:block; font-size:.9rem; }
.review-author span { font-size:.8rem; color:var(--text3); }

/* ===== CTA ===== */
.cta { padding:80px 0; position:relative; z-index:2; }
.cta-box {
    position:relative; padding:80px 60px; background:var(--grad);
    border-radius:28px; text-align:center; overflow:hidden;
}
.cta-particles { position:absolute; inset:0; }
.cta-box h2 { position:relative; z-index:1; font-family:var(--font2); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; color:#fff; margin-bottom:14px; }
.cta-box p { position:relative; z-index:1; font-size:1.05rem; color:rgba(255,255,255,.8); max-width:460px; margin:0 auto 32px; }
.cta-btns { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ===== CONTACT ===== */
.contact { padding:100px 0; position:relative; z-index:2; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-desc { font-size:1rem; color:var(--text2); line-height:1.8; margin-top:12px; margin-bottom:32px; }

.contact-info-list { display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.c-info { display:flex; align-items:center; gap:16px; }
.c-info-icon {
    width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    background:rgba(99,102,241,.07); border-radius:14px; flex-shrink:0;
}
.c-info-icon svg { width:20px; height:20px; color:var(--primary); }
.c-info strong { display:block; font-size:.9rem; }
.c-info span { font-size:.85rem; color:var(--text2); }

.social-row { display:flex; gap:10px; }
.social-btn {
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    color:var(--text2); transition: all .3s var(--bounce);
}
.social-btn svg { width:18px; height:18px; }
.social-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-4px) scale(1.05); box-shadow:0 8px 20px rgba(99,102,241,.25); }

/* Contact Form */
.contact-right {
    padding:44px; background:#fff; border:1px solid var(--border);
    border-radius:24px; box-shadow:0 8px 40px rgba(0,0,0,.04);
}
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-duo { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.form-field { position:relative; }
.form-field input, .form-field textarea {
    width:100%; padding:16px 18px; background:var(--bg2);
    border:1.5px solid var(--border); border-radius:14px;
    font-size:.92rem; font-family:var(--font); color:var(--text);
    transition: all .3s var(--ease); outline:none;
}
.form-field input::placeholder, .form-field textarea::placeholder { color:#bbb; }
.form-field textarea { resize:vertical; min-height:120px; }
.field-line {
    position:absolute; bottom:0; left:50%; width:0; height:2px;
    background:var(--grad); border-radius:2px; transition: all .4s var(--ease);
    transform:translateX(-50%);
}
.form-field input:focus, .form-field textarea:focus {
    border-color:var(--primary); background:#fff;
    box-shadow:0 0 0 4px rgba(99,102,241,.06);
}
.form-field input:focus ~ .field-line, .form-field textarea:focus ~ .field-line { width:60%; }

/* ===== FOOTER ===== */
.footer { padding:80px 0 0; background:var(--text); color:rgba(255,255,255,.6); position:relative; z-index:2; }
.footer .nav-logo { color:#fff; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:60px; }
.footer-brand p { font-size:.9rem; margin-top:16px; line-height:1.7; max-width:280px; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col h4 { font-family:var(--font2); font-size:.95rem; font-weight:600; color:#fff; margin-bottom:4px; }
.footer-col a { font-size:.88rem; color:rgba(255,255,255,.45); transition: color .3s; }
.footer-col a:hover { color:#fff; }
.footer-bottom {
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 0; border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom p { font-size:.85rem; color:rgba(255,255,255,.3); }
.footer-links { display:flex; gap:24px; }
.footer-links a { font-size:.85rem; color:rgba(255,255,255,.3); }
.footer-links a:hover { color:#fff; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .hero { flex-direction:column; text-align:center; padding-top:140px; }
    .hero-content { padding-left:0; max-width:600px; }
    .hero-desc { margin-left:auto; margin-right:auto; }
    .hero-btns { justify-content:center; }
    .hero-visual { min-height:300px; }
    .services .service-desc { display:none; }
    .portfolio-grid { grid-template-columns:repeat(2,1fr); }
    .p-card-wide { grid-column:span 2; }
    .reviews-slider { grid-template-columns:1fr 1fr; }
    .review-card:last-child { grid-column:span 2; max-width:50%; margin:0 auto; }
    .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:768px) {
    .nav-menu {
        position:fixed; top:0; right:-100%; width:280px; height:100vh;
        background:rgba(255,255,255,.98); backdrop-filter:blur(20px);
        flex-direction:column; padding:100px 28px 28px; gap:4px;
        transition: right .4s var(--ease); border-left:1px solid var(--border);
        box-shadow:-10px 0 40px rgba(0,0,0,.06);
    }
    .nav-menu.open { right:0; }
    .nav-item { padding:14px 16px; font-size:1rem; width:100%; }
    .nav-btn { display:none; }
    .hamburger { display:flex; }
    .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
    .hamburger.active span:nth-child(2) { opacity:0; }
    .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

    .hero-visual { display:none; }
    .hero { min-height:auto; padding-bottom:120px; }

    .stats-row { grid-template-columns:1fr 1fr; }
    .service-row { flex-wrap:wrap; padding:20px 16px; }
    .service-title { min-width:auto; flex:1; }
    .service-tags { display:none; }
    .portfolio-grid { grid-template-columns:1fr; }
    .p-card-wide { grid-column:span 1; }
    .about-layout { grid-template-columns:1fr; gap:40px; }
    .about-right { height:300px; }
    .about-checks { grid-template-columns:1fr; }
    .reviews-slider { grid-template-columns:1fr; }
    .review-card:last-child { grid-column:span 1; max-width:100%; }
    .contact-layout { grid-template-columns:1fr; gap:40px; }
    .contact-right { padding:28px; }
    .form-duo { grid-template-columns:1fr; }
    .cta-box { padding:48px 24px; }
    .cta-btns { flex-direction:column; }
    .footer-top { grid-template-columns:1fr; gap:28px; }
    .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
    .hero-scroll { display:none; }
    .floating-shapes { display:none; }
}

@media (max-width:480px) {
    .hero-heading { font-size:2rem; }
    .stats-row { padding:24px; }
    .stat-num { font-size:2rem; }
    .mockup-screen { width:280px; }
    .app-features-grid { grid-template-columns:1fr; }
    .app-highlights { grid-template-columns:1fr; }
    .app-icon-large { width:80px; height:80px; }
}

/* ===== App Showcase Section ===== */
.app-showcase {
    padding: 100px 0;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #f8f9ff 0%, #fff 100%);
}
.app-hero-layout {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 60px;
}
.app-hero-left {
    flex: 1;
}
.app-icon-large {
    width: 100px;
    height: 100px;
    border-radius: 22%;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(99,102,241,0.18);
    margin-bottom: 20px;
}
.app-meta {
    margin-bottom: 20px;
}
.app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.app-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
    border: 1px solid rgba(99,102,241,0.12);
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--primary);
    font-family: var(--font2);
}
.app-description {
    color: var(--text2);
    font-size: .95rem;
    line-height: 1.9;
    margin-bottom: 28px;
}
.app-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    background: #000;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.app-store-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    color: #fff;
}
.app-store-btn small {
    display: block;
    font-size: .65rem;
    opacity: .8;
    line-height: 1;
}
.app-store-btn strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Features Grid */
.app-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.app-feature-category {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.app-feature-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.afc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    color: #fff;
    font-family: var(--font2);
    font-weight: 600;
    font-size: 1.05rem;
}
.afc-list {
    padding: 20px 24px;
    list-style: none;
    margin: 0;
}
.afc-list li {
    padding: 8px 0;
    font-size: .9rem;
    color: var(--text2);
    line-height: 1.7;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.afc-list li:last-child {
    border-bottom: none;
}
.afc-list li strong {
    color: var(--text);
}

/* App Highlights */
.app-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.app-hl {
    text-align: center;
    padding: 28px 20px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    transition: transform 0.3s var(--ease);
}
.app-hl:hover {
    transform: translateY(-4px);
}
.app-hl-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.app-hl strong {
    display: block;
    font-family: var(--font2);
    font-size: .95rem;
    margin-bottom: 6px;
    color: var(--text);
}
.app-hl span {
    font-size: .85rem;
    color: var(--text2);
    line-height: 1.6;
}

@media (max-width:1024px) {
    .app-features-grid { grid-template-columns: repeat(2, 1fr); }
    .app-highlights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:768px) {
    .app-features-grid { grid-template-columns: 1fr; }
    .app-highlights { grid-template-columns: repeat(2, 1fr); }
    .app-showcase { padding: 60px 0; }
}