/* ===== IKSHAR Portfolio — Premium Design v2 ===== */
/* Mobile-first, gradient morphing, scroll effects */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: rgba(99,102,241,.35); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6366f1, #8b5cf6); border-radius: 3px; }

/* ===== CSS Variables — scroll-based theming ===== */
:root {
    --hue: 245;
    --accent-1: #6366f1;
    --accent-2: #a855f7;
    --accent-3: #ec4899;
    --bg-deep: #07070f;
    --bg-card: rgba(255,255,255,.025);
    --bg-card-hover: rgba(255,255,255,.055);
    --border-subtle: rgba(255,255,255,.06);
    --border-hover: rgba(255,255,255,.14);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --radius: 1rem;
    --radius-lg: 1.5rem;
}

/* ===== Keyframes ===== */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeScale { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-25px) rotate(3deg)} }
@keyframes float-r { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(25px) rotate(-3deg)} }
@keyframes morph { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes pulse-glow { 0%,100%{opacity:.1;transform:scale(1)} 50%{opacity:.22;transform:scale(1.08)} }
@keyframes ping { 0%{transform:scale(1);opacity:.8} 80%,100%{transform:scale(2.2);opacity:0} }
@keyframes bounce-soft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes slide-up { from{opacity:0;transform:translateY(60px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Animation utilities */
.anim-fade-in { animation: fadeIn .8s ease both }
.anim-fade-up { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both }
.anim-blink { animation: blink 1s step-end infinite }
.anim-float { animation: float 8s ease-in-out infinite }
.anim-float-r { animation: float-r 10s ease-in-out infinite }
.anim-morph { animation: morph 10s ease-in-out infinite }
.anim-gradient { background-size:200% 200%; animation: gradient-shift 4s ease infinite }
.anim-pulse-glow { animation: pulse-glow 6s ease-in-out infinite }
.anim-bounce { animation: bounce-soft 2.5s ease-in-out infinite }
.anim-ping { animation: ping 2s cubic-bezier(0,0,.2,1) infinite }
.anim-spin-slow { animation: spin-slow 25s linear infinite }

/* Scroll-triggered animations */
[data-animate] { opacity:0; transform:translateY(40px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-animate="fade-left"] { transform:translateX(-50px); }
[data-animate="fade-right"] { transform:translateX(50px); }
[data-animate="fade-scale"] { transform:scale(.88); }
[data-animate].visible { opacity:1; transform:translateY(0) translateX(0) scale(1); }

/* ===== Body / Global ===== */
body { background: var(--bg-deep); color: var(--text-primary); -webkit-font-smoothing:antialiased; overflow-x:hidden; }

/* ===== Animated gradient mesh background ===== */
.bg-mesh { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-mesh .blob { position:absolute; border-radius:50%; filter:blur(120px); opacity:.12; will-change:transform; }
.bg-mesh .blob-1 { width:650px; height:650px; background:linear-gradient(135deg,#6366f1,#8b5cf6); top:-15%; left:-8%; animation:float 14s ease-in-out infinite, morph 12s ease-in-out infinite; }
.bg-mesh .blob-2 { width:550px; height:550px; background:linear-gradient(135deg,#ec4899,#f97316); top:35%; right:-12%; animation:float-r 16s ease-in-out infinite, morph 14s ease-in-out infinite; animation-delay:-5s; }
.bg-mesh .blob-3 { width:450px; height:450px; background:linear-gradient(135deg,#06b6d4,#22c55e); bottom:-8%; left:25%; animation:float 18s ease-in-out infinite, morph 16s ease-in-out infinite; animation-delay:-10s; }
.bg-mesh .blob-4 { width:350px; height:350px; background:linear-gradient(135deg,#a855f7,#6366f1); top:60%; left:5%; animation:float-r 12s ease-in-out infinite, morph 10s ease-in-out infinite; animation-delay:-3s; }

/* Noise texture */
.noise-overlay { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat:repeat; background-size:128px;
}

/* ===== Header ===== */
#header { position:fixed; top:0; left:0; right:0; z-index:100; transition:all .4s cubic-bezier(.16,1,.3,1); }
#header.scrolled {
    background: rgba(7,7,15,.82);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 4px 30px rgba(0,0,0,.35);
}

/* ===== Buttons ===== */
.btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
    background-size:200% 200%; animation: gradient-shift 3s ease infinite;
    color:#fff; font-weight:600; border-radius:var(--radius); border:none; cursor:pointer;
    transition:all .35s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden;
}
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#4f46e5,#7c3aed,#9333ea); opacity:0; transition:opacity .3s; }
.btn-primary:hover::after { opacity:1; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(99,102,241,.35), 0 0 0 1px rgba(99,102,241,.2); }
.btn-primary > *, .btn-primary span { position:relative; z-index:1; }

.btn-outline {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    border:1px solid rgba(255,255,255,.12); color:#fff; border-radius:var(--radius); cursor:pointer;
    background:rgba(255,255,255,.02); transition:all .35s cubic-bezier(.16,1,.3,1);
}
.btn-outline:hover { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06); transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,.2); }

/* ===== Cards — shared ===== */
.service-card, .ai-card, .process-step, .contact-info-card, .tech-group, .faq-item, .demo-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    transition: all .4s cubic-bezier(.16,1,.3,1);
    position: relative; overflow: hidden;
}

/* Service cards */
.service-card { padding:1.75rem; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { background:var(--bg-card-hover); border-color:rgba(99,102,241,.2); transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 30px rgba(99,102,241,.1); }

/* Industry cards */
.industry-card {
    position:relative; background:var(--bg-card); border:1px solid var(--border-subtle);
    border-radius:var(--radius); padding:1.25rem; text-align:center;
    transition:all .35s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; align-items:center; overflow:hidden;
}
.industry-card .ind-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:.75rem; transition:all .3s; }
.industry-card.done .ind-icon { background:rgba(34,197,94,.1); }
.industry-card.can .ind-icon { background:rgba(249,115,22,.1); }
.industry-card:hover { background:var(--bg-card-hover); transform:translateY(-5px); box-shadow:0 12px 40px rgba(0,0,0,.3); }
.industry-card.done:hover { border-color:rgba(34,197,94,.3); }
.industry-card.can:hover { border-color:rgba(249,115,22,.3); }
.industry-card .badge { position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; }
.industry-card.done .badge { background:rgba(34,197,94,.15); color:#22c55e; }
.industry-card.can .badge { background:rgba(249,115,22,.15); color:#f97316; }

/* Case cards */
.case-card { display:block; text-decoration:none; color:inherit; border-radius:var(--radius-lg); overflow:hidden; transition:all .45s cubic-bezier(.16,1,.3,1); }
.case-card-inner { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:1.75rem; height:100%; display:flex; flex-direction:column; transition:all .4s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.case-card-inner::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--case-color,#6366f1), color-mix(in srgb, var(--case-color,#6366f1) 60%, #a855f7)); opacity:0; transition:opacity .3s; }
.case-card:hover .case-card-inner::before { opacity:1; }
.case-card:hover .case-card-inner { background:var(--bg-card-hover); border-color:color-mix(in srgb, var(--case-color,#6366f1) 30%, transparent); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 40px color-mix(in srgb, var(--case-color,#6366f1) 12%, transparent); }

/* AI cards */
.ai-card { padding:1.75rem; }
.ai-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899); opacity:0; transition:opacity .3s; }
.ai-card:hover::before { opacity:1; }
.ai-card:hover { background:var(--bg-card-hover); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 30px rgba(139,92,246,.1); }

/* Tech */
.tech-group { padding:1.5rem; }
.tech-group:hover { border-color:var(--border-hover); }
.tech-pill { display:inline-flex; padding:.4rem .8rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:.6rem; font-size:.8rem; color:var(--text-secondary); transition:all .25s; cursor:default; }
.tech-pill:hover { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.25); color:#a5b4fc; transform:translateY(-2px); }

/* Process */
.process-step { padding:1.5rem; }
.process-step::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--step-color,#6366f1); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.process-step:hover::after { transform:scaleX(1); }
.process-step:hover { background:var(--bg-card-hover); border-color:color-mix(in srgb, var(--step-color,#6366f1) 25%, transparent); transform:translateY(-5px); }

/* Pricing */
.pricing-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:2rem; position:relative; transition:all .4s cubic-bezier(.16,1,.3,1); overflow:hidden; }
.pricing-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.3); }
.pricing-card.popular { border-color:rgba(99,102,241,.35); background:rgba(99,102,241,.04); box-shadow:0 0 60px rgba(99,102,241,.08); }
.pricing-card.popular::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899); background-size:200% 200%; animation:gradient-shift 4s ease infinite; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.popular-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#6366f1,#a855f7); color:#fff; font-size:.75rem; font-weight:700; padding:.35rem 1.25rem; border-radius:2rem; white-space:nowrap; box-shadow:0 4px 20px rgba(99,102,241,.3); }

/* FAQ */
.faq-item { padding:0; }
.faq-item[open] { background:var(--bg-card-hover); border-color:var(--border-hover); }
.faq-item summary { list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }

/* Forms */
.form-input { width:100%; padding:1rem 1.15rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); color:var(--text-primary); font-size:.95rem; outline:none; transition:all .3s cubic-bezier(.16,1,.3,1); }
.form-input:focus { border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,.12), 0 0 20px rgba(99,102,241,.08); background:rgba(99,102,241,.03); }
.form-input::placeholder { color:var(--text-muted); }
.form-input option { background:#0f0f1a; color:var(--text-primary); }

/* Contact info */
.contact-info-card { padding:1.5rem; }
.contact-info-card:hover { background:var(--bg-card-hover); border-color:var(--border-hover); transform:translateY(-3px); }

/* ===== Gradient text ===== */
.text-gradient { background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899); background-size:200% 200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradient-shift 4s ease infinite; }

/* ===== Section label ===== */
.section-label { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.section-label .dot { width:6px; height:6px; border-radius:50%; position:relative; }
.section-label .dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; background:inherit; opacity:.3; animation:ping 2s cubic-bezier(0,0,.2,1) infinite; }

/* ===== Icon container ===== */
.icon-box { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.icon-box svg { width:22px; height:22px; }

/* ===== Demo Cards ===== */
.demo-card { cursor:pointer; }
.demo-card:hover { border-color:rgba(99,102,241,.25); box-shadow:0 20px 50px rgba(0,0,0,.3); transform:translateY(-4px); }
.demo-preview { aspect-ratio:16/10; background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04)); position:relative; overflow:hidden; }
.demo-preview .screen-mockup { position:absolute; inset:12px; border-radius:8px; border:1px solid rgba(255,255,255,.06); overflow:hidden; }

/* ===== Section glow divider ===== */
.section-glow::before { content:''; position:absolute; top:-1px; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(99,102,241,.3), rgba(139,92,246,.3), transparent); }

/* ===== Floating CTA mobile ===== */
.floating-cta { position:fixed; bottom:0; left:0; right:0; z-index:90; padding:.75rem 1rem; padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0)); background:linear-gradient(0deg,rgba(7,7,15,.95) 70%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .bg-mesh .blob { filter:blur(80px); opacity:.08; }
    .bg-mesh .blob-1 { width:350px; height:350px; }
    .bg-mesh .blob-2 { width:300px; height:300px; }
    .bg-mesh .blob-3 { width:250px; height:250px; }
    .bg-mesh .blob-4 { width:200px; height:200px; }
    .service-card, .ai-card, .case-card-inner, .process-step, .pricing-card { padding:1.25rem; }
    .industry-card { padding:1rem; }
    .industry-card .ind-icon { width:40px; height:40px; font-size:1.25rem; }
}
@media (max-width: 480px) {
    :root { --radius:.75rem; --radius-lg:1rem; }
}

/* Sections z-index above mesh */
section { position:relative; z-index:2; }