/* ============================================================
   DAANKLUST — style.css
   Exact zwarte layout behouden.
   Modal uitgebreid: echte fotogalerij + stappen-tijdlijn.
   ============================================================ */

:root {
  --bg:          #0f0c08;
  --bg-2:        #141008;
  --bg-card:     #1a1409;
  --bg-modal:    #120f07;
  --white:       #f5ede0;
  --white-dim:   rgba(245,237,224,0.55);
  --orange:      #f07020;
  --orange-b:    #ff8c3a;
  --amber:       #e8a020;
  --green:       #4caf7a;
  --red:         #FF0000;
  --gray:         gray;
  --blue:         blue;
  --orange-dim:  rgba(240,112,32,0.13);
  --orange-glow: rgba(240,112,32,0.38);
  --border:      rgba(240,112,32,0.18);
  --border-h:    rgba(240,112,32,0.52);
  --font-d:      'Bebas Neue',      cursive;
  --font-m:      'Share Tech Mono', monospace;
  --font-b:      'DM Sans',         sans-serif;
  --nav-h:       70px;
  --r:           4px;
  --ease:        0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--white); font-family:var(--font-b); font-size:16px; line-height:1.7; overflow-x:hidden }
::selection { background:var(--orange-dim); color:var(--orange-b) }
a { text-decoration:none; color:inherit }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:2px }

/* ── BUTTONS ─────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px; padding:13px 30px;
  background:var(--orange); color:#fff; font-family:var(--font-b);
  font-size:.88rem; font-weight:700; border:none; border-radius:var(--r);
  cursor:pointer; transition:var(--ease); box-shadow:0 0 22px var(--orange-glow);
}
.btn-primary:hover { background:var(--orange-b); box-shadow:0 0 36px var(--orange-glow); transform:translateY(-2px) }
.btn-primary.btn-full { width:100%; justify-content:center }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px; padding:13px 30px;
  background:transparent; color:var(--orange); font-family:var(--font-b);
  font-size:.88rem; font-weight:600; border:1px solid var(--border-h); border-radius:var(--r);
  cursor:pointer; transition:var(--ease);
}
.btn-ghost:hover { background:var(--orange-dim); border-color:var(--orange); transform:translateY(-2px) }
.btn-ghost.btn-full { width:100%; justify-content:center }

/* ── SECTION SHARED ──────────────────────────────── */
.section-header { text-align:center; margin-bottom:60px }
.section-tag { font-family:var(--font-m); font-size:.78rem; color:var(--amber); letter-spacing:.18em; margin-bottom:8px }
.section-title { font-family:var(--font-d); font-size:clamp(2.4rem,5.5vw,3.8rem); letter-spacing:.05em; line-height:1 }
.section-title .accent, .accent { color:var(--orange) }
.section-line { width:56px; height:3px; background:var(--orange); margin:14px auto 0; box-shadow:0 0 12px var(--orange-glow) }
.section-hint { margin-top:12px; font-family:var(--font-m); font-size:.7rem; color:var(--white-dim); letter-spacing:.08em }

/* ═══════════════════════════════════════════════════
   COOKIE POPUP
═══════════════════════════════════════════════════ */
.cookie-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px); z-index:9998;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.cookie-overlay.visible { opacity:1; pointer-events:all }

.cookie-popup {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(20px);
  width:min(500px,92vw); background:var(--bg-card);
  border:1px solid var(--border-h); border-radius:10px;
  padding:36px 40px; z-index:9999;
  box-shadow:0 0 60px rgba(240,112,32,.22), 0 30px 80px rgba(0,0,0,.65);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.cookie-popup.visible { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0) }
