/* ==========================================================================
   VISITOR NDA — STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------
   Font Faces
   -------------------------------------------------------------------- */

/* Scandia Web Bold */
@font-face {
    font-family: 'ScandiaWebBold';
    src: url('fonts/ScandiaWebBold.eot');
    src:
        url('fonts/ScandiaWebBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/ScandiaWebBold.woff2') format('woff2'),
        url('fonts/ScandiaWebBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-sans: swap;
}

/* Fresco Normal */
@font-face {
    font-family: 'Fresco';
    src: url('fonts/FrescoPro-Normal.eot');
    src:
        url('fonts/FrescoPro-Normal.eot?#iefix') format('embedded-opentype'),
        url('fonts/FrescoPro-Normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-sans: swap;
}

/* Fresco Italic */
@font-face {
    font-family: 'Fresco';
    src: url('fonts/FrescoPro-NormalItalic.eot');
    src:
        url('fonts/FrescoPro-NormalItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/FrescoPro-NormalItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-sans: swap;
}

/* --------------------------------------------------------------------
   Optional Font Classes
   -------------------------------------------------------------------- */

.ScandiaWebBold {
    font-family: 'ScandiaWebBold', sans-serif;
}

.Fresco {
    font-family: 'Fresco', serif;
}

/* --------------------------------------------------------------------
   Theme Tokens
   -------------------------------------------------------------------- */

:root {

    /* Fonts */
    --font-sans: 'ScandiaWebBold', 'Poppins', sans-serif;
    --font-serif: 'Fresco', Georgia, 'Times New Roman', serif;

	--font-nrml: font-weight: 400;
	--font-bold: font-weight: 700;

	--ltr-spc: 0.02em;
	--line: 1.5;
	--line-s: 0.9;

	--size-xs: 0.125em;
    --size-s: 0.25em;    
    --size-m: 1em;
    --size-l: 2em;
   	--size-xl: 3em;
   	--size-hero: 6em;
   	
    /* Surface colors */
    --color-bg-page: #000000;
    --color-bg: #060507;
    --color-surface: #0f0e10;

	/* Colors */
	--color-1: #f8f8f8;
	--color-2: #adb5a9;
	--color-3: #87a5b1;
    --color-dark: #17161a;
	
	--color-gradient: linear-gradient(90deg,var(--color-2) 0,var(--color-3) 100%);
    
	--border: calc(var(--size-xs)*0.75) solid var(--color-3);
	
	
	/* Accent — buttons, focus states, progress bar, signature ink.
	 Placeholder — not confirmed from the live site's stylesheet. */
	--color-accent: var(--color-2);
	--color-accent-light: var(--color-3);
	--color-accent-glow: rgba(58,171,220,0.18);
	--color-accent-glow-2: rgba(58,171,220,0.06);
	--color-on-accent: var(--color-1); /* text/icon color on top of --color-accent */
	
	/* Status colors */
	--color-success: #52c98a;
	--color-success-bg: rgba(82,201,138,0.10);
	--color-success-bg-2: rgba(82,201,138,0.22);
	--color-error: #e05555;
	
	/* Background blur blobs — soft, dark, low-saturation glows.
	 Change these hexes to restyle the moving background. */
	--blob-1: #3a4d8f;  /* muted indigo */
	--blob-2: #6b3b6b;  /* muted plum */
	--blob-3: var(--color-2);  /* muted teal */
	--blob-4: var(--color-3);  /* storm blue accent, dimmer */
	
	/* Shape */
	--radius: calc(var(--size-m)*0.5);
	--radius-lg: var(--size-m);
	--radius-card: var(--size-hero);
	
	/* App-card sizing (portrait iPad target: ~810–834px wide) */
	--app-max-width: 700px;
	--app-max-height: 1100px;
	}

/* --------------------------------------------------------------------
   2. BASE / LAYOUT
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--color-bg-page);
  color: var(--color-1);
  font-family: var(--font-sans);
  font-size: var(--size-m);
  line-height: var(--line);
  text-transform: lowercase; /* all text lowercase, per brand direction */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}

/* Centered "card" frame — reads well on a large portrait tablet.
   Below ~700px viewport width it expands to fill the screen, phone-style. */
.app-frame {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.app {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Moving gradient blur background — soft, dark, colorful glows drifting
   behind the app content. Colors come from --blob-1..4 above; add more
   .blob elements in index.html (inside .blur-bg) for a busier effect,
   or delete .blur-bg entirely in index.html for a flat background. */
.blur-bg {
  position: absolute; inset: -10%;
  pointer-events: none; overflow: hidden; z-index: 0;
  filter: blur(70px);
}
.blob {
  position: absolute;
  width: 60%; height: 40%;
  border-radius: 50%;
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.blob-1 { background: var(--blob-1); top: -5%;  left: -10%; animation: drift-1 26s ease-in-out infinite; }
.blob-2 { background: var(--blob-2); top: 40%;  right: -15%; animation: drift-2 32s ease-in-out infinite; }
.blob-3 { background: var(--blob-3); bottom: -10%; left: 10%; animation: drift-3 22s ease-in-out infinite; }
.blob-4 { background: var(--blob-4); top: 20%;  left: 30%; width: 45%; height: 30%; opacity: 0.3; animation: drift-4 38s ease-in-out infinite; }

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18%, 12%) scale(1.15); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-15%, -10%) scale(0.9); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(10%, -14%) scale(1.1); }
}
@keyframes drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-12%, 16%) scale(1.2); }
}
.app > *:not(.blur-bg) { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .app-frame { padding: 0; }
  .app { max-width: none; max-height: none; border-radius: 0; box-shadow: none; }
}

/* ======================== START SCREEN ======================== */
#screenStart {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 10;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#screenStart.exit { opacity: 0; transform: scale(0.96); pointer-events: none; }

.start-logo-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 60px;
  animation: fade-up 0.9s ease both;
}
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Replace images/logo.svg with your own logo. Adjust max-width to taste. */
.start-logo {
  height: var(--size-hero);
  width: auto;
  object-fit: contain;
  cursor: pointer;
}

.start-tagline {
  font-size: var(--size-l);
  background-image: var(--color-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: lowercase; margin-top: var(--size-l);
  animation: fade-up 0.9s ease 0.2s both;
}
.lang-row { display: flex; gap: var(--size-m); animation: fade-up 0.9s ease 0.4s both; }
.lang-btn {
  width: calc(var(--size-hero)*1.75); height: var(--size-xl);
  background: transparent;
  border: var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--size-m); font-weight: var(--font-nrml);
  color: var(--color-1);
  cursor: pointer;
  transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-m);
  text-transform: lowercase;
}
.lang-btn strong { var(--size-xl); font-family: var(--font-sans); font-weight: var(--font-nrml); letter-spacing: 0.15em; color: var(--color-1); }
.lang-btn:hover { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 var(--border) var(--color-accent-glow-2); }
.lang-btn:hover strong { color: var(--color-accent); }
.lang-btn:active { transform: scale(0.97); }



.start-clock {
  position: absolute; bottom: var(--size-xl); transform: translateX(-50%);
  text-align: center;
  color: var(--color-1);
  animation: fade-up 0.9s ease 0.6s both; white-space: nowrap; font-weight: var(--font-nrml);
}

.start-clock .date {
   font-size: var(--size-l);
   font-family: var(--font-serif);
}
.start-clock .time {
   font-size: var(--size-hero);
   font-family: var(--font-sans);
}

/* ======================== APP SHELL ======================== */
#appShell {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  padding: var(--size-m);
}
#appShell.active { opacity: 1; pointer-events: all; }

/* HEADER */
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--size-l) var(--size-l);
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap:var(--size-m); }
.h-logo { height: var(--size-xl); width: auto; object-fit: contain; cursor: pointer; } /* images/logo-mark.svg */
.h-name { font-family: var(--font-sans); font-size: var(--size-m); letter-spacing: var(--ltr-spc); font-weight: var(--font-nrml); color: var(--color-2); line-height: var(--line-s); }
.h-sub { font-family: var(--font-sans); font-size: var(--size-m); letter-spacing: var(--ltr-spc); font-weight: var(--font-nrml); color: var(--color-accent); line-height: var(--line-s); }
.header-right { display: flex; align-items: center; gap: var(--size-m); }
.h-clock { font-size: var(--size-m); color: var(--color-1); letter-spacing: var(--ltr-spc); text-align: right; line-height: 1.5; font-weight: var(--font-nrml); font-family: var(--font-serif);}
.h-lang {
  font-size: var(--size-m); color: var(--color-3); letter-spacing: var(--ltr-spc); text-transform: lowercase;
  cursor: pointer; border: calc(var(--size-xs)*0.5) solid var(--color-3); border-radius: var(--size-s); padding: var(--size-s) var(--size-l);
  transition: all 0.2s; font-weight: var(--font-nrml);
}
.h-lang:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* PROGRESS */
.progress-wrap { padding: var(--size-m) var(--size-l); flex-shrink: 0; }
.progress-steps { display: flex; gap: var(--size-s); }
.p-step { flex: 1; }
.p-bar { height: var(--size-m); background: var(--color-3); border-radius: var(--size-s); overflow: hidden; margin-bottom: var(--size-s); }
.p-fill {
  height: 100%; background: var(--color-1);
  border-radius: var(--size-s);
  width: 0%; transition: width 0.5s ease;
}
.p-fill.done { width: 100%; background: var(--color-1); }
.p-fill.active { width: 60%; animation: bar-pulse 1.8s ease-in-out infinite; }
@keyframes bar-pulse { 0%,100%{opacity:1}50%{opacity:0.45} }
.p-label { font-size: var(--size-m); letter-spacing: var(--ltr-spc); color: var(--color-3); text-transform: lowercase; font-weight: var(--font-nrml); }
.p-step.active .p-label { color: var(--color-1); }

/* SCREENS */
.screens { flex: 1; overflow: hidden; position: relative; }
.screen {
  position: absolute; inset: 0;
  overflow-y: auto; padding: var(--size-l);
  opacity: 0; pointer-events: none;
  transform: translateX(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.screen.active { opacity: 1; pointer-events: all; transform: translateX(0); }
.screen.exit { opacity: 0; transform: translateX(-30px); }

.screen-title { font-family: var(--font-sans); font-weight: var(--font-nrml); font-size: var(--size-xl); color: var(--color-1); letter-spacing: var(--ltr-spc); line-height: var(--line-s); margin-bottom: var(--size-xs); }
.screen-title span { color: var(--color-3); }
.screen-sub { font-size: var(--size-m); color: var(--color-3); font-weight: var(--font-nrml); margin-bottom: var(--size-l); }

/* RETURNING BANNER */
.ret-banner {
  background: var(--color-success-bg); border: var(--size-xs) solid var(--color-success-bg-2);
  border-radius: var(--radius); padding: var(--size-m) var(--size-m); margin-bottom: var(--size-m);
  display: none; gap: var(--size-m); align-items: flex-start;
  animation: slide-in 0.3s ease;
}
@keyframes slide-in { from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)} }
.ret-banner.show { display: flex; }
.ret-icon { font-size: var(--size-m); flex-shrink: 0; color: var(--color-success); margin-top: 1px; }
.ret-text { font-family: var(--font-sans); font-size: var(--size-m); color: var(--color-success); line-height: 1.6; font-weight: var(--font-nrml); }
.ret-text strong { font-weight: var(--font-nrml); }

/* PREFILL NOTE */
.prefill-note {
  display: none; background: var(--color-success-bg); border: var(--size-xs) solid var(--color-success-bg-2);
  border-radius: var(--radius); padding: var(--size-m) var(--size-m); font-size: var(--size-m); color: var(--color-success);
  font-weight: var(--font-nrml); margin-bottom: var(--size-m); gap: 8px; align-items: center;
}
.prefill-note.show { display: flex; }

/* FORM */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-m); margin-bottom: var(--size-m); }
.field-grid.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: var(--size-s); }
.field label { font-size: var(--size-m); font-weight: var(--font-nrml); color: var(--color-1); letter-spacing: var(--ltr-spc); text-transform: lowercase; }
.field input {
  height: calc(var(--size-xl)*1); width: calc(100% - var(--size-s)); background: var(--color-dark);
  border: var(--border); border-radius: var(--radius);
  padding: 0 calc(var(--size-m)*.75); font-family: var(--font-sans); font-size: calc(var(--size-m)*1.5); color: var(--color-1);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; user-select: text;
}
.field input::placeholder { color: var(--color-3); }
.field input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 var(--border) var(--color-accent-glow-2); }
.field input.prefilled { border-color: var(--color-success-bg-2); background: var(--color-success-bg); color: var(--color-success); }
.field input.error { border-color: var(--color-error); }
.err-msg { font-size: var(--size-m); color: var(--color-error); display: none; margin-bottom: 4px; font-weight: var(--font-nrml); }
.err-msg.show { display: block; }

/* NDA */
.nda-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--size-s); }
.nda-lbl { font-size: var(--size-m); font-weight: var(--font-nrml); color: var(--color-1); letter-spacing: var(--ltr-spc); text-transform: lowercase; }
.nda-expand { font-size: var(--size-m); color: var(--color-2); background: none; border: none; font-family: var(--font-sans); text-transform: lowercase; cursor: pointer; padding: 0; }
.nda-scroll {
  background: var(--color-dark); border: var(--border);
  border-radius: var(--radius); padding: var(--size-m) var(--size-m);
  font-family: var(--font-serif); font-size: var(--size-m); line-height: var(--line); color: var(--color-1) text-transform:none !important; overflow: hidden; position: relative;
  transition: max-height 0.4s ease; margin-bottom: var(--size-l); font-weight: var(--font-nrml);
    max-height: calc(var(--size-hero)*1.5);

}
.nda-scroll.open { max-height: calc(var(--size-hero)*) }
.nda-scroll ol { padding-left: var(--size-m); text-transform: none !important; }
.nda-scroll li { margin-bottom: var(--size-m); text-transform: none !important; }
.nda-scroll li:last-child { margin-bottom: 0; }
.nda-intro { margin-bottom: var(--size-m); font-weight: var(--font-nrml); color: var(--color-1); font-style: italic; text-transform: none !important;}
.nda-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50px; background: linear-gradient(transparent, var(--color-dark));
  pointer-events: none; transition: opacity 0.3s;
}
.nda-scroll.open .nda-fade { opacity: 0; }

/* SIGNATURE */
.sig-lbl { font-size: var(--size-m); font-weight: var(--font-nrml); color: var(--color-1); letter-spacing: var(--ltr-spc); text-transform: lowercase; margin-bottom: var(--size-s);}
.sig-wrap {
  background: var(--color-dark); border: var(--border);
  border-radius: var(--radius); position: relative;
  height: calc(var(--size-hero)*2.5); overflow: hidden; cursor: crosshair; touch-action: none;
  transition: border-color 0.2s; margin-bottom: var(--size-m);
}
.sig-wrap.signed { border-color: var(--color-accent); box-shadow: 0 0 0 var(--border) var(--color-accent-glow-2); }
.sig-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-accent); }
.sig-baseline { position: absolute; bottom: var(--size-l); left: var(--size-l); right: var(--size-l); height: 1px; background: var(--color-2); pointer-events: none; }
.sig-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  pointer-events: none; transition: opacity 0.2s;
  color: var(--color-3);
}
.sig-hint svg { opacity: 0.3; }
.sig-hint span { font-size: var(--size-m); color: var(--color-3); font-weight: var(--font-nrml); letter-spacing: var(--ltr-spc); }
.sig-clear {
  position: absolute; top: var(--size-m); right: var(--size-m);
  background: var(--color-dark); border: var(--border);
  border-radius: var(--radius); padding: var(--size-m) var(--size-m);
  font-size: var(--size-m); color: var(--color-3); cursor: pointer;
  font-family: var(--font-sans); display: none;
}
.sig-clear.show { display: block; }

/* CONSENT */
.consent-row { display: flex; gap: var(--size-m); align-items: flex-start; margin-bottom: 18px; }
.c-box {
	width: var(--size-xl);
  height: var(--size-xl);
  flex-shrink: 0;
  background: var(--color-dark);
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-top: var(--size-xs);
}
.c-box.on { background: var(--color-accent); border-color: var(--color-accent); }
.c-mark { stroke: var(--color-on-accent); opacity: 0; transition: opacity 0.15s, stroke-dashoffset 0.2s ease; }
.c-box.on .c-mark { opacity: 1; }
.c-text { font-family: var(--font-serif); font-size: var(--size-m); color: var(--color-1); line-height: var(--line); font-weight: var(--font-nrml); text-decoration:none;}

/* BUTTONS */
.btn-primary {
  width: 100%; height: calc(var(--size-xl)*1.25);
  background: var(--color-gradient); color: var(--color-1);
  border: none; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: calc(var(--size-m)*1.25); font-weight: var(--font-nrml); letter-spacing: 0;
  text-transform: lowercase;
  cursor: pointer; transition: all 0.2s;
  margin-top: var(--size-l);
  display: flex; align-items: center; justify-content: center; gap: var(--size-m);
}
.btn-primary:hover { background: var(--color-accent-light); }
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { background: var(--color-dark); color: var(--color-3); cursor: not-allowed; }
.btn-narrow { max-width: 3var(--size-m); }
.btn-ghost {
  width: 100%; height: var(--size-xl);
  background: transparent; color: var(--color-3);
  border: var(--border); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--size-m); cursor: pointer;
  transition: all 0.2s; margin-top: var(--size-m); letter-spacing: var(--ltr-spc);
}
.btn-ghost:hover { color: var(--color-2); border-color: var(--color-3); }

/* CONFIRMATION */
.confirm-wrap { display: flex; flex-direction: column; align-items: left; text-align: left; padding: var(--size-l) 0; }
.confirm-ring {
  width: 78px; height: 78px; border-radius: 50%;
  border: var(--size-xs) solid var(--color-success-bg-2); background: var(--color-success-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  color: var(--color-success);
  animation: ring-pop 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes ring-pop { 0%{transform:scale(0.4);opacity:0}100%{transform:scale(1);opacity:1} }
.confirm-check { stroke: var(--color-success); }
.confirm-title { font-family: var(--font-sans); font-weight: var(--font-nrml); font-size: var(--size-hero); letter-spacing: var(--ltr-spc); line-height: var(--line-s); animation: fade-up 0.4s ease 0.1s both;}
.confirm-sub { font-family: var(--font-sans); font-size: var(--size-m); color: var(--color-3); max-width: calc(var(--size-hero)*5); line-height: var(--line); margin-bottom: var(--size-l); font-weight: var(--font-nrml); animation: fade-up 0.4s ease 0.2s both; }
.confirm-card {
  background: var(--color-dark); border: var(--border);
  border-radius: var(--radius); padding: 0 var(--size-m);
  width: 100%; margin-bottom: var(--size-m);
  animation: fade-up 0.4s ease 0.25s both;
}
.d-row { display: flex; justify-content: space-between; align-items: center; padding: var(--size-m) 0; }
.d-row + .d-row { border-top: var(--size-xs) solid var(--color-3); }
.d-key { font-size: var(--size-m); color: var(--color-3); letter-spacing: var(--ltr-spc); text-transform: lowercase; }
.d-val { font-size: var(--size-l); color: var(--color-1); letter-spacing: var(--ltr-spc); text-align: right; }
.conf-email { font-size: var(--size-m); color: var(--color-3); margin-bottom: 26px; font-weight: var(--font-nrml); animation: fade-up 0.4s ease 0.3s both; }
.conf-email strong { color: var(--color-1); font-weight: var(--font-nrml); }

/* TOAST */
.toast {
  position: fixed; left: 50%;
  transform: translateX(-50%) translateY(70px);
  background: var(--color-gradient); border: var(--border);
  border-radius: var(--radius); padding: var(--size-m) var(--size-l);
  font-size: var(--size-m); color: var(--color-1); z-index: 999;
  transition: transform 0.3s ease; white-space: nowrap; font-weight: var(--font-bold);
}
.toast.show { transform: translateX(-50%) translateY(0); }

::-webkit-scrollbar { width: var(--border); }
::-webkit-scrollbar-thumb { background: var(--color-2); border-radius: 2px; }
.screen { -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------
   Larger portrait-tablet refinements (iPad 810–834px+ wide)
   -------------------------------------------------------------------- */
@media (min-width: 700px) {
  .screen-title { font-size: calc(var(--size-hero)*0.9); }
  .confirm-title { font-size: calc(var(--size-hero)*0.9); }
  .sig-wrap { height: calc(var(--size-hero)*2); }
}