*{
  box-sizing:border-box;
  font-family:Inter,Poppins,Arial,sans-serif;
}

body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
  display:flex;
  justify-content:center;
  align-items:center;
}

.card-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}

.card-scale{
  transform:scale(0.75);
  transform-origin:top center;
}

.card{
  background:#fff;
  border-radius:18px;
  padding:36px 32px;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.logo{text-align:center;margin-bottom:28px}
.logo h1{margin:0;color:#2c5364;font-size:34px}
.logo p{margin-top:6px;font-size:14px;color:#6b7280}

label{
  font-size:14px;
  color:#374151;
  margin-bottom:6px;
  display:block;
  font-weight:600;
}

input, select{
  width:100%;
  padding:13px 15px;
  border-radius:10px;
  border:1px solid #d1d5db;
  margin-bottom:18px;
  font-size:15px;
  background:#fff;
}

input:focus, select:focus{
  outline:none;
  border-color:#2c5364;
  box-shadow:0 0 0 3px rgba(44,83,100,.2);
}

.btn{
  width:100%;
  padding:14px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  border:none;
  cursor:pointer;
}

.btn-primary{background:#2c5364;color:#fff}
.btn-primary:hover{background:#203a43}

.btn-secondary{
  background:#f3f4f6;
  border:1px solid #d1d5db;
}

.footer{
  text-align:center;
  margin-top:20px;
  font-size:14px;
}

.footer a{
  color:#2c5364;
  font-weight:600;
  text-decoration:none;
}

.hidden{display:none}

body.portal-home{
  --portal-bg: radial-gradient(circle at top right, rgba(42,164,182,.28), transparent 22%), radial-gradient(circle at bottom left, rgba(17,123,139,.28), transparent 26%), linear-gradient(135deg, #0b1f2b 0%, #123445 38%, #173d4a 68%, #0f2b37 100%);
  --portal-panel: rgba(255,255,255,.92);
  --portal-border: rgba(144,191,203,.24);
  --portal-text: #e8f1f4;
  --portal-muted: rgba(222,235,240,.76);
  --portal-deep: #102637;
  --portal-accent: #1e95a8;
  --portal-accent-strong: #117b8b;
  --portal-shadow: 0 28px 80px rgba(4,18,27,.34);
  display:block;
  justify-content:initial;
  align-items:initial;
  padding:32px;
  background:var(--portal-bg);
  color:var(--portal-text);
  overflow-x:hidden;
  font-family:"Aptos","Segoe UI Variable Display","Trebuchet MS",sans-serif;
  position:relative;
}

body.portal-home::before,
body.portal-home::after{
  content:"";
  position:fixed;
  inset:auto;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(16px);
  opacity:.34;
}

body.portal-home::before{
  top:-110px;
  right:-80px;
  background:radial-gradient(circle, rgba(58,190,210,.45), transparent 68%);
  animation:portalFloat 13s ease-in-out infinite;
}

body.portal-home::after{
  bottom:-160px;
  left:-90px;
  background:radial-gradient(circle, rgba(42,111,188,.38), transparent 68%);
  animation:portalFloat 15s ease-in-out infinite reverse;
}

.portal-shell{
  position:relative;
  z-index:1;
  width:min(1360px, 100%);
  margin:0 auto;
  display:grid;
  gap:30px;
}

.portal-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(320px, .9fr);
  gap:28px;
  align-items:stretch;
}

.portal-copy,
.portal-overview-card,
.portal-role-card{
  backdrop-filter:blur(16px);
}

.portal-copy{
  padding:42px;
  border-radius:34px;
  border:1px solid rgba(155,204,215,.18);
  background:linear-gradient(145deg, rgba(12,31,45,.84), rgba(20,58,72,.72));
  box-shadow:var(--portal-shadow);
  overflow:hidden;
  position:relative;
  animation:portalRise .8s ease forwards;
}

.portal-copy::after{
  content:"";
  position:absolute;
  inset:auto -40px -46px auto;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,149,168,.26), transparent 70%);
}

.portal-eyebrow{
  margin:0 0 18px;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#9dd7df;
}

.portal-copy h1{
  margin:0;
  max-width:12ch;
  color:#f6fbfd;
  font-family:"Bahnschrift SemiBold","Aptos Display","Trebuchet MS",sans-serif;
  font-size:clamp(42px, 6vw, 72px);
  line-height:.98;
  letter-spacing:-.04em;
}

.portal-lead{
  margin:24px 0 0;
  max-width:58ch;
  font-size:19px;
  line-height:1.7;
  color:var(--portal-muted);
}

.portal-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

.portal-chip{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(185,225,231,.16);
  color:#eff8fa;
  font-size:14px;
  letter-spacing:.03em;
}

.portal-overview-card{
  padding:28px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(246,252,253,.96), rgba(230,242,246,.9));
  border:1px solid var(--portal-border);
  box-shadow:var(--portal-shadow);
  color:var(--portal-deep);
  display:grid;
  gap:24px;
  animation:portalRise 1s ease forwards;
}

.portal-overview-card__header{
  display:grid;
  gap:10px;
}

.portal-overview-card__tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(17,123,139,.1);
  color:var(--portal-accent-strong);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.portal-overview-card__header strong{
  font-family:"Bahnschrift SemiBold","Aptos Display","Trebuchet MS",sans-serif;
  font-size:28px;
  line-height:1.15;
}

.portal-overview-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.portal-overview-metric{
  display:grid;
  gap:8px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(164,202,211,.26);
}

.portal-overview-metric__label{
  color:#617a89;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.portal-overview-metric strong{
  color:#11283a;
  font-size:20px;
  line-height:1.2;
}

.portal-access-board{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

body.portal-home.portal-home--partner-app{
  --partner-app-panel: linear-gradient(180deg, rgba(248,252,253,.98), rgba(235,244,247,.96));
  --partner-app-border: rgba(115,150,168,.2);
  --partner-app-deep: #123244;
  --partner-app-deep-soft: #27485b;
  --partner-app-mute: #62798a;
  --partner-app-accent: #10808f;
  --partner-app-accent-strong: #0a6672;
  padding:16px;
}

body.portal-home.portal-home--partner-app .portal-shell{
  width:min(980px, 100%);
  min-height:calc(100vh - 32px);
  display:block;
}

.partner-app-landing{
  position:relative;
  display:grid;
  gap:24px;
  padding:30px;
  border-radius:34px;
  border:1px solid rgba(155,204,215,.18);
  background:
    radial-gradient(circle at top right, rgba(46,172,193,.16), transparent 30%),
    radial-gradient(circle at bottom left, rgba(12,95,109,.12), transparent 26%),
    var(--partner-app-panel);
  box-shadow:0 32px 72px rgba(5,23,34,.24);
  overflow:hidden;
  color:var(--partner-app-deep);
}

.partner-app-landing::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(16,53,72,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,53,72,.035) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.45;
  pointer-events:none;
}

.partner-app-landing > *{
  position:relative;
  z-index:1;
}

.partner-app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.partner-app-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.partner-app-brand__mark{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  padding:10px;
  border-radius:20px;
  background:linear-gradient(145deg, rgba(11,60,79,.96), rgba(21,123,139,.9));
  box-shadow:0 14px 24px rgba(9,44,61,.2);
}

.partner-app-brand__mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.partner-app-brand__copy{
  display:grid;
  gap:5px;
}

.partner-app-brand__copy strong{
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.03em;
}

.partner-app-brand__eyebrow,
.partner-app-kicker,
.partner-app-entry__eyebrow{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.partner-app-brand__eyebrow{
  color:var(--partner-app-accent);
}

.partner-app-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(16,128,143,.08);
  border:1px solid rgba(16,128,143,.16);
  color:var(--partner-app-accent-strong);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.partner-app-hero{
  display:block;
}

.partner-app-hero__copy{
  display:grid;
  gap:10px;
  align-content:center;
}

.partner-app-hero--compact{
  padding:10px 0 4px;
}

.partner-app-hero__copy--compact{
  justify-items:start;
}

.partner-app-kicker{
  color:var(--partner-app-accent);
}

.partner-app-hero h1{
  margin:0;
  max-width:10ch;
  font-family:"Bahnschrift SemiBold","Aptos Display","Trebuchet MS",sans-serif;
  font-size:clamp(40px, 7vw, 62px);
  line-height:.98;
  letter-spacing:-.05em;
}

.partner-app-subtitle{
  margin:0;
  color:var(--partner-app-deep-soft);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.02em;
}

.partner-app-action-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.partner-app-entry{
  display:grid;
  gap:18px;
  padding:24px;
  border-radius:28px;
  border:1px solid var(--partner-app-border);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,248,250,.92));
  box-shadow:0 18px 38px rgba(8,29,40,.1);
}

.partner-app-entry--login{
  background:linear-gradient(145deg, rgba(14,52,72,.98), rgba(16,80,93,.94));
  color:#edf6f8;
  border-color:rgba(120,198,206,.2);
}

.partner-app-entry__eyebrow{
  color:var(--partner-app-accent);
}

.partner-app-entry--login .partner-app-entry__eyebrow{
  color:#8fd7df;
}

.partner-app-entry strong{
  font-family:"Bahnschrift SemiBold","Aptos Display","Trebuchet MS",sans-serif;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.03em;
}

.partner-app-entry__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:52px;
  padding:0 20px;
  border-radius:999px;
  background:linear-gradient(135deg, #123244, #1f4a61);
  border:1px solid transparent;
  color:#f8fcfd;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 12px 24px rgba(3,16,24,.12);
  transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.partner-app-entry__button--ghost{
  background:linear-gradient(135deg, #f8fcfd, #deedf1);
  color:#123244;
  border-color:rgba(18,50,68,.1);
}

.partner-app-entry__button:hover,
.partner-app-entry__button:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 28px rgba(3,16,24,.22);
  filter:brightness(1.02);
}

.partner-app-entry__button:focus-visible{
  outline:3px solid rgba(125,219,228,.34);
  outline-offset:4px;
}

.portal-role-card{
  position:relative;
  display:grid;
  gap:20px;
  padding:28px;
  text-decoration:none;
  color:#152536;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,248,250,.92));
  border:1px solid var(--portal-border);
  border-radius:30px;
  box-shadow:0 22px 48px rgba(7,26,37,.18);
  overflow:hidden;
  transform:translateY(0);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  animation:portalRise 1.05s ease forwards;
}

.portal-role-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:var(--portal-role-accent, linear-gradient(90deg, #1e95a8, #57c8d6));
}

.portal-role-card:hover,
.portal-role-card:focus-visible{
  transform:translateY(-8px);
  box-shadow:0 26px 58px rgba(7,26,37,.22);
  border-color:rgba(55,161,178,.35);
}

.portal-role-card:focus-visible{
  outline:3px solid rgba(76,194,212,.26);
  outline-offset:3px;
}

.portal-role-card--partner{--portal-role-accent:linear-gradient(90deg, #11a58d, #59d2ab);}
.portal-role-card--employee{--portal-role-accent:linear-gradient(90deg, #1987b9, #71b9ea);}
.portal-role-card--admin{--portal-role-accent:linear-gradient(90deg, #7f5ce2, #bf86ff);}

.portal-role-card__icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(16,43,59,.07);
  color:#163142;
  font-family:"Bahnschrift SemiBold","Aptos Display","Trebuchet MS",sans-serif;
  font-size:24px;
  font-weight:700;
}

.portal-role-card__body{
  display:grid;
  gap:12px;
}

.portal-role-card__eyebrow{
  margin:0;
  color:#648395;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.portal-role-card h2{
  margin:0;
  font-family:"Bahnschrift SemiBold","Aptos Display","Trebuchet MS",sans-serif;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.03em;
}

.portal-role-card p{
  margin:0;
  color:#607385;
  font-size:16px;
  line-height:1.7;
}

.portal-role-card__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:#102c3c;
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
}

@keyframes portalRise{
  from{
    opacity:0;
    transform:translateY(22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes portalFloat{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,22px,0);}
}

@media (max-width: 1100px){
  body.portal-home{
    padding:24px;
  }

  .portal-hero{
    grid-template-columns:1fr;
  }

  .portal-copy h1{
    max-width:14ch;
  }

  .portal-access-board{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  body.portal-home{
    padding:18px;
  }

  body.portal-home.portal-home--partner-app{
    padding:12px;
  }

  body.portal-home.portal-home--partner-app .portal-shell{
    width:100%;
    min-height:calc(100vh - 24px);
  }

  .partner-app-landing{
    padding:22px;
    border-radius:26px;
  }

  .partner-app-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .partner-app-brand{
    width:100%;
  }

  .partner-app-brand__mark{
    width:56px;
    height:56px;
    border-radius:18px;
  }

  .partner-app-brand__copy strong{
    font-size:20px;
  }

  .partner-app-hero h1{
    max-width:none;
    font-size:clamp(34px, 11vw, 48px);
  }

  .partner-app-subtitle{
    font-size:18px;
  }

  .partner-app-action-grid{
    grid-template-columns:1fr;
  }

  .partner-app-entry{
    border-radius:22px;
  }

  .partner-app-entry strong{
    font-size:24px;
  }

  .partner-app-entry__button{
    width:100%;
    min-width:0;
  }

  .portal-copy,
  .portal-overview-card,
  .portal-role-card{
    padding:22px;
    border-radius:24px;
  }

  .portal-copy h1{
    max-width:none;
    font-size:clamp(34px, 11vw, 52px);
  }

  .portal-lead{
    font-size:16px;
  }

  .portal-overview-grid{
    grid-template-columns:1fr;
  }

  .portal-role-card h2{
    font-size:26px;
  }
}

@media (prefers-reduced-motion: reduce){
  body.portal-home::before,
  body.portal-home::after,
  .portal-copy,
  .portal-overview-card,
  .portal-role-card{
    animation:none !important;
  }

  .portal-role-card{
    transition:none;
  }
}
