/* C2C Media Production — responsive single-page website */
:root{--ink:#121923;--muted:#68717d;--paper:#f7f8f5;--white:#fff;--lime:#d9ff5b;--line:#e5e8e2;--dark:#111722;--radius:22px;--font-body:"DM Sans",sans-serif;--font-display:"Manrope",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(6.5vw,24px);background:rgba(247,248,245,.92);border-bottom:1px solid rgba(18,25,35,.06);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;letter-spacing:-.06em}
.logo-mark{display:grid;place-items:center;background:var(--lime);color:var(--ink);width:46px;height:39px;border-radius:10px;font-size:16px;letter-spacing:-.07em}
.logo-name{font-size:15px;letter-spacing:-.04em}
.nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:700}
.nav>a:not(.nav-contact){color:#525b65;transition:color .2s}
.nav>a:not(.nav-contact):hover{color:var(--ink)}
.nav-contact{background:var(--ink);color:#fff;padding:12px 17px;border-radius:999px}
.nav-contact span{color:var(--lime);margin-left:7px}
.menu-toggle{display:none;background:none;border:0;padding:8px}
.section{padding:108px max(8vw,24px)}
.hero{min-height:640px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:5vw;padding-top:76px;padding-bottom:90px;overflow:hidden}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 20px;font-size:10px;font-weight:800;letter-spacing:.15em;color:#5f6872}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#9fca1e;box-shadow:0 0 0 4px rgba(217,255,91,.45)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.065em}
h1{font-size:clamp(54px,6.2vw,90px);line-height:1.04;margin-bottom:25px;font-weight:800}
h1 span,.contact-copy h2 span{color:#9abf24}
.intro{max-width:480px;color:var(--muted);font-size:16px;line-height:1.85}
.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:999px;padding:15px 22px;font-size:13px;font-weight:800;cursor:pointer;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button.primary{background:var(--lime);color:var(--ink)}
.button.primary:hover{background:#c8f340}
.simple-link{font-size:12px;font-weight:800}
.simple-link span{margin-left:8px}
.hero-proof{display:flex;align-items:center;gap:12px;margin-top:46px;color:#737c85;font-size:11px;font-weight:600}
.proof-stars{color:#9abf24;letter-spacing:.18em}
.hero-visual{position:relative;min-height:450px;border-radius:32px;background:#151d29;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.hero-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(217,255,91,.13),transparent 34%),linear-gradient(135deg,transparent 40%,rgba(255,255,255,.025));z-index:-2}
.hero-visual:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.08);border-radius:50%;z-index:-1}
.visual-orbit{position:absolute;border:1px solid rgba(217,255,91,.15);border-radius:50%;transform:rotate(-28deg)}
.orbit-one{width:360px;height:190px}.orbit-two{width:450px;height:240px}
.visual-label{position:absolute;top:30px;left:30px;color:#c8d0d8;font-size:9px;font-weight:800;letter-spacing:.13em}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:7px}
.growth-circle{width:205px;height:205px;display:grid;place-items:center;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 0 0 18px rgba(217,255,91,.06),0 0 0 42px rgba(217,255,91,.035);transform:rotate(-10deg)}
.growth-circle span{text-align:center;font-family:var(--font-display);font-size:34px;font-weight:800;line-height:1.05;letter-spacing:-.08em}
.growth-circle b{display:inline-block;font-size:48px;line-height:1.1}
.growth-card{position:absolute;bottom:32px;right:26px;display:flex;align-items:center;gap:13px;padding:15px 18px;background:#fff;border-radius:14px;box-shadow:0 16px 40px #0002}
.growth-card .up{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:var(--lime);font-size:22px}
.growth-card small,.growth-card strong{display:block}
.growth-card small{font-size:8px;letter-spacing:.1em;color:#79818a;font-weight:800}
.growth-card strong{font-family:var(--font-display);font-size:13px;letter-spacing:-.03em}
.visual-chip{position:absolute;color:#e5ebf0;border:1px solid #ffffff25;border-radius:99px;padding:9px 12px;font-size:8px;letter-spacing:.12em;font-weight:800}
.visual-chip b,.visual-chip span{color:var(--lime)}
.chip-top{right:28px;top:95px}.chip-bottom{left:28px;bottom:43px}
.section-title{max-width:620px;margin:0 auto 48px;text-align:center}
.section-title .eyebrow{justify-content:center;margin-bottom:13px}
h2{font-size:clamp(38px,4.3vw,58px);line-height:1.12;margin-bottom:14px;font-weight:800}
.title-period{color:#a2c62a}
.section-title>p:last-child{color:var(--muted);font-size:14px;margin-bottom:0}
.services{background:#fff}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1240px;margin:auto}
.service-card{position:relative;min-height:238px;padding:26px 22px 30px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}
.service-card:hover{transform:translateY(-4px);border-color:#cbdc91;box-shadow:0 14px 36px #15200c0b}
.service-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#f0f5df;color:#536b11;font-size:19px;margin-bottom:24px}
.service-card h3{font-size:17px;line-height:1.35;margin-bottom:10px;letter-spacing:-.04em}
.service-card p{color:var(--muted);font-size:12px;line-height:1.75;margin:0;max-width:260px}
.card-index{position:absolute;right:18px;top:20px;font-size:9px;font-weight:800;letter-spacing:.1em;color:#a8b0b7}
.clients{background:var(--paper)}
.client-slider{max-width:1120px;margin:0 auto}
.client-viewport{overflow:hidden;border-radius:20px}
.client-track{display:flex;width:600%;transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform}
.client-slide{width:16.6666667%;flex:0 0 16.6666667%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;padding:3px}
.client-logo{min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:15px 10px;border:1px solid #e2e6dc;border-radius:16px;background:#fff;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(12px,1.35vw,17px);letter-spacing:-.045em;line-height:1.3;overflow-wrap:anywhere}
.client-symbol{display:grid;place-items:center;width:42px;height:42px;background:#f1f5e6;color:#607d0e;border-radius:50%;font-size:18px;letter-spacing:-.06em}
.client-light{color:#89929a;font-weight:600}
.client-feature{background:#fdfef9;border-style:dashed}
.slider-controls{display:flex;align-items:center;justify-content:space-between;margin:23px 3px 0}
.slider-caption{display:flex;align-items:center;gap:12px;margin:0;color:#9098a0;font-size:10px;font-weight:800;letter-spacing:.1em}
.slider-caption #slide-current{color:var(--ink);font-size:14px}
.slider-line{width:54px;height:1px;background:#cdd2c8}
.slider-caption-label{margin-left:7px}
.slider-buttons{display:flex;gap:8px}
.slider-arrow{width:42px;height:42px;border:1px solid #dfe3da;border-radius:50%;background:transparent;font-size:20px;cursor:pointer;transition:background .2s,border .2s}
.slider-arrow:hover{background:var(--lime);border-color:var(--lime)}
.slider-dots{display:flex;justify-content:center;gap:7px;margin-top:17px}
.slider-dot{width:6px;height:6px;padding:0;border:0;border-radius:99px;background:#c8cec1;cursor:pointer;transition:width .2s,background .2s}
.slider-dot.active{width:22px;background:#a3c72a}
.note{margin:22px auto 0;text-align:center;color:#969da3;font-size:10px;line-height:1.6}
.testimonials{background:#fff}
.testimonial-card{max-width:780px;margin:auto;padding:48px 8%;border:1px solid var(--line);border-radius:24px;text-align:center;background:linear-gradient(135deg,#fff,#fbfcf8)}
.stars{color:#a0c524;letter-spacing:.18em;font-size:15px;margin-bottom:22px}
blockquote{margin:0 auto 28px;font-family:var(--font-display);font-size:clamp(19px,2.5vw,27px);line-height:1.6;font-weight:600;letter-spacing:-.04em}
.testimonial-person{display:flex;justify-content:center;align-items:center;gap:11px;text-align:left}
.person-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lime);font-weight:800}
.testimonial-person strong,.testimonial-person small{display:block}
.testimonial-person strong{font-size:12px}.testimonial-person small{font-size:10px;color:var(--muted);margin-top:2px}
.contact{display:grid;grid-template-columns:1fr .85fr;gap:8vw;align-items:center;background:#151d29;color:#fff}
.contact-copy .eyebrow{color:#c0c8d0}
.contact-copy h2{font-size:clamp(42px,5vw,68px);line-height:1.1;margin-bottom:24px}
.contact-copy h2 span{color:var(--lime)}
.contact-copy>p:not(.eyebrow){max-width:420px;color:#b6c0c9;font-size:14px;line-height:1.8;margin-bottom:28px}
.email-link{display:inline-flex;align-items:center;gap:12px;color:var(--lime);font-weight:700;font-size:14px;overflow-wrap:anywhere}
.contact-form{padding:32px;background:#fff;color:var(--ink);border-radius:22px}
.contact-form h3{font-size:25px;margin-bottom:23px}
.contact-form label{display:block;margin-bottom:17px;font-size:11px;font-weight:800}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #e1e5df;border-radius:10px;background:#fbfcfa;color:var(--ink);font-size:13px;outline:none;transition:border .2s,box-shadow .2s}
.contact-form input:focus,.contact-form textarea:focus{border-color:#a4c72d;box-shadow:0 0 0 3px #d9ff5b45}
.contact-form textarea{resize:vertical;min-height:105px}
.contact-form .button{width:100%;margin-top:2px}
.form-note{font-size:10px;color:#858d95;margin:12px 0 0;text-align:center;line-height:1.5}
footer{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;padding:28px max(6.5vw,24px);background:#0d121a;color:#fff}
footer .logo-mark{width:40px;height:34px;font-size:14px}
footer .logo-name{font-size:13px}
footer p{margin:0;text-align:center;color:#9da6af;font-size:11px}
footer small{text-align:right;color:#87909a;font-size:10px}
@media(max-width:1050px){.section{padding-left:6vw;padding-right:6vw}.hero{gap:4vw}.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-card{min-height:210px}.contact{gap:5vw}}
@media(max-width:760px){.header{height:72px;padding:0 22px}.menu-toggle{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid #e1e5dc;cursor:pointer}.menu-toggle span{display:block;width:17px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}.nav{display:none;position:absolute;top:71px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 22px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 25px #10151f0a}.nav.open{display:flex}.nav>a{padding:14px 8px}.nav .nav-contact{margin-top:8px;text-align:center;padding:13px}.section{padding:78px 22px}.hero{grid-template-columns:1fr;gap:45px;padding-top:66px;padding-bottom:70px}.hero-copy{max-width:590px}.hero-visual{min-height:390px}.hero-proof{margin-top:32px}h1{font-size:clamp(54px,12vw,78px)}.section-title{margin-bottom:34px}.service-grid{gap:11px}.service-card{padding:22px 17px;min-height:220px}.service-card h3{font-size:16px}.client-slide{gap:8px;padding:2px}.client-logo{min-height:112px;padding:12px 7px;gap:8px;font-size:12px}.client-symbol{width:34px;height:34px;font-size:15px}.contact{grid-template-columns:1fr;gap:38px}.contact-form{padding:26px}.testimonial-card{padding:38px 7%}footer{grid-template-columns:1fr 1fr;padding:25px 22px}footer p{display:none}footer small{font-size:9px}}
@media(max-width:430px){.logo{gap:8px}.logo-mark{width:41px;height:35px;font-size:14px}.logo-name{font-size:13px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-visual{min-height:330px;border-radius:24px}.growth-circle{width:160px;height:160px}.growth-circle span{font-size:28px}.growth-circle b{font-size:38px}.growth-card{right:13px;bottom:20px;padding:11px 12px}.growth-card .up{width:32px;height:32px}.visual-label{left:18px;top:22px;font-size:8px}.chip-top{right:15px;top:70px}.chip-bottom{left:15px;bottom:28px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0;padding:22px}.service-icon{margin-bottom:17px}.service-card p{max-width:none}.client-logo{min-height:95px;font-size:10px;padding:8px 4px}.client-symbol{width:29px;height:29px;font-size:13px}.slider-caption{gap:7px;font-size:8px}.slider-caption-label{display:none}.slider-line{width:34px}.slider-arrow{width:38px;height:38px}.contact-copy h2{font-size:43px}.email-link{font-size:12px}.contact-form{padding:22px}.testimonial-card{padding:32px 20px}footer .logo-name{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}