/* Design DNA by byCORE · ad creatives, matched to the live coredna.guru page.
   Dark canvas, lime-green signature, rounded bold display, monospace square-bullet
   labels, rounded pill CTAs. */

:root{
  --bg:#0b0c0a;          /* page / ad canvas, near-black */
  --bg2:#14170f;         /* slightly lifted panel */
  --bg3:#1b1f16;
  --green:#c6f24e;       /* primary lime signature */
  --green-2:#b6e83a;
  --red:#f5442e;         /* section-marker red */
  --purple:#a78bfa;      /* byCORE "by" mark */
  --white:#f3f5ee;
  --muted:#9aa08f;
  --line:rgba(243,245,238,.12);

  --font-d:'Poppins',system-ui,sans-serif;   /* rounded geometric display */
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font-b);
  -webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;margin:0;line-height:1.02;letter-spacing:-0.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:var(--bg)}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:40px}}

/* ---------- page chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(11,12,10,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:17px}
.brand .sq{width:16px;height:16px;background:var(--green);border-radius:3px}
.brand .by{color:var(--purple);font-style:italic;font-weight:600}
.brand .core{color:var(--white)}
.brand .slash{color:var(--muted);font-family:var(--font-m);font-weight:400;font-size:13px}
.tb-note{font-family:var(--font-m);font-size:12.5px;color:var(--muted)}

.section-h{font-family:var(--font-m);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 6px}
.section-h .sq{width:12px;height:12px;border-radius:2px;background:var(--green)}
.section-h .sq.red{background:var(--red)}
.section-h .sq.pur{background:var(--purple)}
.lede{color:var(--muted);max-width:70ch;font-size:15.5px}

/* format meta line under an ad */
.spec{font-family:var(--font-m);font-size:12.5px;color:var(--muted);margin-top:10px}

/* gallery */
.gallery{display:flex;flex-wrap:wrap;gap:26px}

/* ---------- the ad creative ---------- */
.ad{position:relative;background:var(--bg);color:var(--white);overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--line);border-radius:6px;
  background-image:radial-gradient(rgba(198,242,78,.05) 1px,transparent 1px);
  background-size:22px 22px}
.ad .pad{padding:30px;display:flex;flex-direction:column;height:100%;justify-content:space-between;gap:16px}
.ad-1x1{width:440px;height:440px;max-width:88vw}
.ad-9x16{width:320px;height:568px;max-width:88vw}
.ad-191x1{width:640px;height:335px;max-width:92vw}
.ad-card{width:300px;height:300px;max-width:80vw}

.ad .tag{font-family:var(--font-m);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:9px}
.ad .tag .sq{width:11px;height:11px;border-radius:2px;background:var(--green)}
.ad .tag.red{color:var(--red)}.ad .tag.red .sq{background:var(--red)}
.ad .tag.pur{color:var(--purple)}.ad .tag.pur .sq{background:var(--purple)}

.ad h3{font-family:var(--font-d);font-weight:700;letter-spacing:-0.03em;line-height:1.0}
.ad .g{color:var(--green)}
.ad .sub{color:#cdd0c4;font-size:15px;line-height:1.45}
.ad-1x1 h3{font-size:31px}.ad-1x1 .sub{font-size:14.5px}
.ad-9x16 h3{font-size:30px}.ad-9x16 .sub{font-size:14px}
.ad-191x1 h3{font-size:30px}.ad-191x1 .sub{font-size:14.5px}
.ad-card h3{font-size:23px}.ad-card .sub{font-size:13px}

.pill{align-self:flex-start;font-family:var(--font-d);font-weight:600;font-size:13.5px;
  background:var(--green);color:var(--bg);padding:11px 18px;border-radius:9px;display:inline-flex;align-items:center;gap:8px}
.pill.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(243,245,238,.28)}

.dots{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--font-m);font-size:12px;color:var(--muted)}
.dots span{display:inline-flex;align-items:center;gap:7px}
.dots .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
.dots .d.red{background:var(--red)}.dots .d.pur{background:var(--purple)}

.admark{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:700;font-size:14px}
.admark .sq{width:13px;height:13px;border-radius:3px;background:var(--green)}
.admark .by{color:var(--purple);font-style:italic;font-weight:600}
.admark .slash{color:var(--muted);font-family:var(--font-m);font-weight:400;font-size:12px}

/* big statement for story */
.ad-9x16 h3{font-size:34px}

/* video storyboard frame */
.frame{width:300px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.frame .thumb{height:170px;background:var(--bg);display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);position:relative;
  background-image:radial-gradient(rgba(198,242,78,.06) 1px,transparent 1px);background-size:18px 18px}
.frame .ost{font-family:var(--font-d);font-weight:700;font-size:17px;text-align:center;padding:0 16px;line-height:1.05}
.frame .meta{padding:12px 14px;font-family:var(--font-m);font-size:12px;color:var(--muted);line-height:1.5}
.frame .t{color:var(--green)}

