:root{
  --ad-bg:#050505;
  --ad-panel:rgba(14,14,18,.78);
  --ad-panel-strong:rgba(20,20,26,.92);
  --ad-border:rgba(230,145,56,.22);
  --ad-border-soft:rgba(255,255,255,.08);
  --ad-text:#f7f7f5;
  --ad-muted:#c9c9c3;
  --ad-soft:#8f8f88;
  --ad-accent:#e69138;
  --ad-accent-2:#ffb15c;
  --ad-blue:#3d85c6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  background:
    radial-gradient(circle at 18% 8%, rgba(230,145,56,.22), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(61,133,198,.18), transparent 28rem),
    linear-gradient(135deg,#050505 0%,#0b0b0d 45%,#11100e 100%)!important;
  color:var(--ad-text);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 86%);
}
a,button{touch-action:manipulation}
nav{
  background:rgba(5,5,5,.72)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--ad-border)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.30);
}
#mobileMenu{box-shadow:0 24px 60px rgba(0,0,0,.52)}
.ad-brand{font-family:'MicroExtendFLF','Inter',sans-serif;letter-spacing:.04em}
.ad-shell{width:min(1160px,100%);margin-inline:auto}
.ad-panel{
  background:linear-gradient(180deg,rgba(22,22,28,.86),rgba(10,10,13,.76));
  border:1px solid var(--ad-border-soft);
  border-radius:28px;
  box-shadow:0 24px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.ad-panel-accent{border-color:var(--ad-border);box-shadow:0 24px 90px rgba(0,0,0,.45),0 0 0 1px rgba(230,145,56,.08) inset}
.ad-eyebrow{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ad-border);background:rgba(230,145,56,.10);color:#ffd9af;border-radius:999px;padding:.45rem .75rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ad-title{font-family:"MicroExtendFLF", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;max-width:100%;overflow:visible;overflow-wrap:normal;padding-right:.16em}
.ad-gradient-text{background:linear-gradient(90deg,#fff 0%,#ffd2a2 45%,#e69138 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ad-title .ad-gradient-text{display:inline-block;overflow:visible;padding-right:.10em;padding-left:.02em;line-height:1.08}
.ad-muted{color:var(--ad-muted)}
.ad-card{background:rgba(255,255,255,.045);border:1px solid var(--ad-border-soft);border-radius:22px;padding:1rem;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.ad-card:hover{transform:translateY(-2px);border-color:var(--ad-border);background:rgba(255,255,255,.065);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.ad-stat{background:linear-gradient(180deg,rgba(230,145,56,.13),rgba(255,255,255,.04));border:1px solid var(--ad-border);border-radius:18px;padding:.9rem}
.ad-btn, button[type="submit"], #connect-device-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;border-radius:999px!important;padding:.75rem 1.15rem!important;
  background:linear-gradient(135deg,var(--ad-accent),#c9711e)!important;color:#111!important;
  font-weight:800!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 36px rgba(230,145,56,.25)!important;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.ad-btn:hover, button[type="submit"]:hover, #connect-device-btn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 18px 48px rgba(230,145,56,.34)!important}
.ad-btn-secondary{background:rgba(255,255,255,.06)!important;color:#fff!important;border:1px solid var(--ad-border-soft)!important;box-shadow:none!important}
.ad-btn-secondary:hover{border-color:var(--ad-border)!important;background:rgba(255,255,255,.09)!important}
.input{
  width:100%;border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;background:rgba(255,255,255,.95)!important;color:#111!important;padding:.85rem 1rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.input:focus{border-color:var(--ad-accent)!important;outline:3px solid rgba(230,145,56,.20)!important}
.ad-device-frame{position:relative;border-radius:28px;padding:10px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);box-shadow:0 25px 80px rgba(0,0,0,.55)}
.ad-device-frame img{border-radius:20px;display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.08)}
.ad-device-frame::after{content:"";position:absolute;inset:-1px;border-radius:28px;background:linear-gradient(135deg,rgba(230,145,56,.40),transparent 30%,rgba(61,133,198,.25));z-index:-1;filter:blur(22px);opacity:.55}
.ad-note{background:rgba(120,75,20,.35);border:1px solid rgba(230,145,56,.26);color:#ffe5c7;border-radius:20px;padding:1rem;text-align:left}
footer{position:relative;z-index:1}
footer a{color:#d7d7d1}footer a:hover{color:var(--ad-accent)}
img{max-width:100%}
@media (max-width:767px){
  .ad-title{font-size:clamp(1.25rem,6.1vw,1.9rem)!important}
  body{background-attachment:fixed!important}
}
@media (min-width:768px){.ad-title{font-size:clamp(1.85rem,3.05vw,3rem)!important}}

/* Unified components across every page */
main.ad-panel, .ad-panel{
  position:relative;
}
.ad-panel h1{
  letter-spacing:-.035em;
}
.ad-panel h2{
  color:#fff;
  letter-spacing:-.02em;
}
.ad-panel p, .ad-panel li{
  line-height:1.75;
}
.ad-panel strong{
  color:#fff;
}
.ad-panel a:not(.ad-btn):not([href^="mailto:"]){
  color:#ffb15c!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(230,145,56,.35);
  transition:color .18s ease,border-color .18s ease;
}
.ad-panel a:not(.ad-btn):hover{
  color:#ffd2a2!important;
  border-color:rgba(255,210,162,.7);
}
.ad-media-card{
  display:block;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  padding:6px;
  box-shadow:0 22px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.ad-media-card:hover{
  transform:translateY(-2px) scale(1.01)!important;
  border-color:rgba(230,145,56,.38)!important;
  box-shadow:0 28px 86px rgba(0,0,0,.52),0 0 0 1px rgba(230,145,56,.12) inset!important;
}
/* Override old Tailwind orange buttons left in secondary pages */
a.bg-\[\#e69138\], button.bg-\[\#e69138\], .bg-\[\#e69138\]{
  display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;border-radius:999px!important;padding:.75rem 1.15rem!important;
  background:linear-gradient(135deg,var(--ad-accent),#c9711e)!important;color:#111!important;
  font-weight:800!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 14px 36px rgba(230,145,56,.25)!important;text-decoration:none!important;
}
a.bg-\[\#e69138\]:hover, button.bg-\[\#e69138\]:hover, .bg-\[\#e69138\]:hover{
  transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 18px 48px rgba(230,145,56,.34)!important;
}
.ad-card,
.bg-black\/60,
.bg-yellow-900{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:22px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
}
.bg-yellow-900{
  color:#ffe5c7!important;
  background:rgba(120,75,20,.35)!important;
  border-color:rgba(230,145,56,.26)!important;
}
select.input{appearance:auto;}
/* ESP Web Tools shadow button style is also applied from JS, this keeps fallback coherent */
esp-web-install-button::part(button){
  border-radius:999px!important;
}


/* Shared legal/info cards */
.ad-legal-stack{
  width:min(896px,100%);
  margin:2.75rem auto 2rem;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.35rem;
  clear:both;
  position:relative;
  z-index:2;
  text-align:center;
}
.ad-info-card{
  width:100%;
  max-width:896px;
  padding:1.15rem 1.25rem;
  text-align:center!important;
  border-color:rgba(230,145,56,.30);
  background:linear-gradient(180deg,rgba(120,75,20,.28),rgba(255,255,255,.045));
}
.ad-footer-wrap{
  display:block;
  width:100%;
  text-align:center;
  margin:0;
  padding:0;
  line-height:normal;
}
.ad-footer-card{
  display:block;
  width:100%;
  max-width:896px;
  padding:1rem 1.25rem;
  text-align:center!important;
  vertical-align:top;
}
.ad-info-card p,
.ad-footer-card p{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.65;
}
.ad-info-card strong,
.ad-info-title{
  color:#ffd2a2!important;
}
.ad-footer-card a{
  color:#ffd2a2!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(230,145,56,.35);
}
.ad-footer-card a:hover{
  color:#fff!important;
  border-color:rgba(255,255,255,.60);
}
@media (max-width:767px){
  .ad-legal-stack{width:100%;margin-top:2rem;gap:1rem;}
  .ad-info-card,.ad-footer-card{border-radius:22px;padding:1rem;}
}