/* Retro Futurism — Earth Tone */
:root{
  --primary:#6B4226;
  --secondary:#A0522D;
  --accent:#D2691E;
  --bg:#2C1A0E;
  --text:#F5DEB3;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Karla',sans-serif}
h1,h2,h3,h4,h5{font-family:'Exo 2',sans-serif;letter-spacing:.02em}

/* Animated gradient */
@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.animated-grad{
  background:linear-gradient(135deg,#6B4226,#A0522D,#D2691E,#2C1A0E,#6B4226);
  background-size:400% 400%;
  animation:gradient-shift 15s ease infinite;
}

/* Perspective grid (retro-futurism) */
.perspective-grid{
  background-image:
    linear-gradient(rgba(210,105,30,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(210,105,30,.25) 1px,transparent 1px);
  background-size:40px 40px;
  transform:perspective(500px) rotateX(60deg);
  transform-origin:center top;
  position:absolute;inset:0;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%);
}

/* Floating shapes */
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.float{animation:float-y 6s ease-in-out infinite}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Floating label */
.field{position:relative}
.field input,.field textarea{
  width:100%;background:transparent;border:1px solid #A0522D;color:#F5DEB3;
  padding:18px 14px 6px;border-radius:8px;outline:none;transition:border .2s;
}
.field input:focus,.field textarea:focus{border-color:#D2691E;box-shadow:0 0 0 3px rgba(210,105,30,.25)}
.field label{
  position:absolute;left:14px;top:14px;color:#A0522D;pointer-events:none;
  transition:.2s;background:#2C1A0E;padding:0 4px;
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:-8px;font-size:12px;color:#D2691E;
}

/* Accordion */
.acc-content{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc.open .acc-content{max-height:400px}
.acc.open .acc-icon{transform:rotate(45deg)}
.acc-icon{transition:transform .3s}

/* Chrome text */
.chrome{
  background:linear-gradient(180deg,#F5DEB3 0%,#D2691E 50%,#6B4226 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#2C1A0E}
::-webkit-scrollbar-thumb{background:#6B4226;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#D2691E}

/* Marquee */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{animation:marquee 30s linear infinite}