/* =========================================
   1. CORE VARIABLES & RESET (Reference Style)
   ========================================= */
   :root {
    --bg-body: #fbfbfd;
    --text-main: #1d1d1f;
    --text-gray: #86868b;
    --nexus-orange: #ff9500;
    --studio-blue: #007aff;
    --core-purple: #5e5ce6;
    --growth-green: #34c759;
    
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(20px);
    --radius-card: 32px;
    --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    
    --max-width: 1200px;
    --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    background-color: var(--bg-body);
    font-family: var(--font-stack);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex; flex-direction: column; min-height: 100vh;
}

a { text-decoration: none !important; color: inherit; transition: opacity 0.2s; }
button { font-family: inherit; border: none; cursor: pointer; text-decoration: none !important; outline: none; }
img { max-width: 100%; height: auto; display: block; }
input, textarea, button { font-family: var(--font-stack); }

/* =========================================
   2. NAVIGATION (Reference Style)
   ========================================= */
.nav-wrapper { position: fixed; top: 20px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 9999; pointer-events: none; }

.vision-nav { 
    pointer-events: auto; background: var(--glass-bg); backdrop-filter: saturate(180%) var(--glass-blur); 
    padding: 8px 12px; border-radius: 100px; display: flex; align-items: center; justify-content: space-between; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.4); 
    min-width: 320px; transition: transform 0.3s var(--ease-apple); 
}
.vision-nav:hover { transform: scale(1.02); }

