/**
 * =============================================================================
 * FILE:        main.css
 * LOCATION:    /var/www/ki-cms.de/public_html/assets/css/main.css
 * FUNCTION:    Ultra-modern dark luxury stylesheet for KI-CMS.de.
 *              Aesthetic: Dark editorial × Electric amber × Glassmorphism
 *              Typography: DM Serif Display + Space Mono + Outfit
 * VERSION:     2.0.0
 * CREATED:     2025-02-22
 * AUTHOR:      KI-CMS Entwicklergemeinschaft
 * =============================================================================
 * CHANGELOG:
 * v2.0.0 – 2025-02-22 – Complete redesign: dark luxury editorial
 * v1.0.0 – 2025-02-22 – Initial warm cream design
 * =============================================================================
 */

/* 1. DESIGN TOKENS */
:root {
  --c-bg:         #080808;
  --c-surf:       #0e0e0e;
  --c-surf2:      #141414;
  --c-surf3:      #1c1c1c;
  --c-border:     rgba(255,255,255,.06);
  --c-border-hot: rgba(245,166,35,.3);
  --c-amber:      #f5a623;
  --c-amber-lt:   #ffc857;
  --c-amber-dim:  rgba(245,166,35,.1);
  --c-amber-glow: rgba(245,166,35,.25);
  --c-neon:       #00ffa3;
  --c-neon-dim:   rgba(0,255,163,.08);
  --c-text:       #f0ede8;
  --c-mid:        #8a8580;
  --c-dim:        #3a3833;
  --f-serif:      'DM Serif Display', Georgia, serif;
  --f-mono:       'Space Mono', 'Courier New', monospace;
  --f-body:       'Outfit', system-ui, sans-serif;
  --r-sm:   8px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px; --r-pill: 100px;
  --shadow-card:  0 1px 0 rgba(255,255,255,.04), 0 32px 64px rgba(0,0,0,.6);
  --shadow-amber: 0 0 40px rgba(245,166,35,.15);
  --bs-body-bg:         var(--c-bg);
  --bs-body-color:      var(--c-text);
  --bs-font-sans-serif: var(--f-body);
  --bs-border-color:    var(--c-border);
}

/* 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--c-bg)}
body{background:var(--c-bg);color:var(--c-text);font-family:var(--f-body);overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 15%,rgba(245,166,35,.04) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 85%,rgba(0,255,163,.03) 0%,transparent 60%)}
::selection{background:var(--c-amber);color:var(--c-bg)}
a{color:inherit}

/* 3. NOISE */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* 4. SCROLLBAR */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{background:var(--c-amber);border-radius:2px}

/* 5. TYPOGRAPHY */
h1,h2,h3,h4{font-family:var(--f-serif);font-weight:400;line-height:1.1}
.font-mono{font-family:var(--f-mono)}
.font-serif{font-family:var(--f-serif)}
.overline{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-amber)}
.overline-dim{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-mid)}
.headline-xl{font-family:var(--f-serif);font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.05;font-weight:400}
.headline-lg{font-family:var(--f-serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;font-weight:400}
.italic-accent{font-style:italic;color:var(--c-amber)}
.section-label{display:flex;align-items:center;gap:1rem;margin-bottom:3rem}
.section-label::before{content:'';display:block;width:40px;height:1px;background:var(--c-amber);flex-shrink:0}

/* 6. UTILITIES */
.text-amber{color:var(--c-amber)}.text-neon{color:var(--c-neon)}.text-mid{color:var(--c-mid)}.text-dim{color:var(--c-dim)}
.bg-surf{background:var(--c-surf)}.bg-surf2{background:var(--c-surf2)}
.section-py{padding-top:7rem;padding-bottom:7rem}
.section-py-sm{padding-top:5rem;padding-bottom:5rem}
.rule{border:none;border-top:1px solid var(--c-border);margin:0}
.tag-pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-amber);background:var(--c-amber-dim);
  border:1px solid var(--c-border-hot);border-radius:var(--r-pill);padding:.3rem .85rem}
.glass-card{background:rgba(255,255,255,.025);border:1px solid var(--c-border);border-radius:var(--r-xl);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-card);
  transition:border-color .3s,box-shadow .3s}
.glass-card:hover{border-color:rgba(245,166,35,.2);box-shadow:var(--shadow-card),var(--shadow-amber)}

/* 7. NAVBAR */
.kicms-nav{background:rgba(8,8,8,.65);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s;z-index:1050}
.kicms-nav.scrolled{background:rgba(8,8,8,.92);border-color:var(--c-border)}
.kicms-logo-mark{width:32px;height:32px;background:var(--c-amber);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.8rem;font-weight:700;color:var(--c-bg);flex-shrink:0}
.kicms-logo-text{font-family:var(--f-mono);font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--c-text)}
.kicms-nav .nav-link{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-mid)!important;transition:color .2s;padding:.5rem .75rem}
.kicms-nav .nav-link:hover{color:var(--c-text)!important}
.kicms-nav .nav-link.active{color:var(--c-amber)!important}
.navbar-toggler{border:1px solid var(--c-border)!important;color:var(--c-text);padding:.3rem .6rem;border-radius:var(--r-sm)!important}

/* 8. BUTTONS */
.btn-v3-primary{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.76rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-bg)!important;
  background:var(--c-amber);border:none;border-radius:var(--r-sm);padding:.85rem 1.75rem;
  text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s}
.btn-v3-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--c-amber-glow);color:var(--c-bg)!important}
.btn-v3-ghost{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.76rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-amber)!important;
  background:transparent;border:1px solid var(--c-border-hot);border-radius:var(--r-sm);padding:.85rem 1.75rem;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:all .2s}
.btn-v3-ghost:hover{background:var(--c-amber-dim);border-color:var(--c-amber);transform:translateY(-2px);color:var(--c-amber)!important}
.btn-v3-dark-ghost{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.76rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-mid)!important;
  background:transparent;border:1px solid var(--c-border);border-radius:var(--r-sm);padding:.85rem 1.75rem;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:all .2s}
.btn-v3-dark-ghost:hover{border-color:var(--c-border-hot);color:var(--c-amber)!important}

/* 9. HERO */
.hero-section{min-height:100svh;display:flex;align-items:center;padding-top:7rem;padding-bottom:5rem;
  position:relative;overflow:hidden}
.mesh-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mesh-blob{position:absolute;border-radius:50%;filter:blur(130px);opacity:.07;animation:blobFloat 22s ease-in-out infinite}
.mesh-blob-1{width:700px;height:700px;background:var(--c-amber);top:-20%;left:-15%;animation-delay:0s}
.mesh-blob-2{width:500px;height:500px;background:var(--c-neon);bottom:-20%;right:-10%;animation-delay:-11s}
.mesh-blob-3{width:350px;height:350px;background:var(--c-amber);top:40%;left:35%;animation-delay:-5.5s;opacity:.04}
.hero-bg-num{position:absolute;right:-3%;top:50%;transform:translateY(-50%);font-family:var(--f-mono);
  font-size:clamp(14rem,32vw,30rem);font-weight:700;line-height:1;color:rgba(245,166,35,.035);
  user-select:none;pointer-events:none;white-space:nowrap;letter-spacing:-.06em;z-index:0}
.hero-eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem}
.hero-eyebrow-line{width:36px;height:1px;background:var(--c-amber);flex-shrink:0}
.hero-h1{font-family:var(--f-serif);font-size:clamp(2.8rem,6.5vw,6rem);line-height:1.02;
  font-weight:400;margin-bottom:1.8rem;letter-spacing:-.025em}
.hero-h1 em{font-style:italic;color:var(--c-amber)}
.hero-lead{font-size:1rem;line-height:1.75;color:var(--c-mid);max-width:440px;margin-bottom:2.2rem}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}
.hero-stats{display:flex;gap:0;border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden}
.hero-stat{flex:1;padding:1.1rem 1.4rem;border-right:1px solid var(--c-border);transition:background .2s}
.hero-stat:last-child{border-right:none}
.hero-stat:hover{background:var(--c-surf2)}
.hero-stat-num{font-family:var(--f-mono);font-size:1.5rem;font-weight:700;color:var(--c-amber);
  line-height:1;margin-bottom:.2rem;letter-spacing:-.04em}
.hero-stat-lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-mid)}
.hero-contact-pill{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:.72rem;
  color:var(--c-mid);text-decoration:none;border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:.5rem .95rem;transition:all .2s;white-space:nowrap}
.hero-contact-pill:hover{border-color:var(--c-border-hot);color:var(--c-amber)}
.hero-contact-pill .bi{font-size:.8rem;color:var(--c-amber)}

/* 10. MOCKUP CARD */
.mockup-wrap{position:relative}
.mockup-card{background:rgba(14,14,14,.85);border:1px solid var(--c-border);border-radius:var(--r-xl);
  padding:1.8rem;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden}
.mockup-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-amber),transparent);opacity:.4}
.mockup-header{display:flex;align-items:center;gap:.7rem;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--c-border)}
.mockup-avatar{width:36px;height:36px;border-radius:var(--r-sm);background:var(--c-amber-dim);
  border:1px solid var(--c-border-hot);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.mockup-name-text{font-family:var(--f-mono);font-size:.76rem;font-weight:700;color:var(--c-text)}
.mockup-sub-text{font-family:var(--f-mono);font-size:.6rem;color:var(--c-mid);letter-spacing:.05em}
.mockup-status{margin-left:auto;display:flex;align-items:center;gap:.35rem;font-family:var(--f-mono);
  font-size:.62rem;color:var(--c-neon);background:var(--c-neon-dim);border:1px solid rgba(0,255,163,.12);
  border-radius:var(--r-pill);padding:.22rem .6rem;flex-shrink:0}
.status-dot{width:5px;height:5px;background:var(--c-neon);border-radius:50%;
  box-shadow:0 0 5px var(--c-neon);animation:pulse-neon 2s ease-in-out infinite}
.mockup-lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-mid);margin-bottom:.35rem;display:block}
.mockup-input{background:var(--c-surf3);border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:.8rem .9rem;margin-bottom:.8rem;transition:border-color .3s,box-shadow .3s}
.mockup-input.typing{border-color:var(--c-border-hot);box-shadow:0 0 0 3px var(--c-amber-dim)}
.mockup-prompt-text{font-family:var(--f-mono);font-size:.76rem;color:var(--c-mid);line-height:1.5;min-height:1.2em}
.type-cursor{display:inline-block;width:2px;height:.82em;background:var(--c-amber);vertical-align:text-bottom;
  margin-left:1px;border-radius:1px;box-shadow:0 0 5px var(--c-amber);animation:cursor-blink .7s step-end infinite}
