/* ==========================================================================
   AURORA — Developer & Designer Portfolio Template
   Core Stylesheet
   Structure:
     1. Design Tokens (custom properties)
     2. Base / Reset
     3. Typography
     4. Layout Utilities
     5. Custom Cursor & Global FX
     6. Navigation
     7. Hero
     8. About
     9. Services
     10. Skills
     11. Portfolio
     12. Resume
     13. Stats
     14. Testimonials
     15. Pricing
     16. Blog
     17. FAQ
     18. Contact
     19. Footer
     20. Command Palette
     21. Theme Customizer
     22. Misc components (buttons, badges, cards)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                        */
/* ---------------------------------------------------------------------- */
:root{
  /* Aurora accent triad */
  --aurora-violet: 124, 111, 255;   /* #7C6FFF */
  --aurora-teal:   52, 217, 196;    /* #34D9C4 */
  --aurora-coral:  255, 122, 110;   /* #FF7A6E */

  --accent: var(--aurora-violet);
  --accent-2: var(--aurora-teal);
  --accent-3: var(--aurora-coral);

  /* Light mode surface */
  --bg: 246, 245, 251;              /* #F6F5FB */
  --bg-elevated: 255, 255, 255;
  --ink: 20, 18, 31;                /* #14121F */
  --ink-soft: 90, 87, 110;
  --border: 20, 18, 31;
  --border-alpha: 0.08;
  --glass-bg: 255, 255, 255;
  --glass-alpha: 0.55;
  --glass-blur: 18px;
  --noise-opacity: 0.035;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;

  --container-max: 1280px;
  --nav-h: 84px;
}

[data-theme="dark"]{
  --bg: 13, 11, 26;                 /* #0D0B1A */
  --bg-elevated: 21, 18, 38;
  --ink: 237, 235, 250;             /* #EDEBFA */
  --ink-soft: 168, 163, 199;
  --border: 237, 235, 250;
  --border-alpha: 0.10;
  --glass-bg: 30, 26, 54;
  --glass-alpha: 0.45;
  --noise-opacity: 0.05;
}

/* ---------------------------------------------------------------------- */
/* 2. BASE / RESET                                                         */
/* ---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  position: relative;
}

/* Noise texture overlay */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

::selection{ background: rgba(var(--accent), .28); color: rgb(var(--ink)); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(var(--accent), .4); border-radius:10px; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid rgb(var(--accent));
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------- */
/* 3. TYPOGRAPHY                                                           */
/* ---------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  color: rgb(var(--ink));
}
.h-display{ font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; letter-spacing: -.03em; }
.h-section{ font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--accent));
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 1px;
  background: rgb(var(--accent));
}
.section-lead{
  color: rgb(var(--ink-soft));
  font-size: 1.05rem;
  max-width: 620px;
}
.text-mono{ font-family: var(--font-mono); }
.gradient-text{
  background: linear-gradient(120deg, rgb(var(--accent)) 0%, rgb(var(--accent-2)) 50%, rgb(var(--accent-3)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------- */
/* 4. LAYOUT UTILITIES                                                     */
/* ---------------------------------------------------------------------- */
.container-xl{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}
section{ position: relative; padding: clamp(72px, 10vw, 140px) 0; }
.section-head{ margin-bottom: clamp(40px, 6vw, 72px); }

/* Aurora mesh background (used behind hero + section transitions) */
.aurora-mesh{
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
  animation: blobFloat 18s var(--ease-in-out) infinite alternate;
}
[data-theme="dark"] .aurora-blob{ opacity: .35; }
.aurora-blob.b1{ width: 480px; height: 480px; background: rgb(var(--accent)); top: -160px; left: -120px; animation-delay: 0s; }
.aurora-blob.b2{ width: 420px; height: 420px; background: rgb(var(--accent-2)); top: 60px; right: -140px; animation-delay: -6s; }
.aurora-blob.b3{ width: 380px; height: 380px; background: rgb(var(--accent-3)); bottom: -180px; left: 30%; animation-delay: -11s; }

@keyframes blobFloat{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px,-30px) scale(1.08); }
  100%{ transform: translate(-30px,20px) scale(.96); }
}

.mesh-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(var(--border),.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--border),.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 90%);
}