.nav-logo-container { padding: 0 15px 0 10px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.custom-logo-img { width: 50px; height: 50px; border-radius: 8px; object-fit: contain; margin: -12px -5px -12px 0; }
.nav-logo-text { font-weight: 600; font-size: 15px; letter-spacing: -0.3px; color: #000; }

.desktop-nav-links { display: flex; padding-right: 5px; border-left: 1px solid rgba(0, 0, 0, 0.1); margin-left: 10px; }
.nav-item { background: 0 0; border: none; color: #333; font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: 20px; cursor: pointer; transition: 0.2s; }
.nav-item:hover { background: rgba(0, 0, 0, 0.05); }
.nav-item.active { background: #1d1d1f; color: #fff; }

.burger-menu-btn { display: none; width: 40px; height: 40px; background: 0 0; border: none; cursor: pointer; position: relative; margin-right: 5px; }
.burger-line { width: 18px; height: 2px; background: #1d1d1f; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 2px; transition: 0.3s var(--ease-apple); }
.top { top: 16px; } .bot { bottom: 16px; }
.burger-menu-btn.active .top { top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.burger-menu-btn.active .bot { bottom: 50%; transform: translate(-50%, 50%) rotate(-45deg); }

/* MOBILE MENU (Reference Style) */
.mobile-menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(251, 251, 253, .98); 
    backdrop-filter: blur(20px); z-index: 9990; padding: 120px 40px; display: flex; flex-direction: column; 
    gap: 20px; opacity: 0; pointer-events: none; transform: translateY(-20px); transition: 0.4s var(--ease-apple); 
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.mm-link { 
    font-size: 28px; font-weight: 600; color: #1d1d1f; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .05); 
    padding-bottom: 20px; opacity: 0; transform: translateY(10px); transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.mobile-menu-overlay.open .mm-link:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.open .mm-link:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.open .mm-link:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.open .mm-link:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }

@media(max-width: 768px) {
    .desktop-nav-links { display: none; }
    .burger-menu-btn { display: block; }
    .vision-nav { padding: 8px 12px; max-width: 100%; }
}

/* =========================================
   3. PAGE LAYOUT (Contact Page Specific)
   ========================================= */
.detail-page{
    padding-top:140px; 
    padding-bottom:90px;
}
  
.contact-container{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
    position:relative;
}
  
.contact-glow{
    position:absolute;
    inset:-120px -80px auto -80px;
    height:420px;
    background:
      radial-gradient(circle at 20% 40%, rgba(0,113,227,.12), transparent 60%),
      radial-gradient(circle at 60% 30%, rgba(255,69,0,.10), transparent 55%),
      radial-gradient(circle at 85% 55%, rgba(94,92,230,.10), transparent 60%);
    filter:blur(20px);
    opacity:.9;
    pointer-events:none;
}
  
.contact-grid-layout{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:56px;
    align-items:start;
}

/* Typography Update */
.contact-info-side{padding-top:8px}
  
.contact-big-title{
    font-size:clamp(44px, 5.5vw, 76px);
    line-height:1.05;
    letter-spacing:-.035em;
    font-weight:700;
    margin:0 0 20px 0;
    color:#1d1d1f;
}
  
.contact-desc{
    margin:0 0 26px 0;
    max-width:44ch;
    font-size:18px;
    line-height:1.55;
    color:var(--text-gray);
    letter-spacing: -0.01em;
}
  
/* RETTET: Mere luft omkring email sektionen */
.contact-methods{
    margin: 32px 0 40px; 
}
  
.cm-item{
    display:flex;
    align-items:center;
    gap:12px;
}
  
.cm-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.04);
    font-size:18px;
}
  
.link-clean{
    font-weight:600;
    font-size:16px;
    color:#1d1d1f;
}
  
.status-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:rgba(52,199,89,.10);
    border:1px solid rgba(52,199,89,.18);
    color:#1f7a3a;
    font-size:13px;
    font-weight:600;
    letter-spacing: -0.01em;
}
  
.status-dot-green{
    width:8px;height:8px;
    border-radius:99px;
    background:var(--growth-green);
    box-shadow:0 0 0 4px rgba(52,199,89,.15);
}

/* =========================================
   4. FORM CARD
   ========================================= */
.form-card{
    background:#fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius:var(--radius-card);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    padding:32px;
}
  
.mb-25{margin-bottom:24px}
  
.input-label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#6e6e73;
    margin:0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
  
.service-selection-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
}
  
.service-card{
    appearance:none;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:70px;
    border-radius:16px;
    background:rgba(0,0,0,.03);
    border:1px solid rgba(0,0,0,.04);
    transition:all .25s var(--ease-apple);
    color:#111214;
    font-weight:600;
    font-size:13px;
}
  
.service-card:hover{
    transform:translateY(-1px);
    background:rgba(0,0,0,.05);
}
  
.service-card.is-active{
    background:#fff;
    border-color:rgba(0,0,0,.1);
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}
  
.service-card[data-service="nexus"].is-active { color: var(--nexus-orange); border-color: var(--nexus-orange); background:rgba(255,149,0,0.08); }
.service-card[data-service="studio"].is-active { color: var(--studio-blue); border-color: var(--studio-blue); background:rgba(0,122,255,0.08); }
.service-card[data-service="core"].is-active { color: var(--core-purple); border-color: var(--core-purple); background:rgba(94,92,230,0.08); }
  
.input-group{margin:0 0 20px}
  
.input-field{
    width:100%;
    border:none;
    outline:none;
    border-radius:14px;
    padding:16px;
    background:rgba(0,0,0,.03);
    border:1px solid transparent;
    font-size:16px;
    color:#111214;
    transition:all .2s var(--ease-apple);
}
  
textarea.input-field {
    line-height: 1.5;
    min-height: 140px;
    resize: none;
}
  
.input-field:focus{
    background:#fff;
    box-shadow:0 0 0 4px rgba(0,122,255,.12);
    border-color:rgba(0,0,0,.1);
}
  
.btn-submit{
    width:100%;
    height:56px;
    border:none;
    border-radius:16px;
    background:#1d1d1f;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    margin-top:10px;
    transition:all .2s var(--ease-apple);
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
  
.btn-submit:hover{transform:scale(1.01); box-shadow:0 15px 35px rgba(0,0,0,.2);}
.btn-submit:active{transform:scale(0.98);}
.btn-submit.success{background:var(--growth-green)!important}

.reveal-on-scroll{
    opacity:0;
    transform:translateY(20px);
    transition:all .8s var(--ease-apple);
}
.reveal-on-scroll.is-visible{
    opacity:1;
    transform:translateY(0);
}
.reveal-on-scroll.delay-2{transition-delay:.1s}

/* Responsiv layout */
@media (max-width:980px){
    .contact-grid-layout{
        grid-template-columns:1fr;
        gap:34px;
    }
}

@media (max-width:520px){
    .form-card{padding:24px}
}

/* =========================================
   5. FOOTER (Reference Style)
   ========================================= */
.mega-footer { 
    background: #f5f5f7; padding: 60px 20px 0; position: relative; margin-top: auto; 
    overflow: hidden; padding-bottom: 120px; display: flex; flex-direction: column; z-index: 20; 
    content-visibility: auto; contain-intrinsic-size: 500px;
}
.mf-content { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; width: 100%; }
.mf-brand-wrap { position: absolute; bottom: -2%; left: 0; width: 100%; text-align: center; z-index: 1; pointer-events: none; line-height: 0.75; }
.mf-big-text { font-size: 14vw; font-weight: 800; color: rgba(0,0,0,0.03); letter-spacing: -0.05em; }
.mf-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 40px; }
.mf-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #86868b; margin-bottom: 16px; letter-spacing: 0.5px; }
.mf-col ul { list-style: none; }
.mf-col li { margin-bottom: 12px; }
.mf-col a { font-size: 15px; color: #424245; transition: 0.2s; }
.mf-col a:hover { color: #000; text-decoration: underline; }

.mf-bottom { 
    position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 15px 40px; 
    background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-top: 1px solid rgba(255,255,255,0.4); display: flex; flex-wrap: wrap; 
    justify-content: space-between; align-items: center; color: #86868b; font-size: 12px; z-index: 10; 
}

.built-badge{display:flex;gap:6px;align-items:center}
.text-red{color:#ff3b30}
.text-nexus-orange{color:var(--nexus-orange)}

@media(max-width: 768px) {
    .mf-top { grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 60px; }
    .mega-footer { padding-bottom: 100px; padding-top: 50px; }
    .mf-bottom { padding: 20px; flex-direction: column; text-align: center; gap: 10px; }
}