.cookie-inner { text-align:center }
.cookie-icon { font-size:2.6rem; display:block; margin-bottom:12px }
.cookie-popup h3 { font-family:var(--font-d); font-size:1.5rem; letter-spacing:.1em; margin-bottom:10px }
.cookie-popup p { font-size:.88rem; color:var(--white-dim); margin-bottom:24px; line-height:1.6 }
.cookie-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ═══════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  background:rgba(15,12,8,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); transition:var(--ease);
}
#navbar.scrolled { box-shadow:0 0 28px rgba(240,112,32,.12); border-bottom-color:var(--border-h) }
.nav-container { max-width:1200px; margin:0 auto; height:100%; padding:0 36px; display:flex; align-items:center; justify-content:space-between; gap:20px }
.nav-logo { display:flex; align-items:center; gap:8px; font-family:var(--font-d); font-size:1.3rem; letter-spacing:.1em }
.logo-text em { color:var(--orange); font-style:normal }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:var(--ease) }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center }
.nav-link { font-family:var(--font-m); font-size:.72rem; letter-spacing:.16em; color:var(--white-dim); transition:var(--ease); position:relative; padding-bottom:4px }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--orange); transition:var(--ease) }
.nav-link:hover, .nav-link.active { color:var(--orange) }
.nav-link:hover::after, .nav-link.active::after { width:100% }
.nav-cta-btn { font-family:var(--font-m); font-size:.72rem; letter-spacing:.12em; background:var(--orange); color:#fff; padding:8px 18px; border-radius:var(--r); transition:var(--ease) }
.nav-cta-btn:hover { background:var(--orange-b); box-shadow:0 0 18px var(--orange-glow) }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero {
  min-height:100vh; padding-top:var(--nav-h);
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  max-width:1200px; margin:0 auto; padding-left:36px; padding-right:36px;
  position:relative; overflow:hidden;
}
.hero-tape {
  position:absolute; top:var(--nav-h); left:-100vw; right:-100vw;
  background:var(--orange); color:#000;
  font-family:var(--font-m); font-size:.72rem; letter-spacing:.18em;
  padding:7px 0; white-space:nowrap;
  animation:tape-scroll 22s linear infinite; z-index:2;
}
@keyframes tape-scroll { from{transform:translateX(0)} to{transform:translateX(50%)} }
.hero-content { z-index:1; padding-top:48px }
.hero-tag { font-family:var(--font-m); font-size:.75rem; color:var(--amber); letter-spacing:.12em; margin-bottom:18px; opacity:0; animation:slideIn .7s .7s forwards }
.hero-title { display:flex; flex-direction:column; font-family:var(--font-d); font-size:clamp(3.5rem,8vw,6rem); line-height:.95; letter-spacing:.03em; margin-bottom:22px }
.title-line { opacity:0; animation:slideIn .7s forwards }
.title-line:nth-child(1) { animation-delay:.9s }
.title-line:nth-child(2) { animation-delay:1.05s }
.title-line.accent { color:var(--orange); text-shadow:0 0 40px var(--orange-glow) }
.hero-subtitle { font-size:1rem; color:var(--white-dim); max-width:420px; margin-bottom:32px; opacity:0; animation:slideIn .7s 1.2s forwards }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:50px; opacity:0; animation:slideIn .7s 1.4s forwards }
.hero-stats { display:flex; align-items:center; gap:22px; opacity:0; animation:slideIn .7s 1.6s forwards }
.stat { display:flex; flex-direction:column }
.stat-num { font-family:var(--font-d); font-size:1.8rem; color:var(--orange); line-height:1 }
.stat-label { font-family:var(--font-m); font-size:.6rem; color:var(--white-dim); letter-spacing:.1em; margin-top:3px }
.stat-divider { font-family:var(--font-m); color:var(--border-h); font-size:1.2rem }

.hero-visual { display:flex; align-items:center; justify-content:center }
.toolbox { position:relative; width:320px; height:320px; display:flex; align-items:center; justify-content:center }
.tool {
  position:absolute; font-size:2rem;
  background:var(--bg-card); border:1px solid var(--border-h); border-radius:12px;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px var(--orange-dim); animation:orbit-tool 8s linear infinite;
}
.t1{animation-delay:0s} .t2{animation-delay:-1.6s} .t3{animation-delay:-3.2s}
.t4{animation-delay:-4.8s} .t5{animation-delay:-6.4s}
@keyframes orbit-tool {
  0%  { transform:rotate(0deg)   translateX(130px) rotate(0deg) }
  100%{ transform:rotate(360deg) translateX(130px) rotate(-360deg) }
}
.tool-center {
  position:relative; z-index:2; width:100px; height:100px; border-radius:50%;
  background:var(--bg-card); border:2px solid var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-size:2rem; color:var(--orange);
  box-shadow:0 0 40px var(--orange-glow), 0 0 80px var(--orange-dim);
  animation:float 3.5s ease-in-out infinite;
}
.scroll-indicator { position:absolute; bottom:32px; left:36px; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-m); font-size:.62rem; letter-spacing:.2em; color:var(--white-dim); opacity:0; animation:slideIn .7s 1.9s forwards }
.scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,var(--orange),transparent); animation:scroll-pulse 2s ease-in-out infinite }

