/**
 *  @template       ISB template.css
 *  @version        see info.php of this template
 *  @author         Internet-Service Berlin
 *  @copyright      Internet-Service Berlin
 *  @license        All rights reserved
 *  @license terms  no use without written permission
 *  @platform       see info.php of this template
 */
@font-face {font-family: 'assistant-bold';src: url('../fonts/assistant-bold-webfont.woff2') format('woff2'),url('../fonts/assistant-bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'assistant-light';src: url('../fonts/assistant-light-webfont.woff2') format('woff2'),url('../fonts/assistant-light-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'assistant-regular';src: url('../fonts/assistant-regular-webfont.woff2') format('woff2'),url('../fonts/assistant-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
html body {background:#000;font-family:'assistant-light',sans-serif;color: #1a1a1a;line-height: 1.6;overflow-x: hidden;height:100%;}
* {margin:0;padding:0;box-sizing:border-box;}
a, img {border:none;outline:none;}
strong, b {font-family:'assistant-semibold',sans-serif;font-weight:normal;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Transitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a, a:after, input, input::-webkit-file-upload-button, textarea, button, form, p, img, span, li, i, div {transition: 0.25s;}
.cc-revoke, .cc-revoke > *, .cc-animate.cc-revoke.cc-bottom {display:none !important;/*hide*/}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BOF UP ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.move-up {position:fixed;bottom:20px;right:50px;display: none;z-index:1000;width:80px;height:80px;border:none;background:rgba(250,250,250,.7);cursor:pointer;text-align:center;padding:30px 10px 10px;border-radius:40px;box-sizing:border-box;}
.move-up i,.move-up:active i {border:solid #EDE9D6;border-width:0 3px 3px 0;display:inline-block;padding:15px;transform: rotate(-135deg);}
.move-up:hover {background:rgba(255,255,255,1);}
.move-up:hover i {border:solid #0085CF;border-width:0 3px 3px 0;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~~~~~~~~~~  */
header {position: fixed;top: 0;width: 100%;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);z-index: 1000;border-bottom: 1px solid rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
nav {max-width: 1400px;margin: 0 auto;padding: 1.2rem 2rem;display: flex;justify-content: space-between;align-items: center;}
.logo {line-height:0;}
.logo img {width:140px;height:auto;}
.nav-links {display: flex;gap: 2.5rem;list-style: none;}
.nav-links a {text-decoration: none;color: #1a1a1a;font-weight: 500;font-size: 0.95rem;transition: color 0.3s ease;}
.nav-links a:hover {color: #00D9FF;}
.cta-button {background: linear-gradient(135deg, #00D9FF 0%, #0A2463 100%);color: white;padding: 0.8rem 1.8rem;border-radius: 50px;text-decoration: none;font-weight: 600;font-size: 0.95rem;transition: transform 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3);}
.cta-button:hover {transform: translateY(-2px);box-shadow: 0 6px 25px rgba(0, 217, 255, 0.4);}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Hero Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.hero {min-height: 90vh;background:#0A2463 url(bg_header.webp)no-repeat center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;position: relative;overflow: hidden;display: flex;align-items: center;}
@keyframes pulse {0%, 100% { transform: scale(1); opacity: 0.5; }
	50% { transform: scale(1.1); opacity: 0.8; }
}
.hero-content {max-width: 1600px;margin:0 auto;padding:2rem 2rem 6rem;position: relative;z-index: 1;}
.hero-text h1 {font-size: 3.5rem;font-weight: 800;color: white;line-height: 1.1;margin-bottom: 1.5rem;letter-spacing: -1px;}
.hero-text h1 span {background: linear-gradient(135deg, #00D9FF 0%, #00FF9D 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.hero-text p {font-size: 1.3rem;color: rgba(255, 255, 255, 0.85);margin-bottom: 2.5rem;line-height: 1.7;}
.hero-buttons {display: flex;gap: 1.5rem;margin-bottom: 3rem;}
.primary-btn {background: linear-gradient(135deg, #00D9FF 0%, #00FF9D 100%);color: #0A2463;padding: 1.1rem 2.5rem;border-radius: 50px;text-decoration: none;font-weight: 700;font-size: 1.05rem;transition: all 0.3s ease;box-shadow: 0 10px 30px rgba(0, 217, 255, 0.4);}
.primary-btn:hover {transform: translateY(-3px);box-shadow: 0 15px 40px rgba(0, 217, 255, 0.6);}
.secondary-btn {background: transparent;color: white;padding: 1.1rem 2.5rem;border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50px;text-decoration: none;font-weight: 600;font-size: 1.05rem;transition: all 0.3s ease;}
.secondary-btn:hover {border-color: #00D9FF;background: rgba(0, 217, 255, 0.1);}
.trust-badges {display: flex;gap: 2rem;color: rgba(255, 255, 255, 0.7);font-size: 0.95rem;}
.trust-badges div {display: flex;align-items: center;gap: 0.5rem;}
.trust-badges span {font-size: 1.2rem;color: #00FF9D;}
.hero-visual {position: relative;display: flex;justify-content: center;align-items: center;}
.mockup-container {position: relative;width: 100%;max-width: 500px;animation: float 6s ease-in-out infinite;}
@keyframes float {0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
}
.mockup-screen {background: white;border-radius: 20px;padding: 1rem;box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);position: relative;}
.mockup-browser {background: #f5f5f5;border-radius: 10px 10px 0 0;padding: 0.5rem;display: flex;gap: 0.4rem;align-items: center;}
.browser-dot {width: 10px;height: 10px;border-radius: 50%;background: #ddd;}
.browser-dot:nth-child(1) { background: #ff5f56; }
.browser-dot:nth-child(2) { background: #ffbd2e; }
.browser-dot:nth-child(3) { background: #27c93f; }
.mockup-content {background: linear-gradient(180deg, #f8f9fa 0%, white 100%);padding: 2rem;border-radius: 0 0 10px 10px;min-height: 300px;}
.mockup-header {height: 40px;background: linear-gradient(135deg, #0A2463 0%, #00D9FF 100%);border-radius: 5px;margin-bottom: 1rem;}
.mockup-lines {display: flex;flex-direction: column;gap: 0.8rem;}
.mockup-line {height: 12px;background: #e0e0e0;border-radius: 5px;}
.mockup-line:nth-child(1) { width: 70%; }
.mockup-line:nth-child(2) { width: 90%; }
.mockup-line:nth-child(3) { width: 60%; }
.mockup-line:nth-child(4) { width: 80%; }
/* ~~~~~~~~~~~~~~~~~~~~~~~ Trust Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.trust-section {background: white;padding: 3rem 2rem;border-bottom: 1px solid #f0f0f0;}
.trust-content {max-width: 1400px;margin: 0 auto;display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;gap: 3rem;}
.trust-item {text-align: center;}
.trust-number {font-size: 3rem;font-weight: 800;background: linear-gradient(135deg, #0A2463 0%, #00D9FF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}
.trust-label {font-size: 0.95rem;color: #666;margin-top: 0.5rem;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Services Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.services {padding: 6rem 2rem;background: #f8f9fa;}
.services-container {max-width: 1400px;margin: 0 auto;}
.section-header {text-align: center;margin-bottom: 4rem;}
.section-subtitle {color: #00D9FF;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;font-size: 0.9rem;margin-bottom: 0.5rem;}
.section-title {font-size: 2.5rem;font-weight: 800;color: #1a1a1a;margin-bottom: 1rem;}
.section-description {font-size: 1.1rem;color: #666;max-width: 600px;margin: 0 auto;}
.services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 2rem;}
.service-card {background: white;padding: 2.5rem;border-radius: 20px;transition: all 0.3s ease;border: 1px solid transparent;cursor: pointer;}
.service-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);border-color: #00D9FF;}
.service-icon {width: 60px;height: 60px;background: linear-gradient(135deg, #00D9FF 0%, #0A2463 100%);border-radius: 15px;display: flex;align-items: center;justify-content: center;font-size: 1.8rem;margin-bottom: 1.5rem;}
.service-card h3 {font-size: 1.4rem;font-weight: 700;color: #1a1a1a;margin-bottom: 1rem;}
.service-card p {color: #666;line-height: 1.7;margin-bottom: 1.5rem;}
.service-link {color: #00D9FF;font-weight: 600;text-decoration: none;display: inline-flex;align-items: center;gap: 0.5rem;transition: gap 0.3s ease;}
.service-link:hover {gap: 1rem;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ CTA Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.cta-section {background: linear-gradient(135deg, #0A2463 0%, #1a1a1a 100%);padding: 5rem 2rem;text-align: center;position: relative;overflow: hidden;}
.cta-section::before {content: '';position: absolute;width: 400px;height: 400px;background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);top: -200px;left: -200px;border-radius: 50%;}
.cta-content {max-width: 800px;margin: 0 auto;position: relative;z-index: 1;}
.cta-content h2 {font-size: 2.8rem;font-weight: 800;color: white;margin-bottom: 1.5rem;}
.cta-content p {font-size: 1.2rem;color: rgba(255, 255, 255, 0.8);margin-bottom: 2.5rem;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Footer ~~~~~~~~~~~~~~~~~~~~~~~  */
footer {background: #1a1a1a;color: rgba(255, 255, 255, 0.7);padding: 4rem 2rem 2rem;}
.footer-content {max-width: 1400px;margin: 0 auto;display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 3rem;margin-bottom: 3rem;}
.footer-column h4 {color: white;font-size: 1.1rem;font-weight: 700;margin-bottom: 1.5rem;}
.footer-column ul {list-style: none;}
.footer-column ul li {margin-bottom: 0.8rem;}
footer a {color: rgba(255, 255, 255, 0.7);text-decoration: none;transition: color 0.3s ease;}
footer a:hover {color: #00D9FF;}
.footer-bottom {max-width: 1400px;margin: 0 auto;padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ START RESPONSIVE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 968px) {
.nav-links {display: none;}
.mobile-menu-btn {display: block;}
.hero-content {grid-template-columns: 1fr;	text-align: center;}
.hero-text h1 {font-size: 2.5rem;}
.hero-buttons {flex-direction: column;}
.trust-badges {flex-direction: column;	align-items: center;}
.mockup-container {max-width: 400px;}
.section-title {font-size: 2rem;}
.footer-bottom {flex-direction: column;	text-align: center;}
}