/* =========================================================
   PONYA ADS  -  Site theme
   Deep-ink dashboard base with a single blue accent family.
   Shared across index, advertiser and publisher pages.
   ========================================================= */

:root{
  --ink:#0A1120;
  --ink-soft:#0D1830;
  --surface:#111C30;
  --surface-2:#16233B;
  --line:#243149;
  --line-soft:rgba(255,255,255,.09);
  --paper:#F1F4FA;
  --paper-2:#E7ECF5;
  --paper-line:#D7DFEC;
  --text:#E9EEF7;
  --text-dim:#96A5C0;
  --ink-text:#111A2C;
  --ink-text-dim:#57647E;
  --data-soft:#7FB4FB;
  --data:#3B82F6;
  --data-2:#2563EB;
  --data-deep:#1E3A8A;
  --radius:16px;
  --radius-sm:9px;
  --shadow-soft:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 24px 60px -28px rgba(0,0,0,.65);
  --font-display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  --header-h:84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:600; line-height:1.2; margin:0 0 .5em; color:inherit; }
p{ margin:0 0 1em; }
.container{ max-width:1160px; margin:0 auto; padding:0 24px; }
section{ padding:96px 0; position:relative; }
:focus-visible{ outline:2px solid var(--data); outline-offset:3px; }
[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--data-soft); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--data); display:inline-block; }

.section-header{ max-width:680px; margin:0 0 48px; }
.section-header.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-header h3{ font-size:clamp(28px,3.6vw,40px); margin-bottom:14px; }
.section-header p{ color:var(--text-dim); font-size:17px; margin-bottom:0; }

/* light "paper" sections */
.paper{ background:var(--paper); color:var(--ink-text); }
.paper .section-header p{ color:var(--ink-text-dim); }
.paper .eyebrow{ color:var(--data-2); }

