/* ============ Design tokens ============ */
        :root{
            --ink:        #0E1712;
            --ink-2:      #16221B;
            --paper:      #EFF3EF;
            --paper-2:    #E3E9E2;
            --card:       #FFFFFF;
            --text:       #12201A;
            --muted:      #5B6B60;
            --muted-on-ink: #A9B7AC;
            --line:       rgba(18,32,26,0.10);
            --line-on-ink: rgba(255,255,255,0.12);
            --accent:     #2F6F4E;   /* botanical green — biology */
            --accent-2:   #D9A441;   /* ochre gold — academia / highlight */
            --accent-soft: #E3EEE7;
            --radius:     10px;
            --disp: "Lora", serif;
            --body: "Poppins", sans-serif;
            --mono: "IBM Plex Mono", monospace;
            --container: 1160px;
        }
        *{box-sizing:border-box;}
        html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset,140px);}
        body{
            margin:0;
            font-family:var(--body);
            color:var(--text);
            background:var(--paper);
            line-height:1.65;
            -webkit-font-smoothing:antialiased;
        }
        img{max-width:100%;display:block;}
        a{color:inherit;text-decoration:none;}
        .container{max-width:var(--container);margin:0 auto;padding:0 24px;}
        h1,h2,h3,h4{font-family:var(--disp);font-weight:600;margin:0 0 .5em;line-height:1.2;}
        .eyebrow{
            font-family:var(--mono);
            font-size:12px;
            letter-spacing:.14em;
            text-transform:uppercase;
            color:var(--accent);
            display:inline-flex;
            align-items:center;
            gap:10px;
        }
        .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);}
        section{padding:96px 0;}
        section[id]{scroll-margin-top:var(--header-offset,140px);}
        .section-header{max-width:620px;margin:0 0 48px;}
        .section-header.center{margin-left:auto;margin-right:auto;text-align:center;}
        .section-header h2{font-size:clamp(28px,3.4vw,40px);}
        .section-header p{color:var(--muted);font-size:16px;margin:0;}
        .btn{
            display:inline-flex;align-items:center;gap:8px;
            font-family:var(--body);font-weight:600;font-size:14px;
            letter-spacing:.02em;
            padding:14px 26px;border-radius:100px;
            border:1px solid transparent;cursor:pointer;
            transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
        }
        .btn:hover{transform:translateY(-2px);}
        .btn-primary{background:var(--accent);color:#fff;}
        .btn-primary:hover{background:#25573d;}
        .btn-ghost{background:transparent;border-color:var(--line);color:var(--text);}
        .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
        .btn-on-ink{border-color:var(--line-on-ink);color:#fff;}
        .btn-on-ink:hover{border-color:var(--accent-2);color:var(--accent-2);}

        /* signature: sequence ladder divider, echoes base-pair rungs / data ticks */
        .ladder{height:14px;background-image:repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 20px);opacity:.35;}
        .ladder.on-ink{background-image:repeating-linear-gradient(90deg, var(--accent-2) 0 2px, transparent 2px 20px);opacity:.45;}

        .icon{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;}

        /* ============ Simple dark mode ============ */
        body.dark-mode{background:#0E1712;color:#DCE4DF;}
        body.dark-mode .logo-bar{background:#16221B;border-bottom-color:var(--line-on-ink);}
        body.dark-mode .brand,
        body.dark-mode .nav-links a{color:#fff;}
        body.dark-mode section{background:transparent;}
        body.dark-mode .price-card,
        body.dark-mode .news-card,
        body.dark-mode .session-row,
        body.dark-mode .countdown-card,
        body.dark-mode .sponsor-logo{background:#16221B;border-color:var(--line-on-ink);color:#DCE4DF;}
        body.dark-mode .section-header p,
        body.dark-mode .price-perks li,
        body.dark-mode .about-grid p{color:var(--muted-on-ink);}

        /* ============ Header ============ */
        header{position:sticky;top:0;z-index:100;}
        header .container{max-width:1440px;}

        /* -- Utility bar -- */
        .utility-bar{
            background:var(--accent-soft);
            background: color-mix(in srgb, #0069ff 16%, #2b5d98);
            color:var(--muted);
            border-bottom:1px solid var(--line);
            border-bottom:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
        }
        .utility-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:16px;flex-wrap:wrap;}
        .utility-social{list-style:none;display:flex;gap:8px;margin:0;padding:0;}
        .utility-social a{
            width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
            display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .2s ease, color .2s ease, border-color .2s ease;
        }
        .utility-social a:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
        .utility-social svg{width:12px;height:12px;fill:currentColor;stroke:none;}
        .utility-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;}
        .utility-divider{width:1px;height:16px;background:var(--line);}
        .dark-toggle{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;}
        .dark-toggle:hover{color:var(--accent);}
        .dark-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;}

        /* -- Accessibility settings -- */
        .a11y-switcher{position:relative;}
        .a11y-toggle{
            display:flex;align-items:center;gap:6px;background:#fff;border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
            color:var(--muted);font-family:var(--body);font-size:12px;font-weight:500;
            padding:5px 10px;border-radius:5px;cursor:pointer;
        }
        .a11y-toggle:hover{color:var(--accent);border-color:var(--accent);}
        .a11y-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;}
        .a11y-panel{
            display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:200;
            background:var(--card);border:1px solid var(--line);border-radius:12px;
            box-shadow:0 20px 40px -14px rgba(0,0,0,0.35);padding:16px;width:270px;
        }
        .a11y-panel.open{display:block;}
        .a11y-panel-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--text);margin-bottom:14px;}
        .a11y-reset{background:none;border:none;color:var(--accent);cursor:pointer;padding:4px;display:flex;}
        .a11y-reset svg{width:15px;height:15px;stroke:currentColor;fill:none;}
        .a11y-reset:hover{color:var(--accent-2);}
        .a11y-section{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;}
        .a11y-section:last-child{margin-bottom:0;}
        .a11y-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
        .a11y-label span{font-weight:400;color:var(--muted);}
        .a11y-btn-group{display:flex;gap:8px;}
        .a11y-opt{flex:1;background:var(--paper-2);border:1px solid var(--line);color:var(--muted);font-family:var(--body);font-size:12.5px;font-weight:600;padding:8px 6px;border-radius:6px;cursor:pointer;transition:all .2s ease;}
        .a11y-opt.active{background:var(--accent);border-color:var(--accent);color:#fff;}
        .a11y-slider-row{display:flex;align-items:center;gap:8px;}
        .a11y-slider-row input[type=range]{flex:1;accent-color:var(--accent);}
        .a11y-step{width:26px;height:26px;flex-shrink:0;border-radius:6px;background:var(--paper-2);border:1px solid var(--line);color:var(--text);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;}
        .a11y-step:hover{border-color:var(--accent);color:var(--accent);}
        .a11y-toggle-list{display:flex;flex-direction:column;gap:8px;}
        .a11y-item{display:flex;align-items:center;gap:10px;width:100%;background:var(--paper-2);border:1px solid var(--line);color:var(--text);font-family:var(--body);font-size:13px;font-weight:500;padding:9px 12px;border-radius:8px;cursor:pointer;text-align:left;transition:all .2s ease;}
        .a11y-item .icon{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0;}
        .a11y-item:hover{border-color:var(--accent);}
        .a11y-item.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
        .a11y-range-full{width:100%;accent-color:var(--accent);}
        body.a11y-highlight-links a{outline:2px solid var(--accent) !important;outline-offset:2px;text-decoration:underline !important;}
        body.a11y-hide-images img{visibility:hidden !important;}

        /* -- Colour theme switcher -- */
        .theme-switcher{position:relative;}
        .theme-toggle{
            display:flex;align-items:center;gap:6px;background:#fff;border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
            color:var(--muted);font-family:var(--body);font-size:12px;font-weight:500;
            padding:5px 10px;border-radius:5px;cursor:pointer;
        }
        .theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
        .theme-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;}
        .theme-panel{
            display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:200;
            background:var(--card);border:1px solid var(--line);border-radius:10px;
            box-shadow:0 20px 40px -14px rgba(0,0,0,0.35);padding:8px;min-width:190px;
        }
        .theme-panel.open{display:block;}
        .theme-option{
            display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;
            padding:9px 10px;border-radius:6px;cursor:pointer;font-family:var(--body);font-size:13.5px;
            color:var(--text);text-align:left;
        }
        .theme-option:hover{background:var(--paper-2);}
        .theme-option.active{background:var(--accent-soft);font-weight:600;}
        .theme-option .swatch{width:16px;height:16px;border-radius:5px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15);}

        /* -- Logo bar -- */
        .logo-bar{background:#fff;border-bottom:1px solid var(--line);}
        .logo-bar-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px;flex-wrap:nowrap;}
        .brand-group{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;}
        .brand{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--text);letter-spacing:.01em;white-space:nowrap;}
        .brand span{color:var(--accent-2);}
        .header-logos{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0 0 0 22px;}
        .header-logos img{height:72px;width:auto;max-width:160px;object-fit:contain;}
        @media (max-width:760px){ .header-logos li:nth-child(n/**/+2){display:none;} .header-logos img{height:44px;} }
        .nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
        .nav-right .btn{padding:12px 22px;font-size:13.5px;white-space:nowrap;}
        .btn-login{background:var(--accent-soft);color:var(--accent);}
        .btn-login:hover{background:var(--accent);color:#fff;}
        .nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:6px;}

        /* -- Nav strip -- */
        .nav-bar{background:linear-gradient(90deg, var(--accent) 0%, #244f38 100%);}
        .nav-links{display:flex;align-items:center;justify-content:center;gap:36px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
        .nav-links a{
            display:block;padding:15px 0;font-size:14px;color:rgba(255,255,255,0.85);font-weight:500;
            transition:color .2s ease;position:relative;white-space:nowrap;
        }
        .nav-links a:hover{color:#fff;}
        @media (max-width:900px){
            .utility-controls{display:none;}
            .utility-social{display:none;}
            .utility-inner{justify-content:flex-end;}
            .nav-bar{
                position:absolute;top:100%;left:0;right:0;
                max-height:0;overflow:hidden;transition:max-height .3s ease;
            }
            .nav-bar.open{max-height:420px;}
            .nav-links{flex-direction:column;align-items:flex-start;gap:0;}
            .nav-links li{border-top:1px solid var(--line-on-ink);width:100%;}
            .nav-links a{padding:15px 24px;}
            .nav-toggle{display:block;}
            .nav-right .btn-primary{display:none;}
        }
        @media (max-width:520px){
            .utility-bar{display:none;}
        }

        /* ============ Hero ============ */


        .countdown-card .cc-top{display:flex;align-items:center;justify-content:space-between;position:relative;}
        .countdown-card .label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;}
        .live-dot{width:8px;height:8px;border-radius:50%;background:#3AA96B;position:relative;flex-shrink:0;}
        .live-dot::after{
            content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #3AA96B;
            animation:livePulse 1.8s ease-out infinite;
        }
        @keyframes livePulse{
            0%{transform:scale(0.6);opacity:.9;}
            100%{transform:scale(1.9);opacity:0;}
        }
        .countdown-card .until{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--text);margin:8px 0 26px;position:relative;}

        .countdown li{
            position:relative;text-align:center;border-radius:12px;padding:16px 4px 14px;
            box-shadow:0 10px 22px -14px rgba(18,32,26,0.25);
            transition:transform .2s ease, box-shadow .2s ease;
        }
        .countdown li:hover{transform:translateY(-3px);box-shadow:0 16px 28px -14px rgba(18,32,26,0.35);}
        .countdown li:not(:last-child)::after{
            content:":";position:absolute;top:14px;right:-8px;font-family:var(--mono);font-size:22px;
            font-weight:600;color:var(--line);z-index:2;
        }
        @media (max-width:420px){ .countdown li:not(:last-child)::after{display:none;} }


        .countdown li:nth-child(1){background:linear-gradient(160deg,#EAF4EE 0%,#DCEEE3 100%);}
        .countdown li:nth-child(1) .count-number{color:#256B45;}
        .countdown li:nth-child(2){background:linear-gradient(160deg,#FCF3E3 0%,#F8E7C6 100%);}
        .countdown li:nth-child(2) .count-number{color:#A5761F;}
        .countdown li:nth-child(3){background:linear-gradient(160deg,#E9F0FA 0%,#D8E6F8 100%);}
        .countdown li:nth-child(3) .count-number{color:#2C579C;}
        .countdown li:nth-child(4){background:linear-gradient(160deg,#FBEAEA 0%,#F6D9D5 100%);}
        .countdown li:nth-child(4) .count-number{color:#B24638;}


        /* ============ About ============ */
        .about-grid{
            display:grid;
            grid-template-columns:.85fr 1.15fr;
            gap:56px;align-items:center;
            max-width: 1515px;}
        .about-grid img{border-radius:var(--radius);}
        .about-grid p{color:var(--muted);font-size:15.5px;}
        .about-facts{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
        .about-facts li{
            font-family:var(--mono);font-size:13px;color:var(--text);
            border-left:2px solid var(--accent);padding-left:12px;
        }
        .about-facts li b{display:block;font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;}
        @media (max-width:800px){ .about-grid{grid-template-columns:1fr;} }

        /* ============ Speakers (light band, flip cards) ============ */


        .speaker-slider{
            overflow:hidden;
        }
        .speaker-track{
            display:flex;gap:28px;width:max-content;
            animation:speakerSlide var(--slide-duration,30s) linear infinite;
        }
        .speaker-slider:hover .speaker-track{animation-play-state:paused;}
        @keyframes speakerSlide{
            from{transform:translateX(0);}
            to{transform:translateX(-50%);}
        }
        @media (prefers-reduced-motion: reduce){
            .speaker-track{animation:none;}
        }
        .flip-card{
            perspective:1300px;height:400px;
            flex:0 0 300px;width:300px;
        }
        @media (max-width:600px){ .flip-card{flex-basis:250px;width:250px;} }
        .flip-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d;}
        .flip-card.is-flipped .flip-inner{transform:rotateY(180deg);}
        .flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden;}
        .flip-front{background:var(--card);display:flex;flex-direction:column;border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(18,32,26,0.28);}
        .flip-photo{position:relative;flex:1;overflow:hidden;background:var(--paper-2);}
        .flip-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
        .flip-card:hover .flip-photo img{transform:scale(1.06);}
        .flip-photo::after{
            content:"";position:absolute;inset:0;
            background:linear-gradient(180deg, rgba(14,23,18,0) 60%, rgba(14,23,18,0.32) 100%);
            pointer-events:none;
        }
        .flip-caption{padding:18px 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:var(--card);border-top:1px solid var(--line);}
        .flip-caption h4{margin:0;font-size:18px;color:var(--text);}
        .flip-caption span{
            display:inline-flex;font-size:11px;font-weight:600;letter-spacing:.04em;
            color:var(--accent);background:var(--accent-soft);border-radius:100px;
            padding:3px 10px;margin-top:7px;
        }
        .view-more-btn, .close-btn{
            flex-shrink:0;background:transparent;border:1px solid var(--accent);color:var(--accent);
            font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
            padding:8px 14px;border-radius:100px;cursor:pointer;white-space:nowrap;font-family:var(--body);
            transition:background .2s ease,color .2s ease;
        }
        .view-more-btn:hover{background:var(--accent);color:#fff;}
        .flip-back{
            background:linear-gradient(160deg, var(--ink) 0%, #1B2B21 100%);
            border:1px solid var(--ink);transform:rotateY(180deg);padding:28px;
            display:flex;flex-direction:column;justify-content:space-between;
        }
        .flip-back::before{content:"";display:block;width:32px;height:3px;background:var(--accent-2);border-radius:3px;margin-bottom:16px;}
        .flip-back h4{margin:0 0 4px;font-size:20px;color:#fff;}
        .flip-back .role{
            display:inline-flex;font-size:11px;font-weight:600;letter-spacing:.04em;
            color:var(--ink);background:var(--accent-2);border-radius:100px;padding:3px 10px;margin-bottom:16px;
        }
        .flip-back p{margin:0;font-size:14px;color:var(--muted-on-ink);line-height:1.7;}
        .flip-back-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
        .speaker-social{list-style:none;display:flex;gap:10px;padding:0;margin:0;}
        .speaker-social a{
            width:32px;height:32px;border-radius:50%;border:1px solid var(--line-on-ink);
            display:flex;align-items:center;justify-content:center;color:var(--muted-on-ink);
            transition:border-color .2s ease,color .2s ease,background .2s ease;
        }
        .speaker-social a svg{width:14px;height:14px;fill:currentColor;stroke:none;}
        .speaker-social a:hover{border-color:var(--accent-2);color:var(--ink);background:var(--accent-2);}
        .close-btn{border-color:var(--line-on-ink);color:var(--muted-on-ink);}
        .close-btn:hover{color:var(--accent-2);border-color:var(--accent-2);background:transparent;}

        /* ============ Gallery (past edition) ============ */
        .gallery-grid{
            display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:16px;
        }
        .gallery-grid a{
            position:relative;border-radius:12px;overflow:hidden;display:block;background:var(--paper-2);
            box-shadow:0 14px 30px -20px rgba(18,32,26,0.35);
        }
        .gallery-grid a:nth-child(5n/**/+1){grid-column:span 2;grid-row:span 2;}
        .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
        .gallery-grid a:hover img{transform:scale(1.08);}
        .gallery-grid a::after{
            content:"";position:absolute;inset:0;
            background:linear-gradient(180deg, rgba(14,23,18,0) 45%, rgba(14,23,18,0.78) 100%);
            opacity:0;transition:opacity .25s ease;
        }
        .gallery-grid a:hover::after{opacity:1;}
        .gallery-caption{
            position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;
            font-family:var(--body);font-size:13px;font-weight:500;color:#fff;
            transform:translateY(10px);opacity:0;transition:transform .25s ease, opacity .25s ease;
        }
        .gallery-grid a:hover .gallery-caption{transform:translateY(0);opacity:1;}
        .gallery-zoom{
            position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;
            background:rgba(14,23,18,0.55);backdrop-filter:blur(2px);
            display:flex;align-items:center;justify-content:center;color:#fff;
            opacity:0;transform:scale(.85);transition:opacity .2s ease, transform .2s ease;
        }
        .gallery-grid a:hover .gallery-zoom{opacity:1;transform:scale(1);}
        .gallery-zoom svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
        @media (max-width:900px){
            .gallery-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:140px;gap:12px;}
        }
        @media (max-width:600px){
            .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:10px;}
            .gallery-grid a:nth-child(5n/**/+1){grid-column:span 2;grid-row:span 1;}
            .gallery-caption{font-size:12px;padding:12px;}
        }

        /* ============ Schedule ============ */
        .schedule-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px;}
        .schedule-tabs button{
            font-family:var(--body);font-weight:600;font-size:13.5px;
            background:var(--card);border:1px solid var(--line);border-radius:100px;
            padding:12px 20px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
            transition:border-color .2s ease, background .2s ease;
        }
        .schedule-tabs button span{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:400;}
        .schedule-tabs button.active{background:var(--ink);border-color:var(--ink);color:#fff;}
        .schedule-tabs button.active span{color:var(--accent-2);}
        .day-panel{display:none;}
        .day-panel.active{display:block;}
        .session-row{
            display:grid;grid-template-columns:150px 1fr 190px 120px;gap:18px;align-items:center;
            padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:8px;margin-bottom:10px;
        }
        .session-row .time{font-family:var(--mono);font-size:13.5px;color:var(--accent);}
        .session-row .speaker{font-size:13px;color:var(--muted);}
        .session-row .room{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;}
        @media (max-width:780px){
            .session-row{grid-template-columns:1fr;gap:6px;padding:16px;}
            .session-row .room{text-align:left;}
        }

        /* ============ Pricing ============ */
        .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
        @media (max-width:900px){ .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;} }
        .price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:36px 30px;position:relative;}
        .price-card.featured{background:var(--ink);color:#fff;border-color:var(--ink);}
        .price-card.featured .price-perks li{color:var(--muted-on-ink);}
        .price-card.featured .name{color:var(--accent-2);}
        .badge{
            position:absolute;top:-13px;right:28px;background:var(--accent-2);color:var(--ink);
            font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
            padding:5px 12px;border-radius:100px;font-weight:600;
        }
        .price-card .name{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
        .price-card .amount{font-family:var(--disp);font-size:46px;margin:10px 0 24px;}
        .price-card .amount sup{font-size:20px;vertical-align:8px;margin-right:2px;}
        .price-perks{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:11px;}
        .price-perks li{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:10px;}
        .price-perks li.off{opacity:.45;text-decoration:line-through;}
        .price-perks .icon{margin-top:3px;color:var(--accent);}
        .price-card.featured .price-perks .icon{color:var(--accent-2);}
        .price-card .btn{width:100%;justify-content:center;}

        /* ============ Sponsors ============ */
        .sponsor-tier{margin-bottom:44px;}
        .sponsor-tier h5{
            font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
            margin:0 0 20px;display:flex;align-items:center;gap:14px;
        }
        .sponsor-tier h5::after{content:"";flex:1;height:1px;background:var(--line);}
        .sponsor-row{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;
        }
        .sponsor-tier.tier-platinum .sponsor-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
        .sponsor-logo{
            background:var(--card);border:1px solid var(--line);border-radius:12px;
            display:flex;align-items:center;justify-content:center;padding:22px;
            height:130px;box-shadow:0 10px 24px -18px rgba(18,32,26,0.25);
            transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .sponsor-tier.tier-platinum .sponsor-logo{height:150px;padding:26px;}
        .sponsor-logo:hover{transform:translateY(-4px);box-shadow:0 16px 30px -16px rgba(18,32,26,0.32);border-color:var(--accent);}
        .sponsor-logo img{max-height:100%;max-width:100%;object-fit:contain;}
        @media (max-width:600px){
            .sponsor-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;}
            .sponsor-logo{height:96px;padding:14px;border-radius:10px;}
            .sponsor-tier.tier-platinum .sponsor-logo{height:115px;}
        }

        /* ============ Video CTA ============ */
        .video-cta{
            background:var(--accent-soft);color:var(--text);text-align:center;padding:110px 0;
            position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
        }
        .video-cta::before{
            content:"";position:absolute;inset:0;
            background-image:repeating-linear-gradient(90deg, rgba(47,111,78,0.06) 0 1px, transparent 1px 48px);
        }
        .play-btn{
            position:relative;width:84px;height:84px;border-radius:50%;background:var(--accent);
            display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
            transition:transform .2s ease;box-shadow:0 16px 30px -14px rgba(47,111,78,0.5);
        }
        .play-btn:hover{transform:scale(1.08);}
        .play-btn svg{width:26px;height:26px;fill:#fff;margin-left:3px;}
        .video-cta h3{color:var(--text);font-size:26px;position:relative;}
        .video-cta p{color:var(--muted);position:relative;margin:0;}

        /* ============ News ============ */
        .news-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
        @media (max-width:800px){ .news-grid{grid-template-columns:1fr;} }
        .news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
        .news-card .image{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);}
        .news-card .image img{width:100%;height:100%;object-fit:cover;}
        .news-body{padding:26px;}
        .post-meta{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px;padding:0;font-family:var(--mono);font-size:11.5px;color:var(--muted);}
        .news-body h4{font-size:19px;margin:0 0 10px;}
        .news-body p{color:var(--muted);font-size:14.5px;margin:0 0 16px;}
        .read-more{font-size:13px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px;}

        /* ============ Newsletter ============ */
        .newsletter{background:var(--card);color:var(--text);text-align:center;border-top:1px solid var(--line);}
        .newsletter .inner{max-width:520px;margin:0 auto;}
        .newsletter h3{color:var(--text);font-size:26px;}
        .newsletter p{color:var(--muted);margin:0 0 26px;}
        .newsletter-form{display:flex;gap:10px;}
        .newsletter-form input[type=email]{
            flex:1;padding:14px 18px;border-radius:100px;border:1px solid var(--line);
            background:var(--paper);color:var(--text);font-family:var(--body);font-size:14px;
        }
        .newsletter-form input::placeholder{color:var(--muted);}
        @media (max-width:520px){ .newsletter-form{flex-direction:column;} }

        /* ============ Footer ============ */
        footer{background:var(--ink);color:var(--muted-on-ink);padding:0;border-top:1px solid var(--line-on-ink);}
        footer[id]{scroll-margin-top:var(--header-offset,140px);}
        .footer-top{padding:72px 0 48px;}
        .footer-grid{
            display:grid;grid-template-columns:1.1fr .9fr .9fr 1fr 1.2fr;gap:40px;align-items:stretch;
        }
        @media (max-width:1200px){
            .footer-grid{grid-template-columns:1fr 1fr 1fr;}
            .footer-map-col{grid-column:1 / -1;order:5;}
        }
        @media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }

        /* -- Footer venue map (moved out of the old full-width strip) -- */
        .footer-map-col{
            border-radius:12px;overflow:hidden;border:1px solid var(--line-on-ink);
            min-height:260px;background:var(--ink-2);
        }
        .footer-map-col iframe{width:100%;height:100%;min-height:260px;border:0;display:block;filter:grayscale(.3) contrast(1.05);}
        .footer-col h4{color:#fff;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 20px;}
        .footer-brand-name{font-family:var(--disp);font-weight:700;font-size:26px;color:#fff;margin-bottom:14px;}
        .footer-brand-name span{color:var(--accent-2);}
        .footer-col p{font-size:14px;line-height:1.7;color:var(--muted-on-ink);margin:0 0 20px;}
        .footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
        .footer-links a{font-size:14px;color:var(--muted-on-ink);transition:color .2s ease;}
        .footer-links a:hover{color:var(--accent-2);}
        .footer-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
        .footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted-on-ink);line-height:1.6;}
        .footer-contact .icon{color:var(--accent-2);margin-top:3px;}
        .footer-map-link{
            display:inline-flex;align-items:center;gap:8px;margin-top:8px;
            font-size:13px;font-weight:600;color:var(--accent-2);border-bottom:1px solid transparent;
        }
        .footer-map-link:hover{border-color:var(--accent-2);}
        .footer-social{list-style:none;display:flex;gap:12px;padding:0;margin:0;}
        .footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-on-ink);color:var(--muted-on-ink);display:flex;align-items:center;justify-content:center;font-size:13px;transition:border-color .2s ease,color .2s ease;}
        .footer-social a:hover{border-color:var(--accent-2);color:var(--accent-2);}
        .footer-bottom{border-top:1px solid var(--line-on-ink);padding:26px 0;}
        .footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
        .footer-bottom p{margin:0;font-size:13px;color:var(--muted-on-ink);}
        .footer-bottom .fine a{color:var(--accent-2);}
        .footer-legal{list-style:none;display:flex;gap:22px;margin:0;padding:0;}
        .footer-legal a{font-size:13px;color:var(--muted-on-ink);}
        .footer-legal a:hover{color:#fff;}


/* =========================================================
   CBC 3.0 — PREMIUM HERO
   ========================================================= */


/* ---------------------------------------------------------
   BACKGROUND
   --------------------------------------------------------- */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Blur + reduced contrast */
    filter:
        blur(3px)
        brightness(0.48)
        contrast(0.72)
        saturate(0.72);

    transform: scale(1.05);
}

/* Dark green cinematic overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4, 31, 25, 0.92) 0%,
            rgba(5, 38, 31, 0.70) 35%,
            rgba(3, 29, 25, 0.55) 65%,
            rgba(3, 25, 21, 0.78) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4, 24, 20, 0.40),
            rgba(3, 26, 22, 0.80)
        );
}

/* Central soft glow */
.hero-glow {
    position: absolute;
    width: 900px;
    height: 700px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 2;

    background:
        radial-gradient(
            ellipse,
            rgba(42, 190, 159, 0.18) 0%,
            rgba(25, 130, 110, 0.08) 35%,
            transparent 72%
        );

    pointer-events: none;
}

.hero-inner {
    width: 100%;
    position: relative;
    z-index: 5;
}

.hero-content {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    text-align: center;
}


.hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    color: #e6c15b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    margin-bottom: 20px;

    text-shadow:
        0 0 15px rgba(230, 193, 91, 0.35);
}

.hero-eyebrow span {
    width: 55px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #d9b34f
    );
}

.hero-eyebrow span:last-child {
    background: linear-gradient(
        90deg,
        #d9b34f,
        transparent
    );
}

/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.hero-title {
    line-height: 0.88;
    margin: 0 auto;

    perspective: 1000px;
}

.title-line {
    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 900;

    transform-style: preserve-3d;

    text-transform: uppercase;
}



.title-conference strong {
    color: #fff0ad;

    text-shadow:
        0 2px 0 #c28d18,
        0 5px 0 #91640b,
        0 9px 0 #624407,
        0 0 20px rgba(255,210,80,0.45);
}

/* ---------------------------------------------------------
   DIVIDER
   --------------------------------------------------------- */

.hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    max-width: 850px;
    margin: 27px auto 12px;
}

.hero-divider span {
    height: 2px;
    flex: 1;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(69, 224, 187, 0.9)
    );

    box-shadow:
        0 0 10px rgba(69, 224, 187, 0.45);
}

.hero-divider span:last-child {
    background: linear-gradient(
        90deg,
        rgba(69, 224, 187, 0.9),
        transparent
    );
}

.dna-mini {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 3px;

    color: #70e7c8;

    border: 1px solid rgba(112,231,200,0.7);
    border-radius: 50%;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 0 15px rgba(112,231,200,0.25),
        inset 0 0 12px rgba(112,231,200,0.12);
}

/* ---------------------------------------------------------
   TAGLINE
   --------------------------------------------------------- */

.hero-tagline {
    color: #d8fff4;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    letter-spacing: 5px;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.8);

    margin-bottom: 25px;
}

.hero-tagline b {
    color: #e7c04d;
    padding: 0 8px;
}

/* ---------------------------------------------------------
   COUNTDOWN
   --------------------------------------------------------- */

.countdown-card {
    position: relative;

    max-width: 850px;
    margin: 0 auto 30px;

    padding: 22px 28px 24px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.13),
            rgba(255,255,255,0.035)
        );

    border: 1px solid rgba(103, 235, 202, 0.45);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 0 35px rgba(44,207,170,0.10);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Glowing top line */

.countdown-card::before {
    content: "";
    position: absolute;

    top: -1px;
    left: 15%;
    right: 15%;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #52e2bd,
        #f2c44f,
        #52e2bd,
        transparent
    );

    box-shadow:
        0 0 15px rgba(82,226,189,0.7);
}

/* Countdown heading */

.countdown-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 4px;

    color: #bcefe2;

    margin-bottom: 7px;
}

.countdown-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #55e1ba;

    box-shadow:
        0 0 0 4px rgba(85,225,186,0.10),
        0 0 15px #55e1ba;

    animation: pulseStatus 1.8s infinite;
}

@keyframes pulseStatus {

    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.75);
    }

}

/* Until */

.until {
    text-align: center;

    color: rgba(255,255,255,0.75);

    font-size: 13px;

    margin-bottom: 18px;
}

.until strong {
    color: #ffffff;
    margin-left: 4px;
}

/* Countdown list */

.countdown {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* Individual boxes */

.count-box {
    position: relative;

    width: 145px;
    height: 105px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.14),
            rgba(0,0,0,0.18)
        );

    border: 1px solid rgba(255,255,255,0.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 12px 25px rgba(0,0,0,0.25);

    transform: translateZ(0);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.count-box:hover {
    transform:
        translateY(-5px)
        rotateX(4deg);

    box-shadow:
        0 18px 30px rgba(0,0,0,0.35),
        0 0 20px rgba(68,218,182,0.15);
}

/* Numbers */

.count-number {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 43px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: 2px;

    text-shadow:
        0 4px 12px rgba(0,0,0,0.45);
}

/* Different biology-inspired tones */

.count-days .count-number {
    color: #ff8fbe;
}

.count-hours .count-number {
    color: #f2cc62;
}

.count-minutes .count-number {
    color: #72d8f2;
}

.count-seconds .count-number {
    color: #ff8fbe;
}

/* Labels */

.count-text {
    margin: 8px 0 0;

    color: rgba(255,255,255,0.72);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}

/* Separators */

.count-separator {
    color: rgba(255,255,255,0.5);

    font-size: 30px;
    font-weight: 300;

    margin-top: -8px;
}

/* ---------------------------------------------------------
   EVENT META
   --------------------------------------------------------- */

.hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px 28px;

    margin: 25px auto 25px;

    color: rgba(255,255,255,0.92);

    font-size: 13px;
}

.hero-meta-item {
    display: flex;
    align-items: center;

    gap: 8px;
}

.hero-meta-item svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: #5ce1bd;

    stroke-width: 1.8;

    filter:
        drop-shadow(0 0 5px rgba(92,225,189,0.4));
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.hero-actions {
    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 15px;
}

.hero-actions .btn {
    min-width: 155px;

    padding: 13px 25px;

    border-radius: 40px;

    font-weight: 800;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.hero-actions .btn:hover {
    transform: translateY(-3px);
}

/* Primary */

.hero-actions .btn-primary {
    background:
        linear-gradient(
            135deg,
            #e8bd38,
            #b98505
        );

    color: #17251e;

    border: 1px solid #f5d46d;

    box-shadow:
        0 8px 25px rgba(210,160,35,0.3),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.hero-actions .btn-primary span {
    margin-left: 8px;
}

/* Secondary */

.hero-actions .btn-on-ink {
    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.5);

    background: rgba(255,255,255,0.06);

    backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------
   DNA / MOLECULAR DECORATIONS
   --------------------------------------------------------- */

.bio-decoration {
    position: absolute;

    pointer-events: none;

    color: rgba(72, 224, 190, 0.38);

    z-index: -1;

    filter:
        drop-shadow(0 0 15px rgba(72,224,190,0.18));
}

.bio-dna-left {
    width: 130px;
    height: 350px;

    left: 3%;
    top: 23%;

    animation: dnaFloat 7s ease-in-out infinite;
}

.bio-molecule {
    width: 180px;
    height: 180px;

    right: 4%;
    top: 27%;

    color: rgba(91, 220, 245, 0.35);

    animation: moleculeFloat 8s ease-in-out infinite;
}

@keyframes dnaFloat {

    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-18px) rotate(3deg);
    }

}

@keyframes moleculeFloat {

    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(8deg);
    }

}

/* Floating particles */

.bio-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #64e5c2;

    box-shadow:
        0 0 12px #64e5c2;

    opacity: 0.7;

    z-index: -1;
}

.particle-1 {
    left: 17%;
    top: 22%;
}

.particle-2 {
    left: 24%;
    top: 68%;
}

.particle-3 {
    right: 20%;
    top: 19%;
}

.particle-4 {
    right: 15%;
    bottom: 25%;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 992px) {

    .hero {
        min-height: auto;
    }

    .hero-content {
        padding: 55px 18px 60px;
    }

    .bio-dna-left {
        opacity: 0.4;
        left: -35px;
    }

    .bio-molecule {
        opacity: 0.35;
        right: -45px;
    }

    .count-box {
        width: 125px;
        height: 100px;
    }

}

@media (max-width: 768px) {

    .hero-content {
        padding: 45px 15px 50px;
    }

    .hero-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero-eyebrow span {
        width: 30px;
    }

    .title-computational {
        font-size: clamp(36px, 10vw, 62px);
        letter-spacing: 1px;
    }

    .title-biology {
        font-size: clamp(55px, 15vw, 95px);
        letter-spacing: 1px;
    }

    .title-conference {
        font-size: clamp(28px, 7vw, 50px);
        letter-spacing: 1px;
    }

    .hero-divider {
        margin-top: 20px;
    }

    .hero-tagline {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .countdown-card {
        padding: 18px 10px;
        border-radius: 18px;
    }

    .countdown {
        gap: 4px;
    }

    .count-box {
        width: 22vw;
        max-width: 110px;
        height: 85px;
        border-radius: 12px;
    }

    .count-number {
        font-size: clamp(25px, 7vw, 38px);
    }

    .count-text {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .count-separator {
        font-size: 20px;
    }

    .hero-meta {
        flex-direction: column;
        gap: 9px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: center;
    }

    .hero-actions .btn {
        width: 220px;
    }

    .bio-dna-left,
    .bio-molecule {
        opacity: 0.18;
    }

}

@media (max-width: 480px) {

    .hero-eyebrow {
        margin-bottom: 15px;
    }

    .hero-tagline b {
        padding: 0 3px;
    }

    .countdown-heading {
        font-size: 8px;
        letter-spacing: 2px;
    }

    .until {
        font-size: 10px;
    }

    .count-box {
        height: 75px;
    }

    .count-text {
        margin-top: 5px;
    }

    .count-separator {
        display: none;
    }

}


/* =========================================================
   CBC 3.0 HERO - FINAL VISUAL FIXES
   ========================================================= */

/* ---------------------------------------------------------
   1. FIX BACKGROUND IMAGE LAYER
   --------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Make sure hero itself does not hide the image */
    background: #071c17;
}

/* Background image must be ABOVE hero background */


/* ---------------------------------------------------------
   2. DARK GREEN OVERLAY
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   3. CENTRAL GLOW
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   4. BIOLOGY DECORATIONS
   --------------------------------------------------------- */

.hero .bio-decoration,
.hero .bio-particle {
    z-index: 3;
}


/* ---------------------------------------------------------
   5. HERO CONTENT MUST STAY ON TOP
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   6. COUNTDOWN CARD
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   7. COUNTDOWN HEADING
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   8. CONFERENCE BEGINS TEXT
   --------------------------------------------------------- */


.hero .countdown-card .until strong {
    color: #ffffff !important;

    font-weight: 800;

    text-shadow:
        0 2px 7px rgba(0,0,0,0.75);
}


/* ---------------------------------------------------------
   9. COUNTDOWN BOXES
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   10. DAYS - DARK GREEN
   --------------------------------------------------------- */

.hero .count-days {
    background:
        linear-gradient(
            145deg,
            rgba(202, 240, 221, 0.92),
            rgba(157, 210, 190, 0.88)
        );

    border-color: rgba(89, 180, 143, 0.75);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 10px 25px rgba(0,0,0,0.30),
        0 0 15px rgba(55,180,140,0.10);
}

.hero .count-days .count-number {
    color: #075b43 !important;

    font-weight: 950;

    text-shadow:
        0 2px 0 rgba(255,255,255,0.40),
        0 4px 8px rgba(0,0,0,0.20);
}

.hero .count-days .count-text {
    color: #164c3b !important;

    font-weight: 900;

    text-shadow: none;
}


/* ---------------------------------------------------------
   11. HOURS - DARK BLUE
   --------------------------------------------------------- */

.hero .count-hours {
    background:
        linear-gradient(
            145deg,
            rgba(215, 228, 246, 0.94),
            rgba(174, 198, 229, 0.90)
        );

    border-color: rgba(86, 130, 190, 0.75);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 10px 25px rgba(0,0,0,0.30),
        0 0 15px rgba(66,120,190,0.10);
}

.hero .count-hours .count-number {
    color: #174b88 !important;

    font-weight: 950;

    text-shadow:
        0 2px 0 rgba(255,255,255,0.45),
        0 4px 8px rgba(0,0,0,0.20);
}

.hero .count-hours .count-text {
    color: #274c75 !important;

    font-weight: 900;

    text-shadow: none;
}


/* ---------------------------------------------------------
   12. MINUTES
   --------------------------------------------------------- */

.hero .count-minutes {
    background:
        linear-gradient(
            145deg,
            rgba(31, 61, 63, 0.82),
            rgba(17, 45, 45, 0.82)
        );
}

.hero .count-minutes .count-number {
    color: #67d9ee !important;

    text-shadow:
        0 0 12px rgba(103,217,238,0.25),
        0 3px 8px rgba(0,0,0,0.55);
}

.hero .count-minutes .count-text {
    color: #d1f5fa !important;
}


/* ---------------------------------------------------------
   13. SECONDS
   --------------------------------------------------------- */

.hero .count-seconds {
    background:
        linear-gradient(
            145deg,
            rgba(48, 43, 53, 0.84),
            rgba(29, 30, 38, 0.84)
        );
}

.hero .count-seconds .count-number {
    color: #ff82b4 !important;

    text-shadow:
        0 0 12px rgba(255,130,180,0.25),
        0 3px 8px rgba(0,0,0,0.55);
}

.hero .count-seconds .count-text {
    color: #ffe0ed !important;
}


/* ---------------------------------------------------------
   14. COUNTDOWN SEPARATORS
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   15. EVENT META - KEEP ABOVE IMAGE
   --------------------------------------------------------- */


.hero .hero-meta-item span {
    color: #f0f7f4;
    text-shadow:
        0 2px 6px rgba(0,0,0,0.75);
}


/* ---------------------------------------------------------
   16. MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .hero .hero-bg img {
        filter:
            blur(2px)
            brightness(0.48)
            contrast(0.75)
            saturate(0.70);

        transform: scale(1.05);
    }

    .hero .countdown-card {
        background:
            rgba(7, 32, 27, 0.78);
    }

}


```css
/* =========================================================
   CBC 3.0 — FULL SCREEN RESPONSIVE HERO
   ========================================================= */

/*
   Your header + navigation currently occupy roughly
   230px on desktop.

   The hero takes the remaining viewport height.
*/


/* =========================================================
   DESKTOP
   ========================================================= */

.hero {
    position: relative;

    /*
       Fill the remaining screen after:
       topbar + logo/header + navigation
    */
    height: calc(100vh - 233px);

    min-height: 610px;

    max-height: calc(100vh - 233px);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    isolation: isolate;

    background: #061c17;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.hero .hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 3;

    overflow: hidden;
}

.hero .hero-bg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Slight blur + darkening.
       The photograph remains clearly visible.
    */
    filter:
        blur(2px)
        brightness(0.56)
        contrast(0.78)
        saturate(0.78);

    transform: scale(1.04);

    display: block;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.hero .hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 29, 23, 0.72),
            rgba(4, 40, 31, 0.42),
            rgba(3, 29, 24, 0.70)
        ),
        linear-gradient(
            180deg,
            rgba(2, 25, 21, 0.28),
            rgba(2, 26, 21, 0.60)
        );
}


