/* ── Theme Tokens ── */
[data-theme="light"]{
  --bg:#ffffff;--text-1:#111;--text-2:#555;--text-3:#999;
  --text-4:#bbb;--line:rgba(0,0,0,0.08);
  --input-bg:#f7f7f7;--input-border:rgba(0,0,0,0.1);
  --input-focus:rgba(0,0,0,0.25);
}
[data-theme="dark"]{
  --bg:#0a0a0a;--text-1:#f5f5f5;--text-2:#aaa;--text-3:#666;
  --text-4:#444;--line:rgba(255,255,255,0.06);
  --input-bg:#141414;--input-border:rgba(255,255,255,0.08);
  --input-focus:rgba(255,255,255,0.2);
}

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  background:var(--bg);color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease,color .35s ease;
}

body{
  height:100dvh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--text-1);color:var(--bg)}

/* ── Top ── */
.top{
  padding:18px 32px;display:flex;justify-content:flex-end;
  align-items:center;position:relative;z-index:2;
}

.theme-btn{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-3);
  transition:all .25s ease;
}
.theme-btn:hover{color:var(--text-1)}
.theme-btn svg{width:18px;height:18px}
.bulb-on{display:block}.bulb-off{display:none}
[data-theme="dark"] .bulb-on{display:none}
[data-theme="dark"] .bulb-off{display:block}

/* ── Center ── */
.center{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0;position:relative;z-index:2;
  padding:0 24px;
}

/* Logo */
.brand{
  display:flex;align-items:center;gap:14px;
  margin:0;margin-bottom:16px;
  font-size:inherit;font-weight:inherit;
  opacity:0;animation:brandIn .7s cubic-bezier(.16,1,.3,1) .1s forwards;
}

.brand img{height:50px;width:auto}
.logo-light{display:block}.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}

.brand-text{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:700;font-size:2.2rem;letter-spacing:-.02em;
}

/* Divider */
.brand-line{
  width:48px;height:1px;background:var(--line);
  margin-bottom:16px;
  opacity:0;animation:fadeIn .5s ease .35s forwards;
}

/* Slogan */
.slogan{
  font-family:"Archivo",-apple-system,sans-serif;
  font-weight:600;font-size:clamp(.68rem,1.1vw,.76rem);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-2);
  margin-bottom:28px;
  opacity:0;animation:fadeIn .6s ease .45s forwards;
}

/* Topics */
.topics{
  display:flex;align-items:center;
  gap:6px;white-space:nowrap;
  margin-bottom:36px;
  opacity:0;animation:fadeIn .6s ease .6s forwards;
}

.topic{
  font-family:"Archivo",-apple-system,sans-serif;
  font-weight:500;
  font-size:.95rem;color:var(--text-3);
  letter-spacing:.03em;
  padding:4px 2px;position:relative;
  transition:color .25s ease;
  cursor:default;
}

.topic::after{
  content:"";position:absolute;
  bottom:0;left:0;width:100%;height:1px;
  background:var(--text-1);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.topic:hover{color:var(--text-1)}
.topic:hover::after{transform:scaleX(1);transform-origin:left}

.sep{
  color:var(--text-4);font-style:normal;
  font-family:"Archivo",-apple-system,sans-serif;font-size:.65rem;
  display:inline-flex;align-items:center;
  padding:0 2px;user-select:none;
}

/* Social Row */
.socials{
  display:flex;align-items:center;gap:14px;
  margin-bottom:36px;
  opacity:0;animation:fadeIn .6s ease .75s forwards;
}

.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-1);
  padding:6px;
  transition:transform .25s ease;
}

.social-link svg{width:28px;height:28px;flex-shrink:0}

.social-link:hover{
  transform:translateY(-3px);
}

/* Contact Trigger */
.contact-link{
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:.82rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);
  border-bottom:1px solid var(--text-3);
  padding-bottom:2px;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .25s ease;
  opacity:0;animation:fadeIn .6s ease .88s forwards;
  cursor:pointer;
}
.contact-link svg{width:15px;height:15px;flex-shrink:0}

.contact-link:hover{
  color:var(--text-1);
  border-bottom-color:var(--text-1);
}

/* ── Bottom ── */
.bottom{
  padding:18px 32px;display:flex;
  justify-content:center;align-items:center;
  position:relative;z-index:2;
  opacity:0;animation:fadeIn .5s ease .95s forwards;
}

.copy{
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:.75rem;color:var(--text-4);
  letter-spacing:.02em;
}

/* ── Contact Panel Overlay ── */
.panel-overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .4s ease;
}
.panel-overlay.open{
  background:rgba(0,0,0,0.35);
  pointer-events:auto;
}

/* ── Contact Panel ── */
.panel{
  position:fixed;z-index:100;
  background:var(--bg);
  display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.16,1,.3,1),background .35s ease;
  overflow-y:auto;
  top:0;right:0;bottom:0;
  width:440px;
  transform:translateX(100%);
  border-left:1px solid var(--line);
}

.panel.open{
  transform:translateX(0);
}

.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 32px 0;
  flex-shrink:0;
}

.panel-title{
  font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);
}

.panel-close{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-3);
  transition:color .25s ease;
}
.panel-close:hover{color:var(--text-1)}
.panel-close svg{width:18px;height:18px}

.panel-body{
  flex:1;display:flex;flex-direction:column;
  justify-content:center;
  padding:32px;
}

.contact-form{
  display:flex;flex-direction:column;gap:18px;
}

.form-row{display:flex;gap:16px}
.form-row .field{flex:1}

.field{display:flex;flex-direction:column;gap:5px}

.field label{
  font-size:.7rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);
}

.field input,
.field select,
.field textarea{
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:.88rem;font-weight:400;
  color:var(--text-1);
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:6px;
  padding:10px 14px;
  outline:none;
  transition:border-color .25s ease,background .35s ease,color .35s ease;
}

.field input::placeholder,
.field textarea::placeholder{color:var(--text-4)}

.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--input-focus)}

.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
  cursor:pointer;
}

.field textarea{resize:vertical;min-height:110px;line-height:1.5}

.submit-btn{
  align-self:flex-start;
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--bg);background:var(--text-1);
  border:none;border-radius:6px;
  padding:12px 32px;cursor:pointer;
  transition:opacity .25s ease,transform .15s ease,background .35s ease,color .35s ease;
}
.submit-btn:hover{opacity:.85}
.submit-btn:active{transform:scale(.98)}

/* Success / Error */
.success-msg,.error-msg{
  display:none;text-align:center;
  padding:40px 0;
}
.success-msg.show,.error-msg.show{display:block}
.success-msg svg,.error-msg svg{width:40px;height:40px;color:var(--text-3);margin:0 auto 14px}
.success-msg p,.error-msg p{font-size:.88rem;color:var(--text-2);line-height:1.6}
.error-msg svg{color:#c0392b}
.error-msg p{color:#c0392b}

/* Panel Footer */
.panel-footer{
  padding:0 32px 24px;flex-shrink:0;
  display:flex;justify-content:center;
}
.panel-footer .copy{font-size:.65rem}

/* ── Keyframes ── */
@keyframes brandIn{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Responsive ── */
@media(max-width:900px){
  .topics{flex-wrap:wrap;justify-content:center;white-space:normal;gap:4px 6px}
  .topic{font-size:.88rem}
  .socials{flex-wrap:wrap;justify-content:center}
}

@media(max-width:600px){
  .top,.bottom{padding:14px 18px}
  .brand img{height:42px}
  .brand-text{font-size:1.5rem}
  .slogan{font-size:.6rem;letter-spacing:.14em;margin-bottom:18px}
  .topics{gap:3px 5px;margin-bottom:22px}
  .topic{font-size:.7rem}
  .sep{font-size:.45rem}
  .socials{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
  .social-link svg{width:22px;height:22px}
  .social-link{padding:4px}
  .contact-link{font-size:.62rem;padding:10px 0}
  .copy{font-size:.58rem}

  .panel{
    top:auto;right:0;bottom:0;left:0;
    width:100%;height:85dvh;
    transform:translateY(100%);
    border-left:none;
    border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
  }
  .panel.open{transform:translateY(0)}
  .panel-header{padding:20px 24px 0}
  .panel-body{padding:24px}
  .panel-footer{padding:0 24px 20px}
  .form-row{flex-direction:column;gap:18px}
  .submit-btn{align-self:stretch;text-align:center}
}

@media(max-width:380px){
  .brand{gap:10px}
  .brand img{height:36px}
  .brand-text{font-size:1.3rem}
  .slogan{font-size:.55rem;letter-spacing:.1em;margin-bottom:14px}
  .topics{gap:2px 4px;margin-bottom:18px}
  .topic{font-size:.6rem}
  .sep{font-size:.4rem}
  .socials{gap:6px;margin-bottom:14px}
  .social-link svg{width:20px;height:20px}
  .contact-link{padding:8px 0}
}

@media(max-height:560px){
  .brand img{height:38px}
  .brand-text{font-size:1.4rem}
  .brand{margin-bottom:8px}
  .brand-line{margin-bottom:8px}
  .slogan{margin-bottom:12px;font-size:.6rem}
  .topics{margin-bottom:16px}
  .topic{font-size:.82rem}
  .socials{margin-bottom:12px;gap:8px}
  .social-link svg{width:22px;height:22px}
  .contact-link{font-size:.6rem}
}

@media(max-height:460px){
  .brand img{height:32px}
  .brand-text{font-size:1.2rem}
  .brand{margin-bottom:6px}
  .brand-line{margin-bottom:6px}
  .slogan{margin-bottom:8px;font-size:.55rem}
  .topics{margin-bottom:10px}
  .topic{font-size:.72rem}
  .socials{margin-bottom:8px;gap:6px}
  .social-link svg{width:18px;height:18px}
  .social-link{padding:2px}
  .contact-link{font-size:.55rem}
  .top,.bottom{padding:8px 18px}
  .copy{font-size:.52rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}