@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

    :root {
      --bg-0:#f4f6f9;
      --bg-1:#eef2f7;
      --surface:#ffffff;
      --text:#0f172a;
      --text-muted:#64748b;
      --border:rgba(15,23,42,.08);
      --primary:#2563eb;
      --primary-hover:#1d4ed8;
      --primary-soft:rgba(37,99,235,.08);
      --accent-admin:#0f766e;
      --accent-admin-soft:rgba(15,118,110,.1);
      --shadow-sm:0 1px 2px rgba(15,23,42,.04);
      --shadow-md:0 4px 6px -1px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04);
      --shadow-lg:0 20px 40px -12px rgba(15,23,42,.12);
      --radius:14px;
      --ease:cubic-bezier(.22,1,.36,1);
    }
    
    *{margin:0;padding:0;box-sizing:border-box}
    
    html{scroll-behavior:smooth}
    
    body{
      font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
      background:var(--bg-0);
      background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%,rgba(37,99,235,.12),transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 50%,rgba(15,118,110,.06),transparent 45%),
        radial-gradient(ellipse 60% 40% at 0% 80%,rgba(37,99,235,.05),transparent 50%);
      min-height:100vh;
      display:flex;
      flex-direction:column;
      color:var(--text);
      -webkit-font-smoothing:antialiased;
    }
    
    /* NAV */
    nav{
      background:rgba(255,255,255,.82);
      backdrop-filter:saturate(180%) blur(12px);
      -webkit-backdrop-filter:saturate(180%) blur(12px);
      border-bottom:1px solid var(--border);
      padding:0 clamp(20px,5vw,48px);
      min-height:64px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:sticky;
      top:0;
      z-index:100;
      box-shadow:var(--shadow-sm);
      transition:box-shadow .35s var(--ease),background .35s var(--ease);
    }
    nav::after{
      content:'';
      position:absolute;left:0;right:0;bottom:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(37,99,235,.15),transparent);
      opacity:.6;
    }
    .nav-logo{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text)}
    .nav-links{display:flex;align-items:center;justify-content:center;gap:28px;width:100%}
    .nav-brand{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:6px 0;
      transition:transform .4s var(--ease);
    }
    .nav-brand:hover{transform:scale(1.03)}
    .nav-brand img{
      height:52px;width:auto;max-width:120px;object-fit:contain;
      filter:drop-shadow(0 2px 8px rgba(15,23,42,.06));
      transition:filter .35s var(--ease);
    }
    .nav-brand:hover img{filter:drop-shadow(0 4px 14px rgba(37,99,235,.15))}
    .nav-links a{font-size:14px;color:var(--text-muted);text-decoration:none;transition:color .2s}
    .nav-links a.active{color:var(--primary);font-weight:600}
    .nav-links a:hover{color:var(--primary)}
    .nav-icons{display:flex;align-items:center;gap:14px}
    .nav-icons button{background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background .2s,transform .2s var(--ease),color .2s}
    .nav-icons button:hover{background:rgba(15,23,42,.06);color:var(--text)}
    .nav-icons svg{width:18px;height:18px}
    
    /* MAIN */
    main{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:clamp(40px,8vw,72px) 24px 48px;
    }
    
    .page-title{
      font-size:clamp(26px,4vw,34px);
      font-weight:700;
      color:var(--text);
      text-align:center;
      margin-bottom:12px;
      letter-spacing:-.03em;
      line-height:1.15;
    }
    .page-sub{
      font-size:15px;
      color:var(--text-muted);
      text-align:center;
      margin-bottom:40px;
      max-width:420px;
      line-height:1.55;
    }
    
    /* PORTAL CARDS */
    .cards-row{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:clamp(16px,3vw,22px);
      width:100%;
      max-width:760px;
      margin-bottom:28px;
    }
    
    .portal-card{
      position:relative;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:28px 26px 26px;
      cursor:pointer;
      text-decoration:none;
      display:block;
      overflow:hidden;
      isolation:isolate;
      box-shadow:var(--shadow-md);
      transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease),
        border-color .35s var(--ease);
      animation:fadeUp .65s var(--ease) both;
    }
    .portal-card::before{
      content:'';
      position:absolute;
      top:0;left:0;right:0;height:3px;
      border-radius:var(--radius) var(--radius) 0 0;
      background:linear-gradient(90deg,#3b82f6,#2563eb,#0ea5e9);
      opacity:0;
      transform:scaleX(.35);
      transform-origin:center;
      transition:opacity .45s var(--ease),transform .5s var(--ease);
    }
    .portal-card:hover::before{opacity:1;transform:scaleX(1)}
    .portal-card--admin::before{
      background:linear-gradient(90deg,#14b8a6,#0d9488,#06b6d4);
    }
    .portal-card:nth-child(1){animation-delay:.08s}
    .portal-card:nth-child(2){animation-delay:.16s}
    
    .portal-card:hover{
      transform:translateY(-6px);
      box-shadow:var(--shadow-lg);
      border-color:rgba(37,99,235,.18);
    }
    .portal-card:focus-visible{
      outline:2px solid var(--primary);
      outline-offset:3px;
    }
    
    .portal-card--admin:hover{border-color:rgba(15,118,110,.22)}
    
    @keyframes fadeUp{
      from{opacity:0;transform:translateY(22px)}
      to{opacity:1;transform:none}
    }
    
    .card-icon{
      width:48px;height:48px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:18px;
      transition:transform .45s var(--ease),box-shadow .45s var(--ease);
    }
    .portal-card--partner .card-icon{
      background:linear-gradient(145deg,#3b82f6,#2563eb);
      box-shadow:0 8px 20px -6px rgba(37,99,235,.55);
    }
    .portal-card--admin .card-icon{
      background:linear-gradient(145deg,#14b8a6,#0d9488);
      box-shadow:0 8px 20px -6px rgba(15,118,110,.45);
    }
    .portal-card:hover .card-icon{transform:scale(1.06) rotate(-2deg)}
    .portal-card--admin:hover .card-icon{transform:scale(1.06) rotate(2deg)}
    
    .card-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    
    .card-title{
      font-size:17px;
      font-weight:700;
      color:var(--text);
      margin-bottom:8px;
      letter-spacing:-.02em;
      transition:color .25s;
    }
    .portal-card:hover .card-title{color:var(--text)}
    
    .card-desc{
      font-size:13.5px;
      color:var(--text-muted);
      line-height:1.65;
      margin-bottom:22px;
    }
    
    .card-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:14px;
      font-weight:600;
      color:var(--primary);
      text-decoration:none;
      transition:gap .35s var(--ease),color .25s;
    }
    .portal-card--admin .card-link{color:var(--accent-admin)}
    .portal-card:hover .card-link{gap:12px}
    .card-link svg{width:17px;height:17px;transition:transform .4s var(--ease)}
    .portal-card:hover .card-link svg{transform:translateX(5px)}
    
    /* SUPPORT BANNER */
    .support-banner{
      width:100%;
      max-width:760px;
      background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(248,250,252,.98));
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:24px 28px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      flex-wrap:wrap;
      box-shadow:var(--shadow-md);
      animation:fadeUp .65s .22s var(--ease) both;
      transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .35s;
    }
    .support-banner:hover{
      transform:translateY(-2px);
      box-shadow:var(--shadow-lg);
      border-color:rgba(37,99,235,.12);
    }
    .banner-text h3{
      font-size:15px;
      font-weight:700;
      color:var(--text);
      margin-bottom:6px;
      letter-spacing:-.02em;
    }
    .banner-text p{font-size:13.5px;color:var(--text-muted);line-height:1.55;max-width:420px}
    .banner-btn{
      flex-shrink:0;
      background:linear-gradient(180deg,var(--primary) 0%,#1d4ed8 100%);
      color:#fff;
      border:none;
      border-radius:10px;
      padding:11px 22px;
      font-size:14px;
      font-weight:600;
      cursor:pointer;
      font-family:inherit;
      white-space:nowrap;
      box-shadow:0 4px 14px -4px rgba(37,99,235,.55);
      transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .25s;
    }
    .banner-btn:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 28px -8px rgba(37,99,235,.55);
      filter:brightness(1.05);
    }
    .banner-btn:active{transform:translateY(0)}
    .banner-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
    
    /* FOOTER */
    footer{
      background:rgba(255,255,255,.75);
      backdrop-filter:blur(8px);
      border-top:1px solid var(--border);
      padding:18px clamp(20px,5vw,48px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:16px;
    }
    .footer-copy{font-size:12.5px;color:#94a3b8}
    .footer-links{display:flex;flex-wrap:wrap;gap:8px 22px}
    .footer-links a{
      font-size:12.5px;
      color:var(--text-muted);
      text-decoration:none;
      position:relative;
      transition:color .25s;
    }
    .footer-links a::after{
      content:'';
      position:absolute;left:0;bottom:-2px;width:100%;height:1px;
      background:var(--primary);
      transform:scaleX(0);
      transform-origin:right;
      transition:transform .35s var(--ease);
    }
    .footer-links a:hover{color:var(--primary)}
    .footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
    
    @media (max-width:640px){
      .cards-row{grid-template-columns:1fr}
      .support-banner{flex-direction:column;align-items:stretch;text-align:center}
      .banner-text p{margin:0 auto}
      .banner-btn{width:100%}
      footer{flex-direction:column;text-align:center}
      .footer-links{justify-content:center}
    }
    
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
      }
      html{scroll-behavior:auto}
    }