/* ============================================
   RIXHC — Portfolio v6.0 / Light Glassmorphism
   Keeps: FAQ, Process, TechStack, ScrollProgress
   ============================================ */

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

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  --color-primary: #0f172a;
  --color-secondary: #3b82f6;
  --color-accent: #06b6d4;
  --color-bg: #f0f4f8;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.35);
  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(15,23,42,0.07);
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }

body {
  background: var(--color-bg);
  background-image:
    radial-gradient(ellipse at 15% 5%, rgba(59,130,246,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(139,92,246,0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 80%, rgba(6,182,212,0.06) 0%, transparent 50%);
  background-attachment: fixed;
  overflow-x: hidden;
  font-family: 'Inter','PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #334155;
  line-height: 1.6;
}

::selection { background: var(--color-secondary); color:#fff; }
img { max-width:100%; height:auto; }

/* === Scroll Progress === */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--color-secondary), #8b5cf6, var(--color-accent));
  z-index:9999; transition: width 0.1s linear;
}

/* === Text Gradient === */
.text-gradient {
  background: linear-gradient(135deg, #3b82f6, #06b6d4, #8b5cf6, #ec4899, #f59e0b, #3b82f6);
  background-size: 400% 400%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

/* === Grid Background === */
.bg-grid {
  background-size:40px 40px;
  background-image: linear-gradient(to right,rgba(15,23,42,0.04) 1px,transparent 1px), linear-gradient(to bottom,rgba(15,23,42,0.04) 1px,transparent 1px);
  mask-image: radial-gradient(ellipse at center,black 30%,transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center,black 30%,transparent 70%);
}

/* === Glass Nav === */
.glass-nav {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  transition: all 0.3s ease;
}
.glass-nav.scrolled {
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.04);
}

/* === Bento Cards === */
.bento-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.5s var(--ease-out);
  position:relative; overflow:hidden;
}
.bento-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent), #8b5cf6);
  transform:scaleX(0); transform-origin:left;
  transition: transform 0.6s var(--ease-out);
}
.bento-card:hover {
  transform:translateY(-8px);
  box-shadow: 0 20px 48px rgba(15,23,42,0.12), 0 0 0 1px rgba(59,130,246,0.1);
  background: rgba(255,255,255,0.72);
  border-color: rgba(59,130,246,0.15);
}
.bento-card:hover::before { transform:scaleX(1); }
.bento-card .card-glow {
  position:absolute; inset:0; opacity:0; transition:opacity 0.4s ease;
  pointer-events:none; border-radius:inherit;
}
.bento-card:hover .card-glow { opacity:1; }