/* Glass surface */
.glass{
  background: rgba(var(--glass-bg), var(--glass-alpha));
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid rgba(var(--border), var(--border-alpha));
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -20px rgba(20,18,40,.25);
}
[data-theme="dark"] .glass{ box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }

.glow-border{
  position: relative;
}
.glow-border::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(var(--accent),.6), rgba(var(--accent-2),.15), rgba(var(--accent-3),.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.glow-border:hover::after{ opacity: 1; }

/* Scroll reveal */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal-stagger].is-visible > *{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1){ transition-delay: .05s; }
[data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay: .12s; }
[data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay: .19s; }
[data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay: .26s; }
[data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay: .33s; }
[data-reveal-stagger].is-visible > *:nth-child(6){ transition-delay: .40s; }
[data-reveal-stagger].is-visible > *:nth-child(7){ transition-delay: .47s; }
[data-reveal-stagger].is-visible > *:nth-child(8){ transition-delay: .54s; }

/* ---------------------------------------------------------------------- */
/* 5. CUSTOM CURSOR & GLOBAL FX                                            */
/* ---------------------------------------------------------------------- */
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background: rgb(var(--accent)); }
.cursor-ring{
  width: 34px; height: 34px;
  border: 1.5px solid rgba(var(--accent),.6);
  transition: width .2s var(--ease-out), height .2s var(--ease-out), border-color .2s;
}
.cursor-ring.is-active{ width:54px; height:54px; border-color: rgb(var(--accent-3)); }
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

.spotlight{
  position: fixed; inset:0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--x,50%) var(--y,50%), rgba(var(--accent),.08), transparent 45%);
}

.scroll-progress{
  position: fixed; top:0; left:0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-2)), rgb(var(--accent-3)));
  z-index: 1100;
  transition: width .1s linear;
}

.page-loader{
  position: fixed; inset:0;
  z-index: 10000;
  background: rgb(var(--bg));
  display: flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.page-loader.is-hidden{ opacity:0; visibility:hidden; }
.loader-mark{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  display: flex; align-items:center; gap: .8rem;
  color: rgb(var(--ink));
}
.loader-bar{
  width: 160px; height: 2px;
  background: rgba(var(--border),.15);
  overflow: hidden;
  border-radius: 2px;
}
.loader-bar span{
  display:block; height:100%; width:30%;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-2)));
  animation: loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(430%); }
}

/* ---------------------------------------------------------------------- */
/* 6. NAVIGATION                                                           */
/* ---------------------------------------------------------------------- */
.site-nav{
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 32px));
  z-index: 1000;
  border-radius: 100px;
  padding: 10px 12px 10px 22px;
  display: flex; align-items:center; justify-content:space-between;
  transition: padding var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.site-nav.is-scrolled{ top:10px; padding-block: 8px; }

.brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  display:flex; align-items:center; gap:.5rem;
}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-2)));
  box-shadow: 0 0 12px rgba(var(--accent),.7);
}

.nav-links{ display:flex; align-items:center; gap: 4px; }
.nav-links a{
  font-size: .88rem; font-weight: 500;
  padding: 8px 14px;
  border-radius: 100px;
  color: rgb(var(--ink-soft));
  position: relative;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-links a:hover{ color: rgb(var(--ink)); background: rgba(var(--border),.06); }
.nav-links a.active{ color: rgb(var(--ink)); background: rgba(var(--accent),.12); }

.nav-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  border: 1px solid rgba(var(--border),.12);
  background: rgba(var(--bg-elevated), .5);
  color: rgb(var(--ink));
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn:hover{ transform: translateY(-2px); border-color: rgba(var(--accent),.5); }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid rgba(var(--border),.12);
  border-radius: 50%;
  align-items:center; justify-content:center;
  background: transparent;
  color: rgb(var(--ink));
}

