/* =========================================================
   Кедр Электрик — styles
   Mobile-first. Fluid type via clamp(). No external deps.
   ========================================================= */

:root{
  /* Brand palette, sampled from the original hero artwork */
  --bg:        #080E0A;
  --bg-2:      #0C140F;
  --surface:   #121D16;
  --surface-2: #17241B;
  --line:      #223026;

  --green:     #7CB342;
  --green-2:   #96C95C;
  --green-dim: #4C7A2E;

  --cream:     #E9E4D4;
  --text:      #E6EDE5;
  --muted:     #94A394;

  --radius:    18px;
  --radius-sm: 12px;

  /* Fluid rhythm */
  --pad:       clamp(1.15rem, 5vw, 2.5rem);
  --gap:       clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(4rem, 11vw, 8.5rem);

  --ease: cubic-bezier(.22,.8,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;         /* sticky header offset for anchor links */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;               /* guard against any accidental h-scroll */
}

img{ max-width:100%; height:auto; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  margin:0;
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:700;
  text-wrap:balance;
}
h2{ font-size:clamp(1.65rem, 1.15rem + 2.2vw, 2.9rem); }
h3{ font-size:clamp(1.08rem, .98rem + .5vw, 1.3rem); letter-spacing:-.01em; }
p{ margin:0; }

.wrap{
  width:min(1200px, 100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.skip{
  position:absolute; left:-9999px;
  background:var(--green); color:#08110A;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:600; z-index:100;
}
.skip:focus{ left:0; top:0; }

:focus-visible{
  outline:2px solid var(--green-2);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(8,14,10,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(124,179,66,.14);
}
.header-inner{
  display:flex; align-items:center; gap:1rem;
  min-height:64px;
  flex-wrap:wrap;
}

.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:1.02rem; letter-spacing:-.01em;
  margin-right:auto;
  padding-block:.5rem;
}
.brand-mark{
  display:grid; place-items:center;
  width:30px; height:30px; flex:0 0 30px;
  border-radius:9px;
  color:var(--green-2);
  background:linear-gradient(150deg, rgba(124,179,66,.22), rgba(124,179,66,.05));
  border:1px solid rgba(124,179,66,.3);
}
.brand-mark svg{ width:17px; height:17px; }
.brand-mark img{ width:100%; height:100%; border-radius:inherit; object-fit:cover; }

.nav-burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px;                 /* 44px touch target */
  padding:0 10px;
  cursor:pointer; border-radius:10px;
  background:transparent;
  border:1px solid var(--line);
}
.nav-burger span{
  display:block; height:2px; width:100%;
  background:var(--text); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Collapsed by default: one grid row animating 0fr -> 1fr.
   All links live in .nav-inner so a single row governs them. */
.nav{
  flex-basis:100%;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease);
}
.nav-burger[aria-expanded="true"] ~ .nav{ grid-template-rows:1fr; }
.nav-inner{ overflow:hidden; min-height:0; }

/* While the panel is open it overlaps page content, so drop the transparency. */
.site-header:has(.nav-burger[aria-expanded="true"]){
  background:rgba(8,14,10,.97);
}

.nav-inner a{
  display:block;
  padding:.85rem .2rem;
  color:var(--muted);
  border-top:1px solid var(--line);
  transition:color .2s var(--ease);
}
.nav-inner a:hover{ color:var(--text); }

@media (min-width:768px){
  .nav-burger{ display:none; }
  .nav{ flex-basis:auto; display:block; grid-template-rows:none; }
  .nav-inner{ display:flex; gap:.35rem; overflow:visible; }
  .nav-inner a{
    border-top:0; padding:.55rem .9rem; border-radius:999px;
    font-size:.95rem;
  }
  .nav-inner a:hover{ background:rgba(124,179,66,.1); color:var(--green-2); }
}

/* ---------------------------------------------------------
   HERO
   The original baked the wordmark + badges into a 2.5:1 image,
   so it collapsed on phones. Here the artwork is only the bear;
   every word is real, fluid HTML.
   --------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(2.5rem, 8vw, 5rem) clamp(3rem, 9vw, 6rem);
  background:
    radial-gradient(ellipse 75% 60% at 50% 34%, rgba(124,179,66,.20), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 30%, #16281A 0%, #0A120C 62%, var(--bg) 100%);
}
/* soft vignette + faint horizon line */
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,0,0,.55), transparent 70%),
    linear-gradient(180deg, transparent 78%, rgba(8,14,10,.9) 100%);
}
.hero-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.hero-bear{
  width:min(100%, 460px);
  margin-bottom:clamp(.25rem, 1.5vw, 1rem);
  /* The artwork is a rectangular crop; this dissolves its edges so the
     glow reads as part of the hero background instead of a pasted box. */
  --bear-mask:radial-gradient(ellipse 58% 58% at 50% 46%,
                #000 0%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.45) 74%, transparent 100%);
  -webkit-mask-image:var(--bear-mask);
  mask-image:var(--bear-mask);
}

/* Sizing is tuned so the wordmark sits on one line from ~750px up and
   stacks cleanly below that. line-height must stay >= 1 or the two
   stacked lines collide. */
.hero-title{
  font-size:clamp(2.35rem, 1.4rem + 6.5vw, 6rem);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.04;
  text-transform:uppercase;
  text-wrap:balance;
}
.hero-title .w1{ color:#fff; }
.hero-title .w2{
  color:var(--green);
  text-shadow:0 0 42px rgba(124,179,66,.35);
}

.hero-tagline{
  margin-top:clamp(.5rem,1.6vw,.9rem);
  font-size:clamp(1.02rem, .9rem + .8vw, 1.6rem);
  color:var(--cream);
  letter-spacing:.01em;
}

/* Badges: were pinned to the right of the artwork, now a wrapping row */
.badges{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem;
  margin-top:clamp(1.6rem, 4vw, 2.6rem);
}
.badge{
  display:flex; align-items:center; gap:.65rem;
  padding:.7rem 1.05rem;
  text-align:left;
  font-size:clamp(.85rem,.82rem + .12vw,.95rem);
  line-height:1.3; font-weight:500;
  border-radius:14px;
  background:rgba(20,32,23,.72);
  border:1px solid rgba(124,179,66,.2);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.badge svg{ width:22px; height:22px; flex:0 0 22px; color:var(--green-2); }

/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */
.section{ padding-block:var(--section-y); }

.eyebrow{
  font-size:.775rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green);
  margin-bottom:.85rem;
}
.lead{
  color:var(--muted);
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height:1.75;
  max-width:62ch;
}

.section-head{ margin-bottom:clamp(2.2rem, 5vw, 3.6rem); }
.section-head h2 + .lead{ margin-top:1.1rem; }
.section-head.center{ text-align:center; }
.section-head.center .lead{ margin-inline:auto; }

.btn-download{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.4rem;
  padding:.75rem 1.3rem;
  background:var(--green); color:#08110A;
  font-weight:600;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s ease;
}
.btn-download:hover{ background:var(--green-2); }
.btn-download svg{ width:19px; height:19px; flex:0 0 19px; }

/* ---------- О компании ---------- */
.about{
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(124,179,66,.07), transparent 60%),
    var(--bg-2);
  border-block:1px solid var(--line);
}
.about-grid{
  display:grid;
  gap:clamp(1.8rem, 5vw, 4rem);
  align-items:center;
}
.about-media{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
}
.about-media img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.about-body h2 + .lead{ margin-top:1.15rem; }

@media (min-width:880px){
  .about-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); }
}

