:root {
    --navy: #06122a;
    --deep: #0a1c3e;
    --mid: #1a3a7a;
    --accent: #1565e0;
    --bright: #2196f3;
    --ice: #64b5f6;
    --white: #ffffff;
    --gray: #b0bec5;
    --card: rgba(255,255,255,0.09);
    --card-border: rgba(255,255,255,0.16);
    --accent-rgb: 21,101,224;
    --bright-rgb: 33,150,243;
    --overlay-rgb: 5,15,35;
    --navy-rgb: 6,18,42;
    --panel: #08172f;
  }

  /* ===== WARM MODE (futes) ===== */
  :root {
    --light-bg: #ffffff;
    --light-bg2: #f4f6fb;
    --footer-bg: #030c1e;
  }
  body.warm-mode {
    --navy: #241a17;
    --deep: #362823;
    --mid: #6b4f45;
    --accent: #b23a30;
    --bright: #cc554a;
    --ice: #ffb3a0;
    --accent-rgb: 178,58,48;
    --bright-rgb: 204,85,74;
    --overlay-rgb: 36,26,23;
    --navy-rgb: 36,26,23;
    --panel: #362823;
    --footer-bg: #17110f;
    --light-bg: #fdf8f2;
    --light-bg2: #f7efe4;
  }
  body, #hero .hero-bg, .btn-primary, .nav-cta, .mode-toggle-track, #hero::before {
    transition: background-color .6s ease, background .6s ease, box-shadow .6s ease, border-color .6s ease, color .6s ease;
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Barlow', sans-serif;
    background: var(--navy);
    color: var(--white);
    overflow-x: hidden;
  }

  /* ===== SCROLLBAR ===== */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--navy); }
  ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

  /* ===== NAVBAR ===== */
  nav {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    background: rgba(var(--navy-rgb), 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
    transition: background .6s ease;
  }
  .nav-logo {
    display: flex; align-items: center; gap: 10px;
  }
.nav-logo-icon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url("kepek/logo.png") center/contain no-repeat;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    text-indent: -9999px;
}
  .nav-logo-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 16px; color: var(--white);
    text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3;
  }
  .nav-links {
    display: flex; gap: 40px; list-style: none;
  }
  .nav-links a {
    color: var(--gray); text-decoration: none;
    font-size: 14px; font-weight: 500; letter-spacing: 0.3px;
    transition: color .25s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-cta {
    background: linear-gradient(135deg, var(--accent), var(--bright));
    color: #fff; border: none; padding: 10px 22px;
    border-radius: 6px; font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 13px; letter-spacing: 1px;
    text-transform: uppercase; cursor: pointer;
    transition: opacity .25s, transform .2s;
    white-space: nowrap;
  }
  .nav-cta:hover { opacity:.88; transform: translateY(-1px); }
  .nav-actions { display: flex; align-items: center; gap: 18px; }
  .nav-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 32px; height: 32px; background: none; border: none; cursor: pointer;
    padding: 0;
  }
  .nav-burger span {
    display: block; width: 100%; height: 2px; background: var(--white);
    border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ===== MODE TOGGLE (hideg/meleg) ===== */
  .mode-toggle {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center;
  }
  .mode-toggle-track {
    position: relative;
    width: 58px; height: 30px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1565e0, #64b5f6);
    border: 1px solid rgba(255,255,255,0.2);
    transition: background .6s ease;
    display: flex; align-items: center;
    padding: 0 6px;
  }
  body.warm-mode .mode-toggle-track {
    background: linear-gradient(135deg, #b23a30, #ffb3a0);
  }
  .mode-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: transform .5s cubic-bezier(.65,0,.35,1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  body.warm-mode .mode-toggle-thumb { transform: translateX(28px); }

  /* ===== HERO ===== */
  #hero {
    min-height: 100vh;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    transition: opacity 1.1s ease;
  }
  .hero-bg-cold { background-image: url("kepek/hatter.png"); opacity: 1; z-index: 1; }
  .hero-bg-warm { background-image: url("kepek/hatter2.png"); opacity: 0; z-index: 2; }
  body.warm-mode .hero-bg-cold { opacity: 0; }
  body.warm-mode .hero-bg-warm { opacity: 1; }
  #hero::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(
            90deg,
            rgba(var(--overlay-rgb), .85) 0%,
            rgba(var(--overlay-rgb), .55) 35%,
            rgba(var(--overlay-rgb), .15) 60%,
            rgba(var(--overlay-rgb), .05) 100%
        );
    transition: background .6s ease;
    pointer-events: none;
  }
  #hero::before {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(ellipse at 30% 50%, rgba(var(--accent-rgb), 0.18) 0%, transparent 70%);
    transition: background .6s ease;
    pointer-events: none;
  }
  /* Snowflakes */
  .snowflake {
    position: absolute; color: rgba(255,255,255,0.4);
    font-size: 16px; pointer-events: none; user-select: none;
    animation: snow linear infinite;
  }
  @keyframes snow {
    0% { transform: translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity:0; }
  }
  /* Warm-mode floating light particles */
  .sunspark {
    position: absolute; bottom: -20px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,179,160,0.9), rgba(178,58,48,0));
    pointer-events: none; user-select: none;
    animation: rise linear infinite;
  }
  @keyframes rise {
    0% { transform: translateY(0) translateX(0); opacity:0; }
    10% { opacity:.9; }
    100% { transform: translateY(-110vh) translateX(20px); opacity:0; }
  }
  .hero-content { position: relative; z-index:3; flex:1; max-width: 520px; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(var(--accent-rgb), 0.25); border: 1px solid rgba(var(--bright-rgb), 0.4);
    border-radius: 20px; padding: 6px 16px;
    font-size: 12px; color: var(--ice); letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 600; margin-bottom: 24px;
  }
  .hero-badge span { width:6px; height:6px; border-radius:50%; background:var(--ice); display:inline-block; }
  .hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(42px, 7vw, 80px);
    font-weight: 900; line-height: 0.95;
    text-transform: uppercase; letter-spacing: -1px;
    margin-bottom: 20px;
    color: var(--white);
  }
  .hero-title .highlight {
    color: transparent;
    -webkit-text-stroke: 2px var(--bright);
  }
  .hero-subtitle {
    font-size: 16px; color: var(--gray); line-height: 1.7;
    margin-bottom: 36px; font-weight: 400; max-width: 420px;
  }
  .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--bright));
    color: #fff; padding: 14px 30px;
    border-radius: 8px; font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700; font-size: 14px; letter-spacing: 1.5px;
    text-transform: uppercase; border: none; cursor: pointer;
    transition: all .3s; text-decoration: none; display: inline-block;
    box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.45);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.6); }
  .btn-outline {
    background: transparent; border: 2px solid rgba(255,255,255,0.3);
    color: #fff; padding: 13px 28px; border-radius: 8px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; transition: all .3s; text-decoration: none; display: inline-block;
  }
  .btn-outline:hover { border-color: var(--bright); color: var(--bright); }
  .hero-mascot {
    position: absolute; right: 4%; bottom: 0; z-index:2;
    width: clamp(200px, 30vw, 400px);
    filter: drop-shadow(0 20px 60px rgba(var(--accent-rgb), 0.5));
    animation: float 4s ease-in-out infinite;
  }
  @keyframes float {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-18px); }
  }
  /* Penguin SVG placeholder visual */
  .penguin-wrap {
    position: absolute; right: 5%; bottom: 0; z-index:2;
    width: clamp(180px, 28vw, 360px);
    animation: float 4s ease-in-out infinite;
  }

  /* ===== SECTION BASE ===== */
  section { padding: 80px 5%; transition: background-color .6s ease, background .6s ease; }
  .section-label {
    font-size: 22px; letter-spacing: 2px; text-transform:uppercase;
    color: var(--ice); font-weight: 600; margin-bottom: 10px;
  }
  .section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(30px, 4vw, 46px); font-weight: 800;
    text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.05;
    margin-bottom: 16px;
  }
  .section-title.dark { color: var(--navy); }
  .section-desc { color: var(--gray); font-size: 15px; line-height: 1.7; max-width: 520px; }
  .section-desc.center { margin: 0 auto; text-align: center; }
  .text-center { text-align: center; }

  /* ===== SERVICES ===== */
  #services {
    background: linear-gradient(180deg, var(--deep) 0%, var(--navy) 100%);
    transition: background .6s ease;
    padding-top: 56px; padding-bottom: 56px;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px; margin-top: 32px;
  }
  .service-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px; padding: 24px 20px;
    transition: all .3s; position: relative; overflow: hidden;
  }
  .service-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--bright));
    opacity: 0; transition: opacity .3s;
  }
  .service-card:hover { transform: translateY(-6px); border-color: rgba(var(--bright-rgb), 0.35); }
  .service-card:hover::before { opacity: 1; }
  .service-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.25);
    border: 1px solid rgba(var(--bright-rgb), 0.3);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
  }
  .service-icon svg { width: 22px; height: 22px; color: var(--bright); }
  .service-card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 8px;
  }
  .service-card p { font-size: 13px; color: var(--gray); line-height: 1.6; }

  /* ===== ABOUT ===== */
  #about { background: var(--light-bg); padding: 80px 5%; transition: background .6s ease; }
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .about-img {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18); position: relative;
  }
  .about-img img { width: 100%; display: block; object-fit: cover; height: 380px; }
  .about-img-overlay {
    position: absolute; bottom: 20px; left: 20px; z-index: 2;
    background: rgba(var(--navy-rgb), 0.9); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 14px 18px;
  }
  .about-img-overlay span {
    font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 900;
    color: var(--bright);
  }
  .about-img-overlay p { font-size: 11px; color: #aaa; margin-top: 2px; }
  .about-text .section-label { color: var(--accent); }
  .about-text .section-title { color: var(--navy); }
  .about-text p { color: #556; font-size: 15px; line-height: 1.75; margin-bottom: 32px; }
  .about-features { display: flex; flex-direction: column; gap: 18px; }
  .about-feature {
    display: flex; gap: 14px; align-items: flex-start;
  }
  .about-feature-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(var(--accent-rgb), 0.1); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
  }
  .about-feature-icon svg { width:18px; height:18px; color: var(--accent); }
  .about-feature h4 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
  .about-feature p { font-size: 13px; color: #778; line-height: 1.6; margin: 0; }

  /* ===== PROCESS ===== */
  #process {
    background: linear-gradient(135deg, var(--deep) 0%, var(--navy) 100%);
    transition: background .6s ease;
    padding-top: 56px; padding-bottom: 56px;
  }
  .process-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0; margin-top: 32px; position: relative;
  }
  .process-step {
    padding: 24px 20px; text-align: center; position: relative;
  }
  .process-step:not(:last-child)::after {
    content: ''; position: absolute;
    right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 60%; background: rgba(255,255,255,0.1);
  }
  .process-num {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 48px; font-weight: 900; line-height: 1;
    color: rgba(var(--bright-rgb), 0.15); margin-bottom: 8px;
  }
  .process-icon {
    width: 50px; height: 50px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--bright));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.45);
  }
  .process-icon svg { width: 22px; height: 22px; color: #fff; }
  .process-step h3 {
    font-family: 'Barlow Condensed', sans-serif; font-size: 17px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .process-step p { font-size: 13px; color: var(--gray); line-height: 1.6; }

  /* ===== REFERENCES ===== */
  #references { background: var(--light-bg2); padding: 80px 5%; transition: background .6s ease; }
  #references .section-label { color: var(--accent); }
  .ref-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-top: 44px;
  }
  .ref-item {
    border-radius: 12px; overflow: hidden;
    background: #dde4f0;
    aspect-ratio: 4/3;
    position: relative;
  }
  .ref-item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s; }
  .ref-item:hover img { transform: scale(1.07); }
  .ref-item-overlay {
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 50%, rgba(var(--navy-rgb), 0.7) 100%);
    opacity:0; transition: opacity .3s;
  }
  .ref-item:hover .ref-item-overlay { opacity:1; }
  .stats-row {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 24px; margin-top: 48px;
  }
  .stat-box {
    background: var(--light-bg);
    border-radius: 14px; padding: 28px 24px;
    display: flex; align-items: center; gap: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    transition: background .6s ease;
  }
  .stat-icon {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--bright));
    display: flex; align-items: center; justify-content: center;
  }
  .stat-icon svg { width:22px; height:22px; color:#fff; }
  .stat-num {
    font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 900;
    color: var(--navy); line-height:1;
  }
  .stat-label { font-size: 13px; color: #778; margin-top: 3px; }

  /* ===== PARTNER ===== */
  #partner { background: var(--light-bg); padding: 80px 5%; transition: background .6s ease; }
  .partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .partner-img { border-radius: 16px; overflow: hidden; position: relative; }
  .partner-img img { width:100%; height:400px; object-fit:cover; display:block; }
  .team-photos { display: flex; gap: 16px; }
  .team-card {
    flex: 1; border-radius: 14px; overflow: hidden;
    background: var(--light-bg2);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 14px 34px rgba(0,0,0,0.1);
    transition: transform .3s ease, background .6s ease, border-color .6s ease;
  }
  .team-card:hover { transform: translateY(-4px); }
  .team-card img { width: 100%; height: 300px; object-fit: cover; object-position: top center; display: block; }
  .team-name {
    padding: 14px 10px; text-align: center;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px;
    letter-spacing: 0.3px; color: var(--navy);
    border-top: 3px solid var(--accent);
    transition: border-color .6s ease;
  }
  .partner-phone-btn {
    position:absolute; bottom: 24px; right: 24px;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--bright));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.5);
    cursor: pointer; transition: transform .3s;
  }
  .partner-phone-btn:hover { transform: scale(1.12); }
  .partner-phone-btn svg { width:22px; height:22px; color:#fff; }
  .partner-text .section-label { color: var(--accent); }
  .partner-text .section-title { color: var(--navy); }
  .partner-text > p { color: #556; font-size: 15px; line-height: 1.75; margin-bottom: 28px; }
  .partner-checks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
  .partner-checks li {
    display: flex; gap: 12px; align-items: center;
    font-size: 14px; color: #445; font-weight: 500;
  }
  .check-icon {
    width: 22px; height: 22px; flex-shrink:0; border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12);
    display: flex; align-items: center; justify-content: center;
  }
  .check-icon svg { width:12px; height:12px; color: var(--accent); }

  /* ===== BRANDS ===== */
#brands{
    background:var(--panel);
    padding:70px 0;
    overflow:hidden;
    transition: background .6s ease;
}