.type-cursor.hidden{opacity:0;box-shadow:none}
.mockup-progress{height:2px;background:var(--c-surf3);border-radius:1px;margin-bottom:.8rem;overflow:hidden;display:none}
.mockup-progress.visible{display:block}
.mockup-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--c-amber),var(--c-amber-lt));
  box-shadow:0 0 8px var(--c-amber);transition:width .12s linear}
.mockup-thinking{display:none;align-items:center;gap:.6rem;background:var(--c-amber-dim);border:1px solid var(--c-border-hot);
  border-radius:var(--r-md);padding:.7rem .9rem;margin-bottom:.8rem}
.mockup-thinking.visible{display:flex}
.thinking-dots{display:flex;gap:4px;align-items:center}
.thinking-dots span{width:6px;height:6px;background:var(--c-amber);border-radius:50%;
  box-shadow:0 0 4px var(--c-amber);animation:thinking-bounce 1.1s ease-in-out infinite;opacity:.7}
.thinking-dots span:nth-child(2){animation-delay:.18s}
.thinking-dots span:nth-child(3){animation-delay:.36s}
.thinking-lbl{font-family:var(--f-mono);font-size:.68rem;color:var(--c-amber);letter-spacing:.05em}
.mockup-result{background:var(--c-surf2);border:1px solid var(--c-border);border-radius:var(--r-md);
  padding:.9rem;margin-bottom:.8rem;display:none;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.mockup-result.visible{display:block;opacity:1;transform:translateY(0)}
.mockup-result-lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-neon);margin-bottom:.35rem;display:block}
.mockup-result-text{font-family:var(--f-body);font-size:.8rem;color:var(--c-text);line-height:1.6;
  min-height:1.3em;white-space:pre-line}
.mockup-done-badge{display:none;align-items:center;gap:.35rem;font-family:var(--f-mono);font-size:.65rem;
  color:var(--c-neon);margin-top:.4rem;letter-spacing:.05em}
.mockup-done-badge.visible{display:flex;animation:pop-in .4s cubic-bezier(.175,.885,.32,1.275) both}
.mockup-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip-tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.28rem .65rem;border-radius:var(--r-sm);border:1px solid var(--c-border);color:var(--c-mid);background:transparent}
.chip-tag.active{background:var(--c-amber-dim);border-color:var(--c-border-hot);color:var(--c-amber)}
.float-badge{position:absolute;border-radius:var(--r-md);padding:.7rem .9rem;backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);animation:float-ud 5s ease-in-out infinite;z-index:10}
.float-badge-tl{top:-1rem;left:-1.2rem;background:rgba(0,255,163,.05);border:1px solid rgba(0,255,163,.12);
  font-family:var(--f-mono);font-size:.65rem;color:var(--c-neon);letter-spacing:.05em;
  animation-delay:2s;display:flex;align-items:center;gap:.35rem}
.float-badge-br{bottom:-1.1rem;right:-1.2rem;background:rgba(8,8,8,.92);border:1px solid var(--c-border);
  display:flex;align-items:center;gap:.7rem}
.float-badge-br .fnum{font-family:var(--f-mono);font-size:1.4rem;font-weight:700;color:var(--c-amber);
  letter-spacing:-.04em;line-height:1}
.float-badge-br .flbl{font-family:var(--f-mono);font-size:.58rem;color:var(--c-mid);text-transform:uppercase;letter-spacing:.1em}

/* 11. TRUST BAR */
.trust-bar{border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
  padding:1.2rem 0;background:var(--c-surf);overflow:hidden}
.trust-scroller{display:flex;align-items:center;gap:2.5rem;animation:scroll-left 28s linear infinite;width:max-content}
.trust-scroller:hover{animation-play-state:paused}
.trust-logo{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-dim);white-space:nowrap;transition:color .2s;flex-shrink:0;cursor:default}
.trust-logo:hover{color:var(--c-mid)}
.trust-sep{width:3px;height:3px;background:var(--c-dim);border-radius:50%;flex-shrink:0}

/* 12. FEATURES GRID */
.features-section{background:var(--c-bg);padding:7rem 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--r-xl);overflow:hidden}
.feature-cell{background:var(--c-surf);padding:2.5rem 2rem;position:relative;
  transition:opacity .5s,transform .5s,background .25s}
.body-ready .feature-cell{opacity:0;transform:translateY(16px)}
.body-ready .feature-cell.visible{opacity:1;transform:translateY(0)}
.feature-cell:hover{background:var(--c-surf2)}
.feature-num{font-family:var(--f-mono);font-size:.62rem;color:var(--c-dim);letter-spacing:.12em;
  margin-bottom:1.6rem;display:block;transition:color .25s}
.feature-cell:hover .feature-num{color:var(--c-amber)}
.feature-icon{font-size:1.8rem;margin-bottom:1rem;display:block;line-height:1;
  filter:grayscale(1) brightness(.6);transition:filter .25s}
