/* ═══════════════════════════════════════════════════════
   Justino Robotics — Stylesheet
   robotics/style.css
   Design: Scandinavian professional — clean, minimal,
   generous whitespace, restrained colour, no chrome.
   Palette: off-white #F5F2EC · charcoal #111110
            accent #1A4332 (Nordic forest green)
   Fonts: system sans-serif + Georgia for display
═══════════════════════════════════════════════════════ */

/* ── LIGHT (default — Scandinavian feel) ── */
:root {
  --bg:      #F5F2EC;
  --bg-2:    #EDEAE2;
  --bg-3:    #E4E0D6;
  --bg-4:    #D8D4C8;
  --green:   #1A4332;
  --green-2: #245640;
  --green-3: #2F6B4F;
  --green-dim: rgba(26,67,50,.07);
  --green-border: rgba(26,67,50,.18);
  --stone:   #7A7468;
  --ink:     #111110;
  --ink-2:   #2A2926;
  --ink-3:   #48453F;
  --text-h:  #111110;
  --text-b:  #2A2926;
  --text-m:  #7A7468;
  --border:  rgba(17,17,16,.1);
  --border-2: rgba(17,17,16,.18);
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .22s;
  --nav-h: 64px;
  --radius: 2px;
  color-scheme: light;
}

/* ── DARK ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111110; --bg-2: #1A1916; --bg-3: #222120; --bg-4: #2C2B28;
    --text-h: #F0EDE6; --text-b: #C8C4BA; --text-m: #7A7468;
    --border: rgba(240,237,230,.08); --border-2: rgba(240,237,230,.15);
    --green-dim: rgba(47,107,79,.12); --green-border: rgba(47,107,79,.25);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg: #111110; --bg-2: #1A1916; --bg-3: #222120; --bg-4: #2C2B28;
  --text-h: #F0EDE6; --text-b: #C8C4BA; --text-m: #7A7468;
  --border: rgba(240,237,230,.08); --border-2: rgba(240,237,230,.15);
  --green-dim: rgba(47,107,79,.12); --green-border: rgba(47,107,79,.25);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #F5F2EC; --bg-2: #EDEAE2; --bg-3: #E4E0D6; --bg-4: #D8D4C8;
  --text-h: #111110; --text-b: #2A2926; --text-m: #7A7468;
  --border: rgba(17,17,16,.1); --border-2: rgba(17,17,16,.18);
  --green-dim: rgba(26,67,50,.07); --green-border: rgba(26,67,50,.18);
  color-scheme: light;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--sans); background: var(--bg); color: var(--text-b); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── NAV ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; height: var(--nav-h); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0 clamp(1.5rem,5vw,3.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__logo { display: flex; align-items: center; gap: .7rem; }
.nav__logo .rb-mark { width: 26px; height: 26px; flex-shrink: 0; }
.nav__wordmark { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: var(--text-h); }
.nav__wordmark em { color: var(--green-3); font-style: normal; }
.nav__links { display: flex; align-items: center; gap: clamp(.6rem,1.6vw,2rem); list-style: none; }
.nav__links a { font-size: .78rem; font-weight: 500; letter-spacing: .02em; color: var(--text-m); transition: color var(--dur) var(--ease); }
.nav__links a:hover { color: var(--text-h); }
.nav__right { display: flex; align-items: center; gap: .35rem; }
.btn-lang { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .04em; padding: .25rem .55rem; border-radius: var(--radius); border: 1px solid transparent; color: var(--text-m); transition: all var(--dur) var(--ease); }
.btn-lang.active { border-color: var(--green-border); color: var(--green); }
[data-theme="dark"] .btn-lang.active { color: var(--green-3); }
.btn-lang:hover:not(.active) { color: var(--text-b); }
.btn-theme { font-size: .95rem; padding: .3rem .35rem; color: var(--text-m); border-radius: var(--radius); transition: color var(--dur) var(--ease); }
.btn-theme:hover { color: var(--text-h); }
.nav__ham { display: none; flex-direction: column; gap: 5px; padding: .4rem; }
.nav__ham span { display: block; width: 20px; height: 1.5px; background: var(--text-b); border-radius: 1px; transition: all .22s; }
.nav-open .nav__links { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; position: fixed; inset: var(--nav-h) 0 0 0; background: var(--bg); z-index: 299; }
.nav-open .nav__links a { font-size: .95rem; }
.nav-open .nav__ham span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav__ham span:nth-child(2) { opacity: 0; }
.nav-open .nav__ham span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 900px) { .nav__links { display: none; } .nav__ham { display: flex; } }

/* ── HERO ── */
.hero { min-height: 100vh; padding: calc(var(--nav-h) + 5rem) clamp(1.5rem,6vw,5rem) 6rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero__glow { display: none; }
.hero__inner { position: relative; z-index: 1; max-width: 820px; }
.hero__tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 2rem; }
.hero__tag::before { display: none; }
.hero__title { font-family: var(--serif); font-size: clamp(3rem,9vw,7rem); font-weight: 400; line-height: .92; letter-spacing: -.02em; color: var(--text-h); margin-bottom: 2rem; }
.hero__title .teal { color: var(--green); font-style: italic; }
.hero__title .dim { color: var(--text-m); font-weight: 400; }
.hero__sub { font-size: clamp(.9rem,1.5vw,1.05rem); color: var(--text-b); max-width: 540px; line-height: 1.8; margin-bottom: 2.8rem; border-left: none; padding-left: 0; }
.hero__ctas { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-bottom: 5rem; }
.btn-teal { display: inline-flex; align-items: center; gap: .5rem; background: var(--green); color: #F5F2EC; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .04em; padding: .8rem 1.8rem; border-radius: var(--radius); transition: background var(--dur) var(--ease); }
.btn-teal:hover { background: var(--green-2); }
.btn-ghost-teal { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--text-b); border: 1px solid var(--border-2); padding: .8rem 1.8rem; border-radius: var(--radius); transition: all var(--dur) var(--ease); }
.btn-ghost-teal:hover { border-color: var(--text-b); }
.hero__stats { display: flex; gap: clamp(2rem,5vw,5rem); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 2rem; }
.hstat__n { font-family: var(--serif); font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 400; color: var(--text-h); line-height: 1; }
.hstat__l { font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-m); margin-top: .3rem; }

