/*
Theme Name: Connect 24 Business V2
Theme URI: https://connect24gmbh.de
Author: Sislak Design
Description: Schlankes Onepager-Theme für die Connect 24 Business-Landingpage – V2-Design (Rot/Schwarz/Weiß, Inhaber-Sektion, Video). Kontaktformular via Contact Form 7, kompatibel mit Rank Math SEO und Borlabs Cookie, Fonts lokal (DSGVO).
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: connect24
*/

/* Fonts (lokal, DSGVO) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/montserrat-v31-latin-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/montserrat-v31-latin-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/montserrat-v31-latin-700.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/montserrat-v31-latin-800.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/roboto-v51-latin-300.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-v51-latin-regular.woff2') format('woff2')}

:root{
  --c-black:#111111; --c-anthracite:#3D3D3D; --c-grey-700:#54595F; --c-grey-500:#7A7A7A;
  --c-grey-300:#D6D8DC; --c-grey-100:#F4F5F7; --c-white:#FFFFFF;
  --c-accent:#00796B; --c-accent-d:#00564E; --c-ink:#141416;
  --f-head:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --f-body:'Roboto','Helvetica Neue',Arial,sans-serif;
  --container:1400px; --radius:4px; --radius-card:8px;
  --shadow-card:0 6px 24px rgba(17,17,17,.08);
  --section-pad:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:17px;line-height:1.65;color:var(--c-grey-500);background:var(--c-white)}
img{max-width:100%}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
section{padding:var(--section-pad) 0}
section[id]{scroll-margin-top:104px}

/* Typografie */
h1,h2,h3,h4,h5{font-family:var(--f-head);color:var(--c-black)}
h1{font-size:52px;line-height:1.15;font-weight:700;letter-spacing:-.5px}
h2{font-size:38px;line-height:1.2;font-weight:600;letter-spacing:-.3px}
h3{font-size:26px;line-height:1.3;font-weight:600}
h4{font-size:20px;line-height:1.4;font-weight:600}
.lead{font-size:20px;line-height:1.6;font-weight:300}
.overline{font-family:var(--f-head);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c-accent);display:block;margin-bottom:16px}
.overline::before{content:'';display:inline-block;width:26px;height:3px;background:currentColor;margin-right:12px;vertical-align:middle}
.hero .overline,.on-dark .overline{color:#4DB6AC}
.hl{color:var(--c-accent)}
.on-dark .hl,.hero .hl{color:#4DB6AC}
.mark-accent{display:inline-block;background:var(--c-accent);color:var(--c-white);padding:0 14px 4px;transform:rotate(-1.5deg);border-radius:3px;animation:c24-wobble 2.6s ease-in-out infinite}
.rotator{display:block;position:relative;height:1.08em;overflow:hidden}
.rotator span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;animation:c24-words 9s infinite both}
.rotator span:nth-child(2){animation-delay:3s}
.rotator span:nth-child(3){animation-delay:6s}
@keyframes c24-words{0%{opacity:0;transform:translateY(30px)}4%,29%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-30px)}}
@keyframes c24-wobble{0%,100%{transform:rotate(-2deg)}20%{transform:rotate(2.5deg) translate(2px,-5px)}45%{transform:rotate(-3.5deg) translate(-2px,3px)}70%{transform:rotate(1.5deg) translate(1px,-3px)}}
.swoosh{display:block;width:230px;height:auto;margin:14px 0 0}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--c-white)}
.on-dark p{color:rgba(255,255,255,.75)}

/* Buttons */
.btn{font-family:var(--f-head);font-size:16px;font-weight:600;padding:16px 36px;border-radius:var(--radius);text-decoration:none;display:inline-block;transition:all .25s ease;cursor:pointer;border:2px solid transparent}
.btn-primary{background:var(--c-anthracite);color:var(--c-white);border-color:var(--c-anthracite)}
.btn-primary:hover{background:var(--c-black);border-color:var(--c-black);transform:translateY(-2px)}
.btn-accent{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}
.btn-accent:hover{background:var(--c-accent-d);border-color:var(--c-accent-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--c-white);border-color:var(--c-white)}
.btn-ghost:hover{background:var(--c-white);color:var(--c-black)}