.mobile-panel{
  position: fixed; inset: 0;
  z-index: 999;
  background: rgba(var(--bg),.98);
  backdrop-filter: blur(20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 6px;
  transform: translateY(-12px);
  opacity:0; visibility:hidden;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
}
.mobile-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-panel a{ font-family: var(--font-display); font-size: 1.6rem; font-weight:600; padding: 10px 0; color: rgb(var(--ink)); }

/* ---------------------------------------------------------------------- */
/* 7. HERO                                                                  */
/* ---------------------------------------------------------------------- */
.hero{
  min-height: 100svh;
  display:flex; align-items:center;
  padding-top: calc(var(--nav-h) + 30px);
  position: relative;
  overflow: hidden;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center; }
.hero-kicker{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: rgb(var(--ink-soft));
  display:flex; align-items:center; gap:.6rem;
  margin-bottom: 1.4rem;
}
.status-dot{
  width:8px; height:8px; border-radius:50%; background:#3ED598;
  box-shadow: 0 0 0 4px rgba(62,213,152,.18);
  animation: pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

.hero-title{ margin-bottom: 1.4rem; }
.hero-role{
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgb(var(--accent));
  min-height: 1.6em;
  margin-bottom: 1.6rem;
}
.hero-role .caret{ display:inline-block; width:2px; background: rgb(var(--accent)); margin-left:2px; animation: caretBlink 1s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }

.hero-desc{ max-width: 520px; color: rgb(var(--ink-soft)); margin-bottom: 2.2rem; font-size: 1.05rem; }
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; margin-bottom: 2.6rem; }
.hero-social{ display:flex; gap:10px; }
.hero-visual{ position: relative; height: 560px; }
.hero-visual-cards{ display: contents; }
.hero-photo-card{
  position:absolute; top: 6%; left: 12%;
  width: 76%; height: 78%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  animation: floatSlow 7s var(--ease-in-out) infinite;
}
.hero-photo-frame{
  width:100%; height:100%;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(var(--accent),.35), transparent 60%),
    radial-gradient(120% 120% at 90% 90%, rgba(var(--accent-2),.35), transparent 60%),
    linear-gradient(160deg, rgba(var(--accent),.25), rgba(var(--accent-3),.2));
  display:flex; align-items:flex-end; justify-content:center;
  position: relative;
}
.hero-photo-frame .avatar-initials{
  font-family: var(--font-display);
  font-size: 8rem; font-weight:700;
  color: rgba(var(--ink), .12);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.hero-photo-frame img,
.about-photo img,
.project-thumb img,
.blog-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.testi-avatar img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit: cover;
}

.float-card{
  position:absolute;
  padding: 14px 18px;
  display:flex; align-items:center; gap: 12px;
  animation: floatSlow 6s var(--ease-in-out) infinite;
}
.float-card .fc-icon{
  width: 40px; height:40px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
  background: linear-gradient(135deg, rgba(var(--accent),.25), rgba(var(--accent-2),.25));
  color: rgb(var(--accent));
}
.float-card .fc-label{ font-size:.72rem; color: rgb(var(--ink-soft)); }
.float-card .fc-value{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; }
.card-experience{ top: -3%; right: -4%; animation-delay: -1s; }
.card-projects{ bottom: 8%; left: -8%; animation-delay: -3s; }
.card-availability{ bottom: -4%; right: 6%; animation-delay: -5s; }

@keyframes floatSlow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.hero-stats{ display:flex; gap: clamp(20px,4vw,52px); margin-top: 1rem; flex-wrap:wrap; }
.hero-stat .num{ font-family: var(--font-display); font-size: clamp(1.6rem,3vw,2.2rem); font-weight:700; }
.hero-stat .lbl{ font-size:.8rem; color: rgb(var(--ink-soft)); }

.scroll-cue{
  position:absolute; bottom: 28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; color: rgb(var(--ink-soft));
}
.scroll-cue .line{ width:1px; height: 34px; background: linear-gradient(rgb(var(--accent)), transparent); animation: scrollLine 1.8s infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.btn-aurora{
  --bx: 0px;
  position: relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 15px 30px;
  font-weight: 600; font-size:.92rem;
  border-radius: 100px;
  border: none;
  color: #fff;
  background: linear-gradient(120deg, rgb(var(--accent)), rgb(var(--accent-2)));
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
  box-shadow: 0 12px 30px -10px rgba(var(--accent),.55);
}
.btn-aurora:hover{ transform: translateY(-3px); color:#fff; box-shadow: 0 18px 36px -8px rgba(var(--accent),.6); }
.btn-aurora .ripple{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: rippleAnim .6s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3); opacity:0; } }

