/* ── H2 IT Cloud – Portal ── */
    .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .brand-cloud { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--accent); padding-left: 10px; border-left: 1px solid var(--hairline); line-height: 1; }
    footer .brand-cloud { color: #5aa8ff; border-left-color: rgba(255,255,255,.15); }

    .portal-hero { padding: 132px 24px 56px; text-align: center; background: radial-gradient(ellipse 80% 70% at 50% 0%, #eaf3ff 0%, rgba(234,243,255,0) 70%), var(--bg); }
    .portal-hero h1 { font-size: clamp(40px, 7vw, 76px); margin-bottom: 20px; }
    .portal-hero .hero-sub { margin-bottom: 36px; }
    .portal-date { font-size: 14px; color: var(--ink-3); margin-top: 28px; }

    .tiles-wrap { padding: 32px 24px 96px; }
    .tiles { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .tile { background: var(--bg-alt); border-radius: var(--radius-md); padding: 28px; text-decoration: none; color: inherit; display: flex; flex-direction: column; min-height: 210px; transition: transform .6s var(--spring), box-shadow .5s var(--ease), background .3s var(--ease); }
    .tile:hover { transform: translateY(-5px) scale(1.012); box-shadow: var(--shadow-md); background: #fff; outline: 1px solid var(--hairline); }
    .tile:active { transform: scale(.98); transition-duration: .15s; }
    .tile.primary { background: linear-gradient(150deg, #1B86FF 0%, #0a5fd1 100%); color: #fff; }
    .tile.primary:hover { background: linear-gradient(150deg, #2b8fff 0%, #0b66dd 100%); outline: none; }
    .tile-icon { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 24px; }
    .tile.primary .tile-icon { background: rgba(255,255,255,.18); }
    .tile h2 { font-size: 21px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 6px; color: inherit; }
    .tile p { font-size: 15px; line-height: 1.45; color: var(--ink-3); flex: 1; }
    .tile.primary p { color: rgba(255,255,255,.8); }
    .tile-go { font-size: 14px; font-weight: 500; color: var(--accent); margin-top: 18px; }
    .tile-go::after { content: ' ›'; }
    .tile.primary .tile-go { color: #fff; }
    .tile-wide { grid-column: span 2; }

    .help { background: var(--bg-alt); padding: 96px 24px; }
    .help-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    .help-card { background: #fff; border-radius: var(--radius-md); padding: 28px; }
    .help-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
    .help-card p { font-size: 15px; color: var(--ink-3); line-height: 1.5; margin-bottom: 14px; }
    .help-card a { font-size: 15px; font-weight: 500; color: var(--accent); text-decoration: none; display: block; margin-top: 4px; }
    .help-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

    .from-h2it { padding: 96px 24px; text-align: center; }
    .from-h2it .inner { max-width: 680px; margin: 0 auto; }
    .from-h2it img { height: 30px; margin: 0 auto 24px; display: block; }

    @media (max-width: 1024px) { .tiles { grid-template-columns: repeat(2, 1fr); } .help-grid { grid-template-columns: 1fr; } }
    @media (max-width: 640px) {
      .tiles { grid-template-columns: 1fr; }
      .tile-wide { grid-column: auto; }
      .tile { min-height: 0; }
      .portal-hero { padding: 104px 20px 40px; }
      .help, .from-h2it { padding: 72px 20px; }
    }