/* Concept Displays — Google Ads landing pages
   Design tokens and behaviour from design_handoff_concept_displays_landing/README.md */

:root{
  --cd-black:#000;
  --cd-s1:#0f1114; --cd-s2:#14161a; --cd-s3:#1a1d22; --cd-s4:#1b1e23;
  --cd-teal:#22B3C1; --cd-on-teal:#0b0c0e;
  --cd-t1:#fff; --cd-t2:#d6dae0; --cd-t3:#b6bcc5; --cd-t4:#9aa1ab; --cd-t5:#8b929d; --cd-t6:#7c838d;
  --cd-div:rgba(255,255,255,.1);
  --cd-field:rgba(255,255,255,.07); --cd-field-line:rgba(255,255,255,.3);
  --cd-gutter:40px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cd-black);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
.cd-page{max-width:1200px;margin:0 auto;background:var(--cd-black)}
.cd-page--mobile{max-width:430px;box-shadow:0 0 80px rgba(0,0,0,.6)}

/* ---------- motion ---------- */
@keyframes cdRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cdPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,179,193,.55)}70%{box-shadow:0 0 0 14px rgba(34,179,193,0)}}
@keyframes cdXfade{0%{opacity:0}5%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}}

.cd-rise{animation:cdRise .8s cubic-bezier(.2,.7,.2,1) both}
.cd-d1{animation-delay:.1s}.cd-d2{animation-delay:.25s}.cd-d3{animation-delay:.4s}.cd-d4{animation-delay:.55s}
.cd-pulse{animation:cdPulse 2.4s ease-out infinite}
.cd-btn{transition:transform .25s,filter .25s}
.cd-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* ---------- 3a hero product crossfade + hover-to-pin ---------- */
.cd-stage{position:relative;height:600px;overflow:visible;margin-left:-40px}
.cd-xf{
  position:absolute;left:-20px;right:-60px;bottom:0;height:700px;opacity:0;
  animation:cdXfade 30s ease-in-out infinite;transition:opacity .5s;
  background-position:center bottom;background-size:auto 100%;background-repeat:no-repeat;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));
}
[data-pin]:not([data-pin=""]) .cd-xf{animation:none;opacity:0}
[data-pin="floor"]   .cd-xf[data-key="floor"],
[data-pin="dump"]    .cd-xf[data-key="dump"],
[data-pin="tower"]   .cd-xf[data-key="tower"],
[data-pin="standee"] .cd-xf[data-key="standee"],
[data-pin="tier"]    .cd-xf[data-key="tier"]{opacity:1}

/* ---------- 3b product tiles ---------- */
.cd-tile{position:relative;overflow:hidden;transition:background-color .35s}
.cd-tile .cd-img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cd-tile:hover .cd-img{transform:scale(1.08) translateY(-6px)}
.cd-tile:hover{background:#15181d!important}
.cd-tile .cd-cta{transition:transform .35s}
.cd-tile:hover .cd-cta{transform:translateX(6px)}
.cd-tile .cd-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cd-teal);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.cd-tile:hover .cd-bar{transform:scaleX(1)}

/* ---------- real form controls styled as the design's field blocks ---------- */
.cd-field{
  width:100%;height:48px;background:var(--cd-field);
  border:0;border-bottom:2px solid var(--cd-field-line);border-radius:0;
  padding:0 13px;color:var(--cd-t1);
  font:500 14px Archivo,sans-serif;
  transition:border-color .2s,background-color .2s;
}
.cd-field--lg{height:50px;padding:0 14px;font-size:15px}
.cd-field::placeholder{color:var(--cd-t5);opacity:1}
.cd-field:focus{outline:none;border-bottom-color:var(--cd-teal);background:rgba(255,255,255,.1)}
.cd-field:user-invalid{border-bottom-color:#e2574c}
textarea.cd-field{height:64px;padding:12px 13px;resize:vertical;font-family:Archivo,sans-serif}
textarea.cd-field--lg{height:70px;padding:13px 14px}
select.cd-field{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cd-teal) 50%),linear-gradient(135deg,var(--cd-teal) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select.cd-field:invalid{color:var(--cd-t5)}
select.cd-field option{background:var(--cd-s2);color:var(--cd-t1)}

.cd-legend{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--cd-t5)}