.feature-cell:hover .feature-icon{filter:none}
.feature-title{font-family:var(--f-serif);font-size:1.25rem;font-weight:400;color:var(--c-text);
  margin-bottom:.6rem;line-height:1.2}
.feature-desc{font-size:.86rem;line-height:1.7;color:var(--c-mid)}
.feature-cell-wide{grid-column:span 2;background:var(--c-surf2);display:grid;
  grid-template-columns:1fr auto;gap:2rem;align-items:center;padding:2.5rem 2rem}
.feature-cell-wide .big-knum{font-family:var(--f-mono);font-size:clamp(4rem,7vw,7rem);font-weight:700;
  color:var(--c-amber);letter-spacing:-.06em;line-height:1;opacity:.15;flex-shrink:0;
  user-select:none;pointer-events:none}
.section-cta-row{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--c-border);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}

/* 13. MID CTA */
.mid-cta-strip{background:var(--c-surf);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:1.8rem 0}
.mid-cta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.mid-cta-text{font-size:.95rem;color:var(--c-mid)}.mid-cta-text strong{color:var(--c-text);font-weight:600}

/* 14. STEPS */
.steps-section{background:var(--c-bg);padding:7rem 0}
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--r-xl);overflow:hidden}
.step-cell{background:var(--c-surf);padding:2.5rem 1.8rem;
  transition:opacity .5s,transform .5s,background .2s}
.body-ready .step-cell{opacity:0;transform:translateY(16px)}
.body-ready .step-cell.visible{opacity:1;transform:translateY(0)}
.step-cell:hover{background:var(--c-surf2)}
.step-big-num{font-family:var(--f-mono);font-size:clamp(2.5rem,4vw,4rem);font-weight:700;
  letter-spacing:-.06em;color:var(--c-dim);line-height:1;margin-bottom:1.8rem;transition:color .2s}
.step-cell:hover .step-big-num{color:var(--c-amber)}
.step-title{font-family:var(--f-serif);font-size:1.1rem;font-weight:400;color:var(--c-text);
  margin-bottom:.5rem;line-height:1.3}
.step-desc{font-size:.82rem;color:var(--c-mid);line-height:1.65}

/* 15. TESTIMONIALS */
.testimonials-section{background:var(--c-surf);padding:7rem 0;border-top:1px solid var(--c-border)}
.testimonial-card{background:rgba(255,255,255,.018);border:1px solid var(--c-border);border-radius:var(--r-xl);
  padding:2rem;height:100%;position:relative;overflow:hidden;
  transition:opacity .5s,transform .5s,border-color .25s,box-shadow .25s}
.body-ready .testimonial-card{opacity:0;transform:translateY(16px)}
.testimonial-card::before{content:'"';position:absolute;top:.3rem;right:1.2rem;font-family:var(--f-serif);
  font-size:5.5rem;line-height:1;color:var(--c-amber);opacity:.05;pointer-events:none}
.testimonial-card.visible{opacity:1;transform:translateY(0)}
.testimonial-card:hover{border-color:rgba(245,166,35,.2);box-shadow:var(--shadow-amber)}
.testimonial-stars{font-size:.68rem;color:var(--c-amber);letter-spacing:2px;margin-bottom:.9rem}
.testimonial-text{font-size:.92rem;line-height:1.7;color:var(--c-mid);margin-bottom:1.4rem;font-style:italic}
.testimonial-name{font-family:var(--f-mono);font-size:.75rem;font-weight:700;color:var(--c-text);letter-spacing:.03em}
.testimonial-role{font-family:var(--f-mono);font-size:.62rem;color:var(--c-mid);letter-spacing:.08em;text-transform:uppercase}

/* 16. CUSTOM */
.custom-section{background:var(--c-surf);padding:7rem 0;border-top:1px solid var(--c-border)}
.custom-example{display:flex;align-items:flex-start;gap:.9rem;padding:1rem 1.1rem;
  border:1px solid var(--c-border);border-radius:var(--r-md);margin-bottom:.55rem;transition:all .2s}
.custom-example:last-child{margin-bottom:0}
.custom-example:hover{border-color:var(--c-border-hot);background:var(--c-amber-dim)}
.custom-ex-icon{font-size:1.25rem;flex-shrink:0;margin-top:.1rem}
.custom-ex-title{font-family:var(--f-mono);font-size:.76rem;font-weight:700;color:var(--c-text);
  display:block;margin-bottom:.15rem;letter-spacing:.02em}
.custom-ex-desc{font-size:.78rem;color:var(--c-mid);line-height:1.5}
.project-card{background:var(--c-surf2);border:1px solid var(--c-border);border-radius:var(--r-xl);
  padding:2rem;position:relative;overflow:hidden}
.project-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-amber),transparent);opacity:.5}
.project-step{display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-bottom:1px solid var(--c-border);
  font-family:var(--f-mono);font-size:.76rem;color:var(--c-mid)}
.project-step:last-child{border-bottom:none}
.project-step.done{color:var(--c-neon)}.project-step.active{color:var(--c-amber);font-weight:700}
.project-quote{font-size:.83rem;line-height:1.6;color:var(--c-mid);font-style:italic;
  padding-left:1rem;border-left:2px solid var(--c-amber);margin-bottom:1.4rem}

/* 17. FAQ */
.faq-section{background:var(--c-bg);padding:7rem 0;border-top:1px solid var(--c-border)}
.kicms-accordion .accordion-item{background:transparent;border:none!important;
  border-bottom:1px solid var(--c-border)!important;border-radius:0!important;margin:0}
.kicms-accordion .accordion-button{background:transparent!important;color:var(--c-text)!important;
  font-family:var(--f-serif);font-size:1rem;font-weight:400;box-shadow:none!important;
  padding:1.3rem 0;border-radius:0!important;transition:color .2s}
.kicms-accordion .accordion-button:not(.collapsed){color:var(--c-amber)!important}
.kicms-accordion .accordion-button::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23f5a623' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");transition:transform .3s}
.kicms-accordion .accordion-body{background:transparent;color:var(--c-mid);font-size:.9rem;line-height:1.7;padding:0 0 1.4rem}

/* 18. CONTACT */
.contact-section{background:var(--c-surf);padding:7rem 0;border-top:1px solid var(--c-border)}
.contact-method{display:flex;align-items:center;gap:1.1rem;padding:1.4rem;background:var(--c-surf2);
  border:1px solid var(--c-border);border-radius:var(--r-lg);text-decoration:none;color:inherit;
  margin-bottom:.7rem;transition:border-color .25s,transform .2s;position:relative;overflow:hidden}
.contact-method::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--c-amber-dim),transparent);
  opacity:0;transition:opacity .25s}
.contact-method:last-child{margin-bottom:0}
.contact-method:hover{border-color:var(--c-border-hot);transform:translateX(4px);color:inherit}
.contact-method:hover::before{opacity:1}
.contact-method-icon{width:50px;height:50px;border-radius:var(--r-md);background:var(--c-amber-dim);
  border:1px solid var(--c-border-hot);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.contact-method-lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-mid);display:block;margin-bottom:.15rem}
.contact-method-val{font-family:var(--f-mono);font-size:.95rem;font-weight:700;color:var(--c-text);display:block;margin-bottom:.12rem}
.contact-method-hint{font-family:var(--f-mono);font-size:.62rem;color:var(--c-mid);display:block}
.contact-method-arrow{margin-left:auto;font-size:1.1rem;color:var(--c-amber);flex-shrink:0;transition:transform .2s}
.contact-method:hover .contact-method-arrow{transform:translateX(4px)}
.contact-trust{display:flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:.68rem;
  color:var(--c-neon);margin-top:.9rem;letter-spacing:.04em}
.contact-faq-card{background:var(--c-surf2);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:2rem;height:100%}
.contact-faq-title{font-family:var(--f-serif);font-size:1.15rem;font-weight:400;color:var(--c-text);
  margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--c-border)}
.faq-q{font-family:var(--f-mono);font-size:.76rem;font-weight:700;color:var(--c-text);margin-bottom:.25rem;letter-spacing:.02em}
.faq-a{font-size:.82rem;line-height:1.6;color:var(--c-mid);margin-bottom:1.1rem}

/* 19. FINAL CTA */
.final-cta{background:var(--c-surf);border-top:1px solid var(--c-border);padding:5rem 0;position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(245,166,35,.05) 0%,transparent 70%);pointer-events:none}

/* 20. FOOTER */
.kicms-footer{background:var(--c-surf);border-top:1px solid var(--c-border);padding:4rem 0 2rem}
.footer-logo-text{font-family:var(--f-mono);font-size:.85rem;font-weight:700;color:var(--c-text);letter-spacing:.06em}
.footer-heading{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-mid);margin-bottom:1.1rem}
.footer-link{font-family:var(--f-mono);font-size:.72rem;color:var(--c-mid);text-decoration:none;
  letter-spacing:.03em;transition:color .2s;display:block;padding:.18rem 0}
.footer-link:hover{color:var(--c-amber)}
.footer-bottom{border-top:1px solid var(--c-border);margin-top:2.5rem;padding-top:1.3rem}
.footer-copy{font-family:var(--f-mono);font-size:.65rem;color:var(--c-dim);letter-spacing:.04em}
.footer-contact-link{font-family:var(--f-mono);font-size:.72rem;color:var(--c-mid);text-decoration:none;
  display:flex;align-items:center;gap:.4rem;transition:color .2s}
.footer-contact-link:hover{color:var(--c-amber)}
.footer-contact-link .bi{color:var(--c-amber);font-size:.78rem}

/* 21. KEYFRAMES */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.anim-0{animation:fadeUp .8s ease both}
.anim-1{animation:fadeUp .8s .12s ease both}
.anim-2{animation:fadeUp .8s .24s ease both}
.anim-3{animation:fadeUp .8s .36s ease both}
.anim-4{animation:fadeUp .8s .48s ease both}
.anim-5{animation:fadeUp .8s .60s ease both}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes float-ud{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse-neon{0%,100%{box-shadow:0 0 5px var(--c-neon)}50%{box-shadow:0 0 12px var(--c-neon)}}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes thinking-bounce{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1.2);opacity:1}}
@keyframes pop-in{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* 22. RESPONSIVE */
@media(max-width:991.98px){
  .hero-bg-num,.float-badge-tl,.float-badge-br{display:none}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .feature-cell-wide{grid-column:span 2;flex-direction:column;gap:1rem}
  .steps-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767.98px){
  .feature-grid{grid-template-columns:1fr}
  .feature-cell-wide{grid-column:span 1}
  .steps-row{grid-template-columns:1fr}
  .hero-stats{flex-direction:column}
  .hero-stat{border-right:none;border-bottom:1px solid var(--c-border)}
  .hero-stat:last-child{border-bottom:none}
  .mid-cta-inner{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =============================================================================
 * ADDITIONS v4.0.0 – Image integration & whitespace reduction
 * =============================================================================
 *
 * FILE:        main.css (appended)
 * VERSION:     2.1.0
 * CREATED:     2025-02-22
 * CHANGELOG:
 *   v2.1.0 – Added image sections, reduced large padding gaps,
 *            hero-img panel, steps-img panel, contact team photo,
 *            feature image previews, testimonial avatars with photos,
 *            custom-projects illustration, final-cta background image.
 * =============================================================================
 */

/* ── Section padding tightened ────────────────────────────────────────────── */
.section-py         { padding-top: 5rem; padding-bottom: 5rem; }
.features-section,
.steps-section,
.testimonials-section,
.custom-section,
.faq-section,
.contact-section    { padding-top: 5rem; padding-bottom: 5rem; }

/* ── Hero image panel ─────────────────────────────────────────────────────── */
.hero-img-panel {
  position:      relative;
  border-radius: var(--r-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-card), 0 0 80px rgba(245,166,35,.08);
  border:        1px solid var(--c-border);
}

.hero-img-panel img {
  width:      100%;
  display:    block;
  object-fit: cover;
  filter:     brightness(.85) saturate(.9);
  transition: filter .4s ease;
}

.hero-img-panel:hover img { filter: brightness(.95) saturate(1); }

/* Amber line on top */
.hero-img-panel::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, transparent, var(--c-amber), transparent);
  z-index:    2;
}

/* Overlay label bottom-left */
.hero-img-badge {
  position:      absolute;
  bottom:        1.2rem;
  left:          1.2rem;
  background:    rgba(8,8,8,.82);
  backdrop-filter: blur(16px);
  border:        1px solid var(--c-border);
  border-radius: var(--r-md);
  padding:       .6rem 1rem;
  display:       flex;
  align-items:   center;
  gap:           .6rem;
  font-family:   var(--f-mono);
  font-size:     .7rem;
  color:         var(--c-text);
  z-index:       3;
}

.hero-img-badge-dot {
  width:      8px;
  height:     8px;
  background: var(--c-neon);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c-neon);
  flex-shrink: 0;
  animation:  pulse-neon 2s ease-in-out infinite;
}

/* ── Steps illustration panel ─────────────────────────────────────────────── */
.steps-img-wrap {
  position:      relative;
  border-radius: var(--r-xl);
  overflow:      hidden;
  border:        1px solid var(--c-border);
  margin-top:    2.5rem;
}

.steps-img-wrap img {
  width:      100%;
  display:    block;
  object-fit: cover;
  max-height: 340px;
  filter:     brightness(.7) saturate(.8);
}

.steps-img-wrap::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(8,8,8,.85) 0%, transparent 60%);
}

.steps-img-caption {
  position:   absolute;
  bottom:     1.5rem;
  left:       1.8rem;
  right:      1.8rem;
  z-index:    2;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        1rem;
}

/* ── Testimonial avatar photo ─────────────────────────────────────────────── */
.testimonial-avatar {
  width:         52px;
  height:        52px;
  border-radius: var(--r-md);
  overflow:      hidden;
  flex-shrink:   0;
  border:        1px solid var(--c-border);
}

.testimonial-avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  filter:     saturate(.7) brightness(.9);
}

/* ── Custom projects illustration ─────────────────────────────────────────── */
.custom-img-wrap {
  position:      relative;
  border-radius: var(--r-xl);
  overflow:      hidden;
  border:        1px solid var(--c-border);
  margin-bottom: 2rem;
}

.custom-img-wrap img {
  width:      100%;
  display:    block;
  object-fit: cover;
  max-height: 220px;
  filter:     brightness(.65) saturate(.7);
}

.custom-img-wrap::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(245,166,35,.08) 0%, transparent 60%);
}

/* ── Contact team photo ───────────────────────────────────────────────────── */
.contact-team-photo {
  position:      relative;
  border-radius: var(--r-xl);
  overflow:      hidden;
  border:        1px solid var(--c-border);
  margin-bottom: 1.5rem;
}

.contact-team-photo img {
  width:      100%;
  display:    block;
  object-fit: cover;
  max-height: 200px;
  filter:     brightness(.7) saturate(.6);
}

.contact-team-photo::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to right, rgba(8,8,8,.5) 0%, transparent 70%);
}

.contact-team-badge {
  position:   absolute;
  top:        1rem;
  left:       1rem;
  z-index:    2;
  font-family: var(--f-mono);
  font-size:  .65rem;
  color:      var(--c-neon);
  background: rgba(0,255,163,.08);
  border:     1px solid rgba(0,255,163,.15);
  border-radius: var(--r-sm);
  padding:    .3rem .65rem;
  letter-spacing: .08em;
  display:    flex;
  align-items: center;
  gap:        .35rem;
}

/* ── Final CTA with background image ──────────────────────────────────────── */
.final-cta-img {
  position:   absolute;
  inset:      0;
  z-index:    0;
  overflow:   hidden;
}

.final-cta-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     brightness(.15) saturate(.4);
}

.final-cta-img::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.4) 100%);
}

/* ── Feature image — always visible ──────────────────────────────────────── */
.feature-cell-img {
  width:         100%;
  border-radius: var(--r-sm);
  overflow:      hidden;
  margin-bottom: 1.2rem;
  border:        1px solid var(--c-border);
  opacity:       .45;
  transition:    opacity .3s ease;
}

.feature-cell:hover .feature-cell-img {
  opacity: .75;
}

.feature-cell-img img {
  width:      100%;
  object-fit: cover;
  height:     130px;
  display:    block;
  filter:     brightness(.65) saturate(.5);
  transition: filter .3s ease;
}

.feature-cell:hover .feature-cell-img img {
  filter: brightness(.85) saturate(.7);
}


/* =============================================================================
 * FIX v4.1 – feature-cell-wide: fill empty space with image bg + stats row
 * =============================================================================
 */

/* Wide cell: rich layout with image background */
.feature-cell-wide {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.feature-wide-img {
  position:   absolute;
  inset:      0;
  z-index:    0;
}

.feature-wide-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  filter:     brightness(.3) saturate(.4);
}

.feature-wide-img::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(8,8,8,.8) 40%, rgba(8,8,8,.3) 100%);
}

.feature-wide-content {
  position: relative;
  z-index:  1;
  flex:     1;
}

/* Stats row inside wide cell */
.feature-wide-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            rgba(255,255,255,.06);
  border:                1px solid rgba(255,255,255,.06);
  border-radius:         var(--r-md);
  overflow:              hidden;
  margin-top:            1.2rem;
}

.feature-wide-stat {
  background: rgba(255,255,255,.03);
  padding:    .9rem 1rem;
  text-align: center;
}

.feature-wide-stat-num {
  font-family:    var(--f-mono);
  font-size:      1.4rem;
  font-weight:    700;
  color:          var(--c-amber);
  letter-spacing: -.04em;
  line-height:    1;
  margin-bottom:  .2rem;
}

.feature-wide-stat-lbl {
  font-family:    var(--f-mono);
  font-size:      .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--c-mid);
}

/* Big decorative number — repositioned as subtle overlay */
.feature-cell-wide .big-knum {
  position:       absolute;
  right:          1.5rem;
  bottom:         1rem;
  font-family:    var(--f-mono);
  font-size:      clamp(5rem, 10vw, 9rem);
  font-weight:    700;
  color:          var(--c-amber);
  letter-spacing: -.06em;
  line-height:    1;
  opacity:        .08;
  user-select:    none;
  pointer-events: none;
  z-index:        1;
}


/* =============================================================================
 * NAVBAR v4.2 – Custom hamburger + right-side offcanvas drawer
 * =============================================================================
 */

/* ── Navbar bar ───────────────────────────────────────────────────────────── */
.kicms-nav {
  background:      rgba(8,8,8,.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom:   1px solid transparent;
  transition:      border-color .4s ease, background .4s ease;
  z-index:         1050;
}

.kicms-nav.scrolled {
  background:   rgba(8,8,8,.94);
  border-color: var(--c-border);
}

/* ── Hamburger button ─────────────────────────────────────────────────────── */
.nav-hamburger {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           40px;
  height:          40px;
  background:      transparent;
  border:          1px solid var(--c-border);
  border-radius:   var(--r-sm);
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
  transition:      border-color .2s ease;
}

.nav-hamburger:hover { border-color: var(--c-border-hot); }

.ham-line {
  display:       block;
  width:         18px;
  height:        1.5px;
  background:    var(--c-text);
  border-radius: 1px;
  transition:    transform .35s cubic-bezier(.23,1,.32,1),
                 opacity   .25s ease,
                 width     .3s ease;
  transform-origin: center;
}

/* X state when open */
.nav-hamburger.is-open .ham-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open .ham-line:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.is-open .ham-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-hamburger.is-open { border-color: var(--c-border-hot); }

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.nav-drawer-backdrop {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:    1059;
  opacity:    0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.nav-drawer.is-open .nav-drawer-backdrop {
  opacity:        1;
  pointer-events: all;
}

/* ── Drawer panel ─────────────────────────────────────────────────────────── */
.nav-drawer-panel {
  position:      fixed;
  top:           0;
  right:         0;
  bottom:        0;
  width:         min(360px, 90vw);
  background:    var(--c-surf);
  border-left:   1px solid var(--c-border);
  z-index:       1060;
  display:       flex;
  flex-direction: column;
  transform:     translateX(100%);
  transition:    transform .4s cubic-bezier(.23,1,.32,1);
  overflow-y:    auto;
  overscroll-behavior: contain;
}

.nav-drawer.is-open .nav-drawer-panel {
  transform: translateX(0);
}

/* Amber glow line on left edge */
.nav-drawer-panel::before {
  content:    '';
  position:   absolute;
  top:        0; bottom: 0; left: 0;
  width:      1px;
  background: linear-gradient(to bottom, transparent, var(--c-amber), transparent);
  opacity:    .4;
}

/* ── Drawer header ────────────────────────────────────────────────────────── */
.nav-drawer-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.2rem 1.5rem;
  border-bottom:   1px solid var(--c-border);
  flex-shrink:     0;
}

.nav-drawer-close {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--c-surf2);
  border:          1px solid var(--c-border);
  border-radius:   var(--r-sm);
  color:           var(--c-mid);
  font-size:       1rem;
  cursor:          pointer;
  transition:      all .2s ease;
  flex-shrink:     0;
}

.nav-drawer-close:hover {
  border-color: var(--c-border-hot);
  color:        var(--c-amber);
}

/* ── Drawer nav links ─────────────────────────────────────────────────────── */
.nav-drawer-nav {
  display:       flex;
  flex-direction: column;
  padding:       .75rem 0;
  border-bottom: 1px solid var(--c-border);
  flex-shrink:   0;
}

.drawer-link {
  display:         flex;
  align-items:     center;
  gap:             1rem;
  padding:         .9rem 1.5rem;
  font-family:     var(--f-mono);
  font-size:       .88rem;
  color:           var(--c-mid);
  text-decoration: none;
  letter-spacing:  .02em;
  transition:      color .2s ease, background .2s ease, padding-left .2s ease;
  position:        relative;
  overflow:        hidden;
}

.drawer-link::before {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      2px;
  background: var(--c-amber);
  transform:  scaleY(0);
  transition: transform .25s ease;
}

.drawer-link:hover {
  color:        var(--c-text);
  background:   var(--c-surf2);
  padding-left: 1.75rem;
}

.drawer-link:hover::before { transform: scaleY(1); }

/* Staggered animation when drawer opens */
.nav-drawer.is-open .drawer-link {
  animation: drawerLinkSlide .4s ease both;
}
.nav-drawer.is-open .drawer-link:nth-child(1) { animation-delay: .05s; }
.nav-drawer.is-open .drawer-link:nth-child(2) { animation-delay: .10s; }
.nav-drawer.is-open .drawer-link:nth-child(3) { animation-delay: .15s; }
.nav-drawer.is-open .drawer-link:nth-child(4) { animation-delay: .20s; }
.nav-drawer.is-open .drawer-link:nth-child(5) { animation-delay: .25s; }

@keyframes drawerLinkSlide {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.drawer-link-num {
  font-size:      .6rem;
  color:          var(--c-dim);
  letter-spacing: .1em;
  width:          20px;
  flex-shrink:    0;
}

.drawer-link-arrow {
  margin-left:  auto;
  font-size:    .75rem;
  color:        var(--c-dim);
  transition:   transform .2s ease, color .2s ease;
}

.drawer-link:hover .drawer-link-arrow {
  transform: translateX(3px);
  color:     var(--c-amber);
}

/* ── Drawer contact block ─────────────────────────────────────────────────── */
.nav-drawer-contact {
  padding:    1.5rem;
  flex:       1;
}

.drawer-contact-label {
  font-family:    var(--f-mono);
  font-size:      .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--c-mid);
  margin-bottom:  1rem;
}

.drawer-contact-method {
  display:         flex;
  align-items:     center;
  gap:             .9rem;
  padding:         .9rem 1rem;
  background:      var(--c-surf2);
  border:          1px solid var(--c-border);
  border-radius:   var(--r-md);
  text-decoration: none;
  color:           inherit;
  margin-bottom:   .6rem;
  transition:      border-color .2s ease, transform .2s ease;
  position:        relative;
  overflow:        hidden;
}

.drawer-contact-method::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, var(--c-amber-dim), transparent);
  opacity:    0;
  transition: opacity .2s ease;
}

.drawer-contact-method:hover {
  border-color: var(--c-border-hot);
  transform:    translateX(3px);
  color:        inherit;
}

.drawer-contact-method:hover::before { opacity: 1; }

.drawer-contact-icon {
  width:           42px;
  height:          42px;
  background:      var(--c-amber-dim);
  border:          1px solid var(--c-border-hot);
  border-radius:   var(--r-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--c-amber);
  font-size:       1rem;
  flex-shrink:     0;
}

.drawer-contact-type {
  font-family:    var(--f-mono);
  font-size:      .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--c-mid);
  margin-bottom:  .15rem;
}

.drawer-contact-value {
  font-family:   var(--f-mono);
  font-size:     .78rem;
  font-weight:   700;
  color:         var(--c-text);
  margin-bottom: .1rem;
  position:      relative;
  z-index:       1;
}

.drawer-contact-hint {
  font-family: var(--f-mono);
  font-size:   .58rem;
  color:       var(--c-mid);
  position:    relative;
  z-index:     1;
}

/* ── Drawer footer ────────────────────────────────────────────────────────── */
.nav-drawer-footer {
  padding:        1rem 1.5rem;
  border-top:     1px solid var(--c-border);
  font-family:    var(--f-mono);
  font-size:      .65rem;
  color:          var(--c-dim);
  letter-spacing: .06em;
  display:        flex;
  align-items:    center;
  gap:            .5rem;
  flex-shrink:    0;
}

/* ── Prevent body scroll when drawer is open ──────────────────────────────── */
body.drawer-open {
  overflow: hidden;
}