/* deep feature bands */
.band{
  background:
    radial-gradient(760px 320px at 12% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(640px 320px at 92% 100%, rgba(37,99,235,.14), transparent 60%),
    linear-gradient(180deg,#0D1830,#0A1120);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}

/* ---------- Buttons ---------- */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:14px 30px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-pill:hover{ transform:translateY(-2px); }

.btn-get-started{ background:var(--data); color:#fff; box-shadow:0 14px 30px -14px rgba(59,130,246,.55); }
.btn-get-started:hover{ background:#5B9BFB; }

.btn-services{ background:transparent; color:var(--text); border-color:rgba(255,255,255,.35); }
.btn-services:hover{ border-color:var(--data-soft); color:var(--data-soft); }

.btn{ /* header sign-in */
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.03em;
  padding:9px 20px; border-radius:100px; border:1px solid var(--paper-line); color:var(--ink-text);
}
.btn:hover{ border-color:var(--data-2); color:var(--data-2); }

.cta-btn{
  display:inline-block; padding:14px 32px; margin:8px 8px 0 0; border-radius:100px;
  font-weight:600; font-size:15px; background:var(--data); color:#fff; border:1px solid transparent;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cta-btn:hover{ background:#5B9BFB; transform:translateY(-2px); }
.cta-btn-secondary{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.cta-btn-secondary:hover{ background:transparent; border-color:var(--data-soft); color:var(--data-soft); }

/* ---------- Header (white, fixed, functional mobile nav) ---------- */
header#header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--header-h);
  background:#FFFFFF;
  border-bottom:1px solid var(--paper-line);
  box-shadow:0 1px 2px rgba(17,26,44,.04);
  transition:box-shadow .25s ease;
}
header#header.is-scrolled{ box-shadow:0 16px 32px -22px rgba(17,26,44,.28); }
header#header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; }

.logo{ display:flex; align-items:center; }
.logo a{ display:flex; align-items:center; gap:10px; }
.logo img{ height:36px; width:auto; display:block; }

nav.main-nav{ float:none !important; }
nav.main-nav ul{ display:flex; align-items:center; gap:6px; }
nav.main-nav ul li a{
  display:inline-block; padding:10px 14px; font-size:14.5px; font-weight:500; color:var(--ink-text-dim);
  border-radius:100px; transition:color .18s ease, background-color .18s ease;
}
nav.main-nav ul li a:hover,
nav.main-nav ul li.active a{ color:var(--ink-text); background:var(--paper-2); }
nav.main-nav ul li:last-child{ margin-left:8px; }

.nav-toggle{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--paper-line);
  background:transparent; color:var(--ink-text); cursor:pointer; font-size:17px;
}

/* ---------- Intro / hero (index) ---------- */
#intro{
  min-height:100vh; display:flex; align-items:center; padding-top:var(--header-h);
  background:
    radial-gradient(900px 500px at 85% 10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(700px 460px at 8% 90%, rgba(30,58,138,.35), transparent 60%),
    linear-gradient(180deg, #0B1322, #080D19);
  text-align:left;
  overflow:hidden;
}
#intro .container.float-right{ float:none !important; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.intro-info{ text-align:left !important; }
.intro-info h3{ font-size:clamp(32px,4.4vw,54px) !important; margin-bottom:20px; }
.intro-info h3 .hl{ color:var(--data-soft); }
.intro-info p{ color:var(--text-dim); font-size:18px; max-width:46ch; }
.intro-info > div{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

/* ---------- Simple page hero (advertiser / publisher) ---------- */
.page-hero{
  padding-top:calc(var(--header-h) + 72px);
  padding-bottom:72px;
  background:
    radial-gradient(900px 460px at 88% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(700px 420px at 4% 100%, rgba(30,58,138,.32), transparent 60%),
    linear-gradient(180deg, #0B1322, #080D19);
}
.page-hero .row{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.page-hero h3{ font-size:clamp(30px,4vw,42px); margin-bottom:18px; }
.page-hero p{ color:var(--text-dim); font-size:17px; }

/* ---------- Hero illustration ---------- */
.hero-illustration{ position:relative; }
.hero-illustration svg{ width:100%; height:auto; overflow:visible; display:block; }
.hero-illustration .drift{ animation:drift 4.5s ease-in-out infinite; }
.hero-illustration .drift.d2{ animation-delay:.6s; }
.hero-illustration .loop-path{ stroke-dasharray:6 8; animation:dash 3.5s linear infinite; }
.hero-illustration .pulse{ transform-origin:center; animation:pulse 2.6s ease-out infinite; }
@keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes dash{ to{ stroke-dashoffset:-28; } }
@keyframes pulse{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }

/* ---------- About ---------- */
.about-art{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); }
.about-art svg{ width:100%; height:auto; display:block; }
.about-content h2{ font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--data); font-family:var(--font-mono); font-weight:600; margin-bottom:16px; }
.about-content h3{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; }
.about-content p{ color:var(--text-dim); font-size:17px; }
#about .row{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center; }

/* ---------- Cards ---------- */
#pricing .row.justify-content-center,
#why-choose-us .row.justify-content-center,
.card-grid-3{ display:grid; gap:26px; grid-template-columns:repeat(3,1fr); }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; height:100%; box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--data-2),var(--data-soft));
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:rgba(255,255,255,.18); }
.paper .card{ background:#fff; border-color:var(--paper-line); }

.card-header{
  width:36px; height:36px; border-radius:50%; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(59,130,246,.14); color:var(--data); font-size:15px;
}
.card-block{ padding:0; }
.card-title{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:12px; color:inherit; }
.card-block p{ color:var(--text-dim); font-size:14.5px; margin-bottom:0; }
.paper .card-block p{ color:var(--ink-text-dim); }

.card .list-group{ margin:0; padding:0; }
.card .list-group-item{
  background:transparent; border:0; border-top:1px solid var(--line-soft);
  padding:10px 0; font-size:14.5px; color:var(--text-dim); display:flex; align-items:center; gap:10px;
}
.paper .card .list-group-item{ border-top-color:var(--paper-line); color:var(--ink-text-dim); }
.card .list-group-item:first-child{ border-top:0; padding-top:0; }
.card .list-group-item i{ color:var(--data); font-size:12px; }

/* ---------- Counters / why-us band ---------- */
#why-us{ background:none !important; }
.counters{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.counters > div{ padding:10px; }
.counters span{
  display:block; font-family:var(--font-mono); font-weight:600; font-size:clamp(30px,4vw,44px);
  color:var(--data-soft); letter-spacing:-.01em;
}
.counters p{ margin:8px 0 0; color:var(--text-dim); font-size:13.5px; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); }

/* ---------- About extra rows ---------- */
.about-extra{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:70px; }
.about-extra:last-child{ margin-bottom:0; }
.about-extra img{ width:100%; height:auto; max-height:380px; object-fit:cover; border-radius:var(--radius-sm); box-shadow:var(--shadow-soft); }
.about-extra .order-1{ order:2; }
.about-extra .order-2{ order:1; }
.about-extra h4{ font-size:clamp(21px,2.6vw,26px); margin-bottom:14px; color:var(--ink-text); }
.about-extra p{ color:var(--ink-text-dim); margin:0; }

/* ---------- Simple centered text sections ---------- */
.text-block-center{ display:flex; justify-content:center; }
.text-block-center .inner{ max-width:760px; text-align:center; }
.text-block-center p{ font-size:17.5px; }
.paper .text-block-center p{ color:var(--ink-text-dim); }
#intro-copy p, #why-retargeting p{ font-size:17.5px; color:var(--ink-text-dim); }

/* ---------- How it works / process cards ---------- */
.card-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card-grid-4 .card::before{ background:linear-gradient(90deg,var(--data-soft),var(--data-2)); }
.card-grid-4 .card-title{ font-size:17px; }

/* ---------- Industries ---------- */
.industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 20px; }
.industry-item{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-sm);
  padding:26px 10px; text-align:center;
  transition:transform .2s ease, border-color .2s ease;
}
.industry-item:hover{ transform:translateY(-4px); border-color:var(--data-2); }
.industry-item i{ font-size:28px; color:var(--data-2); display:block; margin-bottom:10px; }
.industry-item p{ color:var(--ink-text); font-size:14px; margin-bottom:0; }

/* ---------- Objective checklists ---------- */
.checklist-wrap{ display:flex; justify-content:center; }
.checklist-wrap .inner{ width:100%; max-width:760px; }
.checklist-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; }
.checklist-grid ul li{
  padding:12px 0; font-size:16px; color:var(--ink-text);
  border-bottom:1px solid var(--paper-line); display:flex; gap:10px; align-items:center;
}
.checklist-grid ul li i{ color:var(--data-2); font-size:14px; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; padding:80px 0; }
.cta-band h3{ font-size:clamp(26px,3.4vw,36px); color:#fff; }
.cta-band p{ color:var(--text-dim); max-width:640px; margin:0 auto 8px; }

/* ---------- Simple call-to-action row (advertiser / publisher) ---------- */
#call-to-action .row{ display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:center; }
.cta-title{ font-size:clamp(30px,4vw,42px); margin-bottom:18px; }
.cta-text{ color:var(--text-dim); font-size:17px; }
.cta-btn-container{ display:flex; justify-content:center; }
.cta-btn-container .cta-btn{
  padding:16px 38px; font-size:16px; box-shadow:0 14px 30px -14px rgba(59,130,246,.55);
}

/* ---------- Testimonials ---------- */
.testimonials-carousel{ position:relative; overflow:hidden; }
.testimonials-carousel .track{ display:flex; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.testimonial-item{
  flex:0 0 100%; text-align:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:44px 36px;
}
.testimonial-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff;
  border:2px solid var(--line-soft);
}
.testimonial-item h3{ font-size:17px; margin-bottom:2px; }
.testimonial-item h4{ font-family:var(--font-mono); font-size:12.5px; font-weight:500; color:var(--data-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; }
.testimonial-item p{ font-size:17px; color:var(--text-dim); font-style:italic; margin-bottom:0; }
.carousel-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:26px; }
.carousel-arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-soft); background:transparent;
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:border-color .18s ease, color .18s ease;
}
.carousel-arrow:hover{ border-color:var(--data-soft); color:var(--data-soft); }
.carousel-dots{ display:flex; gap:8px; }
.carousel-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; }
.carousel-dots button.is-active{ background:var(--data-soft); width:22px; border-radius:5px; transition:width .25s ease; }

/* ---------- FAQ ---------- */
#faq .container{ max-width:840px; }
#faq-list li{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-sm);
  margin-bottom:12px; overflow:hidden;
}
#faq-list li > a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink-text);
  cursor:pointer;
}
#faq-list li > a i{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--data-2); font-size:11px;
  transition:transform .25s ease;
}
#faq-list li.is-open > a i{ transform:rotate(135deg); }
#faq-list li .collapse{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
#faq-list li.is-open .collapse{ max-height:1200px; }
#faq-list li .collapse p{ padding:0 22px 20px; color:var(--ink-text-dim); font-size:15px; margin:0 0 10px; }
#faq-list li .collapse p:last-child{ margin-bottom:0; padding-bottom:22px; }

