/* Caltro landing styles — refreshed design */
:root{
  --bg:#0b0d11;
  --panel:#11141a;
  --card:#0f1217;
  --muted:#a3a9b7;
  --text:#e9edf3;
  --brand:#4f8cff;
  --brand-2:#7bd389;
  --border:#222735;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --sticky-h: 84px; /* your header height (adjust if needed) */
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b0d11,#0b0d11 40%, #0c1016);
  line-height:1.6;
}

a{color:var(--text);text-decoration:none}

section,[id]{scroll-margin-top:calc(var(--sticky-h) + 12px)}
html{scroll-behavior:smooth}

.container{width:min(1120px,92%);margin-inline:auto}
/* wide container to match the hero */
.container--wide{width:min(1280px,96%)}
.narrow{width:min(760px,92%)}
.center{text-align:center}
.mt-32{margin-top:2rem}
.hidden{display:none}

/* header */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;position:sticky;top:0;
  background:rgba(11,13,17,.7);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
  z-index:50;
}
/* brand + nav on one line inside the header */
.header > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px; /* optional */
}

.brand{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:20px;align-items:center}
.nav a{opacity:.9}
.nav a:hover{opacity:1}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  padding:10px 16px;border-radius:12px;
  transition:transform .06s ease, background .2s ease, border-color .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-sm{padding:8px 12px;border-radius:10px;font-size:.9rem}
