/* =========================================================
   AMEMOR — HOME
   The front door: minimal, clear, quiet.
   No rounded corners. Thin typography. Metro navigation.
   ========================================================= */

:root {
   --red: #f01523;
	--maroon: #970811;
    --blue: #535682;
    --yellow: #e0a030;
    --green: #21622f;
	--slogan:#f4ca80; 
	--teal:#16a6a6;
--purple: #662a81;
	--khaki: #6a7e27;
	--deep-blue: #0d4553;
	--gold: #855a1d;
	--link: #8a90df;
  --font-main:"Segoe UI","Helvetica Neue",Arial,sans-serif;

     --bg: #02242c;
    --panel: #02242c;
    --line: rgba(255,255,255,0.20);
    --text: #f4f5f5;
    --muted: #8eabb0;
    --white: #fff;}
--link-purple: #a37ab6;
--link-red: #fa5a64;
--link-khaki: #a6b379;
--link-green: #77d18b;

* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }

body {
  font-family:var(--font-main);
  font-weight:300;
  letter-spacing:.2px;
  background:#02242c;
  color:#f4f5f5;
  transition:background-color 220ms ease,color 220ms ease;
}

a { color:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }

/* ---------- TOP BAR ---------- */

.topbar {
  position:fixed; z-index:20; top:0; left:0; right:0;
  height:64px; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between;
 background: rgba(2, 36, 44, 0.84);
}

.topbar-left,.topbar-right { display:flex; align-items:center; gap:8px; }

.control-button {
  height:35px; min-width:78px; padding:0 15px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.24); border-radius:0;
  background:rgba(2,36,44,.72); color:#fff;
  font-size:12px; font-weight:300; letter-spacing:.8px;
  text-decoration:none; cursor:pointer;
  transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease;
}

.control-button:hover { background:#000; color:#fff; border-color:#000; }

.login-button { min-width:48px; padding:0 12px; }
.login-icon { font-size:21px; line-height:1; }
.login-label { display:none; }
.login-button:hover .login-icon { display:none; }
.login-button:hover .login-label { display:inline; font-size:11px; letter-spacing:1.2px; }

/* ---------- HOME ---------- */

.home {
  width:min(1120px,90vw);
  min-height:calc(100vh - 38px);
  margin:0 auto;
  padding:clamp(90px,10vh,120px) 0 40px;
  display:flex; flex-direction:column; align-items:center;
}

/* ---------- LOGO TILE ---------- */

.brand-tile {
  width:clamp(390px,36vw,510px);
  min-height:clamp(220px,20vw,270px);

  margin-top:clamp(68px,6vh,72px);
  padding:26px 32px 24px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.24);
  background:transparent;

  text-align:center;
}

.brand-question {
  margin-bottom:18px;
  color:var(--white);
  font-size:21px;
  letter-spacing:2.6px;
  font-weight:300;
}

.brand-logo-link {
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.brand-logo {
  display:block;
  width:clamp(265px,35vw,460px);
  height:auto;
}

.brand-tagline {
  margin-top:16px;
  color:#8eabb0;
  font-size:14px;
  letter-spacing:1.5px;
  font-weight:300;
}






/* ---------- CORE MESSAGE ---------- */

.hero-message {
  width:min(900px,92vw);
  margin-top:clamp(48px,7vh,78px);
  text-align:center;
}

.hero-message h1 {
  margin:0;
  font-size:clamp(29px,4vw,52px);
  line-height:1.08;
  font-weight:300;
  letter-spacing:.5px;
}

.hero-message p {
  margin:22px 0 0;
  color:#8eabb0;
  font-size:clamp(17px,1.7vw,22px);
  line-height:1.4;
  font-weight:300;
}

/* ---------- THREE METRO DOORS ---------- */

/*
   HOME NAVIGATION GRAPH
   More breathing room between the logo tile and the three doors.
   The fine connector lines are drawn in CSS so the HTML stays clean.
*/

.door-grid {
    position:relative;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;

    margin-top:clamp(125px,14vh,155px);
}

/* Vertical trunk from the logo tile down to the navigation graph. */
.brand-tile {
  position:relative;
}

.brand-tile::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(-1 * (clamp(125px,14vh,155px) - 28px));
  width:1px;
  height:calc(clamp(125px,14vh,155px) - 28px);
  background:rgba(255,255,255,.40);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
}

.door-grid::before {
  content:"";
  position:absolute;

  top:-54px;
  left:16.6667%;
  right:16.6667%;

  height:1px;

  background:rgba(255,255,255,.40);

  pointer-events:none;
  z-index:10;
}


.door {
  position:relative;
  min-height:190px; padding:24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-decoration:none;
  transition:background-color 300ms ease,color 300ms ease,transform 180ms ease;
}
/* Horizontal branch connecting the three Metro doors. */
.door::before {
  content:"";
  position:absolute;
  left:50%;
  top:-54px;
  width:1px;
  height:54px;
  background:rgba(255,255,255,.40);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:1;
}
/* Short vertical drops from the branch into each Metro tile. */
.door {
  position:relative;
  min-height:190px; padding:24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-decoration:none;
  transition:background-color 300ms ease,color 300ms ease,transform 180ms ease;
}


.door:hover { background:#000 !important; color:#fff !important; transition:
        background-color 800ms ease,
        color 800ms ease,
        transform 380ms ease,
        border-color 380ms ease; }

.door-number { margin-bottom:18px; font-size:21px; letter-spacing:3px; opacity:.99; }

.door h2 {
  margin:0; font-size:clamp(23px,2.2vw,34px);
  line-height:1; font-weight:500; letter-spacing:.6px;
}

.door p { margin:16px 0 0; font-size:15px; line-height:1.3; font-weight:300; }

.door-guide { background:var(--maroon); color:#fff; }
.door-platform { background:var(--blue); color:#fff; }
.door-started { background:var(--green); color:#fff; }

/* ---------- SECOND GRAPH LEVEL ---------- */

/*
   The Home page now reveals AMEMOR in three levels:
   1. the logo / question
   2. the three immediate doors
   3. organizational scale -> OEM infrastructure

   The existing colour language and Metro doors remain untouched.
*/

.scale-node {
  position:relative;
  width:100%;
  margin-top:108px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Continues the central graph line from the three-door branch. */
.scale-node::before {
  content:"";
  position:absolute;
  top:-54px;
  left:50%;
  width:1px;
  height:54px;
  background:rgba(255,255,255,.40);
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
}

/* Organizational node */

.organization-node {
  position:relative;
  width:min(760px,86vw);
  min-height:190px;
  padding:30px 42px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(0,0,0,.16);
  color:#fff;
  transition:
    background-color 500ms ease,
    color 500ms ease,
    border-color 500ms ease,
    transform 300ms ease;
}

.organization-node:hover {
  background:#000;
  color:#fff;
  border-color:#000;
  transform:translateY(-2px);
}

.organization-kicker,
.oem-kicker {
  margin-bottom:30px;
  font-size:21px;
  letter-spacing:3px;
  font-weight:300;
}

.organization-node h2,
.oem-node h2 {
  margin:10px 0 0;
  max-width:700px;
  font-size:clamp(23px,2.6vw,35px);
  line-height:1.14;
  font-weight:300;
  letter-spacing:.2px;
}

.organization-node p,
.oem-node p {
  margin:33px 0 0;
  color:#8eabb0;
  font-size:21px;
  line-height:1.45;
  font-weight:300;
}

.organization-domains {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin-top:35px;
}

.org-domain {
  position:relative;
  min-width:92px;
  height:58px;
  padding:0 13px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  font:inherit;
  font-size:16px;
  letter-spacing:2px;
  font-weight:390;
  transition:
    background-color 500ms ease,
    color 500ms ease,
    border-color 500ms ease,
    transform 280ms ease;
}

.org-domain:hover,
.org-domain:focus-visible {
  background:#000 !important;
  color:#fff;
  border-color:#000;
  transform:translateY(-2px);
  outline:none;
}

.domain-law { background:var(--yellow);  color:#161616; }
.domain-health { background:#6a7e27; }
.domain-education { background:#0d4553; color:#fff; }
.domain-government { background:var(--purple); }
.domain-enforcement { background:var(--maroon); }

.organization-link,
.oem-link {
  margin-top:37px;
  color:#fff;
  font-size:14px;
  letter-spacing:2px;
  font-weight:300;
  opacity:.92;
}

/* ---------- ORGANIZATION EXAMPLE MODAL ---------- */

.org-modal {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 220ms ease, visibility 220ms ease;
}

.org-modal.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.org-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
}

.org-modal-card {
  position:relative;
  z-index:1;
  width:min(600px,90vw);
  padding:38px 42px 34px;
  border:1px solid rgba(255,255,255,.38);
  background:#032b31;
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  text-align:center;
  transform:translateY(10px) scale(.985);
  transition:transform 220ms ease;
}

.org-modal.is-open .org-modal-card {
  transform:translateY(0) scale(1);
}

.org-modal-close {
  position:absolute;
  top:12px;
  right:16px;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.75);
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.org-modal-close:hover,
.org-modal-close:focus-visible {
  color:#fff;
  outline:none;
}

.org-modal-kicker {
  display:block;
  margin-bottom:13px;
  color:var(--yellow);
  font-size:15px;
  letter-spacing:3px;
  font-weight:400;
}

.org-modal-card h3 {
  margin:0;
  font-size:clamp(25px,3vw,37px);
  line-height:1.12;
  font-weight:300;
}

.org-modal-card > p {
  margin:18px auto 0;
  max-width:500px;
  color:#8eabb0;
  font-size:18px;
  line-height:1.55;
  font-weight:300;
}

.org-modal-outcome {
  margin:25px auto 0;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.16);
}

.org-modal-outcome span {
  display:block;
  margin-bottom:8px;
  color:var(--yellow);
  font-size:15px;
  letter-spacing:2.5px;
}

.org-modal-outcome strong {
  display:block;
  color:#fff;
  font-size:18px;
  line-height:1.45;
  font-weight:300;
}

/* Connector between ORGANIZATIONS and BUILD ON AMEMOR. */

.scale-connector {
  width:1px;
 
  background:rgba(255,255,255,.40);
}
.scale-trust-connector {
  height:120px;
	 width:1px;
 
  background:rgba(255,255,255,.40);
}

.scale-oem-connector {
  height:210px;
	 width:1px;
 
  background:rgba(255,255,255,.40);
}

/* ---------- TRUST LAYER ---------- */

.trust-node { width:min(900px,90vw); text-align:center; }

.trust-heading span {
  display:block; margin-bottom:13px; color:var(--yellow);
  font-size:16px; letter-spacing:3px; font-weight:400;
}
.trust-heading h2 {
  margin:0; font-size:clamp(25px,2.8vw,38px);
  line-height:1.1; font-weight:300; letter-spacing:.4px;
}
.trust-heading p {
  width:min(650px,90vw); margin:33px auto 0; color:#8eabb0;
  font-size:24px; line-height:1.45; font-weight:300;
}
.trust-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:46px;
}
.trust-tile {
  min-height:122px;
  padding:18px 16px;
  border:1px solid transparent;
  border-radius:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  color:#fff;
  font:inherit;
  text-decoration:none;
  transition:background-color 500ms ease,color 500ms ease,border-color 500ms ease,transform 280ms ease;
}
.trust-tile:hover,.trust-tile:focus-visible {
  background:#000 !important; color:#fff; border-color:#000; transform:translateY(-2px); outline:none;
}
.trust-privacy { background:var(--maroon); }
.trust-security { background:var(--blue); }
.trust-compliance { background:var(--green); }
.trust-knowledge { background:#662a81; color:#fff; }
.trust-tile-kicker { margin-bottom:12px; font-size:13px; letter-spacing:2px; opacity:.85; }
.trust-tile strong { font-size:19px; letter-spacing:2px; font-weight:500; }
.trust-tile span:last-child { margin-top:8px; font-size:18px; line-height:1.3; font-weight:300; }

.trust-modal {
  position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center;
  padding:30px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 220ms ease,visibility 220ms ease;
}
.trust-modal.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.trust-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.74); backdrop-filter:blur(5px); }
.trust-modal-card {
  position:relative; z-index:1; width:min(620px,90vw); padding:38px 42px 32px;
  border:1px solid rgba(255,255,255,.38); background:#032b31; color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.45); text-align:center;
  transform:translateY(10px) scale(.985); transition:transform 220ms ease;
}
.trust-modal.is-open .trust-modal-card { transform:translateY(0) scale(1); }
.trust-modal-close {
  position:absolute; top:12px; right:16px; width:34px; height:34px; border:0;
  background:transparent; color:rgba(255,255,255,.75); font-size:27px; line-height:1; cursor:pointer;
}
.trust-modal-close:hover,.trust-modal-close:focus-visible { color:#fff; outline:none; }
.trust-modal-kicker {
  display:block; margin-bottom:13px; color:var(--yellow); font-size:17px; letter-spacing:3px;
}
.trust-modal-card h3 { margin:0; font-size:clamp(25px,3vw,37px); line-height:1.12; font-weight:300; }
.trust-modal-card > p {
  margin:18px auto 0; max-width:520px; color:#8eabb0;
  font-size:15px; line-height:1.55; font-weight:300;
}
.trust-modal-effect {
  margin:25px auto 0; padding:18px 20px; border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.16);
}
.trust-modal-effect span {
  display:block; margin-bottom:8px; color:var(--yellow); font-size:17px; letter-spacing:2.5px;
}
.trust-modal-effect strong { display:block; color:#fff; font-size:19px; line-height:1.45; font-weight:300; }
.trust-modal-card small {
  display:block; margin:16px auto 0; max-width:500px; color:rgba(255,255,255,.55);
  font-size:11px; line-height:1.45; font-weight:300;
}

/* OEM node */

.oem-node {
  position:relative;
  width:min(760px,86vw);
  min-height:170px;
  padding:28px 42px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.34);
  background:#855a1d;
  color:#fff;
  transition:
    background-color 500ms ease,
    color 500ms ease,
    border-color 500ms ease,
    transform 300ms ease;
}

.oem-node:hover {
  background:#000;
  color:#fff;
  border-color:#000;
  transform:translateY(-2px);
}

.oem-kicker {
  color:#000;
  font-weight:400;
}
.oem-kicker-bit {
  margin-top:10px;
	 margin-bottom:10px;
	color:#000;
  font-weight:600;
	font-size:18px;
  line-height:1.15;
 
}

.oem-link {
   color:#fff;
	font-size:18px;
}


/* ---------- QUIET LINE / FOOTER ---------- */

.supporting-line { margin-top:54px; text-align:center; }
.supporting-line p { margin:0; color:#8eabb0; font-size:16px; letter-spacing:2px; font-weight:300; }

.footer {
  width:100%; padding:0 20px 20px;
  text-align:center; color:#8eabb0;
  font-size:11px; letter-spacing:2px; font-weight:300;
}
/* ---------- RESPONSIVE ---------- */


@media (max-width:760px) {
  .topbar { height:58px; padding:9px 12px; }
  .control-button { min-width:62px; height:34px; padding:0 10px; font-size:11px; }
  .login-button { min-width:46px; }
  .home { width:90vw; padding-top:88px; }
  .brand-logo { width:clamp(180px,45vw,270px); }
  .hero-message { margin-top:46px; }
  .hero-message h1 { font-size:clamp(27px,7vw,40px); }
  .hero-message p { font-size:17px; }
  .door-grid {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:50px;
  }

  /* On a single-column mobile layout, the desktop graph would be misleading. */
  .brand-tile::after,
  .door-grid::before,
  .door::before,
  .scale-node::before,
  .scale-connector {
    display:none;
  }

  .door { min-height:145px; }

  .scale-node {
    margin-top:48px;
  }

  .organization-node,
  .oem-node {
    width:100%;
    min-height:160px;
    padding:26px 22px;
  }

  .trust-node { width:100%; }
  .trust-grid { grid-template-columns:1fr; gap:10px; margin-top:22px; }
  .trust-tile { min-height:92px; }
  .trust-modal { padding:18px; }
  .trust-modal-card { width:94vw; padding:34px 22px 26px; }
  .trust-modal-card h3 { font-size:26px; }
  .trust-modal-card > p { font-size:16px; }

  .organization-kicker,
  .oem-kicker {
    font-size:10px;
    letter-spacing:2.3px;
  }

  .organization-node h2,
  .oem-node h2 {
    font-size:clamp(21px,6vw,30px);
  }

  .organization-node p,
  .oem-node p {
    font-size:14px;
  }

  .organization-domains {
    gap:7px;
  }

  .org-domain {
    min-width:84px;
    height:34px;
    padding:0 9px;
    font-size:9px;
    letter-spacing:1.6px;
  }

  .org-modal {
    padding:18px;
  }

  .org-modal-card {
    width:94vw;
    padding:34px 22px 26px;
  }

  .org-modal-card h3 {
    font-size:26px;
  }

  .org-modal-card > p {
    font-size:14px;
  }

  .supporting-line { margin-top:42px; }
}

@media (max-width:420px) {
  .topbar-right { gap:4px; }
  .control-button { min-width:52px; padding:0 7px; }
  .brand-logo { width:205px; }
  .hero-message h1 { font-size:27px; }
  .hero-message p { font-size:16px; }
  .door { min-height:135px; }
  .door h2 { font-size:28px; }
}