/* =====================================================
   ARMATURMERKEZI — Design tokens
   Palette: Navy #0B1F35, Steel #4B5563, Accent #0066FF
   Display: Space Grotesk · Body: Inter · Data: IBM Plex Mono
===================================================== */
:root{
  --navy: #0B1F35;
  --navy-soft: #122a47;
  --steel: #4B5563;
  --steel-light: #8a93a0;
  --accent: #0066FF;
  --accent-soft: #e8f0ff;
  --white: #ffffff;
  --bg-alt: #f5f7fa;
  --line: #e3e7ed;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 10px rgba(11,31,53,0.06);
  --shadow-md: 0 12px 32px rgba(11,31,53,0.10);
  --shadow-lg: 0 24px 60px rgba(11,31,53,0.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  font-family:var(--font-body);
  color:var(--navy);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;}

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; color:var(--navy);}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.15;}
h3{font-size:1.15rem;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  font-weight:600;
  color:var(--accent);
  margin-bottom:14px;
  text-transform:uppercase;
}

/* ============== Buttons ============== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:0.92rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(0,102,255,0.28);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,102,255,0.36);}
.btn-ghost{background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.35); backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,0.16); transform:translateY(-2px);}
.btn-outline{background:transparent; color:var(--navy); border:1.5px solid var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-sm{padding:10px 20px; font-size:0.82rem;}
.btn-block{width:100%;}

/* ============== Flow progress bar ============== */
.flow-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--accent); z-index:1100; transition:width .15s linear;
}

/* ============== Header ============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 0;
  box-shadow:0 1px 0 rgba(11,31,53,0.06);
}
.header-inner{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{display:flex; align-items:center; gap:10px; color:var(--navy);}
.site-header:not(.scrolled) .logo{color:#fff;}
.logo-text{font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:0.01em;}
.logo-accent{color:var(--accent); font-weight:600;}

.main-nav ul{display:flex; gap:30px;}
.main-nav a{
  font-size:0.92rem; font-weight:500; color:var(--navy); position:relative; padding:4px 0;
}
.site-header:not(.scrolled) .main-nav a{color:#fff;}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0%; background:var(--accent);
  transition:width .25s var(--ease);
}
.main-nav a:hover::after{width:100%;}

.header-actions{display:flex; align-items:center; gap:14px;}
.lang-switch{display:flex; border:1px solid rgba(120,130,145,0.4); border-radius:999px; overflow:hidden;}
.site-header:not(.scrolled) .lang-switch{border-color:rgba(255,255,255,0.4);}
.lang-btn{padding:6px 12px; font-size:0.78rem; font-weight:600; color:var(--steel);}
.site-header:not(.scrolled) .lang-btn{color:rgba(255,255,255,0.75);}
.lang-btn.active{background:var(--accent); color:#fff;}
.header-whatsapp{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; transition:transform .25s var(--ease);
}
.header-whatsapp:hover{transform:scale(1.08);}

.nav-toggle{display:none; flex-direction:column; gap:5px; width:26px; position:relative; z-index:1001;}
.nav-toggle span{height:2px; width:100%; background:currentColor; color:var(--navy); display:block; transition:transform .25s, opacity .25s;}
.site-header:not(.scrolled) .nav-toggle span{background:#fff;}
.site-header .nav-toggle.open span{background:var(--navy);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============== Hero ============== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:var(--navy); color:#fff; overflow:hidden;
  padding-top:120px; padding-bottom:80px;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.schematic-bg{position:absolute; inset:0; width:100%; height:100%;}
.flow-dash{animation:dashflow 6s linear infinite;}
@keyframes dashflow{ to{ stroke-dashoffset:-720; } }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,53,0.92) 0%, rgba(11,31,53,0.85) 55%, rgba(11,31,53,0.97) 100%);
}
.hero-content{position:relative; z-index:1; max-width:780px; margin:0 auto; padding:0 24px; text-align:center;}
.hero .eyebrow{color:#7fb0ff; justify-content:center;}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.6rem); color:#fff; line-height:1.12; margin-bottom:20px;
}
.hero-sub{font-size:1.08rem; color:rgba(255,255,255,0.78); max-width:620px; margin:0 auto 36px;}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:64px;}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid rgba(255,255,255,0.16); padding-top:32px;
}
.stat{display:flex; flex-direction:column; align-items:center; gap:4px;}
.stat-num{font-family:var(--font-mono); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:600; color:#fff;}
.stat-label{font-size:0.78rem; color:rgba(255,255,255,0.6); letter-spacing:0.02em;}

.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid rgba(255,255,255,0.4); border-radius:14px; z-index:1;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:#fff; border-radius:2px; animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{0%{opacity:1; transform:translateY(0);} 70%{opacity:0; transform:translateY(14px);} 100%{opacity:0;}}

/* ============== Sections shared ============== */
.section{padding:110px 0;}
.section-light{background:var(--bg-alt);}
.section-dark{background:var(--navy); color:#fff;}
.section-dark h2, .section-dark h3{color:#fff;}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head.light .eyebrow{color:#7fb0ff;}
.section-desc{color:var(--steel); font-size:1.02rem;}
.section-dark .section-desc{color:rgba(255,255,255,0.7);}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============== Product grid ============== */
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px;
}
.product-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display:flex; flex-direction:column; gap:14px;
}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}
.card-icon{
  width:52px; height:52px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.card-photo{
  width:100%; height:180px; border-radius:12px; overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--line);
}
.card-photo img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;}
.product-card h3{font-size:1.08rem;}
.product-card p{color:var(--steel); font-size:0.92rem; flex-grow:1;}
.card-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.card-link{font-size:0.84rem; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px;}
.card-link.muted{color:var(--steel);}
.card-link:hover{text-decoration:underline;}