.btn-outline-aurora{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 14px 28px;
  font-weight:600; font-size:.92rem;
  border-radius:100px;
  border: 1px solid rgba(var(--border),.18);
  color: rgb(var(--ink));
  background: rgba(var(--bg-elevated),.4);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn-outline-aurora:hover{ border-color: rgba(var(--accent),.6); transform: translateY(-3px); color: rgb(var(--ink)); background: rgba(var(--accent),.06); }

.social-circle{
  width: 42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(var(--border),.15);
  color: rgb(var(--ink));
  transition: all var(--dur-fast) var(--ease-out);
}
.social-circle:hover{ background: rgb(var(--accent)); color:#fff; border-color: transparent; transform: translateY(-3px) rotate(-6deg); }

/* ---------------------------------------------------------------------- */
/* 8. ABOUT                                                                 */
/* ---------------------------------------------------------------------- */
.about-media{ position:relative; }
.about-photo{
  border-radius: var(--radius-xl);
  aspect-ratio: 4/5;
  background: linear-gradient(155deg, rgba(var(--accent),.28), rgba(var(--accent-3),.22));
  position:relative; overflow:hidden;
}
.about-photo .avatar-initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:6.5rem; color: rgba(var(--ink),.14); }
.about-badge{
  position:absolute; bottom: -22px; left: -22px;
  padding: 16px 20px;
  display:flex; align-items:center; gap:12px;
}
.about-badge .num{ font-family: var(--font-display); font-weight:700; font-size:1.6rem; }
.about-badge .lbl{ font-size:.72rem; color: rgb(var(--ink-soft)); max-width: 110px; line-height:1.3; }

.info-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.8rem 0; }
.info-item{ display:flex; align-items:center; gap:10px; font-size:.92rem; }
.info-item i{ color: rgb(var(--accent)); }
.info-item .lbl{ display:block; font-size:.72rem; color: rgb(var(--ink-soft)); }

/* ---------------------------------------------------------------------- */
/* 9. SERVICES                                                             */
/* ---------------------------------------------------------------------- */
.service-card{
  padding: 32px 26px;
  height: 100%;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.service-card:hover{ transform: translateY(-8px); }
.service-icon{
  width: 56px; height:56px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(var(--accent),.18), rgba(var(--accent-2),.14));
  color: rgb(var(--accent));
}
.service-card h3{ font-size: 1.15rem; margin-bottom: 10px; }
.service-card p{ color: rgb(var(--ink-soft)); font-size: .92rem; margin-bottom: 0; }
.service-index{ font-family: var(--font-mono); font-size:.72rem; color: rgb(var(--ink-soft)); position:absolute; top:22px; right:26px; }

/* ---------------------------------------------------------------------- */
/* 10. SKILLS                                                              */
/* ---------------------------------------------------------------------- */
.skill-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 2.4rem; }
.skill-tab{
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid rgba(var(--border),.14);
  font-size: .84rem; font-weight:600;
  color: rgb(var(--ink-soft));
  background: transparent;
  transition: all var(--dur-fast);
}
.skill-tab.active, .skill-tab:hover{ color:#fff; background: rgb(var(--accent)); border-color: transparent; }

.skill-bar-item{ margin-bottom: 22px; }
.skill-bar-top{ display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:8px; font-weight:600; }
.skill-bar-top .pct{ font-family: var(--font-mono); color: rgb(var(--accent)); }
.skill-bar-track{ height:8px; border-radius:100px; background: rgba(var(--border),.1); overflow:hidden; }
.skill-bar-fill{
  height:100%; border-radius:100px; width:0;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-2)));
  transition: width 1.4s var(--ease-out);
}

.skill-ring-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: 22px; }
.skill-ring{ text-align:center; padding: 24px 10px; }
.ring-svg{ width: 96px; height:96px; margin: 0 auto 12px; }
.ring-svg circle{ fill:none; stroke-width: 8; }
.ring-track{ stroke: rgba(var(--border),.12); }
.ring-fill{ stroke: rgb(var(--accent)); stroke-linecap:round; transition: stroke-dashoffset 1.6s var(--ease-out); }
.ring-label{ font-size:.82rem; font-weight:600; }

.contribution-graph{ display:grid; grid-template-columns: repeat(26,1fr); gap:4px; }
.contribution-graph .cell{ width:100%; aspect-ratio:1; border-radius:3px; background: rgba(var(--border),.08); }
.contribution-graph .cell[data-lvl="1"]{ background: rgba(var(--accent),.25); }
.contribution-graph .cell[data-lvl="2"]{ background: rgba(var(--accent),.5); }
.contribution-graph .cell[data-lvl="3"]{ background: rgba(var(--accent),.75); }
.contribution-graph .cell[data-lvl="4"]{ background: rgb(var(--accent)); }

