/*
Theme Name: IT K&R Electronic
Theme URI: https://itkrelectronic.com
Author: IT K&R Electronic
Description: Custom homepage theme for IT K&R Electronic — European AI infrastructure.
Version: 1.0
Text Domain: itkr
*/

:root{
  --paper:#F2F4F5;
  --ink:#14181D;
  --slate:#7E8996;
  --slate-2:#8B96A3;
  --blue:#0B6FB0;
  --blue-light:#4FB8F0;
  --cargo:#12161C;
  --grey-bg:#EAEDEF;
  --line:#D7DBDF;
  --line-2:#E1E4E7;
  --line-3:#C9CFD4;
  --whatsapp:#25D366;
  --font-display:'Newsreader', serif;
  --font-body:'Public Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--ink); text-decoration:underline; }
button{ font-family:var(--font-body); cursor:pointer; }

.wrap{ max-width:1320px; margin:0 auto; padding:0 32px; }
@media (max-width:600px){ .wrap{ padding:0 20px; } }

/* header */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(242,244,245,0.94); border-bottom:1px solid var(--line-2); }
.site-header__row{ max-width:1320px; margin:0 auto; padding:0 32px; height:80px; display:flex; align-items:center; justify-content:space-between; }
.site-header__logo img{ height:34px; width:auto; }
.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav a{ font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; }
.header-right{ display:flex; align-items:center; gap:20px; }
.lang-switch{ display:flex; align-items:center; gap:2px; font-size:13px; }
.lang-switch a{ padding:6px 9px; color:var(--slate-2); font-weight:400; }
.lang-switch a.current-lang{ color:var(--ink); font-weight:600; }
.btn{ display:inline-block; font-weight:700; font-size:14px; padding:12px 22px; }
.btn-solid{ color:var(--paper); background:var(--blue); }
.btn-outline{ color:var(--ink); border:1px solid var(--ink); }
.hamburger{ width:40px; height:40px; border:1px solid var(--line); background:none; display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.hamburger span{ width:18px; height:1.5px; background:var(--ink); display:block; }
.mobile-nav{ display:none; flex-direction:column; padding:8px 24px 22px; border-top:1px solid var(--line-2); background:var(--paper); }
.mobile-nav a{ padding:14px 0; font-size:17px; color:var(--ink); border-bottom:1px solid #E7E9EB; }
.mobile-nav a.contact-link{ border-bottom:none; padding-top:18px; font-weight:600; color:var(--blue); }
@media (max-width:1080px){
  .site-nav, .header-right .btn-solid{ display:none; }
  .hamburger{ display:flex; }
  .mobile-nav.is-open{ display:flex; }
}

/* hero */
.hero{ position:relative; min-height:calc(100dvh - 80px); display:flex; align-items:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img.hero-photo{ width:100%; height:100%; object-fit:cover; object-position:70% center; }
.hero__gradient{ position:absolute; inset:0; background:linear-gradient(90deg, var(--paper) 0%, var(--paper) 40%, rgba(242,244,245,0.88) 56%, rgba(242,244,245,0.35) 74%, rgba(242,244,245,0.05) 92%); }
.hero__fade-bottom{ position:absolute; left:0; right:0; bottom:0; height:180px; background:linear-gradient(180deg, rgba(242,244,245,0) 0%, var(--paper) 100%); }
.hero__watermark{ position:absolute; top:40px; left:-40px; width:340px; height:auto; opacity:0.06; pointer-events:none; }
.hero__content{ position:relative; z-index:1; max-width:1320px; width:100%; margin:0 auto; padding:48px 32px 72px; }
.hero__inner{ max-width:600px; }
.eyebrow{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--blue); margin:0 0 22px; }
.eyebrow--muted{ font-weight:600; letter-spacing:0.12em; color:var(--slate); }
h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(46px,7.2vw,104px); line-height:0.98; letter-spacing:-0.02em; margin:0 0 26px; }
h2{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 24px; }
.lead{ font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:#2A2F36; max-width:500px; margin:0 0 34px; }
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.hero__ctas .btn{ padding:16px 28px; font-size:15px; }
.facts-strip{ display:flex; flex-wrap:wrap; gap:10px 22px; background:rgba(242,244,245,0.9); padding:14px 18px; width:fit-content; font-family:var(--font-mono); font-size:12.5px; color:var(--blue); }
.facts-strip .dot{ color:var(--slate-2); }
.scroll-hint{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink); animation:itkr-bounce 2s ease-in-out infinite; }
.scroll-hint span{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#3B4148; }
@keyframes itkr-bounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }
@media (max-height:700px){ .scroll-hint{ display:none; } }

/* image band */
.image-band img{ width:100%; height:clamp(280px,46vw,560px); object-fit:cover; }

/* generic section */
.section{ max-width:1320px; margin:0 auto; padding:104px 32px 96px; }
@media (max-width:600px){ .section{ padding:56px 20px; } }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head p.eyebrow{ margin-bottom:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:48px 40px; }
.grid-4--tight{ gap:48px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.build-item{ border-top:1px solid var(--line); padding-top:28px; }
.build-item h3{ font-family:var(--font-display); font-weight:600; font-size:24px; margin:0 0 14px; }
.build-item p{ font-size:16px; line-height:1.65; color:#3B4148; margin:0; }

.section--grey{ background:var(--grey-bg); }
.process-num{ font-family:var(--font-display); font-weight:600; font-size:48px; color:var(--blue); margin-bottom:20px; line-height:1; }
.process-item h3{ font-size:19px; font-weight:600; margin:0 0 10px; }
.process-item p{ font-size:15.5px; line-height:1.6; color:#3B4148; margin:0; }

.section--dark{ background:var(--cargo); color:var(--paper); }
.section--dark .section-inner{ max-width:1320px; margin:0 auto; padding:108px 32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px); gap:48px; align-items:start; }
@media (max-width:1080px){ .section--dark .section-inner{ grid-template-columns:1fr; } .section--dark .supply-photo{ display:none; } }
.section--dark h2{ color:var(--paper); }
.section--dark .eyebrow--muted{ color:var(--slate-2); }
.section--dark p.body{ font-size:17px; line-height:1.65; color:#B9C0C8; margin:0 0 22px; }
.section--dark .external-link{ font-size:15px; font-weight:600; color:var(--blue-light); display:inline-block; margin-bottom:48px; }
.supply-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; margin:0; }
.supply-list dt{ font-size:15.5px; font-weight:600; color:var(--paper); margin:0 0 10px; }
.supply-list dd{ font-size:15px; line-height:1.6; color:#B9C0C8; margin:0; padding-top:22px; border-top:1px solid #2A2F36; }
.supply-photo img{ width:100%; height:640px; object-fit:cover; }
@media (max-width:600px){ .supply-photo img{ height:320px; } }

.callout{ display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0; }
.callout p.label{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--slate); margin:0 0 12px; }
.callout p.value{ font-family:var(--font-display); font-size:22px; line-height:1.5; margin:0; }

.two-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:56px; }
@media (max-width:1080px){ .two-col{ grid-template-columns:1fr; } }
.photo-placeholder{ background:var(--grey-bg); min-height:260px; display:flex; align-items:center; justify-content:center; padding:32px; text-align:center; }
.photo-placeholder p{ font-size:13px; line-height:1.7; color:var(--slate); margin:0; letter-spacing:0.02em; }

.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:64px; }
@media (max-width:1080px){ .contact-grid{ grid-template-columns:1fr; } }
.wpcf7-form p{ display:flex; flex-direction:column; gap:8px; margin:0 0 24px; }
.wpcf7-form label{ font-size:13px; font-weight:600; color:#5A6169; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form select{ border:none; border-bottom:1px solid var(--line-3); padding:10px 2px; font-size:16px; font-family:var(--font-body); background:none; }
.wpcf7-form textarea{ border:1px solid var(--line-3); padding:12px 14px; font-size:16px; font-family:var(--font-body); background:none; resize:vertical; }
.wpcf7-form .wpcf7-submit{ font-weight:700; font-size:15px; color:var(--paper); background:var(--blue); padding:16px 30px; border:none; }
.contact-details{ font-size:16px; line-height:2.1; color:#3B4148; padding-top:6px; }
.contact-details address{ font-style:normal; margin-top:18px; color:var(--slate); font-size:15px; }
.whatsapp-btn{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border:1px solid var(--line-3); border-radius:999px; color:var(--ink); }
.whatsapp-btn img{ width:26px; height:26px; }
.whatsapp-btn span{ font-size:14px; font-weight:600; }

/* footer */
.site-footer{ border-top:1px solid var(--line-2); }
.footer-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; margin-bottom:56px; padding-top:72px; }
.footer-cols img{ height:42px; width:auto; margin-bottom:18px; }
.footer-cols p{ font-size:14px; line-height:1.6; color:#3B4148; max-width:260px; margin:0; }
.footer-legal-ids{ font-family:var(--font-mono); font-size:13px; line-height:2; color:#3B4148; }
.footer-links{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.footer-bottom{ border-top:1px solid var(--line-2); padding:24px 0 36px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:13px; color:#5A6169; }
.footer-bottom a{ color:#8B96A3; }

/* cookie banner */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:100; background:var(--ink); color:var(--paper); border-top:1px solid #2A2F36; padding:22px 28px; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.cookie-banner p{ font-size:14px; line-height:1.6; max-width:560px; margin:0; color:#D7DBDF; }
.cookie-banner button{ font-weight:600; font-size:14px; padding:13px 22px; background:none; border:1px solid #5A6169; color:var(--paper); }
.cookie-banner.is-hidden{ display:none; }

/* back to top */
.back-to-top{ position:fixed; right:24px; bottom:28px; z-index:60; width:48px; height:48px; border-radius:50%; border:none; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(20,24,29,0.28); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }

/* scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } .scroll-hint{ animation:none; } }