/* ---------- Footer ---------- */
footer#footer{ background:var(--ink-soft); border-top:1px solid var(--line-soft); padding-top:80px; }
.footer-top{ background:transparent; }
.footer-grid{ display:grid; grid-template-columns:1.1fr .9fr 1.2fr; gap:48px; }
.footer-newsletter h4, .footer-links h4, .footer-info h4, .form h4{
  font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--data-soft);
  margin-bottom:16px;
}
.footer-newsletter p{ color:var(--text-dim); font-size:14.5px; line-height:1.7; }
.footer-links ul li{ margin-bottom:10px; }
.footer-links ul li a{ color:var(--text-dim); font-size:14.5px; transition:color .18s ease; }
.footer-links ul li a:hover{ color:var(--data-soft); }
.social-links{ display:flex; gap:10px; margin-top:18px; }
.social-links a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:.18s ease;
  font-size:14px;
}
.social-links a:hover{ border-color:var(--data-soft); color:var(--data-soft); }

.form label{ display:none; }
.form p{ color:var(--text-dim); font-size:14.5px; }
.form-group{ margin-bottom:14px; }
.form-control{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:13px 16px; font-family:var(--font-body); font-size:14.5px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form-control::placeholder{ color:var(--text-dim); }
.form-control:focus{ border-color:var(--data); box-shadow:0 0 0 3px rgba(59,130,246,.18); outline:none; }
.form-control.is-invalid{ border-color:#F26B6B; }
textarea.form-control{ resize:vertical; min-height:120px; }
.validation{ font-size:12.5px; color:#F26B6B; margin-top:4px; }
#sendmessage, #errormessage{ display:none; padding:12px 16px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:14px; }
#sendmessage.show{ display:block; background:rgba(59,130,246,.12); border:1px solid var(--data-2); color:var(--data-soft); }
#errormessage.show{ display:block; background:rgba(242,107,107,.12); border:1px solid #F26B6B; color:#F26B6B; }
.form button[type="submit"]{
  background:var(--data); color:#fff; border:0; padding:13px 34px; border-radius:100px; font-weight:600;
  font-size:14.5px; cursor:pointer; transition:transform .18s ease, background-color .18s ease;
}
.form button[type="submit"]:hover{ background:#5B9BFB; transform:translateY(-2px); }
.form .text-center{ text-align:left; }

.copyright, .credits{ text-align:center; color:var(--text-dim); font-size:13.5px; padding:26px 0; }
.copyright{ border-top:1px solid var(--line-soft); padding-top:26px; }
.credits{ padding-top:0; }
.credits a{ color:var(--data-soft); }

.back-to-top{
  position:fixed; right:26px; bottom:26px; width:46px; height:46px; border-radius:50%;
  background:var(--data); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease; z-index:900;
  font-size:16px;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:992px){
  nav.main-nav{ display:none !important; }
  nav.main-nav.is-open{
    display:block !important; position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    background:#fff; padding:20px 24px; overflow-y:auto; box-shadow:0 16px 32px rgba(17,26,44,.12);
  }
  nav.main-nav.is-open ul{ flex-direction:column; align-items:stretch; gap:4px; }
  nav.main-nav.is-open ul li a{ display:block; padding:14px 16px; font-size:16px; }
  nav.main-nav.is-open ul li:last-child{ margin-left:0; margin-top:10px; }
  nav.main-nav.is-open ul li:last-child a{ display:inline-block; }
  .nav-toggle{ display:flex; }

  #intro .container.float-right{ grid-template-columns:1fr; }
  .hero-illustration{ max-width:380px; margin:0 auto; order:-1; }
  .page-hero .row{ grid-template-columns:1fr; }
  .page-hero{ text-align:center; }
  .page-hero .page-hero-copy{ text-align:left; }

  #about .row{ grid-template-columns:1fr; }
  .about-art{ max-width:340px; margin:0 auto; }

  .card-grid-3{ grid-template-columns:1fr 1fr; }
  .card-grid-4{ grid-template-columns:1fr 1fr; }

  .about-extra{ grid-template-columns:1fr; text-align:center; }
  .about-extra .order-1, .about-extra .order-2{ order:initial; }
  .about-extra img{ max-width:340px; margin:0 auto; }

  .industry-grid{ grid-template-columns:1fr 1fr; }

  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid .form{ grid-column:1 / -1; }

  #call-to-action .row{ grid-template-columns:1fr; text-align:center; }
  .cta-btn-container{ margin-top:12px; }
}
@media (max-width:640px){
  section{ padding:64px 0; }
  .counters{ grid-template-columns:1fr 1fr; }
  .card-grid-3, .card-grid-4{ grid-template-columns:1fr; }
  .checklist-grid{ grid-template-columns:1fr; }
  .industry-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .intro-info > div{ flex-direction:column; align-items:stretch; }
  .intro-info h3{ text-align:left; }
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
  .page-hero{ padding-top:calc(var(--header-h) + 40px); padding-bottom:48px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}