/* ==========================================================================
   Euclidar — shared stylesheet
   ========================================================================== */

@font-face{
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-regular.woff2") format("woff2");
}
@font-face{
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-bold.woff2") format("woff2");
}
@font-face{
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/lato-black.woff2") format("woff2");
}

:root{
  --void:    #F2EEE3;
  --panel:   #FBF9F2;
  --panel-2: #EAE4D4;
  --line:    #E0D8C6;
  --line-soft: #E9E3D4;
  --laser:   #128C6E;
  --laser-dim: #0C6350;
  --amber:   #E8763D;
  --text:    #182339;
  --muted:   #6B6F64;
  --muted-2: #9A9A8C;
  --danger:  #C6432F;

  --navy:    #182339;
  --navy-2:  #0F1830;
  --sage:    #C8DBCC;

  --mono: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* faint blueprint grid across the whole page */
body{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center top;
}

a{ color: inherit; }

h1,h2,h3{
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

.mono{ font-family: var(--mono); }

.eyebrow{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laser);
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--laser);
  display:inline-block;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- language toggle ---------- */
[data-i18n]{ display: none; }
[hidden]{ display: none !important; }
html[lang="de"] [data-i18n="de"]{ display: revert; }
html[lang="en"] [data-i18n="en"]{ display: revert; }
html[lang="de"] span[data-i18n="de"],
html[lang="en"] span[data-i18n="en"]{ display: inline; }
html[lang="de"] li[data-i18n="de"],
html[lang="en"] li[data-i18n="en"]{ display: list-item; }
html[lang="de"] tr[data-i18n="de"],
html[lang="en"] tr[data-i18n="en"]{ display: table-row; }

.lang-switch{
  font-family: var(--mono);
  font-size: .78rem;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.lang-switch button{
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 6px 11px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
}
.lang-switch button.active{
  background: var(--laser);
  color: var(--void);
  font-weight: 600;
}
.lang-switch button:not(.active):hover{ color: var(--text); }

/* ---------- nav ---------- */
header.site{
  position: sticky; top:0; z-index: 40;
  background: rgba(242,238,227,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  text-decoration:none;
  color: var(--text);
}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--laser);
  box-shadow: 0 0 10px 2px rgba(18,140,110,.45);
}
.brand-icon{
  width:24px; height:24px;
  border-radius: 6px;
  display:block;
}
.navlinks{
  display:flex; align-items:center; gap: 28px;
  font-size: .92rem;
}
.navlinks a{ text-decoration:none; color: var(--muted); }
.navlinks a:hover{ color: var(--text); }
.navlinks .sep{ width:1px; height:16px; background:var(--line); }

.navright{ display:flex; align-items:center; gap:18px; }

@media (max-width: 760px){
  .navlinks{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: .88rem;
  letter-spacing: .02em;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
}
.btn-primary{
  background: var(--laser);
  color: var(--void);
  font-weight: 600;
}
.btn-primary:hover{ background:#1AA382; }
.btn-ghost{
  border-color: var(--line);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover{ border-color: var(--muted); }
.btn-store{
  background: var(--text);
  color: var(--void);
  font-weight: 600;
}
.btn-store .sub{ display:block; font-size:.68rem; color:rgba(242,238,227,.6); font-weight:400; }
.btn-store:hover{ background:#263252; }

/* ---------- hero ---------- */
.hero{
  padding: 96px 0 72px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  line-height: 1.08;
}
.hero h1 em{
  font-style: normal;
  color: var(--laser);
}
.hero p.lead{
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 46ch;
  margin: 18px 0 32px;
}
.hero-ctas{ display:flex; gap: 14px; flex-wrap: wrap; align-items:center; }
.hero-note{
  margin-top: 18px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted-2);
}

/* ---------- hero icon ---------- */
.hero-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.hero-icon img{
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  border-radius: 56px;
  box-shadow: 0 30px 60px -20px rgba(24,35,57,.25), 0 0 0 1px var(--line);
}
@media (max-width: 900px){
  .hero-icon{ order:-1; padding: 0 0 12px; }
  .hero-icon img{ max-width: 220px; }
}

/* ---------- viewfinder (signature element, currently unused) ---------- */
.viewfinder{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(79,224,200,.08), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  overflow:hidden;
}
.vf-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity:.55;
}
.vf-scanline{
  position:absolute; left:0; right:0; height: 90px;
  background: linear-gradient(180deg, rgba(79,224,200,0), rgba(79,224,200,.12), rgba(79,224,200,0));
  animation: scan 4.5s linear infinite;
}
@keyframes scan{
  0%{ top: -90px; }
  100%{ top: 100%; }
}
.vf-badge{
  position:absolute; top:16px; left:16px;
  font-family: var(--mono); font-size:.7rem; letter-spacing:.08em;
  color: var(--laser); text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.vf-badge::before{
  content:""; width:6px;height:6px;border-radius:50%;
  background: var(--laser); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.vf-cursor{
  position:absolute; width: 30px; height:30px;
  border: 2px solid var(--amber);
  border-radius:50%;
  transform: translate(-50%,-50%);
}
.vf-cursor::after{
  content:""; position:absolute; inset:-8px;
  border: 1px dashed rgba(242,184,75,.4);
  border-radius:50%;
}
.vf-cursor.c2{ border-color: var(--laser); }
.vf-cursor.c2::after{ border-color: rgba(79,224,200,.4); }
.vf-line{
  position:absolute;
  border-top: 1.5px dashed var(--muted);
  transform-origin: 0 0;
}
.vf-readout{
  position:absolute; bottom: 16px; left:16px; right:16px;
  background: rgba(242,238,227,.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  display:flex; align-items:baseline; justify-content:space-between;
  backdrop-filter: blur(4px);
}
.vf-readout .label{ font-family: var(--mono); font-size:.72rem; color: var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.vf-readout .value{ font-family: var(--mono); font-size:1.4rem; color: var(--amber); font-weight:600; }
.vf-readout .value .unit{ font-size:.85rem; color: var(--muted); margin-left:4px; }
.vf-corner{
  position:absolute; width:16px; height:16px;
  border: 2px solid var(--line);
}
.vf-corner.tl{ top:10px; left:10px; border-right:none; border-bottom:none; }
.vf-corner.tr{ top:10px; right:10px; border-left:none; border-bottom:none; }
.vf-corner.bl{ bottom:74px; left:10px; border-right:none; border-top:none; }
.vf-corner.br{ bottom:74px; right:10px; border-left:none; border-top:none; }

/* ---------- sections ---------- */
section{ padding: 64px 0; }
.section-head{ max-width: 640px; margin-bottom: 40px; }
.section-head p{ color: var(--muted); }

.divider{ height:1px; background: var(--line); border:none; }

/* modes table */
.modes{
  width:100%;
  border-collapse: collapse;
  font-size: .96rem;
}
.modes th{
  text-align:left;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.modes td{
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.modes tr:last-child td{ border-bottom:none; }
.modes td.tag{
  font-family: var(--mono);
  color: var(--laser);
  white-space: nowrap;
  font-size: .88rem;
}
.modes td.desc{ color: var(--muted); }

/* feature cards */
.grid-3{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
@media (max-width: 860px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .grid-3{ grid-template-columns: 1fr; } }

.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
}
.card .k{
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--laser);
  letter-spacing: .06em;
  margin-bottom: 10px;
  display:block;
}
.card h3{ font-size: 1.02rem; margin-bottom: 8px; }
.card p{ color: var(--muted); font-size: .92rem; margin:0; }

/* export chips */
.chiprow{
  display:flex; flex-wrap:wrap; gap: 10px;
}
.chip{
  font-family: var(--mono);
  font-size: .82rem;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: var(--panel);
  display:flex; align-items:center; gap:8px;
}
.chip .dot{ width:6px;height:6px;border-radius:50%; background: var(--amber); }

/* privacy panel */
.panel-dark{
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
  border: 1px solid var(--navy-2);
  border-radius: 16px;
  padding: 44px;
  color: var(--void);
}
@media (max-width: 700px){ .panel-dark{ padding: 28px; } }
.panel-dark .grid-2{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center;
}
@media (max-width: 800px){ .panel-dark .grid-2{ grid-template-columns:1fr; } }
.panel-dark h2{ color: var(--void); }
.panel-dark .eyebrow{ color: #6FE9C9; }
.panel-dark .eyebrow::before{ background: #6FE9C9; }
.privacy-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.privacy-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.94rem; color: rgba(242,238,227,.72);
}
.privacy-list li::before{
  content:"—";
  color: #6FE9C9;
  font-family: var(--mono);
}
.panel-link{ color: #6FE9C9; text-decoration: underline; text-underline-offset: 2px; }

/* device requirements */
.reqs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px;
}
@media (max-width: 700px){ .reqs{ grid-template-columns: 1fr; } }
.reqs h3{ font-size: .82rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); font-family: var(--mono); margin-bottom: 14px; }
.reqs ul{ margin:0; padding-left: 18px; color: var(--muted-2); }
.reqs ul li{ color: var(--text); margin-bottom: 6px; }

/* CTA */
.cta{
  text-align:center;
  padding: 80px 0 96px;
}
.cta h2{ font-size: clamp(1.8rem,3.4vw,2.5rem); }
.cta p{ color: var(--muted); max-width: 48ch; margin: 0 auto 30px; }

/* footer */
footer.site{
  border-top: 1px solid var(--line);
  padding: 40px 0 60px;
}
.foot-grid{
  display:flex; justify-content:space-between; align-items:flex-start; gap: 24px; flex-wrap:wrap;
}
.foot-links{ display:flex; gap: 22px; font-size:.88rem; flex-wrap:wrap; }
.foot-links a{ text-decoration:none; color: var(--muted); }
.foot-links a:hover{ color: var(--text); }
.foot-meta{ color: var(--muted-2); font-size:.82rem; font-family: var(--mono); }

/* ---------- legal pages ---------- */
.legal{
  padding: 64px 0 100px;
}
.legal .doc{
  max-width: 760px;
}
.legal h1{ font-size: 2rem; margin-bottom: 6px; }
.legal .updated{
  font-family: var(--mono); font-size:.8rem; color: var(--muted-2); margin-bottom: 44px; display:block;
}
.legal h2{
  font-size: 1.15rem;
  margin-top: 42px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type{ border-top:none; padding-top:0; margin-top: 0; }
.legal h3{ font-size: 1rem; margin-top: 22px; color: var(--text); }
.legal p, .legal li{ color: var(--muted); font-size: .96rem; }
.legal strong{ color: var(--text); }
.legal ul, .legal ol{ padding-left: 20px; }
.legal a.inline-link{ color: var(--laser); text-decoration: underline; text-underline-offset: 2px; }
.legal .box{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin: 20px 0;
  font-size: .92rem;
}
.legal .box p{ margin: 0; }
.legal .disclaimer{
  border: 1px solid var(--laser-dim);
  background: rgba(18,140,110,.07);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 36px;
  font-size: .86rem;
  color: var(--muted);
}
.legal address{ font-style: normal; }

.legal-nav{
  display:flex; gap: 20px; margin-bottom: 8px; font-family: var(--mono); font-size: .82rem;
}
.legal-nav a{ color: var(--muted); text-decoration:none; }
.legal-nav a.current, .legal-nav a:hover{ color: var(--laser); }

@media (prefers-reduced-motion: reduce){
  .vf-scanline, .vf-badge::before{ animation: none; }
}