/* chips — real radio inputs */
.cd-chip{position:relative;display:flex}
.cd-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cd-chip span{
  flex:1;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.25);color:var(--cd-t3);
  font:600 13px Archivo,sans-serif;text-align:center;line-height:1.1;
  transition:background-color .2s,color .2s,border-color .2s;
}
.cd-chip input:checked + span{background:var(--cd-teal);border-color:var(--cd-teal);color:var(--cd-on-teal);font-weight:700}
.cd-chip input:focus-visible + span{outline:2px solid var(--cd-teal);outline-offset:2px}
.cd-chip:hover span{border-color:rgba(255,255,255,.5)}

.cd-submit{
  width:100%;height:56px;border:0;border-radius:4px;cursor:pointer;
  background:var(--cd-teal);color:var(--cd-on-teal);
  font:900 18px Archivo,sans-serif;letter-spacing:-.02em;
}
.cd-submit--lg{height:60px;font-size:20px}
.cd-submit--light{background:#fff;height:54px;font-size:16px}
.cd-submit[disabled]{opacity:.6;cursor:progress;animation:none}

.cd-status{margin:12px 0 0;font:500 13.5px/1.5 Archivo,sans-serif;color:var(--cd-t2);display:none}
.cd-status.is-shown{display:block}
.cd-status.is-ok{color:var(--cd-teal)}
.cd-status.is-err{color:#e2574c}
.cd-note{margin:8px 0 0;font:400 11.5px/1.45 Archivo,sans-serif;color:var(--cd-t6)}

/* ---------- sticky mobile call bar ---------- */
.cd-sticky{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:50;
  width:100%;max-width:430px;display:flex;gap:8px;padding:10px 14px;
  background:rgba(0,0,0,.97);border-top:1px solid rgba(255,255,255,.14);
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cd-hero3a{grid-template-columns:1fr!important}
  .cd-hero3a > div:last-child{border-left:0!important;border-top:1px solid var(--cd-div)!important}
  .cd-grid3b{grid-template-columns:repeat(2,1fr)!important}
  .cd-split3b{grid-template-columns:1fr!important}
  .cd-split3b > div:first-child{border-right:0!important;border-bottom:1px solid var(--cd-div)!important}
  .cd-feat4{grid-template-columns:repeat(2,1fr)!important}
  .cd-feat4 > div{border-bottom:1px solid var(--cd-div)}
}
@media (max-width:820px){
  :root{--cd-gutter:22px}
  .cd-herocopy{grid-template-columns:1fr!important}
  .cd-stage{display:none}
  .cd-h1-3a{font-size:40px!important}
  .cd-h1-3b{font-size:46px!important}
  .cd-hero3b{padding:80px var(--cd-gutter) 36px!important;flex-direction:column!important;align-items:flex-start!important;gap:18px!important;min-height:440px!important}
  .cd-pad{padding-left:var(--cd-gutter)!important;padding-right:var(--cd-gutter)!important}
  .cd-partners{flex-wrap:wrap!important;gap:14px!important}
  .cd-footcta{flex-direction:column!important;align-items:flex-start!important}
}
@media (max-width:560px){
  .cd-grid3b{grid-template-columns:1fr!important}
  .cd-feat4{grid-template-columns:1fr!important}
  .cd-head{flex-wrap:wrap!important;gap:10px!important}
  .cd-head-meta{flex-direction:column!important;align-items:flex-end!important;gap:4px!important}
  .cd-h1-3a{font-size:34px!important}
  .cd-h1-3b{font-size:36px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cd-xf{opacity:0}
  .cd-xf[data-key="floor"]{opacity:1}
}