/*
Theme Name: Nord Host
Theme URI:  https://example.com
Author:      Florian Hammer IT Solutions
Author URI:  https://example.com
Description: Minimalistisches, nordisch inspiriertes One-Page-Theme für Webhosting-Landingpage.
Version:     1.0
License:     GNU General Public License v2 or later
Tags:        one-column, responsive, accessibility, custom-logo
*/

:root{
  --bg: #ffffff;
  --muted: #f6f8fa;
  --glass: rgba(255,255,255,0.8);
  --blue: #0077B6;
  --dark-blue: #023E8A;
  --accent: #00B4D8;
  --text: #0f1724;
  --muted-text: #6b7280;
  --card-shadow: 0 8px 24px rgba(2,6,23,0.06);
  --radius: 12px;
  --max-width: 1200px;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, var(--muted) 0%, #ffffff 40%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Container */
.container{
  width:calc(100% - 2rem);
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1rem;
}

/* Header / Hero */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  border-bottom: 1px solid rgba(2,6,23,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
}

/* Logo */
.site-logo{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-weight:700;
  color:var(--dark-blue);
}
.logo-mark{
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--accent));
  color:white;
  border-radius:9px;
  font-weight:700;
  font-size:18px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
  padding:3.5rem 0 4.5rem;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:720px;
}
.h-title{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin:0;
  color:var(--dark-blue);
  letter-spacing:-0.01em;
}
.h-sub{
  margin:0;
  color:var(--muted-text);
  font-size:1.05rem;
}
.hero-ctas{display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.7rem 1.05rem;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:600;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.btn-primary{
  background: linear-gradient(90deg,var(--blue),var(--accent));
  color:white;
}
.btn-ghost{
  background:transparent;
  color:var(--dark-blue);
  border:1px solid rgba(2,6,23,0.06);
}

/* Hero graphic (right) */
.hero-visual{
  min-height:260px;
  border-radius:14px;
  background:
    radial-gradient(600px 200px at 10% 10%, rgba(0,180,216,0.08), transparent 10%),
    linear-gradient(180deg, rgba(0,119,182,0.02), transparent 30%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  box-shadow:var(--card-shadow);
}

/* Pricing section */
.pricing{
  padding:2.5rem 0 3.25rem;
}
.pricing-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(3, 1fr);
}
.pricing-card{
  background:white;
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--card-shadow);
  border:1px solid rgba(2,6,23,0.03);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.pricing-card.featured{
  transform:translateY(-8px);
  border: 1px solid rgba(0,119,182,0.12);
  box-shadow: 0 18px 40px rgba(2,6,23,0.08);
}
.price{
  font-size:1.75rem;
  font-weight:700;
  color:var(--dark-blue);
}
.price-sub{color:var(--muted-text);font-weight:600}

/* Features list */
.feature-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  color:var(--muted-text);
  font-size:0.95rem;
}

/* Features (icons) */
.features{
  padding:2.5rem 0;
}
.features-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1rem;
}
.feature{
  background:white;
  border-radius:12px;
  padding:1rem;
  box-shadow:var(--card-shadow);
  display:flex;
  gap:0.9rem;
  align-items:flex-start;
}

/* About / trust */
.about{
  padding:2rem 0 2.5rem;
  display:flex;
  gap:1.25rem;
  align-items:center;
}
.about-left{max-width:720px}
.portrait{
  width:120px;
  min-width:120px;
  height:120px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--dark-blue));
  color:white;
  display:grid;
  place-items:center;
  font-weight:700;
}

/* Contact / Footer */
.contact{
  padding:2.25rem 0 3rem;
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 360px;
}
.contact-form{
  background:white;
  border-radius:12px;
  padding:1rem;
  box-shadow:var(--card-shadow);
}
.input, textarea{
  width:100%;
  padding:0.65rem;
  border-radius:8px;
  border:1px solid rgba(2,6,23,0.06);
  margin-top:0.5rem;
  font-size:0.95rem;
}
textarea{min-height:120px; resize:vertical;}
.form-row{display:flex; gap:0.75rem;}
.small{flex:1}

/* Footer */
.site-footer{
  padding:1.75rem 0;
  border-top:1px solid rgba(2,6,23,0.04);
  color:var(--muted-text);
  font-size:0.92rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

/* Utilities & responsiveness */
.center{display:grid; place-items:center}
.badge{
  display:inline-flex; padding:0.3rem 0.6rem; border-radius:999px; font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--blue)); color:white; font-size:0.85rem;
}

@media (max-width: 980px){
  .pricing-grid{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns: repeat(2, 1fr);}
  .contact{grid-template-columns:1fr}
  .hero{padding-bottom:2.5rem}
}
@media (max-width: 640px){
  .pricing-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .hero{padding:2rem 0}
  .hero-inner{align-items:flex-start}
  .header-inner{padding:0.5rem 0}
  .site-logo .logo-mark{width:34px;height:34px;font-size:16px}
}