/* ---------------------------------------------------------------------- */
/* 11. PORTFOLIO                                                           */
/* ---------------------------------------------------------------------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 2.6rem; }
.filter-btn{
  padding: 9px 18px; border-radius:100px; font-size:.84rem; font-weight:600;
  border:1px solid rgba(var(--border),.14); color: rgb(var(--ink-soft)); background:transparent;
  transition: all var(--dur-fast);
}
.filter-btn.active,.filter-btn:hover{ background: rgb(var(--ink)); color: rgb(var(--bg)); border-color: transparent; }

.project-card{ overflow:hidden; cursor:pointer; height:100%; }
.project-thumb{
  aspect-ratio: 4/3.1; position:relative; overflow:hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.project-thumb .thumb-fill{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1.6rem; color: rgba(255,255,255,.85);
  transition: transform .6s var(--ease-out);
}
.project-card:hover .thumb-fill{ transform: scale(1.08); }
.project-thumb .thumb-overlay{
  position:absolute; inset:0;
  background: rgba(10,8,20,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity var(--dur-fast) var(--ease-out);
}
.project-card:hover .thumb-overlay{ opacity:1; }
.thumb-overlay .view-btn{
  width:56px; height:56px; border-radius:50%;
  background:#fff; color:#111; display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  transform: scale(.7); transition: transform var(--dur-fast) var(--ease-out);
}
.project-card:hover .thumb-overlay .view-btn{ transform: scale(1); }
.project-body{ padding: 22px 24px; }
.project-body .cat{ font-family: var(--font-mono); font-size:.7rem; color: rgb(var(--accent)); text-transform:uppercase; letter-spacing:.08em; }
.project-body h3{ font-size: 1.15rem; margin: 6px 0 10px; }
.tech-badge{
  display:inline-block; font-size:.7rem; font-family:var(--font-mono);
  padding: 4px 10px; border-radius:100px; margin: 0 6px 6px 0;
  background: rgba(var(--border),.08); color: rgb(var(--ink-soft));
}

/* ---------------------------------------------------------------------- */
/* 12. RESUME                                                              */
/* ---------------------------------------------------------------------- */
.resume-tabs{ display:flex; gap:8px; margin-bottom: 2.4rem; flex-wrap:wrap; }
.timeline{ position:relative; padding-left: 34px; }
.timeline::before{ content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background: linear-gradient(rgba(var(--accent),.6), transparent); }
.timeline-item{ position:relative; padding-bottom: 34px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-34px; top:4px;
  width:13px; height:13px; border-radius:50%;
  background: rgb(var(--bg)); border: 2px solid rgb(var(--accent));
}
.timeline-date{ font-family: var(--font-mono); font-size:.74rem; color: rgb(var(--accent)); margin-bottom:6px; display:inline-block; }
.timeline-item h4{ font-size: 1.05rem; margin-bottom:4px; }
.timeline-item .org{ font-size:.86rem; color: rgb(var(--ink-soft)); margin-bottom:8px; }
.timeline-item p{ font-size:.9rem; color: rgb(var(--ink-soft)); margin:0; }

/* ---------------------------------------------------------------------- */
/* 13. STATS                                                               */
/* ---------------------------------------------------------------------- */
.stat-block{ text-align:center; padding: 34px 20px; }
.stat-block .num{ font-family: var(--font-display); font-weight:700; font-size: clamp(2.2rem,4vw,3.2rem); }
.stat-block .lbl{ color: rgb(var(--ink-soft)); font-size:.88rem; margin-top:6px; }

/* ---------------------------------------------------------------------- */
/* 14. TESTIMONIALS                                                        */
/* ---------------------------------------------------------------------- */
.testi-card{ padding: 40px; text-align:center; max-width: 720px; margin: 0 auto; }
.testi-avatar{
  width:64px; height:64px; border-radius:50%; margin: 0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#fff;
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-2)));
}
.testi-stars{ color:#FFB648; margin-bottom: 14px; font-size:.9rem; }
.testi-quote{ font-size: 1.15rem; font-family: var(--font-display); font-weight:500; margin-bottom: 20px; }
.testi-name{ font-weight:700; }
.testi-role{ font-size:.82rem; color: rgb(var(--ink-soft)); }
#testimonialCarousel .carousel-indicators{ position:static; margin-top: 24px; }
#testimonialCarousel .carousel-indicators [data-bs-target]{
  width:8px; height:8px; border-radius:50%; background: rgba(var(--border),.25); opacity:1; border:none;
}
#testimonialCarousel .carousel-indicators .active{ background: rgb(var(--accent)); width:22px; border-radius:100px; }

/* ---------------------------------------------------------------------- */
/* 15. PRICING                                                             */
/* ---------------------------------------------------------------------- */
.price-card{ padding: 36px 30px; height:100%; display:flex; flex-direction:column; }
.price-card.featured{ border: 1px solid rgba(var(--accent),.5); transform: scale(1.03); position:relative; }
.price-card .badge-pop{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: linear-gradient(120deg, rgb(var(--accent)), rgb(var(--accent-2)));
  color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em;
  padding: 6px 16px; border-radius:100px; text-transform:uppercase;
}
.price-name{ font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: rgb(var(--ink-soft)); }
.price-amount{ font-family: var(--font-display); font-weight:700; font-size: 2.6rem; margin: 10px 0 4px; }
.price-amount span{ font-size:1rem; font-weight:500; color: rgb(var(--ink-soft)); }
.price-feats{ margin: 24px 0; flex-grow:1; }
.price-feats li{ display:flex; align-items:center; gap:10px; font-size:.9rem; padding: 8px 0; border-bottom: 1px dashed rgba(var(--border),.1); }
.price-feats li i{ color: rgb(var(--accent-2)); }

/* ---------------------------------------------------------------------- */
/* 16. BLOG                                                                */
/* ---------------------------------------------------------------------- */
.blog-card{ overflow:hidden; height:100%; }
.blog-thumb{ aspect-ratio: 16/10; position:relative; }
.blog-thumb .thumb-fill{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.9); font-size:2rem; }
.blog-cat{
  position:absolute; top:16px; left:16px;
  background: rgba(255,255,255,.9); color:#111;
  font-size:.7rem; font-weight:700; padding: 5px 12px; border-radius:100px;
}
.blog-body{ padding: 22px 24px; }
.blog-meta{ font-size:.76rem; color: rgb(var(--ink-soft)); font-family: var(--font-mono); margin-bottom:10px; }
.blog-body h3{ font-size:1.08rem; margin-bottom: 12px; }
.read-more{ font-size:.86rem; font-weight:700; color: rgb(var(--accent)); display:inline-flex; align-items:center; gap:6px; }
.read-more i{ transition: transform var(--dur-fast) var(--ease-out); }
.blog-card:hover .read-more i{ transform: translateX(4px); }

/* ---------------------------------------------------------------------- */
/* 17. FAQ                                                                  */
/* ---------------------------------------------------------------------- */
.faq-accordion .accordion-item{
  background: rgba(var(--glass-bg), var(--glass-alpha));
  border: 1px solid rgba(var(--border), var(--border-alpha));
  border-radius: var(--radius-md) !important;
  margin-bottom: 14px;
  overflow:hidden;
}
.faq-accordion .accordion-button{
  background: transparent; color: rgb(var(--ink));
  font-family: var(--font-display); font-weight:600; font-size:1rem;
  padding: 22px 26px; box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){ color: rgb(var(--accent)); background: rgba(var(--accent),.06); }
.faq-accordion .accordion-button::after{ filter: none; }
.faq-accordion .accordion-body{ padding: 4px 26px 24px; color: rgb(var(--ink-soft)); font-size:.92rem; }