.services-bar { background:var(--bg-card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; overflow:hidden }
.services-inner { display:flex; gap:32px; white-space:nowrap; animation:tape-scroll 20s linear infinite }
.service-tag { font-family:var(--font-m); font-size:.78rem; letter-spacing:.1em; color:var(--white-dim); flex-shrink:0 }
.service-tag:hover { color:var(--orange) }

/* ═══════════════════════════════════════════════════
   PROJECT CARDS — NEXUS-stijl
═══════════════════════════════════════════════════ */
.projects { padding:110px 36px; max-width:1200px; margin:0 auto }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px }

.project-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  overflow:hidden; position:relative; cursor:pointer;
  transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.project-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--orange-dim) 0%, transparent 60%);
  opacity:0; transition:opacity var(--ease); pointer-events:none; z-index:0;
}
.project-card:hover, .project-card:focus {
  outline:none; border-color:var(--border-h);
  box-shadow:0 0 28px var(--orange-dim), 0 20px 60px rgba(0,0,0,.5);
  transform:translateY(-6px);
}
.project-card:hover::before, .project-card:focus::before { opacity:1 }
.project-card--featured { border-color:rgba(240,112,32,.38); box-shadow:0 0 18px var(--orange-dim) }

.open-hint {
  position:absolute; top:12px; left:12px; z-index:3;
  background:rgba(240,112,32,.18); border:1px solid var(--border-h);
  font-family:var(--font-m); font-size:.6rem; letter-spacing:.1em; color:var(--orange);
  padding:3px 10px; border-radius:2px;
  opacity:0; transition:opacity var(--ease); pointer-events:none;
}
.project-card:hover .open-hint,
.project-card:focus .open-hint { opacity:1 }

.card-index {
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:var(--font-m); font-size:.68rem; color:rgba(245,237,224,.5); letter-spacing:.1em;
  background:rgba(15,12,8,.6); padding:2px 8px; border-radius:2px;
}

/* Kaartfoto — echte afbeelding */
.card-image {
  height:240px; overflow:hidden; position:relative; display:block;
  background:#0a0804;
}
.card-image img {
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .5s ease;
}
.project-card:hover .card-image img { transform:scale(1.04) }
.card-image-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,12,8,.7) 0%, transparent 50%);
  pointer-events:none;
}

.card-body { padding:22px; position:relative; z-index:1 }
.card-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px }
.tag { font-family:var(--font-m); font-size:.62rem; letter-spacing:.1em; padding:2px 9px; border-radius:2px; text-transform:uppercase; border:1px solid transparent }
.tag--orange { color:var(--orange); background:rgba(240,112,32,.15); border-color:rgba(240,112,32,.3) }
.tag--green  { color:var(--green);  background:rgba(76,175,122,.12);  border-color:rgba(76,175,122,.3) }
.tag--amber  { color:var(--amber);  background:rgba(232,160,32,.12);  border-color:rgba(232,160,32,.3) }
.tag--red  { color:var(--red);  background:#ff00001e;  border-color:rgba(232,160,32,.3) }
.tag--blue  { color:var(--blue);  background:rgba(0, 0, 255, 0.199);  border-color:rgba(232,160,32,.3) }
.tag--gray  { color:var(--gray);  background:rgba(128, 128, 128, 0.185);  border-color:rgba(232,160,32,.3) }
.card-title { font-family:var(--font-d); font-size:1.25rem; letter-spacing:.04em; margin-bottom:8px; color:var(--white) }
.card-desc { font-size:.86rem; color:var(--white-dim); line-height:1.6; margin-bottom:14px }
.card-meta { display:flex; gap:14px; font-family:var(--font-m); font-size:.65rem; color:var(--white-dim); margin-bottom:16px }
.card-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-m); font-size:.72rem; letter-spacing:.1em; color:var(--orange); pointer-events:none; transition:gap var(--ease) }
.project-card:hover .card-link { gap:14px }
.arrow { transition:transform var(--ease) }
.project-card:hover .arrow { transform:translateX(4px) }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease }
.in-view { opacity:1; transform:translateY(0) }

/* ═══════════════════════════════════════════════════
   PROJECT MODAL — echte foto's + galerij + stappen
═══════════════════════════════════════════════════ */
.modal {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:32px 16px;
  visibility:hidden; opacity:0; transition:opacity .35s ease, visibility .35s;
}
.modal.open { visibility:visible; opacity:1 }

.modal-backdrop {
  position:fixed; inset:0; background:rgba(5,3,1,.92);
  backdrop-filter:blur(10px); z-index:0; cursor:pointer;
}
.modal-panel {
  position:relative; z-index:1; width:min(960px,100%);
  background:var(--bg-modal); border:1px solid var(--border-h);
  border-radius:12px; overflow:hidden;
  box-shadow:0 0 80px rgba(240,112,32,.16), 0 40px 120px rgba(0,0,0,.7);
  transform:translateY(40px) scale(.97);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  margin:auto;
}
.modal.open .modal-panel { transform:translateY(0) scale(1) }

.modal-close {
  position:absolute; top:18px; right:18px; z-index:10;
  background:rgba(0,0,0,.55); border:1px solid var(--border-h);
  color:var(--white-dim); font-family:var(--font-m); font-size:.68rem;
  letter-spacing:.1em; padding:7px 14px; border-radius:var(--r);
  cursor:pointer; display:flex; align-items:center; gap:8px; transition:var(--ease);
}
.modal-close:hover { background:var(--orange-dim); color:var(--orange); border-color:var(--orange) }

/* Modal kleur-header */
.modal-header { position:relative; padding:44px 44px 36px; min-height:150px; overflow:hidden }
.modal-header-glow { position:absolute; inset:0; opacity:.92 }
.modal-header-content { position:relative; z-index:1 }
.modal-tag-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.modal-chip { font-family:var(--font-m); font-size:.65rem; letter-spacing:.1em; padding:3px 12px; border-radius:2px; font-weight:600 }
.modal-chip--orange { background:rgba(240,112,32,.35); color:#fff; border:1px solid rgba(240,112,32,.6) }
.modal-chip--green  { background:rgba(76,175,122,.3);  color:#fff; border:1px solid rgba(76,175,122,.5) }
.modal-chip--amber  { background:rgba(232,160,32,.3);  color:#fff; border:1px solid rgba(232,160,32,.5) }
.modal-chip--red  { color:var(--red);  background:#ff00001e;  border-color:rgba(232,160,32,.3) }
.modal-chip--blue  { color:var(--blue);  background:rgba(0, 0, 255, 0.199);  border-color:rgba(232,160,32,.3) }
.modal-chip--gray  { color:var(--gray);  background:rgba(128, 128, 128, 0.185);  border-color:rgba(232,160,32,.3) }
.modal-title { font-family:var(--font-d); font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:.04em; color:#fff; margin-bottom:8px; text-shadow:0 2px 20px rgba(0,0,0,.4) }
.modal-date  { font-family:var(--font-m); font-size:.75rem; color:rgba(255,255,255,.7); letter-spacing:.1em }

/* ── FOTOGALERIJ ── */
.modal-gallery { padding:0 44px; margin-top:28px }

.gallery-main-wrap {
  position:relative; border-radius:8px; overflow:hidden;
  border:1px solid var(--border); background:#060402;
  min-height:320px; max-height:620px;
  display:flex; align-items:center; justify-content:center;
}
.gallery-main-img {
  width:100%; max-height:620px; object-fit:contain; display:block;
  transition:opacity .25s ease;
}
.gallery-main-video {
  width:100%; max-height:620px; display:block;
  border-radius:8px; background:#000;
  outline:none;
}
.gallery-main-img.fading { opacity:0 }

.gallery-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.6); border:1px solid var(--border-h);
  color:var(--orange); font-size:1.1rem; width:42px; height:42px;
  border-radius:50%; cursor:pointer; transition:var(--ease);
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.gallery-arrow--left  { left:12px }
.gallery-arrow--right { right:12px }
.gallery-arrow:hover { background:var(--orange); color:#fff; box-shadow:0 0 16px var(--orange-glow) }

.gallery-counter {
  position:absolute; bottom:10px; right:14px; z-index:2;
  font-family:var(--font-m); font-size:.65rem; letter-spacing:.1em;
  color:rgba(255,255,255,.75); background:rgba(0,0,0,.55);
  padding:3px 10px; border-radius:2px;
}

.gallery-thumbs {
  display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;
}
.gallery-thumb {
  width:80px; height:58px; border-radius:4px; overflow:hidden;
  border:2px solid var(--border); cursor:pointer; transition:var(--ease);
  flex-shrink:0; background:#0a0804; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.gallery-thumb img { width:100%; height:100%; object-fit:contain; display:block }
.gallery-thumb .video-thumb-icon {
  font-size:1.4rem; color:var(--orange); position:absolute;
  text-shadow:0 0 8px rgba(0,0,0,.8);
}
.gallery-thumb:hover, .gallery-thumb.active {
  border-color:var(--orange); box-shadow:0 0 10px var(--orange-dim);
}

/* ── MODAL BODY: beschrijving + stappen ── */
.modal-body {
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  padding:36px 44px 50px;
}
.modal-col-label {
  font-family:var(--font-m); font-size:.72rem; letter-spacing:.18em;
  color:var(--amber); margin-bottom:14px; display:block;
}
.modal-desc p { font-size:.92rem; color:var(--white-dim); line-height:1.8; margin-bottom:10px }

/* Materialen tags */
.modal-materials { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px }

/* Call-to-action rij */
.modal-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }

/* ── STAPPEN tijdlijn ── */
.modal-steps { list-style:none; counter-reset:steps; display:flex; flex-direction:column }
.modal-steps li {
  counter-increment:steps; position:relative;
  padding:0 0 24px 52px;
}
/* Genummerd bolletje */
.modal-steps li::before {
  content:counter(steps);
  position:absolute; left:0; top:0;
  font-family:var(--font-m); font-size:.68rem; color:var(--orange);
  background:var(--orange-dim); border:1px solid var(--border-h);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
/* Verbindingslijn */
.modal-steps li::after {
  content:''; position:absolute; left:17px; top:34px;
  width:1px; height:calc(100% - 34px);
  background:linear-gradient(to bottom, var(--border-h), transparent);
}
.modal-steps li:last-child::after { display:none }
.modal-steps li:last-child { padding-bottom:0 }

.step-title { font-family:var(--font-b); font-size:.9rem; font-weight:700; color:var(--white); margin-bottom:5px }
.step-desc  { font-size:.84rem; color:var(--white-dim); line-height:1.65 }

/* ═══════════════════════════════════════════════════
   REVIEWS
═══════════════════════════════════════════════════ */
.reviews { padding:110px 36px; background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.reviews .section-header { max-width:1200px; margin-left:auto; margin-right:auto; margin-bottom:60px }
.reviews-grid { max-width:1200px; margin:0 auto 64px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px }
.review-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:26px; transition:var(--ease) }
.review-card:hover { border-color:var(--border-h); box-shadow:0 0 20px var(--orange-dim) }
.review-card.new-review { border-color:var(--orange) }
.review-stars { color:#f59e0b; font-size:1rem; letter-spacing:2px; margin-bottom:12px }
.review-text { font-size:.9rem; color:var(--white-dim); line-height:1.65; margin-bottom:18px }
.review-author { display:flex; align-items:center; gap:12px }
.review-avatar { width:40px; height:40px; border-radius:8px; background:var(--orange-dim); border:1px solid var(--border-h); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:1.1rem; color:var(--orange); flex-shrink:0 }
.review-author strong { display:block; font-size:.9rem; font-weight:600 }
.review-author span { font-family:var(--font-m); font-size:.65rem; color:var(--white-dim) }

.review-form-wrap { max-width:620px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:36px }
.form-title { font-family:var(--font-m); font-size:.78rem; letter-spacing:.18em; color:var(--amber); margin-bottom:26px }
.form-group { margin-bottom:18px }
.form-group label { display:block; font-family:var(--font-m); font-size:.68rem; letter-spacing:.14em; color:var(--white-dim); margin-bottom:7px }
.form-group input, .form-group textarea { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:11px 14px; color:var(--white); font-family:var(--font-b); font-size:.9rem; outline:none; transition:var(--ease); resize:vertical }
.form-group input:focus, .form-group textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-dim) }
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(245,237,224,.22) }
.star-rating { display:flex; gap:6px; margin-bottom:6px }
.star { font-size:1.8rem; color:rgba(245,237,224,.2); background:none; border:none; cursor:pointer; transition:color var(--ease), text-shadow var(--ease); padding:0; line-height:1 }
.star.active { color:#f59e0b; text-shadow:0 0 10px rgba(245,158,11,.6) }
.star-label { font-family:var(--font-m); font-size:.7rem; color:var(--white-dim) }
.form-message { margin-top:12px; font-family:var(--font-m); font-size:.78rem }

/* ═══════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════ */
.about { padding:110px 36px; max-width:1200px; margin:0 auto; position:relative; overflow:hidden }
.about-bg-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-d); font-size:clamp(6rem,18vw,16rem); letter-spacing:.08em; color:rgba(240,112,32,.025); pointer-events:none; user-select:none; white-space:nowrap }
.about-container { display:grid; grid-template-columns:auto 1fr; gap:80px; align-items:start; position:relative; z-index:1 }
.about-visual { display:flex; flex-direction:column; align-items:center; gap:20px; min-width:220px }
.about-frame { position:relative; width:220px; height:220px }
.frame-corner { position:absolute; width:20px; height:20px; border-color:var(--orange); border-style:solid }
.frame-corner.tl { top:-5px; left:-5px; border-width:2px 0 0 2px }
.frame-corner.tr { top:-5px; right:-5px; border-width:2px 2px 0 0 }
.frame-corner.bl { bottom:-5px; left:-5px; border-width:0 0 2px 2px }
.frame-corner.br { bottom:-5px; right:-5px; border-width:0 2px 2px 0 }
.about-avatar { width:100%; height:100%; background:var(--bg-card); border-radius:8px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden }
.about-avatar::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--orange-dim) 0%,transparent 60%) }
.avatar-emoji { font-size:5rem; position:relative; z-index:1 }
.avatar-ring { position:absolute; width:170px; height:170px; border-radius:50%; border:1px solid var(--border); animation:spin 20s linear infinite }
.avatar-ring::after { content:''; position:absolute; width:8px; height:8px; background:var(--orange); border-radius:50%; top:-4px; left:50%; transform:translateX(-50%); box-shadow:0 0 10px var(--orange) }
.about-badge { background:var(--bg-card); border:1px solid var(--border-h); border-radius:8px; padding:14px 24px; text-align:center }
.about-badge strong { display:block; font-family:var(--font-d); font-size:2rem; color:var(--orange) }
.about-badge span { font-family:var(--font-m); font-size:.68rem; color:var(--white-dim); letter-spacing:.1em }
.about-values { display:flex; flex-direction:column; gap:12px; width:100% }
.value-item { display:flex; align-items:flex-start; gap:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:12px 14px; transition:var(--ease) }
.value-item:hover { border-color:var(--border-h) }
.value-item span { font-size:1.1rem; flex-shrink:0; padding-top:2px }
.value-item strong { display:block; font-size:.86rem; font-weight:600; margin-bottom:2px }
.value-item small { font-family:var(--font-m); font-size:.65rem; color:var(--white-dim) }
.about-content .section-tag { text-align:left; margin-bottom:8px }
.about-content .section-title { margin-bottom:22px }
.about-text p { font-size:.93rem; color:var(--white-dim); margin-bottom:14px; line-height:1.75 }
.about-text strong { color:var(--white); font-weight:600 }
.about-cta { display:flex; gap:14px; margin-top:28px; flex-wrap:wrap }