/* Navigation */
.nav{position:sticky;top:0;background:var(--c-white);box-shadow:0 2px 12px rgba(17,17,17,.07);z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:96px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:38px;height:38px;border-radius:50%;border:5px solid var(--c-black);position:relative}
.logo-mark::after{content:'';position:absolute;inset:7px;background:var(--c-black);border-radius:50%}
.logo-text{font-family:var(--f-head);font-weight:800;font-size:24px;color:var(--c-black);letter-spacing:-.5px;white-space:nowrap}
.logo-badge{font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--c-accent);text-transform:uppercase;align-self:flex-end;margin-bottom:3px}
.custom-logo-link{display:flex;align-items:center}
.custom-logo{max-height:52px;width:auto}
.nav-brand{display:flex;align-items:center;gap:16px;min-width:0}
.nav-partner{height:56px;width:auto;border-left:1px solid var(--c-grey-300);padding-left:16px}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-family:var(--f-head);font-size:15px;font-weight:500;color:var(--c-black);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--c-accent)}
.nav .btn{padding:12px 26px;font-size:14px;white-space:nowrap}
#menu{display:none}
.burger{display:none;font-size:26px;color:var(--c-black);cursor:pointer;line-height:1}
.burger::before{content:'☰'}
#menu:checked ~ .burger::before{content:'✕'}

/* Hero */
.hero{padding:0;background:var(--c-anthracite);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;min-height:620px}
.hero-content{display:flex;flex-direction:column;justify-content:center;padding:96px 48px 96px 0}
.hero-content h1{color:var(--c-white);margin-bottom:24px;font-size:58px;font-weight:800;text-transform:uppercase;letter-spacing:-1px;line-height:1.08}
.hero-content .lead{color:rgba(255,255,255,.8);margin-bottom:40px;max-width:540px}
.hero-content .swoosh{color:rgba(255,255,255,.92);margin:-4px 0 26px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{background:linear-gradient(100deg,rgba(35,35,38,.45) 0%,rgba(35,35,38,0) 48%),url('images/asif-hero.jpg') center 24%/cover no-repeat;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}

/* Partnerleiste */
.trust{background:var(--c-white);border-bottom:1px solid var(--c-grey-300)}
.trust-inner{display:flex;align-items:center;gap:32px;padding-top:16px;padding-bottom:16px}
.trust-label{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
.trust-marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.trust-track{display:flex;width:max-content;animation:c24-marquee 60s linear infinite}
.trust-marquee:hover .trust-track{animation-play-state:paused}
.trust-set{display:flex;align-items:center;gap:20px;padding-right:20px}
.trust-set img{height:64px;width:auto;filter:grayscale(1);opacity:.55;transition:all .2s}
.trust-set img:hover{filter:none;opacity:1}
@keyframes c24-marquee{to{transform:translateX(-50%)}}

/* Förderung */
.funding{background:var(--c-accent);position:relative;overflow:hidden}
.funding::before{content:'';position:absolute;top:0;right:-8%;width:40%;height:100%;background:rgba(255,255,255,.07);clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}
.funding-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;position:relative;z-index:2}
.funding .overline{color:rgba(255,255,255,.85)}
.funding p{color:rgba(255,255,255,.88);margin-top:16px}
.funding .check-list li{color:rgba(255,255,255,.92);margin-bottom:14px}
.funding .check{background:var(--c-white);color:var(--c-accent)}
.funding-card{background:var(--c-white);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.funding-card img{width:100%;height:210px;object-fit:cover;display:block}
.funding-card-body{padding:32px 32px 36px;text-align:center}
.funding-card-body .sum-label{font-family:var(--f-head);font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--c-grey-700)}
.funding-card-body .sum{font-family:var(--f-head);font-size:46px;font-weight:800;color:var(--c-accent);line-height:1.15}
.funding-card-body p{color:var(--c-grey-500);font-size:14px;margin:6px 0 24px}
.funding-card .btn{width:100%;text-align:center}

/* Leistungen */
.services{background:var(--c-grey-100)}
.section-head{text-align:center;max-width:680px;margin:0 auto 64px}
.section-head p{margin-top:16px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--c-white);border-radius:var(--radius-card);padding:40px 32px;box-shadow:var(--shadow-card);transition:transform .25s ease,box-shadow .25s ease;border-top:4px solid transparent}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(17,17,17,.13);border-top-color:var(--c-accent)}
.card-icon{width:56px;height:56px;border-radius:var(--radius);background:var(--c-accent);color:var(--c-white);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.card-icon svg{width:26px;height:26px}
.card h4{margin-bottom:12px}
.card p{font-size:15px}

/* USP */
.usp{background:linear-gradient(rgba(61,61,61,.92),rgba(61,61,61,.92)),url('images/beratung.jpg') center/cover no-repeat;position:relative;overflow:hidden}
.usp::before{content:'';position:absolute;top:0;right:-10%;width:45%;height:100%;background:rgba(255,255,255,.04);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:2}
.check-list{list-style:none;margin-top:32px}
.check-list li{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;color:rgba(255,255,255,.85);font-size:17px}
.check{width:26px;height:26px;min-width:26px;border-radius:50%;background:var(--c-accent);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:2px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-card);padding:36px 28px;text-align:center}
.stat b{font-family:var(--f-head);font-size:42px;font-weight:700;color:var(--c-white);display:block;line-height:1.1}
.stat span{font-size:14px;color:rgba(255,255,255,.65)}