/* ---------------------------------------------------------------------- */
/* 18. CONTACT                                                             */
/* ---------------------------------------------------------------------- */
.contact-card{ padding: 40px; }
.form-control-aurora{
  width:100%; padding: 15px 18px;
  background: rgba(var(--border),.04);
  border: 1px solid rgba(var(--border),.14);
  border-radius: var(--radius-sm);
  color: rgb(var(--ink));
  font-size:.94rem;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.form-control-aurora:focus{ outline:none; border-color: rgb(var(--accent)); background: rgba(var(--accent),.05); }
.form-control-aurora::placeholder{ color: rgb(var(--ink-soft)); }
label.form-label-aurora{ font-size:.8rem; font-weight:600; margin-bottom:8px; display:block; }

.contact-info-item{ display:flex; gap:16px; align-items:flex-start; padding: 18px 0; border-bottom: 1px dashed rgba(var(--border),.12); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .cii-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(var(--accent),.12); color: rgb(var(--accent));
}
.map-placeholder{
  aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow:hidden; position:relative;
  background:
   linear-gradient(rgba(var(--border),.06) 1px, transparent 1px) 0 0/32px 32px,
   linear-gradient(90deg, rgba(var(--border),.06) 1px, transparent 1px) 0 0/32px 32px,
   linear-gradient(150deg, rgba(var(--accent),.12), rgba(var(--accent-2),.1));
}
.map-placeholder .pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  font-size:2rem; color: rgb(var(--accent-3));
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.25));
}