/* =========================================================
   GLOW
   ========================================================= */

.hero .hero-glow {
    position: absolute;

    width: 850px;
    height: 650px;

    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(43, 191, 157, 0.15) 0%,
            rgba(30, 120, 100, 0.06) 40%,
            transparent 72%
        );
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero .hero-inner {
    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.hero .hero-content {

    width: 100%;
    max-width: 1250px;

    /*
       Reduce padding so everything fits
       inside one screen.
    */
    padding: 20px 20px 24px;

    text-align: center;

    margin: 0 auto;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero .hero-eyebrow {
    margin-bottom: 10px;

    font-size: clamp(9px, 0.75vw, 13px);

    letter-spacing: 4px;
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.hero .hero-title {
    line-height: 0.82;
}


/* Computational */

.hero .title-computational {
    font-size: clamp(
        48px,
        6.1vw,
        92px
    );

    letter-spacing: 2px;
}


/* Biology */

.hero .title-biology {
    font-size: clamp(
        62px,
        8.3vw,
        125px
    );

    margin-top: 4px;
}


/* Conference */

.hero .title-conference {
    font-size: clamp(
        32px,
        4.4vw,
        65px
    );

    margin-top: 8px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.hero .hero-divider {
    margin-top: 16px;
    margin-bottom: 7px;

    max-width: 650px;
}

.hero .dna-mini {
    width: 34px;
    height: 34px;

    font-size: 8px;
}


/* =========================================================
   TAGLINE
   ========================================================= */

.hero .hero-tagline {
    font-size: 11px;

    letter-spacing: 4px;

    margin-bottom: 13px;
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.hero .countdown-card {

    max-width: 690px;

    margin: 0 auto 15px;

    padding: 12px 20px 14px;

    border-radius: 18px;
}


/* Countdown heading */

.hero .countdown-heading {
    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 4px;
}


/* Conference begins */

.hero .countdown-card .until {

    font-size: 15px;

    margin-bottom: 9px;
}


/* Countdown row */

.hero .countdown {

    gap: 8px;
}


/* Countdown boxes */

.hero .count-box {

    width: 115px;
    height: 72px;

    border-radius: 12px;
}


/* Numbers */

.hero .count-number {

    font-size: 32px;
}


/* Labels */

.hero .count-text {

    font-size: 7px;

    letter-spacing: 1.5px;

    margin-top: 4px;
}


/* Separators */

.hero .count-separator {

    font-size: 22px;
}


/* =========================================================
   EVENT META
   ========================================================= */

.hero .hero-meta {

    margin: 10px auto 12px;

    gap: 8px 22px;

    font-size: 12px;
}


/* Icons */

.hero .hero-meta-item svg {

    width: 16px;
    height: 16px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero .hero-actions {

    margin-top: 5px;

    gap: 10px;
}

.hero .hero-actions .btn {

    min-width: 135px;

    padding: 9px 20px;

    font-size: 12px;
}


/* =========================================================
   BIOLOGY DECORATIONS
   ========================================================= */

.hero .bio-dna-left {

    width: 105px;
    height: 280px;

    left: 2%;

    top: 25%;

    opacity: 0.65;
}


.hero .bio-molecule {

    width: 140px;
    height: 140px;

    right: 3%;

    top: 28%;

    opacity: 0.65;
}


/* =========================================================
   SHORT DESKTOP SCREENS
   Example: laptop 1366x768
   ========================================================= */

@media (max-height: 800px) and (min-width: 769px) {

    .hero {
        height: calc(100vh - 233px);
        min-height: 535px;
    }

    .hero .hero-content {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .hero .hero-eyebrow {
        margin-bottom: 6px;
    }

    .hero .title-computational {
        font-size: clamp(42px, 5.7vw, 75px);
    }

    .hero .title-biology {
        font-size: clamp(55px, 7.5vw, 105px);
    }

    .hero .title-conference {
        font-size: clamp(28px, 3.8vw, 55px);
    }

    .hero .hero-divider {
        margin-top: 10px;
        margin-bottom: 4px;
    }

    .hero .hero-tagline {
        margin-bottom: 8px;
    }

    .hero .countdown-card {
        padding: 9px 18px 10px;
        margin-bottom: 9px;
    }

    .hero .count-box {
        height: 65px;
        width: 105px;
    }

    .hero .count-number {
        font-size: 29px;
    }

    .hero .hero-meta {
        margin-top: 7px;
        margin-bottom: 8px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hero {

        /*
           Tablet header can be slightly different,
           therefore don't force an extremely small height.
        */
        height: auto;

        min-height: calc(100vh - 210px);

        max-height: none;
    }

    .hero .hero-inner {
        height: auto;
    }

    .hero .hero-content {
        padding: 45px 20px 50px;
    }

    .hero .count-box {
        width: 110px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hero {

        height: auto;

        min-height: calc(100dvh - 160px);

        max-height: none;

        display: flex;

        align-items: center;
    }


    /* Background */

    .hero .hero-bg img {

        filter:
            blur(2px)
            brightness(0.45)
            contrast(0.76)
            saturate(0.72);

        transform: scale(1.06);
    }


    /* Content */

    .hero .hero-content {

        padding:

            35px
            14px
            40px;
    }


    /* Eyebrow */

    .hero .hero-eyebrow {

        font-size: 8px;

        letter-spacing: 2px;

        gap: 8px;

        margin-bottom: 12px;
    }

    .hero .hero-eyebrow span {

        width: 25px;
    }


    /* Main heading */

    .hero .title-computational {

        font-size: clamp(
            29px,
            9.5vw,
            52px
        );

        letter-spacing: 1px;
    }


    .hero .title-biology {

        font-size: clamp(
            45px,
            14vw,
            76px
        );

        letter-spacing: 0;
    }


    .hero .title-conference {

        font-size: clamp(
            24px,
            7vw,
            38px
        );

        letter-spacing: 0;

        margin-top: 8px;
    }


    /* Divider */

    .hero .hero-divider {

        margin-top: 14px;

        gap: 8px;
    }

    .hero .dna-mini {

        width: 30px;
        height: 30px;

        font-size: 7px;
    }


    /* Tagline */

    .hero .hero-tagline {

        font-size: 8px;

        letter-spacing: 2px;

        margin-bottom: 15px;
    }

    .hero .hero-tagline b {

        padding: 0 3px;
    }


    /* Countdown */

    .hero .countdown-card {

        width: 100%;

        padding: 13px 7px 14px;

        margin-bottom: 15px;

        border-radius: 15px;
    }


    .hero .countdown-heading {

        font-size: 7px;

        letter-spacing: 2px;

        margin-bottom: 5px;
    }


    .hero .countdown-card .until {

        font-size: 15px;

        margin-bottom: 10px;
    }


    .hero .countdown {

        gap: 4px;

        width: 100%;
    }


    .hero .count-box {

        width: calc(25% - 4px);

        max-width: none;

        height: 68px;

        border-radius: 10px;
    }


    .hero .count-number {

        font-size: clamp(
            23px,
            7vw,
            32px
        );
    }


    .hero .count-text {

        font-size: 6px;

        letter-spacing: 1px;

        margin-top: 4px;
    }


    .hero .count-separator {

        font-size: 16px;

        margin: 0;

        display: none;
    }


    /* Meta */

    .hero .hero-meta {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 7px;

        margin: 12px auto 15px;

        font-size: 9px;
    }


    .hero .hero-meta-item {

        justify-content: center;

        text-align: center;
    }


    .hero .hero-meta-item svg {

        width: 15px;
        height: 15px;

        flex-shrink: 0;
    }


    /* Buttons */

    .hero .hero-actions {

        display: flex;

        flex-direction: row;

        justify-content: center;

        gap: 8px;

        margin-top: 5px;
    }


    .hero .hero-actions .btn {

        min-width: 0;

        width: auto;

        padding: 9px 16px;

        font-size: 10px;
    }


    /* Biology decorations */

    .hero .bio-dna-left {

        width: 75px;
        height: 210px;

        left: -25px;

        top: 23%;

        opacity: 0.25;
    }


    .hero .bio-molecule {

        width: 100px;
        height: 100px;

        right: -25px;

        top: 30%;

        opacity: 0.25;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .hero .hero-content {

        padding:
            25px
            10px
            30px;
    }


    .hero .title-computational {

        font-size: 30px;
    }


    .hero .title-biology {

        font-size: 48px;
    }


    .hero .title-conference {

        font-size: 25px;
    }


    .hero .hero-divider {

        margin-top: 10px;
    }


    .hero .hero-tagline {

        font-size: 7px;

        letter-spacing: 1.5px;

        margin-bottom: 11px;
    }


    .hero .countdown-card {

        padding:
            10px
            5px
            12px;
    }


    .hero .count-box {

        height: 62px;
    }


    .hero .count-number {

        font-size: 22px;
    }


    .hero .count-text {

        font-size: 5px;
    }


    .hero .hero-meta {

        font-size: 8px;

        gap: 5px;
    }


    .hero .hero-actions .btn {

        padding:
            8px
            13px;

        font-size: 9px;
    }

}


/* =========================================================
   VERY SHORT MOBILE SCREENS
   ========================================================= */

@media (max-width: 767px) and (max-height: 700px) {

    .hero .hero-content {

        padding-top: 18px;
        padding-bottom: 22px;
    }

    .hero .hero-eyebrow {
        margin-bottom: 7px;
    }

    .hero .hero-divider {
        margin-top: 8px;
    }

    .hero .hero-tagline {
        margin-bottom: 8px;
    }

    .hero .countdown-card {
        margin-bottom: 9px;
    }

    .hero .hero-meta {
        margin-top: 7px;
        margin-bottom: 9px;
    }

}


.cbc-fees {
    position: relative;

    padding: 90px 0 100px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(46, 111, 78, 0.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(199, 155, 43, 0.06),
            transparent 35%
        ),
        var(--paper-2);

    overflow: hidden;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.cbc-fees .section-header {
    max-width: 850px;

    margin: 0 auto 45px;
}

.cbc-fees .fee-eyebrow {
    color: #b78a16;

    font-weight: 800;

    letter-spacing: 3px;
}

.cbc-fees .section-header h2 {
    margin-top: 10px;

    font-size: clamp(32px, 4vw, 48px);

    color: #163d31;

    font-weight: 800;
}

.cbc-fees .section-header p {
    max-width: 700px;

    margin: 12px auto 0;

    color: #66756f;

    line-height: 1.7;
}


/* =========================================================
   IMPORTANT FEE INFORMATION
   ========================================================= */

.fee-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 38px;
}


.fee-info-card {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 22px;

    border-radius: 16px;

    background:
        rgba(255,255,255,0.88);

    border: 1px solid rgba(22,61,49,0.10);

    box-shadow:
        0 10px 30px rgba(20,45,35,0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.fee-info-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(20,45,35,0.12);
}


.fee-info-icon {

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #0c7057,
            #174936
        );

    color: #ffffff;
}


.fee-info-icon svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;
}


.fee-info-label {

    display: block;

    margin-bottom: 4px;

    color: #65746e;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.fee-info-card strong {

    display: block;

    color: #a87808;

    font-size: 24px;

    line-height: 1.2;
}


.fee-info-card p {

    margin: 5px 0 0;

    color: #68756f;

    font-size: 12px;

    line-height: 1.5;
}


/* Workshop card */

.workshop-card .fee-info-icon {

    background:
        linear-gradient(
            135deg,
            #b78616,
            #d8aa32
        );
}


/* =========================================================
   TABLE CONTAINER
   ========================================================= */

.fee-table-wrapper {

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(21,61,48,0.12);

    box-shadow:
        0 20px 50px rgba(20,45,35,0.09);
}


/* =========================================================
   TABLE TITLE
   ========================================================= */

.fee-table-title {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 24px 28px;

    background:
        linear-gradient(
            135deg,
            #123f32,
            #1d5d47
        );

    color: #ffffff;
}


.table-kicker {

    display: block;

    margin-bottom: 3px;

    color: #daba4f;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}


.fee-table-title h3 {

    margin: 0;

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;
}


.table-note {

    color: rgba(255,255,255,0.72);

    font-size: 11px;

    text-align: right;
}


/* =========================================================
   TABLE SCROLL
   ========================================================= */

.fee-table-scroll {

    width: 100%;

    overflow-x: auto;
}


/* =========================================================
   FEE TABLE
   ========================================================= */

.fee-table {

    width: 100%;

    min-width: 900px;

    border-collapse: separate;

    border-spacing: 0;
}


/* Header */

.fee-table thead th {

    padding: 17px 14px;

    background:
        #dfe8f5;

    color: #173d55;

    border-bottom:
        1px solid #cbd6e5;

    border-right:
        1px solid rgba(80,105,130,0.12);

    font-size: 12px;

    line-height: 1.35;

    text-align: center;

    vertical-align: middle;
}


.fee-table thead th:first-child,
.fee-table thead th:nth-child(2) {

    text-align: left;
}


.fee-table thead th span {

    display: block;

    font-weight: 500;
}


.fee-table thead th strong {

    display: block;

    font-size: 12px;
}


.fee-table thead th small {

    display: block;

    margin-top: 2px;

    color: #a87709;

    font-size: 10px;

    font-weight: 800;
}


/* Highlight workshop + accommodation */

.fee-table thead .highlight-column {

    background:
        linear-gradient(
            180deg,
            #cfdcf1,
            #dce7f6
        );

    position: relative;
}


.fee-table thead .highlight-column::before {

    position: absolute;

    top: 0;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 3px 9px;

    border-radius: 20px;

    background: #c49622;

    color: #ffffff;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================================
   TABLE BODY
   ========================================================= */

.fee-table tbody tr {

    transition:
        background .2s ease;
}


.fee-table tbody tr:hover {

    background:
        #f7fbf9;
}


.fee-table tbody td {

    padding: 17px 14px;

    border-bottom:
        1px solid #e5ebe8;

    border-right:
        1px solid #edf0ee;

    text-align: center;

    color: #263a34;

    font-size: 14px;

    vertical-align: middle;
}


.fee-table tbody tr:last-child td {

    border-bottom: none;
}


/* Serial */

.fee-table .serial {

    width: 60px;

    color: #87958f;

    font-size: 11px;

    font-weight: 800;
}


/* Participant */

.fee-table .participant {

    min-width: 250px;

    text-align: left;
}


.participant-name {

    color: #183f32;

    font-size: 13px;

    font-weight: 800;
}


.participant span {

    display: block;

    margin-top: 3px;

    color: #8a9792;

    font-size: 10px;
}


/* Amount */

.fee-table tbody td strong {

    color: #173f32;

    font-size: 16px;

    font-weight: 850;
}


.currency {

    margin-right: 2px;

    color: #a8780c;

    font-size: 13px;

    font-weight: 800;
}


.currency.usd {

    color: #2965a0;

    font-size: 11px;

    margin-right: 3px;
}


/* Highlight column */

.fee-table .highlight-cell {

    background:
        rgba(198, 155, 42, 0.07);
}


.fee-table .highlight-cell strong {

    color: #a17008;
}


/* =========================================================
   NOTES
   ========================================================= */

.fee-notes {

    display: flex;

    gap: 18px;

    margin-top: 25px;

    padding: 22px 25px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #f4f8f5,
            #edf5f0
        );

    border:
        1px solid #d8e6de;
}


.fee-note-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #d9eee4;

    color: #12634e;
}


.fee-note-icon svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;
}


.fee-notes strong {

    color: #194a3a;

    font-size: 14px;
}


.fee-notes p {

    margin: 6px 0 0;

    color: #62736b;

    font-size: 12px;

    line-height: 1.65;
}


.fee-notes p + p {

    margin-top: 4px;
}


.fee-note-final {

    color: #3f6557 !important;

    font-weight: 600;
}


/* =========================================================
   REGISTRATION CTA
   ========================================================= */

.fee-registration-cta {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 35px;

    padding: 25px 30px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #153f32,
            #215e48
        );

    box-shadow:
        0 15px 35px rgba(20,61,48,0.15);
}


.fee-registration-cta span {

    display: block;

    margin-bottom: 4px;

    color: #bce4d5;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.fee-registration-cta h3 {

    margin: 0;

    color: #ffffff;

    font-size: 20px;
}


.fee-registration-cta .btn {

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            #e5bd43,
            #b78612
        );

    color: #18271f;

    border: 1px solid #f3d36f;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.15);
}


.fee-registration-cta .btn span {

    display: inline;

    margin-left: 8px;

    color: inherit;

    font-size: inherit;

    letter-spacing: 0;

    text-transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .fee-info-grid {

        grid-template-columns:
            1fr;
    }

    .fee-table-title {

        align-items: flex-start;

        flex-direction: column;
    }

    .table-note {

        text-align: left;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .cbc-fees {

        padding: 60px 0 70px;
    }


    .cbc-fees .section-header {

        padding: 0 15px;

        margin-bottom: 30px;
    }


    .cbc-fees .section-header h2 {

        font-size: 30px;
    }


    .cbc-fees .section-header p {

        font-size: 13px;
    }


    .fee-info-grid {

        padding: 0 12px;

        gap: 12px;

        margin-bottom: 25px;
    }


    .fee-info-card {

        padding: 17px;

        gap: 12px;
    }


    .fee-info-icon {

        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .fee-info-card strong {

        font-size: 21px;
    }


    .fee-table-wrapper {

        border-radius: 15px;

        margin: 0 10px;
    }


    .fee-table-title {

        padding: 19px;
    }


    .fee-table-title h3 {

        font-size: 18px;
    }


    .fee-table-scroll {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .fee-table {

        min-width: 850px;
    }


    .fee-notes {

        margin:
            18px 12px 0;

        padding: 18px;

        gap: 12px;
    }


    .fee-registration-cta {

        margin:
            25px 12px 0;

        padding: 22px;

        flex-direction: column;

        align-items: flex-start;
    }


    .fee-registration-cta h3 {

        font-size: 17px;
    }


    .fee-registration-cta .btn {

        width: 100%;

        text-align: center;
    }

}


/* =========================================================
   CBC 3.0 — SPEAKERS SECTION
   ========================================================= */

/* ------------------
---------------------------------------
   MAIN SECTION
   --------------------------------------------------------- */

.speakers {
    position: relative;

    /*
       Reduce the large empty space seen in the screenshot.
    */
    padding: 55px 0 60px;

    overflow: hidden;

    isolation: isolate;

    background:
        #edf3ef;
}


/* ---------------------------------------------------------
   BIOLOGY BACKGROUND IMAGE
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   GREEN OVERLAY
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   CONTAINER
   --------------------------------------------------------- */

/*
   Keep the heading centered and readable.
*/


/* ---------------------------------------------------------
   SECTION HEADER
   --------------------------------------------------------- */

.speakers .section-header {

    max-width: 850px;

    margin:
        0 auto 30px;

    padding:
        0 20px;

    text-align: center;
}

.speakers .section-header h2 {

    margin-top: 7px;

    margin-bottom: 8px;

    color: #17382d;

    font-size:
        clamp(30px, 3.5vw, 46px);
}


.speakers .section-header p {

    max-width: 700px;

    margin:
        0 auto;

    color: #60746a;

    line-height: 1.55;

    font-size: 14px;
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.speakers .section-header .eyebrow {

    color: #2b6d57;

    font-size: 16px;

    letter-spacing: 3px;

    font-weight: 800;
}


/* =========================================================
   SPEAKER SLIDER — FULL WIDTH
   ========================================================= */


/* ---------------------------------------------------------
   TRACK
   --------------------------------------------------------- */


/* =========================================================
   SPEAKER CARD
   ========================================================= */


/* ---------------------------------------------------------
   FLIP INNER
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   BOTH FACES
   --------------------------------------------------------- */


/* =========================================================
   FRONT
   ========================================================= */


/* ---------------------------------------------------------
   PHOTO
   --------------------------------------------------------- */


/* Image MUST fill entire photo area */


/* Slight zoom on hover */


/* =========================================================
   CAPTION
   ========================================================= */


/* Speaker name */


/* Role */


/* =========================================================
   MORE BUTTON
   ========================================================= */


/* =========================================================
   BACK FACE
   ========================================================= */


/* Back title */


/* Back role */


/* Bio */


/* =========================================================
   BACK BOTTOM
   ========================================================= */


/* Social */

.speakers .speaker-social {

    display: flex;

    gap: 7px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.speakers .speaker-social a {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.12);

    color:
        #ffffff;
}


.speakers .speaker-social svg {

    width: 15px;

    height: 15px;

    fill: currentColor;
}


/* Close */


/* =========================================================
   OPTIONAL — BIOLOGY DECORATIVE GLOW
   ========================================================= */

.speakers .speaker-slider::before {

    content: "";

    position: absolute;

    left: 5%;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(54,153,122,0.10),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .speakers {

        padding:
            45px 0 50px;
    }


    .speakers .section-header {

        margin-bottom: 25px;
    }


    .speakers .flip-card {

        width: 280px;

        min-width: 280px;

        height: 335px;

        flex-basis: 280px;
    }


    .speakers .flip-photo {

        height: 265px;
    }


    .speakers .speaker-track {

        gap: 18px;

        padding:
            0 22px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .speakers {

        padding:
            40px 0 45px;
    }


    .speakers .section-header {

        padding:
            0 15px;

        margin-bottom: 22px;
    }


    .speakers .section-header h2 {

        font-size: 29px;

        line-height: 1.15;
    }


    .speakers .section-header p {

        font-size: 12px;

        line-height: 1.5;
    }


    .speakers .flip-card {

        width: 250px;

        min-width: 250px;

        flex-basis: 250px;

        height: 315px;

        border-radius: 14px;
    }


    .speakers .flip-photo {

        height: 250px;
    }


    .speakers .flip-caption {

        height: 65px;

        padding:
            9px 11px;
    }


    .speakers .flip-caption h4 {

        font-size: 13px;
    }


    .speakers .flip-caption span {

        font-size: 8px;
    }


    .speakers .speaker-track {

        gap: 14px;

        padding:
            0 15px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .speakers .flip-card {

        width: 225px;

        min-width: 225px;

        flex-basis: 225px;

        height: 295px;
    }


    .speakers .flip-photo {

        height: 230px;
    }

}


/* =========================================================
   CBC 3.0 — SPEAKER CARDS SOLID FOREGROUND FIX
   ========================================================= */

.speakers > .container {
    position: relative;
    z-index: 5;
}


/* ---------------------------------------------------------
   SPEAKER PHOTO CONTAINER
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   SPEAKER IMAGE
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   PHOTO HOVER
   --------------------------------------------------------- */

.speakers .flip-card:hover .flip-photo img {
    transform: scale(1.05);
}


/* ---------------------------------------------------------
   PHOTO BOTTOM GRADIENT
   --------------------------------------------------------- */

/*
   Keep only a small gradient at the bottom of the
   photograph. It will NOT affect the whole image.
*/


.speakers::before,
.speakers::after {
    pointer-events: none;
}


/*
   The background image itself stays behind everything.
*/

.speakers::before {
    z-index: -3 !important;
}

.speakers::after {
    z-index: -2 !important;
}


/*
   Make sure the slider itself remains in the
   foreground stacking context.
*/

.speakers .speaker-slider {
    position: relative;

    z-index: 5;
}


/*
   Track also stays above the section background.
*/

.speakers .speaker-track {
    position: relative;

    z-index: 6;
}


/* Make the photo container completely clean */


/* Make the actual image completely solid */


/* =========================================================
   CBC 3.0 SPEAKER CARDS — FINAL FLIP FIX
   ========================================================= */

/* Card */
.speakers .flip-card {
    position: relative;

    width: 300px;
    min-width: 300px;
    height: 355px;

    flex: 0 0 300px;

    perspective: 1400px;

    border-radius: 16px;

    overflow: visible;

    background: transparent;

    box-shadow:
        0 12px 30px rgba(20, 55, 43, 0.15);
}


/* =========================================================
   FLIP INNER
   ========================================================= */

.speakers .flip-inner {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

    transition:
        transform 0.65s cubic-bezier(.4, .2, .2, 1);

    border-radius: 16px;
}


/*
   IMPORTANT:
   Support the common classes used by your existing JS.
*/

/* If JS adds .flipped */
.speakers .flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
}

/* If JS adds .is-flipped */
.speakers .flip-card.is-flipped .flip-inner {
    transform: rotateY(180deg);
}


/* =========================================================
   BOTH SIDES
   ========================================================= */

.speakers .flip-face {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border-radius: 16px;

    overflow: hidden;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

    background: #ffffff !important;

    opacity: 1 !important;
}


/* =========================================================
   FRONT
   ========================================================= */

.speakers .flip-front {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    transform:
        rotateY(0deg);

    -webkit-transform:
        rotateY(0deg);

    z-index: 2;
}


/* =========================================================
   BACK
   ========================================================= */

.speakers .flip-back {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 25px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #123e31,
            #1d604a
        ) !important;

    transform:
        rotateY(180deg);

    -webkit-transform:
        rotateY(180deg);

    z-index: 1;
}


/* =========================================================
   SPEAKER PHOTO
   ========================================================= */

.speakers .flip-photo {

    position: relative;

    width: 100%;

    height: 285px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f4f7f5 !important;

    border: none !important;

    box-shadow: none !important;
}


/*
   IMPORTANT:
   Use contain so the complete person remains visible.
*/

.speakers .flip-photo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center center;

    background: #f4f7f5;

    opacity: 1 !important;

    filter: none !important;

    mix-blend-mode: normal !important;

    border: none !important;

    box-shadow: none !important;

    transform: none;
}


/* Remove all image overlays */

.speakers .flip-photo::before,
.speakers .flip-photo::after {

    content: none !important;

    display: none !important;

    background: none !important;
}


/* =========================================================
   CAPTION
   ========================================================= */

.speakers .flip-caption {

    position: relative;

    width: 100%;

    height: 70px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 13px;

    background: #ffffff !important;

    color: #193a2f;

    opacity: 1 !important;
}


.speakers .flip-caption h4 {

    margin: 0 0 4px;

    color: #193a2f;

    font-size: 14px;

    font-weight: 800;
}


.speakers .flip-caption span {

    display: inline-block;

    padding: 3px 8px;

    border-radius: 20px;

    background: #e8f0ec;

    color: #32705a;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   MORE BUTTON
   ========================================================= */

.speakers .view-more-btn {

    position: relative;

    z-index: 10;

    flex-shrink: 0;

    padding: 7px 13px;

    border: 1px solid #3d7fc7;

    border-radius: 30px;

    background: #ffffff;

    color: #2863a2;

    font-size: 8px;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    transition: all .2s ease;
}


.speakers .view-more-btn:hover {

    background: #2863a2;

    color: #ffffff;
}


/* =========================================================
   BACK CONTENT
   ========================================================= */

.speakers .flip-back h4 {

    margin: 0 0 7px;

    color: #ffffff;

    font-size: 21px;
}


.speakers .flip-back .role {

    color: #070a09;

    font-size: 11px;

    font-weight: 700;
}


.speakers .flip-back p {

    margin: 18px 0 0;

    color: rgba(255,255,255,0.82);

    font-size: 12px;

    line-height: 1.65;
}


/* =========================================================
   BACK BOTTOM
   ========================================================= */

.speakers .flip-back-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.speakers .close-btn {

    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,0.5);

    border-radius: 25px;

    background: transparent;

    color: #ffffff;

    font-size: 8px;

    font-weight: 800;

    cursor: pointer;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .speakers .flip-card {

        width: 250px;

        min-width: 250px;

        flex-basis: 250px;

        height: 315px;
    }

    .speakers .flip-photo {

        height: 250px;
    }

    .speakers .flip-caption {

        height: 65px;
    }

}

/* =========================================================
   new added on 25-08-2026
   ========================================================= */

.hero-title {
    text-align: center;
    margin: 0 auto;
}

.hero-title .title-line {
    display: block;

    font-family: "Lora", Georgia, serif;

    font-size: clamp(48px, 6vw, 82px);

    font-weight: 700;

    line-height: 0.98;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #FFC107;

    /* Clean shadow — no 3D effect */
    text-shadow:
        0 3px 12px rgba(0, 0, 0, 0.65);
}


/* CBC logo */

.hero-cbc-logo {
    margin-top: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-cbc-logo img {
    width: 105px;
    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

@media (max-width: 768px) {

    .hero-title .title-line {
        font-size: clamp(34px, 10vw, 55px);

        letter-spacing: 1px;

        line-height: 1;
    }

    .hero-cbc-logo {
        margin-top: 14px;
    }

    .hero-cbc-logo img {
        width: 80px;
    }

}

/* =========================================================
   SPEAKERS — FULL WIDTH
   ========================================================= */

#speakers .container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

#speakers .speaker-slider {
    width: 100%;
    max-width: none;
    overflow: hidden;
}

#speakers .speaker-track {
    width: 100%;
    max-width: none;
}

#speakers .flip-card {
    flex: 0 0 calc(25% - 18px);
}


/* Large screens */
@media (min-width: 1600px) {

    #speakers .container {
        max-width: 1720px;
        padding-left: 50px;
        padding-right: 50px;
    }

}


/* Medium screens */
@media (max-width: 1200px) {

    #speakers .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    #speakers .flip-card {
        flex: 0 0 calc(25% - 15px);
    }

}


/* Tablet */
@media (max-width: 900px) {

    #speakers .flip-card {
        flex: 0 0 calc(33.333% - 14px);
    }

}


/* Mobile */
@media (max-width: 650px) {

    #speakers .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #speakers .flip-card {
        flex: 0 0 calc(50% - 10px);
    }

}


@media (max-width: 480px) {

    #speakers .flip-card {
        flex: 0 0 100%;
    }

}

/* =========================================================
   CBC HEADER — STABLE COMPACT NAVIGATION
   ========================================================= */

/*
 * IMPORTANT:
 * The complete header is NOT sticky.
 * Only the navigation bar is sticky.
 *
 * This prevents the page from jumping/shaking when
 * the header changes size.
 */


/* ---------------------------------------------------------
   Main Header
   --------------------------------------------------------- */

.site-header {
    position: relative;
    z-index: 1000;
}


/* ---------------------------------------------------------
   Utility Bar
   --------------------------------------------------------- */

.site-header .utility-bar {
    position: relative;
    z-index: 1002;

    transition:
        opacity 0.25s ease,
        max-height 0.25s ease;
}


/* ---------------------------------------------------------
   Logo Bar
   --------------------------------------------------------- */

.site-header .logo-bar {
    position: relative;
    z-index: 1001;

    transition:
        height 0.3s ease,
        padding 0.3s ease;
}

.site-header .logo-bar-inner {
    transition:
        min-height 0.3s ease;
}

.site-header .header-logos img {
    transition:
        height 0.3s ease,
        max-height 0.3s ease,
        transform 0.3s ease;
}


/* ---------------------------------------------------------
   Login / Register
   --------------------------------------------------------- */

.site-header .nav-right .btn {
    transition:
        padding 0.3s ease,
        font-size 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-header .nav-bar {
    position: relative;
    z-index: 9999;

    transition:
        min-height 0.3s ease,
        box-shadow 0.3s ease;
}


/* Navigation links */

.site-header .nav-links {
    transition:
        padding 0.3s ease;
}

.site-header .nav-links a {
    transition:
        padding 0.3s ease,
        font-size 0.3s ease;
}


/* =========================================================
   SCROLLED STATE
   ========================================================= */

.site-header.header-scrolled .nav-bar {
    box-shadow:
        0 3px 14px rgba(0, 0, 0, 0.18);
}


/*
 * IMPORTANT:
 * We are NOT shrinking the header logos aggressively.
 */

.site-header.header-scrolled .header-logos img {
    transform: scale(0.88);
}


/*
 * Login / Register become slightly smaller
 * so they remain proportional to the logos.
 */

.site-header.header-scrolled .nav-right .btn {
    padding-top: 7px;
    padding-bottom: 7px;

    padding-left: 17px;
    padding-right: 17px;

    font-size: 13px;
}


/*
 * Navigation becomes slightly more compact.
 */

.site-header.header-scrolled .nav-links a {
    padding-top: 10px;
    padding-bottom: 10px;

    font-size: 14px;
}


/* =========================================================
   HERO SPACING
   ========================================================= */

.hero-inner {
    padding-top: 28px !important;
}

.hero-content {
    padding-top: 0 !important;
}

.hero-eyebrow {
    margin-bottom: 10px !important;
}

.hero-title {
    margin-top: 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .site-header.header-scrolled .header-logos img {
        transform: scale(0.92);
    }

    .site-header.header-scrolled .nav-right .btn {
        padding-left: 12px;
        padding-right: 12px;

        font-size: 12px;
    }

    .site-header.header-scrolled .nav-links a {
        padding-top: 8px;
        padding-bottom: 8px;

        font-size: 13px;
    }

    .hero-inner {
        padding-top: 20px !important;
    }

}


/* =========================================================
   FIXED NAVIGATION ON SCROLL
   ========================================================= */

.site-header.nav-fixed .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 99999;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.18);

    animation: navSlideDown 0.22s ease-out;
}


/* Small smooth entrance */

@keyframes navSlideDown {

    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }

}


/* Keep navigation size stable while fixed */

.site-header.nav-fixed .nav-links a {
    padding-top: 10px;
    padding-bottom: 10px;

    font-size: 14px;
}


/* =========================================================
   SCROLL TO TOP BUTTON
   ========================================================= */

.scroll-top-btn {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #2465ad;
    color: #ffffff;

    font-size: 22px;

    cursor: pointer;

    z-index: 99998;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        background 0.2s ease;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.25);
}


/* Show button */

.scroll-top-btn.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Hover */

.scroll-top-btn:hover {
    background: #174d8b;

    transform:
        translateY(-3px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .scroll-top-btn {
        width: 44px;
        height: 44px;

        right: 18px;
        bottom: 18px;

        font-size: 20px;
    }

}