/* ============== Industries ============== */
.industries-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;
}
.industry-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:26px 22px;
  display:flex; align-items:center; gap:16px;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.industry-card:hover{background:rgba(0,102,255,0.12); border-color:rgba(0,102,255,0.4); transform:translateY(-4px);}
.industry-icon{
  width:44px; height:44px; min-width:44px; border-radius:10px;
  background:rgba(0,102,255,0.18); color:#7fb0ff;
  display:flex; align-items:center; justify-content:center;
}
.industry-card h3{font-size:0.98rem; color:#fff; font-weight:600;}

/* ============== Timeline ============== */
.timeline{position:relative; max-width:880px; margin:0 auto;}
.timeline::before{
  content:""; position:absolute; left:27px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(to bottom, var(--accent), var(--line));
}
.timeline-item{display:flex; gap:24px; padding:0 0 44px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-marker{
  width:56px; height:56px; min-width:56px; border-radius:50%; background:#fff; border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; color:var(--accent);
  position:relative; z-index:1;
}
.timeline-body h3{margin-bottom:6px;}
.timeline-body p{color:var(--steel); font-size:0.94rem;}

/* ============== Featured product ============== */
.featured-layout{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;}
.valve-render{width:100%; max-width:380px; margin:0 auto; display:block;}
.featured-copy p{color:var(--steel); margin-bottom:24px;}
.spec-table{width:100%; border-collapse:collapse; margin-bottom:28px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:12px 4px; font-size:0.9rem;}
.spec-table td:first-child{color:var(--steel); font-weight:500;}
.spec-table td:last-child{font-family:var(--font-mono); text-align:right; font-weight:600;}
.featured-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ============== Quote form ============== */
.quote-layout{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px;}
.quote-intro .eyebrow{color:#7fb0ff;}
.quote-intro p{color:rgba(255,255,255,0.72); margin-bottom:28px;}
.quote-points{display:flex; flex-direction:column; gap:14px;}
.quote-points li{
  display:flex; align-items:center; gap:10px; font-size:0.94rem; color:#fff;
  padding-left:0;
}
.quote-points li::before{content:"›"; color:var(--accent); font-weight:700; font-size:1.2rem;}

.company-info{
  margin-top:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12);
  display:flex; flex-direction:column; gap:8px;
  font-size:0.86rem; line-height:1.55; color:rgba(255,255,255,0.78);
}
.company-info .company-name{
  font-weight:700; color:#fff; letter-spacing:0.01em; font-size:0.95rem; margin-bottom:2px;
}
.company-info span{color:#7fb0ff; font-weight:600;}

.quote-form{background:#fff; border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-lg);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-field{margin-bottom:18px; display:flex; flex-direction:column; gap:6px;}
.form-field label{font-size:0.82rem; font-weight:600; color:var(--navy);}
.form-field input, .form-field select, .form-field textarea{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px; font-size:0.92rem;
  transition:border-color .2s, box-shadow .2s; color:var(--navy); background:#fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,102,255,0.12);
}
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea{border-color:#e23b3b;}
.field-error{font-size:0.78rem; color:#d32f2f; font-weight:600; min-height:14px;}

.file-drop{
  border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:22px;
  text-align:center; font-size:0.86rem; color:var(--steel); position:relative; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.file-drop:hover, .file-drop.dragover{border-color:var(--accent); background:var(--accent-soft);}
.file-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.file-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.file-list span{
  font-size:0.76rem; background:var(--bg-alt); padding:5px 10px; border-radius:999px; color:var(--steel);
}
.form-success{
  display:none; margin-top:16px; font-size:0.88rem; font-weight:600; color:#15803d; background:#e7f8ee;
  padding:12px 16px; border-radius:var(--radius-sm); text-align:center;
}
.form-success.show{display:block;}
.form-error{
  display:none; margin-top:16px; font-size:0.88rem; font-weight:600; color:#dc2626; background:#fdecea;
  border:1px solid #f5c2c0; padding:12px 16px; border-radius:var(--radius-sm); text-align:center;
}
.form-error.show{display:block;}
.btn[disabled]{opacity:0.6; cursor:not-allowed; pointer-events:none;}

/* ============== About ============== */
.about-layout{display:grid; grid-template-columns:1.2fr 0.8fr; gap:64px; align-items:center;}
.about-copy p{color:var(--steel); margin:18px 0 28px;}
.about-visual svg{width:100%; max-width:320px; margin:0 auto; display:block;}

/* ============== Blog ============== */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px;}
.blog-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.blog-thumb{
  height:160px; background:linear-gradient(135deg,var(--navy),var(--navy-soft));
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5);
}
.blog-body{padding:22px;}
.blog-tag{font-family:var(--font-mono); font-size:0.7rem; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase;}
.blog-body h3{margin:10px 0 8px; font-size:1.02rem;}
.blog-body p{color:var(--steel); font-size:0.88rem; margin-bottom:14px;}
.blog-read{font-size:0.84rem; font-weight:600; color:var(--navy);}
.blog-read:hover{color:var(--accent);}

/* ============== Footer ============== */
.site-footer{background:var(--navy); color:rgba(255,255,255,0.7); padding:80px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand p{margin:16px 0 20px; font-size:0.9rem;}
.footer-col h3{color:#fff; font-size:0.92rem; margin-bottom:18px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:0.9rem; transition:color .2s;}
.footer-col a:hover{color:#fff;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.footer-social a:hover{background:var(--accent); border-color:var(--accent);}
.footer-bottom{padding:24px 0; text-align:center; font-size:0.82rem;}

/* ============== Live support widget ============== */
.support-widget{position:fixed; right:24px; bottom:24px; z-index:1050; display:flex; flex-direction:column; align-items:flex-end; gap:14px;}
.support-fab{
  width:58px; height:58px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(0,102,255,0.4);
  transition:transform .25s var(--ease);
}
.support-fab:hover{transform:scale(1.08);}
.support-panel{
  width:280px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg);
  transform:translateY(20px) scale(0.96); opacity:0; pointer-events:none;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
  overflow:hidden;
}
.support-widget.open .support-panel{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
.support-header{
  background:var(--navy); color:#fff; padding:16px 18px; font-weight:600; font-size:0.92rem;
  display:flex; justify-content:space-between; align-items:center;
}
.support-close{color:#fff; font-size:1.2rem; line-height:1;}
.support-options{display:flex; flex-direction:column; padding:10px;}
.support-option{
  padding:13px 14px; border-radius:10px; font-size:0.88rem; font-weight:500; color:var(--navy);
  transition:background .2s;
}
.support-option:hover{background:var(--bg-alt);}

/* ============== Responsive ============== */
@media (max-width: 980px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:280px; background:#fff;
    box-shadow:-8px 0 30px rgba(11,31,53,0.15); padding:100px 28px 28px; transform:translateX(100%);
    transition:transform .35s var(--ease); z-index:999;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:22px;}
  .main-nav a{color:var(--navy) !important;}
  .nav-toggle{display:flex;}
  .header-actions .btn-sm{display:none;}
  .featured-layout, .quote-layout, .about-layout{grid-template-columns:1fr; gap:40px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:28px;}
}
@media (max-width: 620px){
  .section{padding:72px 0;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .header-actions{gap:10px;}
}