/*
Theme Name: Studio Next
Theme URI: https://studionextmarketing.nl
Author: Studio Next
Description: Premium short-form content agency Rotterdam
Version: 1.0.0
License: Proprietary
Text Domain: studio-next
*/

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

        :root {
            --bg:           #0A0A0A;
            --surface:      #111111;
            --surface2:     #161616;
            --border:       #1E1E1E;
            --accent:       #2563EB;
            --accent-h:     #1D4ED8;
            --accent-glow:  rgba(37,99,235,0.35);
            --text:         #FFFFFF;
            --muted:        #888888;
            --dim:          #444444;
            --grad-a:       #F472B6;
            --grad-b:       #67E8F9;
            --gradient:     linear-gradient(135deg, #F472B6 0%, #67E8F9 100%);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #F472B6, #67E8F9); border-radius: 2px; }

        /* ── ANIMATIONS ─────────────────────────────── */
        @keyframes fadeUp   { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
        @keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
        @keyframes ticker   { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
        @keyframes glowPulse{ 0%,100%{opacity:.25} 50%{opacity:.55} }
        @keyframes borderShimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

        .reveal { opacity:0; transform:translateY(28px); transition: opacity .75s ease, transform .75s ease; }
        .reveal.visible { opacity:1; transform:none; }
        .delay-1 { transition-delay:.10s; }
        .delay-2 { transition-delay:.20s; }
        .delay-3 { transition-delay:.30s; }
        .delay-4 { transition-delay:.40s; }
        .delay-5 { transition-delay:.50s; }

        /* ── LAYOUT HELPERS ──────────────────────────── */
        .container { max-width:1160px; margin:0 auto; }
        section { padding:108px 40px; }

        .label {
            display:inline-flex; align-items:center; gap:10px;
            font-size:11px; font-weight:700; letter-spacing:2.5px;
            text-transform:uppercase; margin-bottom:18px;
            background: var(--gradient);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .label::before { content:''; width:18px; height:1px; background:var(--gradient); }

        h2.section-title {
            font-size: clamp(34px, 5vw, 54px);
            font-weight:900; letter-spacing:-2px; line-height:1.05;
            margin-bottom:18px;
        }
        .section-sub {
            font-size:17px; color:var(--muted); line-height:1.75;
            max-width:520px;
        }

        /* ── BUTTONS ─────────────────────────────────── */
        .btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-family:inherit; font-weight:600; border-radius:9px; transition:all .28s ease; text-decoration:none; }
        .btn-primary {
            background:var(--accent); color:#fff; font-size:15px; padding:14px 26px;
        }
        .btn-primary:hover {
            background:var(--accent-h); transform:translateY(-2px);
            box-shadow:0 12px 32px var(--accent-glow);
        }
        .btn-outline {
            background:transparent; color:#fff; font-size:15px; padding:13px 26px;
            border:1px solid rgba(255,255,255,.14);
        }
        .btn-outline:hover { border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.04); }

        /* ── NAV ─────────────────────────────────────── */
        #nav {
            position:fixed; inset:0 0 auto; z-index:900;
            padding:22px 0; transition:padding .3s, background .3s, border .3s;
        }
        #nav.scrolled {
            padding:14px 0;
            background:rgba(10,10,10,.88);
            backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
            border-bottom:1px solid var(--border);
        }
        .nav-inner {
            max-width:1160px; margin:0 auto; padding:0 40px;
            display:flex; align-items:center; justify-content:space-between;
        }
        .logo {
            display:flex; align-items:center; gap:9px;
            font-size:17px; font-weight:900; letter-spacing:-0.5px;
            color:#fff; text-decoration:none;
        }
        .logo-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; }
        .nav-links { display:flex; align-items:center; gap:30px; list-style:none; }
        .nav-links a {
            font-size:14px; font-weight:500; color:rgba(255,255,255,.5);
            text-decoration:none; transition:color .2s;
        }
        .nav-links a:hover { color:#fff; }

        .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
        .hamburger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }

        /* Mobile overlay */
        #mobileOverlay {
            display:none; position:fixed; inset:0; z-index:880;
            background:var(--bg); flex-direction:column; align-items:center; justify-content:center; gap:36px;
        }
        #mobileOverlay.open { display:flex; }
        #mobileOverlay a { font-size:28px; font-weight:800; color:#fff; text-decoration:none; transition:color .2s; }
        #mobileOverlay a:hover { color:var(--accent); }
        .mobile-close { position:absolute; top:24px; right:36px; background:none; border:none; color:#fff; font-size:26px; cursor:pointer; }

        /* ── HERO ────────────────────────────────────── */
        #hero {
            min-height:100vh; display:flex; flex-direction:column;
            justify-content:center; position:relative; overflow:hidden;
            padding:150px 40px 90px;
        }
        .hero-grid {
            position:absolute; inset:0; pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size:64px 64px;
        }
        .hero-glow {
            position:absolute; top:45%; left:50%; transform:translate(-50%,-50%);
            width:900px; height:700px; pointer-events:none;
            background:radial-gradient(ellipse, rgba(103,232,249,.10) 0%, rgba(244,114,182,.08) 50%, transparent 70%);
            animation:glowPulse 5s ease-in-out infinite;
        }
        .hero-content { max-width:1160px; margin:0 auto; position:relative; z-index:1; }

        .hero-badge {
            display:inline-flex; align-items:center; gap:9px;
            background:rgba(244,114,182,.07); border:1px solid rgba(244,114,182,.28);
            padding:7px 15px; border-radius:100px; font-size:12px; font-weight:600;
            color:#F9A8D4; margin-bottom:36px;
            animation: fadeUp .6s ease both;
        }
        .badge-dot { width:6px; height:6px; background:var(--grad-a); border-radius:50%; animation:glowPulse 2s infinite; }

        .hero-title {
            font-size: clamp(42px, 7.5vw, 82px);
            font-weight:900; letter-spacing:-3.5px; line-height:1.0;
            margin-bottom:28px;
            animation: fadeUp .7s .1s ease both;
        }
        .hero-title em {
            font-style:normal;
            background: linear-gradient(135deg, #F9A8D4 0%, #ffffff 40%, #67E8F9 100%);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
        }

        .hero-sub {
            font-size:19px; color:var(--muted); line-height:1.7;
            max-width:580px; margin-bottom:44px;
            animation: fadeUp .7s .2s ease both;
        }

        .hero-ctas {
            display:flex; gap:14px; flex-wrap:wrap;
            animation: fadeUp .7s .3s ease both;
        }

        .hero-stats {
            display:flex; gap:48px; flex-wrap:wrap;
            margin-top:72px; padding-top:40px;
            border-top:1px solid var(--border);
            animation: fadeUp .7s .45s ease both;
        }
        .stat-num  { font-size:34px; font-weight:900; letter-spacing:-1.5px; line-height:1; }
        .stat-lbl  { font-size:12px; color:var(--muted); margin-top:5px; font-weight:500; }

        /* ── TICKER ──────────────────────────────────── */
        #ticker {
            overflow:hidden; padding:0;
            background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
        }
        .ticker-track {
            display:flex; align-items:center; white-space:nowrap;
            padding:14px 0;
            animation:ticker 30s linear infinite;
        }
        .ticker-item {
            display:inline-flex; align-items:center; gap:14px;
            padding:0 28px; font-size:12px; font-weight:700;
            letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
        }
        .t-dot { width:4px; height:4px; background:var(--accent); border-radius:50%; }

        /* ── DIENSTEN ────────────────────────────────── */
        #diensten {}

        .services-header { margin-bottom:56px; }

        .services-grid {
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap:1px;
            background:var(--border);
            border:1px solid var(--border);
            border-radius:16px;
            overflow:hidden;
        }

        .svc {
            background:var(--surface);
            padding:40px 36px;
            transition:background .3s;
            position:relative;
        }
        .svc:hover { background:var(--surface2); }
        .svc::after {
            content:''; position:absolute; inset:0 0 auto;
            height:2px; background:var(--gradient);
            opacity:0; transition:opacity .3s;
        }
        .svc:hover::after { opacity:1; }

        .svc-num {
            font-size:11px; font-weight:700;
            letter-spacing:2px; text-transform:uppercase; margin-bottom:14px;
            background:var(--gradient); -webkit-background-clip:text;
            -webkit-text-fill-color:transparent; background-clip:text;
        }
        .svc-title { font-size:20px; font-weight:800; letter-spacing:-.5px; margin-bottom:12px; }
        .svc-desc { font-size:14px; color:var(--muted); line-height:1.75; }

        /* ── CASES ───────────────────────────────────── */
        #cases { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

        .cases-grid {
            display:grid;
            grid-template-columns: repeat(3, 1fr);
            gap:16px;
            margin-top:56px;
        }

        .case-card {
            background:var(--bg);
            border:1px solid var(--border);
            border-radius:16px;
            padding:36px 32px;
            transition:all .3s ease;
            position:relative;
            overflow:hidden;
        }
        .case-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:2px;
            background:var(--gradient);
            opacity:0; transition:opacity .3s;
        }
        .case-card:hover {
            border-color:rgba(37,99,235,.35);
            transform:translateY(-5px);
            box-shadow:0 24px 64px rgba(0,0,0,.55);
        }
        .case-card:hover::before { opacity:1; }

        .case-industry {
            font-size:11px; font-weight:700; letter-spacing:2px;
            text-transform:uppercase; margin-bottom:10px;
            background:var(--gradient); -webkit-background-clip:text;
            -webkit-text-fill-color:transparent; background-clip:text;
        }
        .case-name {
            font-size:26px; font-weight:900; letter-spacing:-.8px; margin-bottom:22px;
        }
        .case-divider { height:1px; background:var(--border); margin-bottom:20px; }
        .case-stats { display:flex; flex-direction:column; gap:11px; margin-bottom:22px; }
        .case-row { display:flex; justify-content:space-between; align-items:center; }
        .case-row-lbl { font-size:13px; color:var(--muted); }
        .case-row-val { font-size:15px; font-weight:800; }
        .case-row-val.green { color:#4ADE80; }
        .case-tag {
            display:inline-flex; align-items:center; gap:5px;
            background:rgba(244,114,182,.08); border:1px solid rgba(244,114,182,.22);
            padding:4px 11px; border-radius:100px;
            font-size:11px; color:#F9A8D4; font-weight:600;
        }

        /* ── WERKWIJZE ───────────────────────────────── */
        #werkwijze {}

        .steps { margin-top:60px; }
        .step {
            display:grid; grid-template-columns:88px 1fr;
            gap:32px; padding:44px 0;
            border-bottom:1px solid var(--border);
        }
        .step:last-child { border-bottom:none; }
        .step-num {
            font-size:52px; font-weight:900; color:var(--border);
            letter-spacing:-2px; line-height:1; transition:color .35s;
        }
        .step:hover .step-num {
            background:var(--gradient); -webkit-background-clip:text;
            -webkit-text-fill-color:transparent; background-clip:text;
        }
        .step-title { font-size:22px; font-weight:800; letter-spacing:-.5px; margin-bottom:10px; }
        .step-desc { font-size:15px; color:var(--muted); line-height:1.75; max-width:560px; }

        /* ── OVER ONS ────────────────────────────────── */
        #over { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

        .over-grid {
            display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
            margin-top:0;
        }
        .over-lead {
            font-size:16px; color:var(--muted); line-height:1.85;
            margin-top:24px; margin-bottom:18px;
        }
        .over-values { display:flex; flex-direction:column; gap:14px; }
        .value {
            display:flex; align-items:flex-start; gap:16px;
            padding:20px 22px;
            background:var(--bg); border:1px solid var(--border);
            border-radius:12px; transition:border-color .3s;
        }
        .value:hover { border-color:rgba(37,99,235,.35); }
        .value-icon {
            width:38px; height:38px; flex-shrink:0;
            background:linear-gradient(135deg, rgba(244,114,182,.15), rgba(103,232,249,.15));
            border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px;
        }
        .value h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
        .value p  { font-size:13px; color:var(--muted); line-height:1.65; }

        /* ── CONTACT / OFFERTE ───────────────────────── */
        #contact {}

        .contact-grid {
            display:grid; grid-template-columns:1fr 1.45fr; gap:64px; margin-top:60px;
        }

        .contact-left h3 { font-size:22px; font-weight:800; letter-spacing:-.5px; margin-bottom:12px; }
        .contact-left p { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:36px; }

        .c-rows { display:flex; flex-direction:column; gap:16px; }
        .c-row { display:flex; align-items:center; gap:14px; }
        .c-icon {
            width:40px; height:40px; flex-shrink:0;
            background:rgba(244,114,182,.08); border:1px solid rgba(244,114,182,.2);
            border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px;
        }
        .c-text span { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); }
        .c-text a, .c-text p { font-size:14px; color:#fff; text-decoration:none; margin:0; }
        .c-text a:hover { color:#F9A8D4; }

        .cta-box {
            margin-top:36px; padding:28px 26px;
            background:rgba(244,114,182,.05); border:1px solid rgba(244,114,182,.18);
            border-radius:14px;
        }
        .cta-box-label {
            font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
            margin-bottom:10px;
            background:var(--gradient); -webkit-background-clip:text;
            -webkit-text-fill-color:transparent; background-clip:text;
        }
        .cta-box p { font-size:14px; line-height:1.7; color:rgba(255,255,255,.72); }

        /* FORM */
        .form { display:flex; flex-direction:column; gap:16px; }
        .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .fg { display:flex; flex-direction:column; gap:7px; }
        .fg label {
            font-size:11px; font-weight:700; letter-spacing:1.5px;
            text-transform:uppercase; color:rgba(255,255,255,.38);
        }
        .fg input, .fg select, .fg textarea {
            background:var(--surface); border:1px solid var(--border);
            color:#fff; padding:13px 16px; border-radius:9px;
            font-size:14px; font-family:inherit;
            transition:border-color .25s, background .25s;
            width:100%;
        }
        .fg input:focus, .fg select:focus, .fg textarea:focus {
            outline:none; border-color:var(--accent);
            background:rgba(37,99,235,.05);
        }
        .fg input::placeholder, .fg textarea::placeholder { color:var(--dim); }
        .fg select option { background:#1A1A1A; }
        .fg textarea { resize:vertical; min-height:120px; }

        .form-btn {
            background:var(--accent); color:#fff; border:none; padding:15px 32px;
            border-radius:9px; font-size:15px; font-weight:700; cursor:pointer;
            font-family:inherit; letter-spacing:-.2px; width:100%;
            transition:all .3s ease;
        }
        .form-btn:hover {
            background:var(--accent-h); transform:translateY(-2px);
            box-shadow:0 14px 36px var(--accent-glow);
        }

        .form-success {
            display:none; text-align:center; padding:56px 40px;
            background:rgba(37,99,235,.05); border:1px solid rgba(37,99,235,.18);
            border-radius:14px;
        }
        .form-success.show { display:block; }
        .success-check {
            width:56px; height:56px; background:rgba(37,99,235,.15);
            border-radius:50%; display:flex; align-items:center; justify-content:center;
            font-size:24px; margin:0 auto 20px;
        }
        .form-success h3 { font-size:22px; font-weight:800; margin-bottom:8px; }
        .form-success p { font-size:15px; color:var(--muted); }

        /* ── FOOTER ──────────────────────────────────── */
        footer {
            background:var(--surface);
            border-top:1px solid var(--border);
            padding:64px 40px 32px;
        }
        .footer-inner { max-width:1160px; margin:0 auto; }
        .footer-top {
            display:grid; grid-template-columns:1.6fr 1fr 1fr;
            gap:60px; margin-bottom:52px;
        }
        .footer-brand p {
            font-size:14px; color:var(--muted); line-height:1.75;
            margin-top:16px; max-width:260px;
        }
        .footer-col h4 {
            font-size:11px; font-weight:700; letter-spacing:2px;
            text-transform:uppercase; color:var(--dim); margin-bottom:20px;
        }
        .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
        .footer-col ul a { font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s; }
        .footer-col ul a:hover { color:#fff; }
        .footer-bottom {
            padding-top:28px; border-top:1px solid var(--border);
            display:flex; align-items:center; justify-content:space-between;
        }
        .footer-bottom p { font-size:13px; color:var(--dim); }
        .footer-accent { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

        /* ── RESPONSIVE ──────────────────────────────── */
        @media (max-width: 960px) {
            .nav-links, .nav-cta-desk { display:none; }
            .hamburger { display:flex; }
            .over-grid { grid-template-columns:1fr; gap:44px; }
            .contact-grid { grid-template-columns:1fr; }
            .footer-top { grid-template-columns:1fr; gap:36px; }
            .form-row { grid-template-columns:1fr; }
            .services-grid { grid-template-columns:1fr 1fr; }
            .cases-grid { grid-template-columns:1fr 1fr; }
        }

        @media (max-width: 640px) {
            section { padding:72px 24px; }
            .nav-inner { padding:0 24px; }
            footer { padding:52px 24px 28px; }
            .hero-stats { gap:28px; }
            .step { grid-template-columns:60px 1fr; gap:20px; }
            .step-num { font-size:38px; }
            .services-grid { grid-template-columns:1fr; }
            .cases-grid { grid-template-columns:1fr; }
            .hero-title { letter-spacing:-2.5px; }
            .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
        }