.brands-label{
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:40px;
}

.brands-slider{
    overflow:hidden;
    width:100%;
}

.brands-track{
    display:flex;
    gap:80px;
    width:max-content;
}

.brands-track img{
    height:55px;
    width:auto;
    flex-shrink:0;

    filter: grayscale(100%) brightness(0) invert(1);
    opacity:.75;
    transition:all .3s ease;
}

.brands-track img:hover{
    filter:none;
    opacity:1;
    transform:scale(1.08);
}

  /* ===== TESTIMONIALS ===== */
  #testimonials {
    background: var(--light-bg);
    transition: background .6s ease;
  }
  #testimonials .section-label { color: var(--accent); }
  #testimonials .section-title { color: var(--navy); }
  #testimonials .section-desc { color: #556; }
  .testi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; margin-top: 48px;
  }
  .testi-card {
    background: var(--light-bg2); border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 14px; padding: 28px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: transform .3s, background .6s ease, border-color .6s ease;
  }
  .testi-card:hover { transform: translateY(-4px); }
  .testi-stars { display: flex; gap: 4px; margin-bottom: 14px; }
  .star {
    width: 14px; height: 14px;
    background: #ffd54f; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  .testi-card p {
    font-size: 14px; color: #556; line-height: 1.7;
    font-style: italic; margin-bottom: 18px;
  }
  .testi-author { display: flex; align-items: center; gap: 12px; }
  .testi-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--bright));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800;
    color: #fff; flex-shrink: 0;
  }
  .testi-name { font-weight: 700; font-size: 14px; color: var(--navy); }
  .testi-role { font-size: 12px; color: #778; }

  /* ===== CONTACT ===== */
  #contact {
    background: linear-gradient(135deg, var(--navy) 0%, var(--deep) 60%, var(--navy) 100%);
    position: relative; overflow: hidden;
    transition: background .6s ease;
  }
  #contact::after {
    content: '';
    position: absolute; right: -80px; bottom: -80px;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .contact-wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
  .contact-form {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin-top: 44px;
  }
  .form-group { display: flex; flex-direction: column; gap: 7px; }
  .form-group.full { grid-column: 1 / -1; }
  .form-group label { font-size: 12px; color: var(--gray); letter-spacing: 0.5px; font-weight: 500; }
  .form-group input, .form-group textarea, .form-group select {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
    border-radius: 8px; padding: 12px 16px; color: var(--white);
    font-family: 'Barlow', sans-serif; font-size: 14px;
    transition: border-color .3s, background .3s; outline: none; width: 100%;
  }
  .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--bright); background: rgba(255,255,255,0.1);
  }
  .form-group textarea { min-height: 110px; resize: vertical; }
  .form-group select option { background: var(--deep); }
  .contact-submit { grid-column: 1 / -1; text-align: center; margin-top: 8px; }

  /* ===== FOOTER ===== */
  footer {
    background: var(--footer-bg);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 56px 5% 28px;
    transition: background .6s ease;
  }
  .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px; padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer-brand p { font-size: 13px; color: var(--gray); line-height: 1.75; margin: 14px 0 22px; max-width: 240px; }
  .social-row { display: flex; gap: 10px; }
  .social-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2); border: 1px solid rgba(var(--bright-rgb), 0.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .3s; color: var(--bright);
    text-decoration: none; font-size: 12px; font-weight: 700;
  }
  .social-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
  .footer-col h4 {
    font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 18px;
    color: var(--white);
  }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-links a { color: var(--gray); text-decoration: none; font-size: 14px; transition: color .25s; }
  .footer-links a:hover { color: var(--bright); }
  .footer-contact-item {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px;
  }
  .footer-contact-item svg { width: 16px; height: 16px; color: var(--bright); flex-shrink:0; margin-top: 2px; }
  .footer-contact-item span { font-size: 13px; color: var(--gray); line-height: 1.6; }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 24px; font-size: 12px; color: rgba(255,255,255,0.35);
  }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeUp {
    from { opacity:0; transform: translateY(30px); }
    to   { opacity:1; transform: translateY(0); }
  }
  .hero-content > * {
    animation: fadeUp .7s ease both;
  }
  .hero-content .hero-badge { animation-delay: .1s; }
  .hero-content .hero-title { animation-delay: .25s; }
  .hero-content .hero-subtitle { animation-delay: .4s; }
  .hero-content .hero-btns { animation-delay: .55s; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 900px) {
    .about-grid, .partner-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .ref-gallery { grid-template-columns: repeat(2,1fr); }
    .stats-row { grid-template-columns: repeat(2,1fr); }
    .hero-mascot { display: none; }
    .penguin-wrap { display: none; }

    nav { padding: 0 4%; }
    .nav-logo-icon { width: 60px; height: 60px; }
    .nav-links {
      position: absolute; top: 68px; left: 0; right: 0;
      flex-direction: column; gap: 0;
      background: rgba(var(--navy-rgb), 0.98); backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      max-height: 0; overflow: hidden;
      transition: max-height .35s ease;
    }
    .nav-links.open { max-height: 320px; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 16px 6%; border-top: 1px solid rgba(255,255,255,0.06); }
    .nav-cta { display: none; }
    .nav-burger { display: flex; }
  }
  @media (max-width: 600px) {
    .stats-row, .footer-grid { grid-template-columns: 1fr; }
    .ref-gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 24px; }
    .contact-form { grid-template-columns: 1fr; }
    .form-group.full { grid-column: 1; }
    .brands-row { gap: 24px; }
    .testi-grid { grid-template-columns: 1fr; }
    .process-step:not(:last-child)::after { display: none; }

    nav { height: 60px; }
    .nav-links { top: 60px; }
    .nav-logo-icon { width: 44px; height: 44px; }
    .nav-logo-text { font-size: 12px; }
    .nav-actions { gap: 10px; }
    section { padding: 40px 6%; }

    /* Hero - compact mobile version */
    #hero { min-height: 92svh; }
    .hero-bg { background-position: 78% center; }
    .hero-content {
      padding-top: 88px; padding-right: 4%; padding-bottom: 24px;
      display: flex; flex-direction: column; justify-content: space-between;
      min-height: 74vh;
    }
    .hero-badge { margin-bottom: 16px; padding: 5px 12px; font-size: 11px; }
    .hero-title { margin-bottom: 10px; }
    .hero-subtitle { margin-bottom: 0; font-size: 14px; }
    .hero-btns { flex-direction: column; align-items: stretch; }
    .hero-btns a { text-align: center; }

    /* Services - compact 2-col mobile grid */
    #services, #process { padding-top: 36px; padding-bottom: 36px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; }
    .service-card { padding: 16px 14px; }
    .service-icon { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; }
    .service-icon svg { width: 18px; height: 18px; }
    .service-card h3 { font-size: 14px; margin-bottom: 5px; }
    .service-card p { font-size: 11.5px; line-height: 1.5; }

    /* Process - compact 2-col mobile grid */
    .process-grid { grid-template-columns: repeat(2, 1fr); margin-top: 20px; gap: 4px; }
    .process-step { padding: 14px 10px; }
    .process-num { font-size: 32px; margin-bottom: 4px; }
    .process-icon { width: 40px; height: 40px; margin-bottom: 8px; }
    .process-icon svg { width: 18px; height: 18px; }
    .process-step h3 { font-size: 13px; margin-bottom: 5px; }
    .process-step p { font-size: 11.5px; line-height: 1.5; }

    .thermostat-panel { width: 100%; }
    .team-card img { height: 200px; }
    .team-name { font-size: 13px; padding: 10px 6px; }
  }
  @media (max-width: 380px) {
    .nav-logo-text { display: none; }
    .hero-title { font-size: 34px; }
  }