:root { --entry-color:#FF3D00; --green:#0e3b3a; --green2:#145553; --sand:#f4efe6; --gold:#c9a24b; --ink:#1c2422; --muted:#6b7573; --line:#e4ded3; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:"Segoe UI", system-ui, sans-serif; color:var(--ink); background:var(--sand); line-height:1.6; }
  a { color:inherit; text-decoration:none; }
  .serif { font-family:Georgia, "Times New Roman", serif; font-weight:400; }

  .split { display:grid; grid-template-columns:minmax(380px,520px) 1fr; min-height:100vh; }

  /* left: login */
  .left { display:flex; flex-direction:column; justify-content:space-between; padding:40px 56px 96px; background:var(--sand); position:relative; z-index:2; }
  .logo { display:flex; align-items:center; gap:12px; font-weight:800; font-size:21px; color:var(--green); }
  .logo .m { width:40px; height:40px; border-radius:50%; border:2px solid var(--green); display:grid; place-items:center; font-size:13px; position:relative; }
  .logo .m::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid transparent; border-top-color:var(--gold); animation:spin 3s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .logo small { display:block; font-weight:400; font-size:12px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; line-height:1; }
  .intro { margin:48px 0 32px; }
  .intro h1 { font-size:clamp(34px,3.4vw,46px); line-height:1.1; color:var(--green); }
  .intro h1 .rot { display:inline-block; color:var(--gold); font-style:italic; min-width:6ch; transition:opacity .4s, transform .4s; }
  .intro h1 .rot.out { opacity:0; transform:translateY(-12px); }
  .intro p { color:var(--muted); margin-top:16px; font-size:16px; max-width:400px; }

  form label { display:block; font-size:13px; font-weight:600; margin:16px 0 6px; color:var(--green); }
  .field { position:relative; }
  form input { width:100%; padding:14px 16px; border:1.5px solid var(--line); background:#fff; border-radius:12px; font:inherit; transition:border-color .2s, box-shadow .2s; }
  form input:focus { outline:none; border-color:var(--green2); box-shadow:0 0 0 4px rgba(20,85,83,.12); }
  .row { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; color:var(--muted); }
  .row label { display:flex; gap:8px; align-items:center; margin:0; font-weight:400; color:var(--muted); }
  .row a { color:var(--green2); font-weight:600; }
  .btn { width:100%; margin-top:22px; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:16px; padding:15px; border-radius:12px; background:var(--green); color:#fff; position:relative; overflow:hidden; transition:transform .2s; }
  .btn::after { content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); transform:skewX(-20deg); animation:shine 3.5s ease-in-out infinite; }
  @keyframes shine { 0%,60% { left:-80px; } 100% { left:110%; } }
  .btn:hover { transform:translateY(-2px); }
  .alt { display:flex; align-items:center; gap:14px; margin:20px 0 14px; color:var(--muted); font-size:12px; }
  .alt::before, .alt::after { content:""; flex:1; height:1px; background:var(--line); }
  .sso { width:100%; border:1.5px solid var(--line); background:#fff; padding:13px; border-radius:12px; font:inherit; font-weight:600; cursor:pointer; display:flex; justify-content:center; gap:10px; align-items:center; }
  .sso:hover { border-color:var(--green2); }
  .sso { color:var(--green); text-decoration:none; }
  .sso:disabled { cursor:not-allowed; opacity:.65; }
  .sso svg { width:18px; height:18px; }
  .note { min-height:20px; font-size:13px; color:var(--green2); text-align:center; margin-top:12px; }
  .foot { font-size:12px; color:var(--muted); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }

  /* right: photo mosaic */
  .right { position:relative; overflow:hidden; background:var(--green); }
  .cols { position:absolute; inset:-10% -5%; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; transform:rotate(-6deg); }
  .col { display:flex; flex-direction:column; gap:16px; animation:up 40s linear infinite; }
  .col.down { animation-name:down; animation-duration:46s; }
  .col:nth-child(3) { animation-duration:52s; }
  @keyframes up { from { transform:translateY(0); } to { transform:translateY(-50%); } }
  @keyframes down { from { transform:translateY(-50%); } to { transform:translateY(0); } }
  .col img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; filter:saturate(.8); }
  .col img:nth-child(3n) { aspect-ratio:1/1; }
  .right::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,59,58,.75),rgba(14,59,58,.25) 60%,rgba(14,59,58,.45)); }

  .overlay { position:absolute; z-index:3; left:56px; right:56px; bottom:110px; color:#fff; }
  .slidecard { background:rgba(14,59,58,.72); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.15); border-radius:20px; padding:28px 30px; max-width:480px; }
  .slidecard .k { color:var(--gold); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
  .slidecard h2 { font-size:28px; line-height:1.2; margin:8px 0; }
  .slidecard p { color:rgba(255,255,255,.78); font-size:15px; }
  .slidecard .inner { transition:opacity .45s, transform .45s; }
  .slidecard .inner.out { opacity:0; transform:translateY(10px); }
  .ind { display:flex; gap:6px; margin-top:18px; }
  .ind i { height:4px; width:18px; border-radius:2px; background:rgba(255,255,255,.3); transition:width .4s, background .4s; }
  .ind i.on { width:40px; background:var(--gold); }

  .badge { position:absolute; z-index:3; top:40px; right:48px; background:#fff; border-radius:16px; padding:14px 18px; display:flex; gap:12px; align-items:center; box-shadow:0 20px 40px rgba(0,0,0,.25); animation:float 6s ease-in-out infinite; }
  .badge .ic { width:40px; height:40px; border-radius:10px; background:#1d6f42; color:#fff; display:grid; place-items:center; font-weight:800; font-size:11px; }
  .badge b { display:block; font-size:14px; } .badge span { font-size:12px; color:var(--muted); }
  .badge2 { top:auto; bottom:auto; top:180px; right:auto; left:48px; animation-delay:-3s; }
  .badge2 .ic { background:var(--gold); }
  @keyframes float { 50% { transform:translateY(-12px); } }

  /* below fold strip */
  .strip { background:#fff; padding:80px 24px 110px; }
  .strip .grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
  .strip .it { border-top:2px solid var(--green); padding-top:20px; }
  .strip .n { font-size:42px; color:var(--gold); line-height:1; }
  .strip h3 { font-size:20px; color:var(--green); margin:10px 0 6px; }
  .strip p { color:var(--muted); font-size:15px; }
  .strip h2 { max-width:1100px; margin:0 auto 44px; font-size:clamp(28px,3vw,40px); color:var(--green); }

  .enter { opacity:0; transform:translateY(20px); animation:enter .9s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes enter { to { opacity:1; transform:none; } }
  .reveal { opacity:0; transform:translateY(26px); transition:opacity .8s, transform .8s; }
  .reveal.in { opacity:1; transform:none; }

  @media (max-width:900px) {
    .split { grid-template-columns:1fr; }
    .right { min-height:520px; order:-1; }
    .left { padding:36px 24px 60px; }
    .overlay { left:16px; right:16px; bottom:24px; }
    .badge { right:16px; top:16px; } .badge2 { display:none; }
    .strip .grid { grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } .enter, .reveal { opacity:1; transform:none; } }

fieldset {border:0; padding:0; min-width:0}
fieldset:disabled input,fieldset:disabled button {cursor:not-allowed; opacity:.6}
.entry {max-width:1100px; margin:48px auto 0; text-align:center}
.entry-button {display:inline-block; max-width:420px; text-align:center; background:var(--entry-color)}
.landing-controls {position:fixed; top:12px; right:16px; display:flex; gap:8px; z-index:8}
.landing-controls button {font:inherit; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--sand); color:var(--ink); cursor:pointer}
:root[data-theme="dark"] {--sand:#182c29; --ink:#f1f4ee; --muted:#bacac4; --line:#47645c; --green:#82cbb0; --green2:#9adbc1}
:root[data-theme="dark"] .right {background:#0e3b3a}
:root[data-theme="dark"] .strip {background:#213a35}
:root[data-theme="dark"] form input,:root[data-theme="dark"] .sso {background:#213a35; color:var(--ink)}
:focus-visible {outline:3px solid var(--gold); outline-offset:4px}

.row input[type="checkbox"] {width:auto}