.btn-lg{padding:14px 20px;border-radius:14px;font-size:1.05rem}
.btn-primary{
  background:linear-gradient(180deg,var(--brand),#3b6fe0);
  border-color:transparent;
  color:white
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:#141923}

/* hero */
.hero{
   width:min(1280px,96%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr;     /* stack: copy then calendar */
  gap:32px;
  align-content:center;          /* vertical centering */
  min-height:calc(90vh - var(--sticky-h));
  padding:48px 0 28px;
}
.hero-copy{ text-align:center; max-width:980px; margin-inline:auto; }
.hero-copy h1{ font-size:clamp(40px,6vw,66px); line-height:1.05; }
.sub{color:var(--muted);max-width:56ch}
.cta-row{display:flex;gap:12px;margin:18px 0 10px}
.meta{font-size:.9rem;color:var(--muted)}
.hero-shot{ padding:0; overflow:hidden; justify-self:stretch; }
.hero-shot .card{ width:100%; }

/* Highlight block with animated glow */
.hero-focus{
  position:relative;
  padding:32px 40px 28px;
  border-radius:28px;
  text-align: center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.hero-focus::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(79,140,255,.28), transparent 60%),
    radial-gradient(800px 420px at 85% 120%, rgba(123,211,137,.22), transparent 60%);
  filter:blur(10px);
  animation:glowShift 12s ease-in-out infinite alternate;
}

.hero-focus .sub{ max-width:62ch; margin:8px auto 0; }
.hero-focus .cta-row{ justify-content:center; }   /* centers the buttons */
.hero-focus .meta{ margin:10px auto 0; }



[data-reveal].is-visible .hero-focus{ animation:popIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes glowShift{ from{transform:translateY(0)} to{transform:translateY(-12px)} }
@keyframes popIn{ from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){
  .hero-focus::before, [data-reveal].is-visible .hero-focus{ animation:none }
}

.card{
  background:linear-gradient(180deg,#0f131a,#0b0f16);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}

/* ===== Modern promo matrix ===== */

.calendar-matrix{
  --header-h:40px;
  --bar-h:52px;
  --bar-gap:8px;
  --row-h:calc(var(--bar-gap)*3 + var(--bar-h)*2);
  display:grid;
  grid-template-columns:120px repeat(4,1fr);
  grid-template-rows:var(--header-h) repeat(4,var(--row-h));
  gap:8px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:auto;
}

.col-head,
.row-head{
  font-size:.9rem;
  color:var(--muted);
  background:var(--card);
  border:1px dashed var(--border);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.row-head{justify-content:flex-start;padding-left:12px}

.matrix-cell{
  border:1px dashed var(--border);
  border-radius:12px;
  background:var(--card);
  position:relative;
  overflow:hidden;
}

.promo-bar{
  position:relative;
  align-self:flex-start;
  justify-self:start;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
  font-size:.85rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1b2437,#131a27);
  box-shadow:0 8px 20px rgba(26,49,96,.3);
  color:var(--text);
  min-width:140px;
  white-space:normal;
  word-break:break-word;
}
.promo-bar .title{
  font-size:.95rem;
  font-weight:700;
  white-space:nowrap;
}
.promo-bar .meta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  font-size:.8rem;
  color:var(--muted);
}
.chip{
  display:inline-block;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  font-size:.75rem;
}

/* vertical stacking offsets */
.stack-1{top:var(--bar-gap)}
.stack-2{top:calc(var(--bar-gap)*2 + var(--bar-h))}
.stack-3{top:calc(var(--bar-gap)*3 + var(--bar-h)*2)}

/* colourways */
.p-tv{border-color:#3b2a18;background:linear-gradient(180deg,#2a1b0e,#20140a)}
.p-digital{border-color:#1a2a3b;background:linear-gradient(180deg,#12213a,#0f1a2c)}
.p-social{border-color:#123229;background:linear-gradient(180deg,#123024,#0f221c)}
.p-display{border-color:#2a2b3b;background:linear-gradient(180deg,#1b1c2a,#141526)}

/* legend */
.legend{
  display:flex;
  gap:16px;
  align-items:center;
  font-size:.9rem;
  color:#a3a9b7;
  margin-top:10px
}
.legend span{display:flex;gap:6px;align-items:center}
.dot-tv{background:#4f6cff}
.dot-olv{background:#8a56ff}
.dot-social{background:#22c39a}
.dot-display{background:#f5b443}
.dot-tv,.dot-olv,.dot-social,.dot-display{
  width:10px;height:10px;border-radius:50%;display:inline-block
}

/* Sections */
.section-title{font-size:28px;margin:54px 0 18px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.feature{padding:60px}
.feature .icon{font-size:22px;margin-bottom:20px;opacity:.95}
.feature h3{margin:.2rem 0 .3rem}

/* ===== Features band: make it stand out ===== */
.features-band{position:relative;padding:64px 0 32px}
.features-band::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 280px at 50% 0, rgba(79,140,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

/* spacing */
.features-band .grid-4{gap:22px}

/* card treatment */
.features-band .feature{
  position:relative;
  padding:22px;
  background:linear-gradient(180deg,#10141b,#0c1117);
  border:1px solid rgba(79,140,255,.18);
  border-radius:var(--radius);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.features-band .feature::after{
  content:"";
  position:absolute;left:12px;right:12px;top:10px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
  opacity:.55;
}

/* icon badge */
.features-band .feature .icon{
  width:36px;height:36px;display:grid;place-items:center;
  margin-bottom:14px;border-radius:10px;
  background:rgba(79,140,255,.12);color:var(--brand);
  font-size:20px; /* keep icons tidy */
}

/* hover pop */
.features-band .feature:hover{
  transform:translateY(-6px);
  border-color:rgba(79,140,255,.35);
  box-shadow:0 18px 36px rgba(0,0,0,.45), 0 0 12px rgba(79,140,255,.18);
}

/* text tone */
.features-band .feature p{color:var(--muted)}

.workflow{
    background:linear-gradient(135deg,#0d1117,#0b0f14);
  padding:60px 0;
  scroll-margin-top: calc(var(--sticky-h) + 12px);
}
#workflow h2{text-align:center;margin-bottom:40px}
.workflow-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  scroll-margin-top: calc(var(--sticky-h) + 12px);
}
#workflow .workflow-steps::before{content:none}
.step{ position:relative; z-index:1; }

.step{
  list-style:none;
  background:var(--card);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.step .icon{width:32px;height:32px;color:var(--accent)}
.step h3{margin-top:4px}
.step p{color:var(--muted);font-size:.95rem}
.step .benefit{margin-top:4px;font-style:italic}
.step.visible{opacity:1;transform:none}
.step:hover{transform:translateY(-6px);box-shadow:0 8px 16px rgba(0,0,0,.4),0 0 8px var(--accent)}
.step:hover .icon{animation:pulse .6s ease-in-out}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.bullets{margin:0;padding-left:18px}
.bullets li{margin:.3rem 0}
.ai-box{padding:16px}
.ai-head{font-size:.9rem;color:var(--muted);margin-bottom:6px}

.form-card{padding:22px;margin:42px auto}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field input{
  background:#0d1118;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  color:var(--text)
}
.form-field input:focus{
  outline:none;
  border-color:#3246ff;
  box-shadow:0 0 0 3px rgba(79,140,255,.15)
}

.actions{display:flex;gap:12px;align-items:center;margin-top:12px}

.footer{
  margin-top:54px;
  border-top:1px solid var(--border);
  background:#0b0d11
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;padding:22px 0
}
.footer-nav{display:flex;gap:14px;align-items:center}

/* Responsive */
@media (max-width:780px){
  .workflow-steps{grid-template-columns:1fr}
  .workflow-steps::before{display:none}
}
@media (max-width:640px){
  .grid-4,.grid-2{grid-template-columns:1fr}
  .hero-copy h1{font-size:32px}
  .toolbar .title{display:none}
}
@media (prefers-reduced-motion: reduce){
   #workflow .step{transition:none !important;animation:none !important}
}

/* reveal animation */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* split band */
.split-band{padding:80px 0}
.split{display:grid;gap:40px;align-items:center}
@media(min-width:780px){.split{grid-template-columns:1fr 1fr}}
.split-media img{width:100%;display:block;border-radius:var(--radius)}
.eyebrow{font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.bullets.check{list-style:none;padding-left:0}
.bullets.check li{position:relative;padding-left:24px;margin:.4rem 0}
.bullets.check li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--brand-2)}

/* stories section */
.editorial{padding:80px 0}
.cards-3{display:grid;gap:32px}
@media(min-width:780px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.story img{width:100%;border-radius:var(--radius);margin-bottom:12px}
.story .hl{font-size:1.25rem;margin:8px 0}
.story .more{color:var(--brand);font-weight:600;margin-top:8px;display:inline-block}