/* Visual details */
:root{ --glow: 0 0 24px rgba(255,255,255,.18), 0 0 2px rgba(255,255,255,.28); }
.section{ padding: 64px 0; border-top: 1px solid rgba(255,255,255,.06); }
.border-top{ border-top: 1px solid rgba(255,255,255,.1); }
.heading{ font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; background: linear-gradient(180deg,#fff,rgba(255,255,255,.6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.tile, .feature-card{ display:flex; gap:.9rem; padding:18px; border:1px solid rgba(255,255,255,.09); background: rgba(17,22,27,.6); border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.tile:hover, .feature-card:hover{ transform: translateY(-2px); box-shadow: var(--glow); border-color: rgba(255,255,255,.18); background: rgba(17,22,27,.75); }
.tile-icon{ width:22px; height:22px; color:#fff; opacity:.9 }
.tile-title{ color:#fff; font-weight:600 }
.tile-text{ color: rgba(255,255,255,.7) }

.panel{ padding:18px; border:1px dashed rgba(255,255,255,.12); border-radius:16px; background: rgba(255,255,255,.03); transition: box-shadow .25s; }
.panel:hover{ box-shadow: var(--glow); }
.panel-title{ display:flex; align-items:center; font-weight:600; color:#fff }
.panel-text{ color: rgba(255,255,255,.75) }

.stack{ padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background: rgba(17,22,27,.55); transition: transform .25s, box-shadow .25s; }
.stack:hover{ transform: translateY(-2px); box-shadow: var(--glow); }
.stack-head{ color:#fff; font-weight:600 }
.stack-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:.6rem }
.stack-tags span{ font-size:.75rem; padding:.35rem .6rem; border:1px solid rgba(255,255,255,.12); border-radius:9999px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); transition: border-color .25s, transform .25s; }
.stack-tags span:hover{ border-color: rgba(255,255,255,.25); transform: translateY(-1px); }

.service{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); background: rgba(17,22,27,.58); border-radius:20px; padding:22px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.service::before{ content:''; position:absolute; inset:-40% -40% auto -40%; height:60%; background: radial-gradient(120px 60px at 20% 20%, rgba(255,255,255,.08), transparent 60%); transform: translateY(40px) rotate(2deg); transition: opacity .3s; opacity:.2 }
.service:hover{ transform: translateY(-3px); box-shadow: var(--glow); border-color: rgba(255,255,255,.18); }
.service-icon{ width:20px; height:20px; color:#fff }
.service-title{ color:#fff; font-weight:600; margin-top:.35rem }
.service-text{ color: rgba(255,255,255,.75); margin-top:.3rem; font-size:.95rem; line-height:1.45 }

.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s }
.btn-primary{ color:#0b0e12; background:#fff; border:1px solid rgba(255,255,255,.4); box-shadow: 0 6px 24px rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.15) inset; overflow:hidden }
.btn-primary:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 34px rgba(255,255,255,.14) }
.btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.btn-ghost:hover{ background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 28px rgba(255,255,255,.08) }
.btn:active{ transform: translateY(0) scale(.99) }
.shine{ position:absolute; inset:0; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.25) 40%, transparent 60%); transform: translateX(-120%); filter: blur(1px); pointer-events:none }
.btn-primary:hover .shine{ animation: shine 1s ease; }
@keyframes shine{ to{ transform: translateX(120%); } }

@keyframes gradientShift{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
.animate-gradient{ background-size:200% 200%; animation: gradientShift 8s ease infinite }

.link{ color: rgba(255,255,255,.75); }
.link:hover{ color:#fff; text-shadow: 0 0 10px rgba(255,255,255,.35) }

#scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:rgba(255,255,255,.6); box-shadow: 0 0 12px rgba(255,255,255,.5); z-index:60 }

.list .icon{ width:18px; height:18px; margin-top:2px; color:#fff; opacity:.9 }
.list li{ display:flex; gap:.5rem; align-items:flex-start; color: rgba(255,255,255,.8) }

.tilt{ transform-style: preserve-3d; perspective:600px }