/* ---------- Продукция: 3 текстовых блока ---------- */
.notes{
  display:grid;
  gap:var(--gap);
  margin-bottom:clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.note{
  position:relative;
  padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--radius);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-top:2px solid var(--green-dim);
}
.note-num{
  display:block;
  font-size:.8rem; font-weight:700; letter-spacing:.1em;
  color:var(--green);
  margin-bottom:.75rem;
}
.note h3{ margin-bottom:.7rem; }
.note p{ color:var(--muted); font-size:.965rem; line-height:1.7; }

/* ---------- Продукция: карточки с фото ---------- */
.cards{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.card{
  display:flex; flex-direction:column;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
@media (hover:hover){
  .card:hover{
    transform:translateY(-5px);
    border-color:rgba(124,179,66,.4);
    box-shadow:0 26px 55px -30px rgba(0,0,0,.95);
  }
  .card:hover .card-media img{ transform:scale(1.05); }
}
.card-media{
  background:#F2F3F1;                      /* product shots are on white */
  overflow:hidden;
}
.card-media img{
  width:100%;
  aspect-ratio:4/3;                        /* uniform tiles → tidy grid */
  object-fit:contain;
  padding:clamp(.9rem,2.5vw,1.6rem);
  transition:transform .5s var(--ease);
}
.card-body{
  padding:clamp(1.25rem,2.8vw,1.7rem);
  display:flex; flex-direction:column; gap:.7rem;
}
.card-body p{ color:var(--muted); font-size:.945rem; line-height:1.7; }

/* ---------- Контакты ---------- */
.contacts{
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(124,179,66,.08), transparent 65%),
    var(--bg-2);
  border-top:1px solid var(--line);
}
.contact-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.contact{
  display:flex; align-items:flex-start; gap:1rem;
  padding:clamp(1.3rem,3vw,1.8rem);
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
}
.contact-ico{
  display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 44px;
  border-radius:13px;
  color:var(--green-2);
  background:rgba(124,179,66,.11);
  border:1px solid rgba(124,179,66,.22);
}
.contact-ico svg{ width:21px; height:21px; }
.contact-label{
  font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.35rem;
}
.contact-value{
  display:inline-block;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  font-weight:600;
  color:var(--text);
  line-height:1.45;
  word-break:break-word;                   /* long email never overflows */
}
a.contact-value{ transition:color .2s var(--ease); }
a.contact-value:hover{ color:var(--green-2); }

/* ---------- Карта ---------- */
.map{
  margin-top:var(--gap);
  height:clamp(260px, 42vw, 420px);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
}
.map-frame{
  display:block;
  width:100%; height:100%;
  border:0;
}

/* Placeholder shown until the user opts in */
.map-preview{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem;
  width:100%; height:100%;
  padding:1.5rem;
  cursor:pointer;
  font:inherit; color:var(--text);
  text-align:center;
  border:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(124,179,66,.12), transparent 70%),
    var(--surface);
  transition:background-color .3s var(--ease);
}
.map-preview:hover{ background-color:var(--surface-2); }

/* Faint street-grid texture so the block reads as a map before it loads */
.map-grid{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:
    linear-gradient(rgba(124,179,66,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,179,66,.09) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 100%);
}
.map-pin{
  position:relative;
  display:grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  color:var(--green-2);
  background:rgba(124,179,66,.12);
  border:1px solid rgba(124,179,66,.28);
}
.map-pin svg{ width:25px; height:25px; }
.map-cta{
  position:relative;
  display:inline-block;
  margin-top:.35rem;
  padding:.6rem 1.15rem;
  border-radius:999px;
  font-size:.92rem; font-weight:600;
  color:#08110A;
  background:var(--green);
}
.map-preview:hover .map-cta{ background:var(--green-2); }

.map-links{
  margin-top:.9rem;
  text-align:center;
  font-size:.92rem;
}
.map-links a{
  color:var(--muted);
  border-bottom:1px solid rgba(124,179,66,.3);
  padding-bottom:1px;
  transition:color .2s var(--ease);
}
.map-links a:hover{ color:var(--green-2); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--bg);
}
.footer-inner{
  padding-block:2rem;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}