/* Inhaber */
.about{background:var(--c-ink);padding:0;overflow:hidden}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:640px}
.about-content{display:flex;flex-direction:column;justify-content:center;padding:96px 48px 96px 0}
.about-content h2{color:var(--c-white);font-size:46px;line-height:1.08;font-weight:800;text-transform:uppercase;letter-spacing:-.5px}
.about-content .swoosh{color:var(--c-accent);margin-bottom:28px}
.about-content p{color:rgba(255,255,255,.78);max-width:520px}
.about-name{font-family:var(--f-head);font-weight:700;color:var(--c-white);margin-top:20px}
.about-name span{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}
.about-chips{display:flex;gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.14);padding-top:28px}
.about-chip{flex:1;text-align:center;font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.85)}
.about-chip+.about-chip{border-left:1px solid rgba(255,255,255,.14)}
.about-chip svg{display:block;width:24px;height:24px;margin:0 auto 10px}
.about-chip svg.red{color:#FF5A4C}
.about-visual{background:url('images/asif-tahir.jpg') center top/cover no-repeat;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}

/* Video-Karte */
.videos{background:var(--c-grey-100)}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1060px;margin:0 auto}
.video-card{border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:#000}
.video-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}

/* Detail */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.detail-grid h2+p{margin-top:16px}
.detail-visual{background:url('images/produkte.jpg') center/cover no-repeat;border-radius:var(--radius-card);min-height:420px;box-shadow:var(--shadow-card)}
.feature-list{list-style:none;margin:28px 0 36px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.feature-list li{display:flex;gap:10px;font-size:15px;align-items:center}
.feature-list .check{width:20px;height:20px;min-width:20px;font-size:11px;background:var(--c-anthracite);margin:0}

/* Kontakt */
.contact{background:var(--c-grey-100)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.info-block{margin-top:36px}
.info-block h4{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--c-grey-700);margin-bottom:10px}
.info-block p{font-size:16px;color:var(--c-black)}
.info-block a{color:var(--c-black);text-decoration:none}
.contact-photo{width:100%;border-radius:var(--radius-card);margin-top:36px;box-shadow:var(--shadow-card);display:block}
.form-card{background:var(--c-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:48px}
.form-card h3{margin-bottom:8px}
.form-card>p{font-size:15px;margin-bottom:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field.full{grid-column:1/-1}
.form-field label{font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--c-black)}
.form-field input,.form-field select{font-family:var(--f-body);font-size:16px;padding:14px 16px;border:1px solid var(--c-grey-300);border-radius:var(--radius);color:var(--c-black);background:var(--c-white);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.form-field input:focus,.form-field select:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,121,107,.12)}
.radio-group{display:flex;gap:12px;flex-wrap:wrap}
.form-consent{grid-column:1/-1;font-size:13px}
.form-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--c-accent);flex:none}
.form-consent a{color:var(--c-accent)}
.form-grid .btn{width:100%;grid-column:1/-1;text-align:center}