/* ── SECTION CHROME ── */
.sec-eye { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: .5rem; }
[data-theme="dark"] .sec-eye { color: var(--green-3); }
.sec-h { font-family: var(--serif); font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 400; color: var(--text-h); letter-spacing: -.01em; line-height: 1.1; }
.sec-rule { display: flex; align-items: flex-end; gap: 2rem; margin-bottom: 3.5rem; }
.sec-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); margin-bottom: .35rem; }
.sec-rule-l { display: flex; flex-direction: column; gap: .3rem; }

/* ── PRODUCTS ── */
.products { padding: clamp(5rem,9vw,8rem) clamp(1.5rem,6vw,5rem); background: var(--bg); }
.products__inner { max-width: 1400px; margin: 0 auto; }
.products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: .5rem; }
.prd { background: var(--bg); padding: 2rem 1.8rem; position: relative; overflow: hidden; transition: background var(--dur) var(--ease); display: flex; flex-direction: column; }
.prd:hover { background: var(--bg-2); }
.prd::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.prd:hover::before { transform: scaleX(1); }
.prd__cat { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-m); margin-bottom: 1.2rem; }
.prd__icon { font-size: 2rem; line-height: 1; margin-bottom: 1.2rem; }
.prd__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--text-h); margin-bottom: .6rem; line-height: 1.2; }
.prd__desc { font-size: .82rem; color: var(--text-b); line-height: 1.75; flex: 1; margin-bottom: 1.4rem; }
.prd__specs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.2rem; }
.prd__spec { font-size: .62rem; font-weight: 600; letter-spacing: .06em; padding: .18rem .55rem; border: 1px solid var(--border-2); color: var(--text-m); border-radius: var(--radius); }
.prd__market { font-size: .68rem; font-weight: 500; color: var(--text-m); }
.prd__market span { color: var(--text-b); }

/* ── MARKETS ── */
.markets { padding: clamp(5rem,9vw,8rem) clamp(1.5rem,6vw,5rem); background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.markets__inner { max-width: 1300px; margin: 0 auto; }
.markets__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: .5rem; }
.mkt { background: var(--bg-2); padding: 1.8rem 1.5rem; transition: background var(--dur) var(--ease); }
.mkt:hover { background: var(--bg-3); }
.mkt__num { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; color: var(--border-2); line-height: 1; margin-bottom: .6rem; }
.mkt__icon { font-size: 1.6rem; line-height: 1; margin-bottom: .8rem; }
.mkt__title { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--text-h); margin-bottom: .45rem; }
.mkt__body { font-size: .8rem; color: var(--text-b); line-height: 1.75; }