/* ═══════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════ */
.contact { padding:110px 36px; background:var(--bg-2); border-top:1px solid var(--border) }
.contact-wrap { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center }
.contact-text .section-tag { margin-bottom:8px }
.contact-text .section-title { margin-bottom:18px }
.contact-text > p { font-size:.93rem; color:var(--white-dim); margin-bottom:28px; line-height:1.7 }
.contact-info { display:flex; flex-direction:column; gap:12px }
.contact-item { display:flex; align-items:center; gap:10px; font-family:var(--font-m); font-size:.8rem; letter-spacing:.08em; color:var(--white-dim); transition:var(--ease) }
.contact-item:hover { color:var(--orange) }
.contact-box { background:var(--bg-card); border:1px solid var(--border-h); border-radius:10px; padding:36px; display:flex; flex-direction:column; gap:14px }
.contact-box h3 { font-family:var(--font-d); font-size:1.3rem; letter-spacing:.08em; color:var(--white); margin-bottom:4px }
.contact-box p { font-size:.88rem; color:var(--white-dim); line-height:1.6 }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.footer { border-top:1px solid var(--border); background:var(--bg); padding:40px 36px }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px }
.footer-brand { display:flex; flex-direction:column; gap:4px }
.footer-name { font-family:var(--font-d); font-size:1.2rem; letter-spacing:.1em }
.footer-name em { color:var(--orange); font-style:normal }
.footer-brand p { font-family:var(--font-m); font-size:.65rem; color:var(--white-dim) }
.footer-links { display:flex; gap:24px; justify-content:center; flex-wrap:wrap }
.footer-links a { font-family:var(--font-m); font-size:.7rem; letter-spacing:.1em; color:var(--white-dim); transition:var(--ease) }
.footer-links a:hover { color:var(--orange) }
.footer-copy { font-family:var(--font-m); font-size:.65rem; color:var(--white-dim); text-align:right }