/* Contact Form 7 Bridge */
.wpcf7 .hidden-fields-container{display:none}
.form-grid>*{min-width:0}
.form-field .wpcf7-form-control-wrap{display:block;width:100%}
.radio-group .wpcf7-form-control-wrap,
.radio-group .wpcf7-radio{display:contents}
.radio-group .wpcf7-list-item{margin:0}
.radio-group .wpcf7-list-item label{position:relative;display:block;cursor:pointer}
.radio-group .wpcf7-list-item input{position:absolute;opacity:0}
.radio-group .wpcf7-list-item-label{display:block;font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--c-grey-700);border:1px solid var(--c-grey-300);border-radius:var(--radius);padding:12px 22px;transition:all .2s}
.radio-group .wpcf7-list-item:hover .wpcf7-list-item-label{border-color:var(--c-anthracite)}
.radio-group input:checked+.wpcf7-list-item-label{background:var(--c-anthracite);border-color:var(--c-anthracite);color:var(--c-white)}
.radio-group input:focus-visible+.wpcf7-list-item-label{box-shadow:0 0 0 3px rgba(0,121,107,.25)}
.form-consent .wpcf7-form-control-wrap{display:block}
.form-consent .wpcf7-list-item{margin:0}
.form-consent .wpcf7-list-item label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.form-consent .wpcf7-list-item-label{display:block}
.wpcf7-not-valid-tip{display:block;font-size:13px;color:var(--c-accent);margin-top:6px}
.form-field .wpcf7-not-valid,.form-field .wpcf7-not-valid:focus{border-color:var(--c-accent)}
.form-grid .wpcf7-response-output{grid-column:1/-1;margin:0;padding:14px 16px;border:1px solid;border-radius:var(--radius);font-size:14px}
form.init .wpcf7-response-output,form.resetting .wpcf7-response-output,
form.submitting .wpcf7-response-output{display:none}
form.sent .wpcf7-response-output{border-color:#2E7D32;color:#2E7D32}
form.invalid .wpcf7-response-output,form.unaccepted .wpcf7-response-output,
form.failed .wpcf7-response-output,form.spam .wpcf7-response-output,
form.aborted .wpcf7-response-output{border-color:var(--c-accent);color:var(--c-accent-d)}
.wpcf7-spinner{display:none;grid-column:1/-1;margin:0 auto;width:24px;height:24px;border:3px solid var(--c-grey-300);border-top-color:var(--c-accent);border-radius:50%}
form.submitting .wpcf7-spinner{display:block;animation:c24-spin .8s linear infinite}
@keyframes c24-spin{to{transform:rotate(360deg)}}
.screen-reader-response{position:absolute !important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;margin:0;padding:0;border:0}

/* Footer */
footer{background:var(--c-black);color:rgba(255,255,255,.6);padding:72px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-brand .nav-partner{border-left-color:rgba(255,255,255,.25)}
.footer-about p{font-size:14px;margin-top:16px}
footer h5{color:var(--c-white);font-size:15px;margin-bottom:20px;letter-spacing:.5px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:rgba(255,255,255,.6);text-decoration:none;font-size:14px;transition:color .2s}
footer a:hover{color:var(--c-white)}
.footer-about .logo-mark{border-color:var(--c-white)}
.footer-about .logo-mark::after{background:var(--c-white)}
.footer-about .logo-text{color:var(--c-white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px}
.legal-menu{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.legal-menu li{margin:0;display:flex;align-items:center}
.legal-menu li+li::before{content:'·';margin:0 10px;color:rgba(255,255,255,.35)}

/* 404 */
.not-found{padding:96px 0 128px;text-align:center}
.not-found .container{max-width:760px}
.not-found-code{font-family:var(--f-head);font-size:140px;font-weight:800;line-height:1;letter-spacing:-4px;color:var(--c-grey-300)}
.not-found h1{font-size:38px;margin:8px 0 16px}
.not-found p{margin-bottom:36px}
.not-found-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Rechtstexte */
.legal{max-width:864px;padding-top:80px;padding-bottom:96px}
.legal h1{font-size:38px;margin-bottom:8px}
.legal h2{font-size:22px;margin:40px 0 12px}
.legal p{margin-bottom:12px;font-size:16px}
.legal h3{font-family:var(--f-head);font-size:18px;font-weight:600;color:var(--c-black);margin:28px 0 10px}
.legal ul{margin:0 0 12px 20px;font-size:16px}
.legal a{color:var(--c-accent)}
.legal mark{background:rgba(0,121,107,.12);color:var(--c-accent-d);padding:2px 6px;border-radius:3px;font-size:14px}

/* Scroll-Animationen */
.fly-phone{position:fixed;left:-24px;top:58%;z-index:90;display:flex;align-items:center;gap:10px;text-decoration:none;animation:c24-peek 4.5s ease-in-out infinite}
.fly-phone svg{width:46px;height:80px;color:var(--c-accent);filter:drop-shadow(0 12px 20px rgba(17,17,17,.35));order:-1;animation:c24-bob 3.6s ease-in-out infinite}
@keyframes c24-bob{0%,100%{translate:0 0}30%{translate:2px -7px}65%{translate:-2px 3px}}
@keyframes c24-peek{0%,100%{transform:rotate(8deg)}50%{transform:translateX(6px) rotate(13deg)}}
.fly-phone-label{font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--c-white);background:var(--c-accent);padding:9px 14px;border-radius:var(--radius);white-space:nowrap;position:relative;box-shadow:0 8px 18px rgba(17,17,17,.25);transition:background .2s;opacity:0;animation:c24-hint 8s ease 1s both,c24-bob 3.6s ease-in-out infinite}
.fly-phone-label::before{content:'';position:absolute;left:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:var(--c-accent);border-left:0}
@keyframes c24-hint{0%{opacity:0;transform:translateX(-10px)}6%,78%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(-10px)}}
.fly-phone:focus-visible .fly-phone-label{animation:c24-bob 3.6s ease-in-out infinite;opacity:1;transform:none}
@media (hover:hover){
  .fly-phone:hover .fly-phone-label{animation:c24-bob 3.6s ease-in-out infinite;opacity:1;transform:none;background:var(--c-accent-d)}
}
@media (min-width:1800px){
  .fly-phone{display:none;left:0;top:0;flex-direction:column;gap:9px;animation:none}
  .fly-phone svg{order:0}
  .fly-phone-label{opacity:1;animation:c24-bob 3.6s ease-in-out infinite}
  .fly-phone-label::before{left:50%;top:auto;bottom:-6px;margin:0 0 0 -6px;border:6px solid transparent;border-top-color:var(--c-accent);border-bottom:0}
  @supports (animation-timeline: scroll()){
    .fly-phone{display:flex;animation:c24-fly linear both;animation-timeline:scroll(root)}
  }
}
@media (prefers-reduced-motion:reduce) and (min-width:1800px){
  .fly-phone{display:none}
}
@keyframes c24-fly{
  0%{transform:translate(4vw,15vh) rotate(-6deg)}
  11%{transform:translate(9vw,24vh) rotate(8deg)}
  23%{transform:translate(2vw,39vh) rotate(-11deg)}
  34%{transform:translate(12vw,32vh) rotate(5deg)}
  47%{transform:translate(6vw,53vh) rotate(-9deg)}
  58%{transform:translate(13vw,46vh) rotate(12deg)}
  71%{transform:translate(3vw,64vh) rotate(-7deg)}
  84%{transform:translate(10vw,57vh) rotate(9deg)}
  100%{transform:translate(7vw,78vh) rotate(-5deg)}
}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-scale{transform:scale(.94) translateY(18px)}
.reveal.in{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .usp{animation:c24-bgpar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes c24-bgpar{from{background-position:center,center 25%}to{background-position:center,center 75%}}
}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;transition:none}.usp,.mark-accent,.rotator span,.fly-phone,.fly-phone svg,.fly-phone-label,.trust-track{animation:none}.rotator span{opacity:0}.rotator span:first-child{opacity:1}}

/* Tablet */
@media (max-width:992px){
  :root{--section-pad:72px}
  body{font-size:16px}
  h1{font-size:42px;line-height:1.18}
  .hero-content h1{font-size:46px}
  h2{font-size:32px;line-height:1.25}
  h3{font-size:24px}
  h4{font-size:19px}
  h5{font-size:16px}
  .lead{font-size:18px}
  .overline{font-size:13px;letter-spacing:1.75px}
  .btn{font-size:15px;padding:15px 30px}
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--c-white);flex-direction:column;gap:0;padding:8px 0 12px;box-shadow:0 16px 24px rgba(17,17,17,.12)}
  #menu:checked ~ .nav-links{display:flex}
  .nav-links a{display:block;padding:14px 32px;font-size:17px;font-weight:600}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:400px;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);order:2}
  .hero-content{padding:72px 0 56px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .usp-grid,.detail-grid,.contact-grid,.funding-grid{grid-template-columns:1fr;gap:48px}
  .about-grid{grid-template-columns:1fr}
  .about-content{padding:72px 0 56px}
  .about-content h2{font-size:36px}
  .about-visual{min-height:440px;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);order:2;background:url('images/asif-tahir-mobil.jpg') center 30%/cover no-repeat}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Mobile */