/* copy reference block (for Google/Reddit text-only platforms) */
.copyblock{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:16px 18px;
  font-family:var(--font-m);font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-x:auto;color:#dfe2d6}
.copyblock .c{color:var(--muted)}

hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- animated build (motion ad) ---------- */
/* One shared 9s loop. Every element is keyframed by percentage of that loop
   with NO animation-delay, so the loop restart is always clean.
   Sequence: type prompt -> compose blocks -> export click -> lands in Elementor. */
.ad.anim .pad{gap:14px}
.build{position:relative;flex:1;min-height:120px;border:1px solid var(--line);border-radius:9px;
  background:#0e100c;overflow:hidden;display:flex;flex-direction:column}

/* browser chrome */
.bw-bar{display:flex;align-items:center;gap:9px;padding:8px 11px;background:#12140e;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.bw-bar .dots{display:flex;gap:5px}
.bw-bar .dots i{width:8px;height:8px;border-radius:50%;background:#2a2e22}
.bw-url{font-family:var(--font-m);font-size:10px;color:var(--muted)}

/* the typed prompt line, like the landing's WATCH AN EXAMPLE widget */
.bw-prompt{display:flex;align-items:center;gap:8px;padding:7px 11px;background:#0f110c;
  border-bottom:1px solid var(--line);flex:0 0 auto;overflow:hidden}
.bw-prompt .arw{flex:0 0 auto;font-family:var(--font-m);font-size:12px;font-weight:800;color:var(--ex-accent)}
.bw-prompt .txt{flex:1 1 auto;min-width:0;font-family:var(--font-m);font-size:10.5px;color:#e6e8de;
  white-space:nowrap;overflow:hidden;max-width:100%}

/* the composed client site, in its REAL palette + type (set per ad via --ex-* vars) */
.site{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ex-nav-bg,#0e100c);color:var(--ex-nav-fg,#f3f5ee);font-family:var(--ex-font,Georgia,serif)}
.site-strip{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:5px 12px;flex:0 0 auto;
  font-family:var(--font-b);font-size:7.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;background:var(--ex-strip-bg,#111);color:var(--ex-strip-fg,#aaa)}
.site-strip i{color:var(--ex-accent);font-style:normal;opacity:.9}
.site-nav{display:flex;align-items:center;gap:9px;padding:9px 12px;flex:0 0 auto;overflow:hidden}
.site-nav .nl{flex:1 1 0;min-width:0;overflow:hidden;display:flex;gap:8px;font-family:var(--font-b);
  font-size:7px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:color-mix(in srgb,var(--ex-nav-fg,#fff) 76%,transparent)}
.site-nav .nr{justify-content:flex-end;align-items:center}
.site-nav .logo{flex:0 0 auto;font-family:var(--ex-font,Georgia,serif);font-weight:700;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;text-align:center;white-space:nowrap;color:var(--ex-nav-fg)}
.site-nav .resv{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--ex-nav-fg,#fff) 45%,transparent);
  border-radius:20px;padding:3px 8px;font-size:6.5px;letter-spacing:.07em;white-space:nowrap}
.site-hero{position:relative;flex:1;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;
  gap:8px;padding:13px 15px 11px;overflow:hidden;background:var(--ex-herobg,#111)}
.site-hero h4{margin:0;max-width:15ch;font-family:var(--ex-font,Georgia,serif);font-weight:700;line-height:1.02;
  font-size:18px;letter-spacing:-.005em;color:var(--ex-heroink,#F1E7D1)}
.site-hero h4 em{font-style:italic;color:var(--ex-accent)}

/* live-site label + platform badge, on the hero's bottom row (mirrors the landing widget) */
.site-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.bw-tag b{display:block;font-family:var(--ex-font,Georgia,serif);font-weight:700;font-size:11px;color:#fff;line-height:1.15}
.bw-tag span{font-family:var(--font-m);font-size:8.5px;color:rgba(255,255,255,.72)}
.bw-live{flex:0 0 auto;display:flex;align-items:center;gap:5px;
  font-family:var(--font-b);font-weight:600;font-size:8.5px;letter-spacing:.04em;
  background:var(--ex-accent);color:var(--ex-onaccent);padding:4px 9px;border-radius:20px}
.bw-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

@keyframes bd-blink{0%{opacity:1}50%{opacity:0}}
@keyframes bd-type{0%{max-width:0}20%{max-width:100%}90%{max-width:100%}100%{max-width:0}}
@keyframes bd-hero{0%,26%{opacity:0;transform:translateY(10px)}33%,86%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes bd-c1{0%,31%{opacity:0;transform:translateY(8px)}37%,86%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes bd-c2{0%,34%{opacity:0;transform:translateY(8px)}40%,86%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes bd-c3{0%,37%{opacity:0;transform:translateY(8px)}43%,86%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes bd-l1{0%,42%{opacity:0}48%,86%{opacity:1}100%{opacity:0}}
@keyframes bd-l2{0%,45%{opacity:0}51%,86%{opacity:1}100%{opacity:0}}
@keyframes bd-export{0%,52%{opacity:0;transform:scale(.9)}58%{opacity:1;transform:scale(1)}
  62%{transform:scale(.9)}65%{transform:scale(1)}66%{opacity:1}68%,100%{opacity:0}}
@keyframes bd-elem{0%,65%{opacity:0;transform:translateY(14%)}73%{opacity:1;transform:translateY(0)}
  92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14%)}}

/* Motion is an ENHANCEMENT: the composed site is visible by default (above), so it
   shows even with Reduce Motion on, in a throttled background tab, or in a static
   preview. The reveal only moves transform (never opacity), so content can never be
   hidden by a paused/never-run animation. The prompt types on a loop for ongoing life. */
@media (prefers-reduced-motion: no-preference){
  .bw-prompt .txt{max-width:0;animation:bd-type 9s steps(52,end) infinite}
  .site-strip{animation:bd-rise .55s .06s ease both}
  .site-nav{animation:bd-rise .55s .20s ease both}
  .site-hero{animation:bd-rise .55s .34s ease both}
}
@keyframes bd-rise{from{transform:translateY(14px)}to{transform:translateY(0)}}