/* ---------------------------------------------------------------------- */
/* 19. FOOTER                                                              */
/* ---------------------------------------------------------------------- */
.site-footer{ padding-top: 80px; position:relative; overflow:hidden; }
.footer-cta{ padding: 60px; text-align:center; margin-bottom: 70px; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.footer-col h5{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom: 18px; color: rgb(var(--ink-soft)); }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col ul li a{ color: rgb(var(--ink-soft)); font-size:.92rem; transition: color var(--dur-fast); }
.footer-col ul li a:hover{ color: rgb(var(--accent)); }
.newsletter-form{ display:flex; gap:8px; margin-top: 14px; }
.newsletter-form input{ flex:1; padding: 12px 16px; border-radius:100px; border:1px solid rgba(var(--border),.15); background: transparent; color: rgb(var(--ink)); font-size:.86rem; }
.newsletter-form button{ width:44px; height:44px; border-radius:50%; border:none; background: rgb(var(--accent)); color:#fff; flex-shrink:0; }
.footer-bottom{ padding: 26px 0; border-top: 1px solid rgba(var(--border),.1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:.84rem; color: rgb(var(--ink-soft)); }

.back-to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all var(--dur-fast) var(--ease-out);
  color: rgb(var(--ink));
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ position:absolute; inset:0; transform: rotate(-90deg); }
.back-to-top svg circle{ fill:none; stroke: rgba(var(--accent),1); stroke-width:2; stroke-linecap:round; }

/* ---------------------------------------------------------------------- */
/* 20. COMMAND PALETTE                                                     */
/* ---------------------------------------------------------------------- */
.cmdk-overlay{
  position: fixed; inset:0; z-index: 1200;
  background: rgba(8,6,16,.55);
  backdrop-filter: blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 12vh;
  opacity:0; visibility:hidden; transition: opacity .25s, visibility .25s;
}
.cmdk-overlay.is-open{ opacity:1; visibility:visible; }
.cmdk-box{
  width: min(560px, 92vw);
  border-radius: var(--radius-md);
  overflow:hidden;
  transform: translateY(-10px) scale(.98);
  transition: transform .25s var(--ease-out);
}
.cmdk-overlay.is-open .cmdk-box{ transform: translateY(0) scale(1); }
.cmdk-input-wrap{ display:flex; align-items:center; gap:12px; padding: 18px 20px; border-bottom: 1px solid rgba(var(--border),.1); }
.cmdk-input-wrap input{ flex:1; background:transparent; border:none; outline:none; color: rgb(var(--ink)); font-size:1rem; }
.cmdk-kbd{ font-family: var(--font-mono); font-size:.7rem; padding:3px 7px; border-radius:6px; background: rgba(var(--border),.1); color: rgb(var(--ink-soft)); }
.cmdk-list{ max-height: 340px; overflow-y:auto; padding: 10px; }
.cmdk-item{ display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 10px; font-size:.92rem; cursor:pointer; }
.cmdk-item:hover, .cmdk-item.is-active{ background: rgba(var(--accent),.1); color: rgb(var(--accent)); }
.cmdk-item i{ width:18px; text-align:center; }
.cmdk-item .cmdk-hint{ margin-left:auto; font-size:.72rem; color: rgb(var(--ink-soft)); font-family: var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* 21. THEME CUSTOMIZER                                                    */
/* ---------------------------------------------------------------------- */
.customizer-toggle{
  position: fixed; top: 40%; right: 0; z-index: 950;
  writing-mode: vertical-rl;
  padding: 16px 10px;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(var(--border),.12);
  border-right:none;
  background: rgba(var(--glass-bg), .8);
  backdrop-filter: blur(10px);
  color: rgb(var(--ink));
  font-size:.78rem; font-weight:600; letter-spacing:.05em;
  display:flex; align-items:center; gap:8px;
}
.customizer-panel{
  position: fixed; top:0; right:0; height:100%; width: 300px; z-index: 1150;
  background: rgba(var(--glass-bg), .96);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(var(--border),.1);
  padding: 28px 24px;
  transform: translateX(100%);
  transition: transform .35s var(--ease-out);
  overflow-y: auto;
}
.customizer-panel.is-open{ transform: translateX(0); }
.customizer-panel h5{ font-size:1rem; margin-bottom: 4px; }
.customizer-panel .sub{ font-size:.8rem; color: rgb(var(--ink-soft)); margin-bottom: 24px; }
.swatch-row{ display:flex; gap:10px; margin-bottom: 24px; flex-wrap: wrap; }
.swatch{
  width: 34px; height:34px; border-radius:50%;
  border: 2px solid transparent;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem;
}
.swatch.is-active{ border-color: rgb(var(--ink)); }
.mode-row{ display:flex; gap:10px; }
.mode-opt{
  flex:1; padding: 14px 10px; text-align:center; border-radius: 12px;
  border: 1px solid rgba(var(--border),.14); font-size:.8rem; font-weight:600; cursor:pointer;
}
.mode-opt.is-active{ border-color: rgb(var(--accent)); color: rgb(var(--accent)); background: rgba(var(--accent),.08); }
.customizer-close{ position:absolute; top:20px; right:20px; background:none; border:none; color: rgb(var(--ink)); font-size:1.2rem; }

/* ---------------------------------------------------------------------- */
/* 22. MISC COMPONENTS                                                     */
/* ---------------------------------------------------------------------- */
.badge-soft{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 14px; border-radius:100px; font-size:.76rem; font-weight:600;
  background: rgba(var(--accent),.1); color: rgb(var(--accent));
}
.divider-dot{ width:4px; height:4px; border-radius:50%; background: rgba(var(--border),.3); }

.tools-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.tool-chip{
  aspect-ratio: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-size: 1.6rem; color: rgb(var(--ink-soft));
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.tool-chip span{ font-size:.68rem; font-weight:600; }
.tool-chip:hover{ color: rgb(var(--accent)); transform: translateY(-4px); }

.process-step{ position:relative; padding: 30px 26px; height:100%; }
.process-num{ font-family: var(--font-mono); font-size:.75rem; color: rgb(var(--accent)); margin-bottom:14px; display:block; }
.process-connector{ position:absolute; top:50%; right:-13%; width:26%; height:1px; background: repeating-linear-gradient(90deg, rgba(var(--accent),.4) 0 6px, transparent 6px 12px); }

/* Print styles */
@media print{
  .site-nav,.customizer-toggle,.customizer-panel,.back-to-top,.cmdk-overlay,.scroll-progress,.cursor-dot,.cursor-ring,.spotlight,.page-loader,#portfolio,#pricing,#blog,#contact,.site-footer,.aurora-mesh{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* Modal (project popup) tweaks */
.project-modal .modal-content{
  background: rgba(var(--glass-bg), .97);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--border),.1);
  border-radius: var(--radius-lg);
  color: rgb(var(--ink));
}
.project-modal .modal-header{ border-bottom: 1px solid rgba(var(--border),.1); padding: 24px 28px; }
.project-modal .modal-body{ padding: 28px; }
.project-modal .btn-close{ filter: none; }
[data-theme="dark"] .project-modal .btn-close{ filter: invert(1); }
.modal-hero-thumb{ border-radius: var(--radius-md); margin-bottom: 22px; overflow: hidden; position: relative; border: 1px solid rgba(var(--border),.15); box-shadow: 0 12px 32px rgba(0,0,0,.3); background: rgba(0,0,0,.2); }
.modal-hero-img{ width: 100%; height: 340px; object-fit: cover; object-position: top center; display: block; border-radius: var(--radius-md); transition: transform .3s ease; }
.modal-hero-thumb:hover .modal-hero-img{ transform: scale(1.02); }