/* ── WHY ROBOTS ── */
.why { padding: clamp(5rem,9vw,8rem) clamp(1.5rem,6vw,5rem); background: var(--bg); border-top: 1px solid var(--border); }
.why__inner { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.why__text h2 { font-family: var(--serif); font-size: clamp(2rem,4.5vw,3.2rem); font-weight: 400; color: var(--text-h); line-height: 1.1; margin-bottom: 1.8rem; }
.why__text h2 .teal { color: var(--green); font-style: italic; }
.why__text p { font-size: .9rem; color: var(--text-b); line-height: 1.85; margin-bottom: 1.2rem; }
.why__numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.wn { background: var(--bg); padding: 2rem 1.6rem; }
.wn::before { display: none; }
.wn__val { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; color: var(--text-h); line-height: 1; margin-bottom: .5rem; }
.wn__label { font-size: .75rem; color: var(--text-m); line-height: 1.6; }
@media (max-width: 900px) { .why__inner { grid-template-columns: 1fr; gap: 3.5rem; } }

/* ── TECH STACK ── */
.tech { padding: clamp(5rem,9vw,8rem) clamp(1.5rem,6vw,5rem); background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tech__inner { max-width: 1300px; margin: 0 auto; }
.tech__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: .5rem; }
.tech-item { background: var(--bg-2); padding: 1.8rem 1.6rem; transition: background var(--dur); }
.tech-item:hover { background: var(--bg-3); }
.tech-item__icon { font-size: 1.6rem; line-height: 1; margin-bottom: .9rem; }
.tech-item__title { font-family: var(--serif); font-size: .95rem; font-weight: 400; color: var(--text-h); margin-bottom: .4rem; }
.tech-item__body { font-size: .78rem; color: var(--text-m); line-height: 1.7; }

/* ── CONTACT ── */
.contact { padding: clamp(5rem,9vw,8rem) clamp(1.5rem,6vw,5rem); background: var(--bg); border-top: 1px solid var(--border); }
.contact__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.contact__text h2 { font-family: var(--serif); font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 400; color: var(--text-h); line-height: 1.1; margin-bottom: 1.2rem; }
.contact__text h2 .teal { color: var(--green); font-style: italic; }
.contact__text p { font-size: .86rem; color: var(--text-b); line-height: 1.85; margin-bottom: 1.4rem; }
.cinfo { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.cinfo__icon { font-size: 1rem; flex-shrink: 0; margin-top: .2rem; opacity: .6; }
.cinfo__label { font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-m); display: block; margin-bottom: .18rem; }
.cinfo__val { font-size: .84rem; color: var(--text-b); }
/* Form */
.cf { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.cf label { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-m); }
.cf input, .cf select, .cf textarea { background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-h); font-family: var(--sans); font-size: .875rem; padding: .72rem 1rem; border-radius: var(--radius); width: 100%; outline: none; transition: border-color var(--dur) var(--ease); -webkit-appearance: none; }
.cf input:focus, .cf select:focus, .cf textarea:focus { border-color: var(--green); }
.cf select option { background: var(--bg-2); }
.cf textarea { min-height: 110px; resize: vertical; }
.cf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
#ctConfirm { display: none; background: var(--green-dim); border: 1px solid var(--green-border); padding: .85rem 1.1rem; font-size: .84rem; color: var(--green); margin-top: .7rem; border-radius: var(--radius); }
[data-theme="dark"] #ctConfirm { color: var(--green-3); }
@media (max-width: 900px) { .contact__inner { grid-template-columns: 1fr; gap: 3.5rem; } .cf-2col { grid-template-columns: 1fr; } }

/* ── FOOTER ── */
.site-footer { background: var(--bg-3); border-top: 1px solid var(--border); padding: 4rem clamp(1.5rem,5vw,4rem) 2rem; margin-top: auto; }
.ft-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
.ft-brand .ft-logo { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--text-h); letter-spacing: .01em; display: block; margin-bottom: .7rem; }
.ft-brand p { font-size: .8rem; color: var(--text-m); line-height: 1.75; max-width: 240px; }
.ft-col h4 { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-m); margin-bottom: .9rem; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.ft-col a { font-size: .82rem; color: var(--text-m); transition: color var(--dur) var(--ease); }
.ft-col a:hover { color: var(--text-h); }
.ft-bot { max-width: 1300px; margin: 0 auto; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
.ft-bot p, .ft-bot a { font-size: .72rem; color: var(--text-m); }
.ft-bot a:hover { color: var(--text-h); }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1/-1; } }
@media (max-width: 500px) { .ft-grid { grid-template-columns: 1fr; } .ft-bot { flex-direction: column; text-align: center; } }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }