/* ==========================================================================
   AMAZE ME MEDIA — Werbespots
   Eigenständiges Design, inspiriert von justaddsugar.de: verspielt, bunt,
   energiegeladen — aber in den Markenfarben Blau/Gelb statt Candy-Pink.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --blue:   #023de0;
  --blue-2: #0230b3;
  --yellow: #e6de0e;
  --white:  #ffffff;
  --ink:    #0b0f2e;
  --soft:   #eef1ff;
  --gray:   #5b6082;
  --line:   rgba(11,15,46,.1);

  --display:'Fredoka', sans-serif;
  --body:'Inter', sans-serif;
  --wrap: 1240px;
  --ease: cubic-bezier(.2,.9,.3,1.1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--white); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; color:inherit; cursor:pointer; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.05; }

.eyebrow{ font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:var(--soft); display:inline-block; padding:8px 16px; border-radius:100px; }

/* header */
header.s-header{ position:sticky; top:0; z-index:100; padding:22px 0; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.s-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.s-logo{ font-family:var(--display); font-weight:700; font-size:22px; color:var(--ink); }
.s-logo .dot{ color:var(--blue); }
.s-nav{ display:flex; gap:30px; }
.s-nav a{ font-size:14px; font-weight:600; color:var(--gray); transition:color .25s; }
.s-nav a:hover{ color:var(--ink); }
.back-home{ font-size:13px; color:var(--gray); }
.s-cta{ background:var(--blue); color:#fff; font-weight:600; font-size:14px; padding:12px 24px; border-radius:100px; transition:transform .3s var(--ease), background .3s; }
.s-cta:hover{ background:var(--ink); transform:translateY(-2px); }
.s-menu-toggle{ display:none; font-size:22px; }
@media (max-width:860px){ .s-nav{ display:none; } .s-menu-toggle{ display:block; } }

/* hero */
.s-hero{ padding:90px 0 60px; position:relative; overflow:hidden; }
.s-hero::before{ content:""; position:absolute; top:-160px; right:-160px; width:420px; height:420px; border-radius:50%; background:var(--yellow); opacity:.35; filter:blur(10px); }
.s-hero-inner{ position:relative; z-index:2; text-align:center; max-width:820px; margin:0 auto; }
.s-hero h1{ font-size:clamp(38px,7vw,84px); }
.s-hero h1 .blue{ color:var(--blue); }
.s-hero p{ margin-top:20px; color:var(--gray); font-size:17px; max-width:56ch; margin-left:auto; margin-right:auto; }
.s-hero .actions{ display:flex; justify-content:center; gap:16px; margin-top:32px; flex-wrap:wrap; }

.btn.s-btn{ font-family:var(--body); font-weight:700; font-size:14px; padding:15px 28px; border-radius:100px; display:inline-flex; align-items:center; gap:8px; transition:transform .3s var(--ease); }
.s-btn-fill{ background:var(--blue); color:#fff; }
.s-btn-fill:hover{ transform:translateY(-3px); }
.s-btn-yellow{ background:var(--yellow); color:var(--ink); }
.s-btn-yellow:hover{ transform:translateY(-3px); }
.s-btn-line{ border:2px solid var(--ink); color:var(--ink); }
.s-btn-line:hover{ transform:translateY(-3px); }

/* showreel */
.s-reel{ margin-top:50px; position:relative; border-radius:28px; overflow:hidden; aspect-ratio:16/8; background:var(--ink); }
.s-reel .video-embed{ position:absolute; inset:0; }
.s-reel .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* stats */
.s-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; padding:70px 0; }
.s-stats .num{ font-family:var(--display); font-weight:700; font-size:clamp(32px,4vw,50px); color:var(--blue); }
.s-stats .label{ color:var(--gray); font-size:14px; margin-top:6px; }
@media (max-width:760px){ .s-stats{ grid-template-columns:repeat(2,1fr); } }

/* icon services */
.s-section{ padding:90px 0; }
.s-head{ max-width:60ch; margin:0 auto 50px; text-align:center; }
.s-head h2{ font-size:clamp(30px,4.4vw,48px); margin-top:14px; }
.s-head p{ color:var(--gray); margin-top:16px; font-size:16px; }

.s-icon-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border-radius:24px; overflow:hidden; }
.s-icon-card{ background:#fff; padding:34px 24px; text-align:center; transition:background .3s; }
.s-icon-card:hover{ background:var(--soft); }
.s-icon-card .emoji{ font-size:30px; }
.s-icon-card h3{ font-size:16px; margin-top:14px; font-weight:600; }
@media (max-width:860px){ .s-icon-row{ grid-template-columns:repeat(2,1fr); } }

/* phone mockups */
.s-phones{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.s-phone{ border-radius:26px; overflow:hidden; aspect-ratio:9/16; background:var(--soft); border:6px solid var(--ink); position:relative; }
.s-phone .video-embed{ position:absolute; inset:0; }
.s-phone .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:860px){ .s-phones{ grid-template-columns:repeat(2,1fr); } }

/* client marquee */
.s-marquee-band{ background:var(--blue); padding:22px 0; overflow:hidden; white-space:nowrap; }
.s-marquee-band .track{ display:inline-flex; animation:smarquee 24s linear infinite; }
.s-marquee-band span{ font-family:var(--display); font-weight:600; font-size:20px; color:#fff; padding:0 30px; opacity:.9; }
@keyframes smarquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* portfolio */
.s-portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
@media (max-width:760px){ .s-portfolio-grid{ grid-template-columns:1fr; } }
.s-video{ position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:var(--ink); }
.s-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.s-video-caption{ margin-top:14px; }
.s-video-caption .tag{ font-size:12px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.05em; }
.s-video-caption h3{ font-size:19px; margin-top:4px; }

/* cta */
.s-cta-band{ background:var(--ink); border-radius:28px; padding:80px 48px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.s-cta-band::before{ content:""; position:absolute; inset:-30%; background:radial-gradient(circle at 70% 30%, rgba(230,222,14,.25), transparent 60%); }
.s-cta-band h2{ font-size:clamp(32px,5vw,56px); position:relative; }
.s-cta-band p{ color:rgba(255,255,255,.75); margin-top:14px; position:relative; }
.s-cta-band .actions{ display:flex; justify-content:center; gap:16px; margin-top:30px; flex-wrap:wrap; position:relative; }

/* contact */
.s-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
@media (max-width:840px){ .s-contact-grid{ grid-template-columns:1fr; } }
.s-info-row{ display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.s-info-row:last-child{ border-bottom:1px solid var(--line); }
.s-info-row .k{ width:100px; flex-shrink:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); }
.s-form{ display:flex; flex-direction:column; gap:20px; }
.s-field{ display:flex; flex-direction:column; gap:8px; }
.s-field label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray); }
.s-field input, .s-field textarea{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-family:var(--body); font-size:15px; color:var(--ink); }
.s-field input:focus, .s-field textarea:focus{ outline:none; border-color:var(--blue); }
.s-field textarea{ min-height:120px; resize:vertical; }

/* footer */
footer.s-footer{ background:var(--soft); padding:56px 0 32px; text-align:center; }
footer.s-footer p{ color:var(--gray); font-size:13px; margin-top:12px; }
footer.s-footer .back-home{ display:inline-block; margin-top:14px; color:var(--blue); font-weight:600; }

/* reveal – jetzt mit Lens Blur */
.s-reveal{ opacity:0; transform:translateY(30px); filter:blur(10px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter 1.1s var(--ease); }
.s-reveal.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }
@media (prefers-reduced-motion: reduce){ .s-reveal{ filter:none; } }
.center{ text-align:center; }