/* === Product Cards === */
.product-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-border);
  padding:2rem; display:flex; flex-direction:column;
  transition: all 0.5s var(--ease-out);
  position:relative; overflow:hidden;
  box-shadow: var(--glass-shadow);
}
.product-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent), #8b5cf6);
  opacity:0; transition:opacity 0.4s ease;
}
.product-card:hover {
  transform:translateY(-10px);
  box-shadow: 0 24px 56px rgba(15,23,42,0.14), 0 0 60px rgba(59,130,246,0.06);
  background: rgba(255,255,255,0.78); border-color: rgba(59,130,246,0.2);
}
.product-card:hover::before { opacity:1; }
.product-card .card-glow {
  position:absolute; inset:0; opacity:0; transition:opacity 0.4s ease;
  pointer-events:none; border-radius:inherit;
}
.product-card:hover .card-glow { opacity:1; }
.product-features { list-style:none; padding:0; margin:0; }
.product-features li { display:flex; align-items:flex-start; gap:0.75rem; font-size:0.875rem; color:#475569; margin-bottom:0.75rem; line-height:1.5; }
.product-features li i { color:#10b981; font-size:0.8rem; margin-top:0.25rem; flex-shrink:0; }

/* === Buttons === */
.btn-purchase {
  width:100%; padding:0.875rem; border-radius:var(--radius-lg);
  font-weight:700; font-size:0.875rem; text-align:center; cursor:pointer;
  transition:all 0.3s ease; margin-top:auto;
  border:2px solid transparent; display:block; position:relative; overflow:hidden;
}
.btn-purchase::after {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
}
.btn-purchase:hover::after { animation: btnShimmer 0.6s ease forwards; }
@keyframes btnShimmer { to { left:100%; } }

.btn-purchase-primary {
  background: linear-gradient(135deg, var(--color-primary), #1e293b);
  color:#fff; box-shadow: 0 4px 16px rgba(15,23,42,0.25);
}
.btn-purchase-primary:hover { transform:translateY(-2px); box-shadow: 0 8px 28px rgba(15,23,42,0.35); }

.btn-purchase-outline {
  background: rgba(255,255,255,0.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color: var(--color-primary); border-color: var(--glass-border);
}
.btn-purchase-outline:hover { border-color:var(--color-secondary); color:var(--color-secondary); background:rgba(59,130,246,0.06); }

/* === Reveal === */
.reveal { opacity:0; transform:translateY(30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.active { opacity:1; transform:translateY(0); }
.reveal.delay-100 { transition-delay:100ms; }
.reveal.delay-200 { transition-delay:200ms; }
.reveal.delay-300 { transition-delay:300ms; }

/* === Modal === */
.modal-overlay { backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); }
.modal-container { transition:opacity 0.3s ease; }
.modal-content { transition: transform 0.4s var(--ease-spring), opacity 0.3s ease; }

/* === Animations === */
@keyframes blob { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-50px) scale(1.1);} 66%{transform:translate(-20px,20px) scale(0.9);} 100%{transform:translate(0,0) scale(1);} }
.animate-blob { animation:blob 8s infinite; }
.animation-delay-2000 { animation-delay:2s; }
.animation-delay-4000 { animation-delay:4s; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.animate-cursor-blink { animation:blink 1s step-end infinite; }

/* === Typing === */
.typing-text { display:inline; }
.typing-cursor { display:inline-block; width:3px; height:1em; background:var(--color-secondary); margin-left:2px; animation:blink 0.8s step-end infinite; vertical-align:text-bottom; }

/* === Particle Canvas === */
#particle-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0.5; }
.stat-number { display:inline-block; font-variant-numeric:tabular-nums; }

/* === Back to Top === */
.back-to-top {
  position:fixed; bottom:2rem; right:2rem; z-index:50;
  width:48px; height:48px; border-radius:50%;
  background:rgba(15,23,42,0.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#fff; border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; cursor:pointer;
  opacity:0; transform:translateY(20px) scale(0.8);
  transition: all 0.4s var(--ease-spring);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.back-to-top.visible { opacity:1; transform:translateY(0) scale(1); }
.back-to-top:hover { background:rgba(59,130,246,0.8); transform:translateY(-3px) scale(1.08); box-shadow:0 12px 32px rgba(59,130,246,0.4); }

/* === Toast === */
#toast { font-family:'Inter',sans-serif; transition:all 0.4s var(--ease-spring); }

/* === Section Divider === */
.section-divider {
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,0.3), rgba(139,92,246,0.3), transparent);
  background-size:200% 100%; animation: dividerFlow 4s ease infinite;
}
@keyframes dividerFlow { 0%,100%{background-position:0% 0%;} 50%{background-position:100% 0%;} }

/* === Nav Link === */
.nav-link { position:relative; font-weight:500; transition:color 0.3s ease; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--color-secondary),var(--color-accent)); border-radius:1px; transition:width 0.3s ease; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* === Tabs === */
.tab-nav { display:flex; gap:0.5rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tab-nav::-webkit-scrollbar { display:none; }
.tab-btn { flex-shrink:0; padding:0.65rem 1.4rem; font-size:0.85rem; font-weight:700; color:#64748b; background:rgba(255,255,255,0.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1.5px solid var(--glass-border); border-radius:var(--radius-lg); cursor:pointer; transition:all 0.3s ease; white-space:nowrap; }
.tab-btn:hover { color:var(--color-secondary); border-color:var(--color-secondary); background:rgba(59,130,246,0.06); }
.tab-btn.active { color:#fff; background:linear-gradient(135deg,var(--color-primary),#1e293b); border-color:transparent; box-shadow:0 4px 16px rgba(15,23,42,0.25); }
.tab-panel { display:none; animation:tabFadeIn 0.4s ease; }
.tab-panel.active { display:block; }
@keyframes tabFadeIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* === Award Card === */
.award-card { position:relative; overflow:hidden; cursor:default; transition:all 0.4s var(--ease-out); }
.award-card:hover { box-shadow:0 12px 32px rgba(0,0,0,0.08); transform:translateY(-2px); }
.award-card::after { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:linear-gradient(45deg,transparent 35%,rgba(255,255,255,0.35) 50%,transparent 65%); transform:translateX(-100%); }
.award-card:hover::after { animation:shimmer 0.7s ease forwards; }
@keyframes shimmer { to{transform:translateX(100%);} }

/* === Credential Badge === */
.cred-item { display:flex; align-items:center; gap:0.875rem; padding:1rem 1.25rem; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:all 0.3s ease; }
.cred-item:hover { border-color:var(--color-secondary); box-shadow:0 4px 16px rgba(59,130,246,0.1); transform:translateX(4px); }
.cred-icon { width:2.5rem; height:2.5rem; border-radius:0.5rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; transition:transform 0.3s var(--ease-spring); }
.cred-item:hover .cred-icon { transform:scale(1.1); }

/* === Popular Badge === */
.badge-popular { background:linear-gradient(90deg,#3b82f6,#06b6d4,#8b5cf6,#3b82f6); background-size:200% 100%; animation:badgeShine 3s linear infinite; }
@keyframes badgeShine { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }

/* === Aurora Border === */
@keyframes rotateGradient { to{--gradient-angle:360deg;} }
.aurora-border { position:relative; z-index:0; }
.aurora-border::before { content:''; position:absolute; inset:-1px; border-radius:inherit; background:conic-gradient(from var(--gradient-angle),#3b82f6,#06b6d4,#8b5cf6,#ec4899,#3b82f6); z-index:-2; opacity:0; transition:opacity 0.5s ease; animation:rotateGradient 4s linear infinite; }
.aurora-border::after { content:''; position:absolute; inset:1px; border-radius:inherit; background:rgba(255,255,255,0.9); z-index:-1; }
.aurora-border:hover::before { opacity:1; }

/* === Process Steps === */
.process-step { position:relative; padding-left:3rem; }
.process-step::before { content:attr(data-step); position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:50%; background:linear-gradient(135deg,var(--color-secondary),#8b5cf6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:800; }
.process-step::after { content:''; position:absolute; left:0.95rem; top:2.2rem; width:1px; height:calc(100% - 1rem); background:linear-gradient(to bottom,var(--color-secondary),transparent); }
.process-step:last-child::after { display:none; }

/* === Tech Stack Icon === */
.tech-icon { display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:1rem; border-radius:var(--radius-lg); border:1px solid var(--glass-border); background:var(--glass-bg); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:all 0.3s ease; cursor:default; }
.tech-icon:hover { border-color:rgba(59,130,246,0.3); background:rgba(255,255,255,0.7); transform:translateY(-4px); box-shadow:0 8px 24px rgba(59,130,246,0.1); }
.tech-icon i, .tech-icon span.tech-emoji { font-size:1.8rem; transition:transform 0.3s var(--ease-spring); }
.tech-icon:hover i, .tech-icon:hover span.tech-emoji { transform:scale(1.15); }
.tech-icon .tech-name { font-size:0.7rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.05em; }

/* === FAQ Accordion === */
.faq-item { border:1px solid rgba(0,0,0,0.06); border-radius:var(--radius-lg); background:var(--glass-bg); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:hidden; transition:all 0.3s ease; }
.faq-item:hover { border-color:rgba(59,130,246,0.2); }
.faq-question { width:100%; padding:1.25rem 1.5rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; background:transparent; border:none; color:var(--color-primary); font-size:0.95rem; font-weight:600; text-align:left; font-family:inherit; transition:color 0.2s ease; }
.faq-question:hover { color:var(--color-secondary); }
.faq-question i { color:#94a3b8; transition:transform 0.3s var(--ease-spring); font-size:0.8rem; }
.faq-item.open .faq-question i { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s var(--ease-out), padding 0.3s ease; padding:0 1.5rem; color:#64748b; font-size:0.9rem; line-height:1.7; }
.faq-item.open .faq-answer { max-height:300px; padding:0 1.5rem 1.25rem; }

/* === Contact Card === */
.contact-card { position:relative; overflow:hidden; }

/* === Responsive === */
@media (max-width:1024px) { .product-card { padding:1.5rem; } }
@media (max-width:768px) { .back-to-top { bottom:1.25rem; right:1.25rem; width:42px; height:42px; } .product-card { border-radius:var(--radius-xl); } .process-step { padding-left:2.5rem; } }
@media (max-width:640px) { .typing-cursor { width:2px; } .product-card { padding:1.25rem; } .btn-purchase { padding:0.75rem; font-size:0.8rem; } }

/* === Print === */
@media print { .glass-nav,.back-to-top,#toast,.modal-container,#particle-canvas,#scroll-progress { display:none !important; } body { background:#fff; } }