body{
    background:#111;
    color:#fff;
    font-family:Arial,sans-serif;
    margin:0;
    padding:20px;
}

h1{
    color:#FFD700;
    margin-bottom:25px;
}

.workout-card{
    background:#1f1f1f;
    padding:20px;
    margin-bottom:20px;
    border-radius:10px;
    border-left:5px solid #FFD700;
}

.workout-card h3{
    color:#FFD700;
    margin-bottom:10px;
}

.workout-card ul{
    margin:0;
    padding-left:20px;
    line-height:1.8;
}

.workout-card p{
    margin:0;
}

a{
    color:#FFD700;
    text-decoration:none;
    font-weight:bold;
}

a:hover{
    text-decoration:underline;
}

/* ===== Brahmaputra Gymnasium — Workout Plan ===== */
:root {
    --ink: #080c15;
    --surface: #101827;
    --surface-soft: #152136;
    --line: rgba(203, 213, 225, 0.14);
    --cream: #f8fafc;
    --muted: #a9b6c8;
    --saffron: #ff9933;
    --gold: #f6c75f;
    --india-green: #27a96b;
    --sky: #38bdf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    padding: 0;
    background: radial-gradient(circle at 90% -10%, #17355d 0, transparent 28rem), var(--ink);
    color: var(--cream);
    font-family: 'Inter', sans-serif;
}
.main-content {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 36px 0 64px;
    color: var(--cream);
}

/* Hero image uses a custom Indian fitness illustration. */
.workout-hero {
    position: relative;
    isolation: isolate;
    min-height: 370px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(246, 199, 95, 0.25);
    border-radius: 24px;
    background: #0c1525 url('../assets/workout-hero-illustration.png') center / cover no-repeat;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}
.workout-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 10, 20, 0.98) 0%, rgba(7, 14, 26, 0.87) 38%, rgba(7, 14, 26, 0.12) 68%);
}
.workout-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    left: -120px;
    bottom: -170px;
    border: 28px solid rgba(255, 153, 51, 0.18);
    border-radius: 50%;
    animation: floatGlow 7s ease-in-out infinite;
}
.hero-content { max-width: 560px; padding: 42px 48px; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 153, 51, 0.42);
    border-radius: 999px;
    color: #ffd8a8;
    background: rgba(255, 153, 51, 0.12);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}
.hero-content h1 {
    margin: 17px 0 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(34px, 4.2vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.7px;
}
.hero-content h1 em { color: var(--saffron); font-style: normal; }
.hero-content > p { max-width: 440px; margin: 0; color: #cbd5e1; font-size: 15px; line-height: 1.7; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.hero-stats span { padding: 7px 10px; border-radius: 8px; background: rgba(8, 12, 21, 0.52); border: 1px solid rgba(255, 255, 255, 0.14); color: #cbd5e1; font-size: 12px; }
.hero-stats b { color: #fff; }

/* Keep one title below the visual, with the original plan copy. */
.main-content > h1 { margin: 42px 0 0; color: #fff; font-size: 28px; letter-spacing: -.7px; }
.plan-subtitle { margin-top: 7px; color: var(--muted); }
.plan-banner {
    margin: 22px 0 26px;
    border: 1px solid rgba(246, 199, 95, 0.32);
    border-left: 4px solid var(--saffron);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(255,153,51,.12), rgba(16,24,39,.9) 46%);
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.plan-banner strong, .plan-banner i { color: var(--gold); }

.week-strip { gap: 8px; margin: 0 0 24px; padding: 3px 0 13px; }
.week-strip a { background: rgba(21,33,54,.78); border-color: var(--line); color: #b6c2d1; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.week-strip a:hover, .week-strip a:focus-visible { outline: none; color: #fff; background: rgba(255,153,51,.12); border-color: rgba(255,153,51,.65); transform: translateY(-2px); text-decoration: none; }

.workout-card {
    position: relative;
    overflow: hidden;
    margin: 14px 0;
    padding: 23px 25px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--saffron);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(22,33,53,.96), rgba(13,21,35,.94));
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    scroll-margin-top: 24px;
}
.workout-card::after { content: ''; position: absolute; right: -22px; top: -25px; width: 100px; height: 100px; border: 1px solid rgba(56,189,248,.13); border-radius: 50%; }
.workout-card:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.38); box-shadow: 0 18px 34px rgba(0,0,0,.25); }
.workout-card h3 { color: #fff; font-size: 19px; letter-spacing: -.25px; }
.day-tag { background: rgba(8,12,21,.4); border-color: var(--line); color: #b8c4d3; }
.tag-focus { color: #ffe0af; background: rgba(255,153,51,.12); border-color: rgba(255,153,51,.35); }
.tag-duration { color: #82e6b4; }
.section-label { margin-top: 18px; color: #8c9bb0; }
.section-label.main { color: #ffd48a; }
.workout-card ul { color: #d8e1ed; }
.workout-card ul li { padding-left: 3px; }
.workout-card ul li::marker { color: var(--saffron); }
.workout-card ul li span.set-rep { color: #ffd48a; }
.rest-note { border: 1px dashed rgba(39,169,107,.42); border-radius: 10px; background: rgba(39,169,107,.08); color: #b9e8ce; }
.plan-footer-note { border-color: var(--line); border-radius: 14px; background: rgba(21,33,54,.7); }
.plan-footer-note i { color: var(--saffron); }
.back-link { padding: 11px 16px; border: 1px solid rgba(255,153,51,.45); border-radius: 10px; color: #ffe0af; background: rgba(255,153,51,.08); transition: all .2s ease; }
.back-link:hover { color: #fff; background: var(--saffron); border-color: var(--saffron); text-decoration: none; }

@keyframes floatGlow { 50% { transform: translate(20px, -18px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (max-width: 700px) {
    .main-content { width: min(100% - 28px, 1180px); padding-top: 14px; }
    .workout-hero { min-height: 430px; align-items: flex-start; background-position: 64% center; }
    .workout-hero::before { background: linear-gradient(180deg, rgba(5,10,20,.9), rgba(5,10,20,.53)); }
    .hero-content { padding: 30px 24px; }
    .hero-content h1 { font-size: 37px; }
    .main-content > h1 { margin-top: 30px; }
    .workout-card { padding: 19px 17px; }
    .workout-card-head { align-items: flex-start; }
}