/* ── Toast ─────────────────────────────────────── */
.toast { position:fixed; bottom:28px; right:28px; background:var(--bg-card); border:1px solid var(--orange); border-radius:6px; padding:13px 22px; font-family:var(--font-m); font-size:.76rem; letter-spacing:.08em; color:var(--orange); box-shadow:0 0 22px var(--orange-dim); z-index:5000; animation:slideIn .4s ease; pointer-events:none }
.toast.fade-out { opacity:0; transform:translateY(10px); transition:all .4s ease }

/* ═══════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════ */
@keyframes slideIn     { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes scroll-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:900px){
  .hero { grid-template-columns:1fr; text-align:center; padding-top:calc(var(--nav-h)+36px) }
  .hero-subtitle { margin:0 auto 32px }
  .hero-cta,.hero-stats { justify-content:center }
  .hero-visual { margin:32px auto 0; max-width:280px }
  .scroll-indicator { display:none }
  .about-container { grid-template-columns:1fr; text-align:center; gap:40px }
  .about-content .section-title,.about-content .section-tag { text-align:center }
  .about-cta { justify-content:center }
  .contact-wrap { grid-template-columns:1fr; gap:48px }
  .modal-body { grid-template-columns:1fr }
  .modal-header,.modal-gallery,.modal-body { padding-left:24px; padding-right:24px }
}
@media(max-width:700px){
  .nav-toggle { display:flex }
  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    background:rgba(15,12,8,.97); flex-direction:column; padding:24px 36px;
    gap:20px; border-bottom:1px solid var(--border);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .nav-links.open { max-height:400px }
  .projects,.reviews,.about,.contact { padding:80px 20px }
  .projects-grid { grid-template-columns:1fr }
  .gallery-thumbs { gap:6px }
  .gallery-thumb { width:60px; height:44px }
  .modal { padding:0 }
  .modal-panel { border-radius:0; min-height:100vh }
  .footer-inner { grid-template-columns:1fr; text-align:center; gap:20px }
  .footer-copy { text-align:center }
}