@media (max-width:600px){
  :root{--section-pad:56px}
  .container{padding-left:20px;padding-right:20px}
  h1{font-size:34px;line-height:1.2}
  .hero-content h1{font-size:32px}
  h2{font-size:28px}
  h3{font-size:22px}
  h4{font-size:18px}
  .lead{font-size:17px}
  .overline{font-size:12px;letter-spacing:1.5px}
  .btn{width:100%;text-align:center;padding:15px 24px}
  .nav .btn{width:auto;padding:10px 14px;font-size:12px}
  .nav-inner:has(.burger)>.btn{display:none}
  .fly-phone{left:-20px}
  .fly-phone svg{width:38px;height:66px}
  .custom-logo{max-height:40px}
  .nav-inner{height:76px;gap:10px}
  .logo{gap:8px}
  .logo-text{font-size:18px}
  .logo-mark{width:30px;height:30px;border-width:4px}
  .logo-mark::after{inset:5px}
  .logo-badge{display:none}
  .nav-brand{gap:10px}
  .nav-partner{height:44px;padding-left:10px}
  .trust-inner{flex-direction:column;align-items:stretch;gap:10px}
  .trust-set img{height:44px}
  .trust-set{gap:10px;padding-right:10px}
  .card-grid,.form-grid,.stats{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .detail-visual{min-height:300px}
  .form-card{padding:28px 22px}
  .about-content h2{font-size:30px}
  .about-chips{flex-wrap:wrap;gap:20px 0}
  .about-chip{flex:1 1 45%}
  .about-chip+.about-chip{border-left:none}
  .video-grid{grid-template-columns:1fr;justify-items:center}
  .video-grid .video-card{width:min(300px,100%)}
  .funding-card img{height:170px}
  .funding-card-body .sum{font-size:38px}
  .radio-group{flex-direction:column}
  .radio-group .wpcf7-list-item-label{text-align:center}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .legal h1{font-size:30px}
  .legal h2{font-size:19px}
  .not-found{padding:56px 0 80px}
  .not-found-code{font-size:90px;letter-spacing:-2px}
  .not-found h1{font-size:28px}
}
