/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Josefin+Slab:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────
   LOADING
───────────────────────────────────────────────── */
body::-webkit-scrollbar { display: none; }
html.index {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow-y: hidden;
}
body {
    margin: 0;
    font-family: "Quicksand", sans-serif;
    line-height: 2em;
    position: relative;
    box-sizing: border-box;
}
#loading {
    position: fixed;
    height: 100%;
    width: 100%;
    bottom: 0; left: 0;
    background: #002c58;
    z-index: 999;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.loading-logo {
    font-family: "Black Han Sans", sans-serif;
    font-size: clamp(3rem, 10vw, 7rem);
    letter-spacing: 0.05em;
    color: #fff;
    margin-bottom: 40px;
}
.loading-logo span { color: #fdb91c; }

.loading-text-container {
    position: relative;
    height: 60px;
}
.loading-text {
    animation-name: loader-animation;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    text-align: center;
    white-space: nowrap;
    font-weight: 300;
}
.loading-text.text2 { animation-delay: 3s; }
.loading-text.text3 { animation-delay: 6s; }
.loading-text.text4 { animation-delay: 9s; }
@keyframes loader-animation {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ─────────────────────────────────────────────────
   HOME CAROUSEL
───────────────────────────────────────────────── */
#background-container {
    width: 500%;
    display: flex;
    height: 100vh;
}
.home-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Backgrounds per section */
#s-home     { background: #002c58; }
#s-articles { background: #001a35; }
#s-devops   { background: #001a14; }
#s-security { background: #1a0028; }
#s-private  { background: #0d0d0d; }

/* Animated bg art */
.home-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-size: 60px 60px;
    pointer-events: none;
}
#s-home::before {
    background-image:
        radial-gradient(circle, #fdb91c 1px, transparent 1px);
    background-size: 80px 80px;
    animation: drift 20s linear infinite;
}
#s-articles::before {
    background-image:
        linear-gradient(rgba(253,185,28,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253,185,28,0.15) 1px, transparent 1px);
    background-size: 40px 40px;
}
#s-devops::before {
    background-image:
        linear-gradient(rgba(0,255,100,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,100,0.12) 1px, transparent 1px);
    background-size: 30px 30px;
}
#s-security::before {
    background-image:
        radial-gradient(circle, rgba(180,0,255,0.2) 1px, transparent 1px);
    background-size: 50px 50px;
}
#s-private::before {
    background-image:
        linear-gradient(rgba(255,50,50,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,50,50,0.1) 1px, transparent 1px);
    background-size: 35px 35px;
}
@keyframes drift {
    from { background-position: 0 0; }
    to   { background-position: 80px 80px; }
}

/* Centre visual per section */
.section-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
}
.section-visual__glow {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    opacity: 0.12;
    filter: blur(80px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#s-home     .section-visual__glow { background: #fdb91c; }
#s-articles .section-visual__glow { background: #2080ff; }
#s-devops   .section-visual__glow { background: #00ff64; }
#s-security .section-visual__glow { background: #b400ff; }
#s-private  .section-visual__glow { background: #ff2222; }

/* Hover overlay */
.hover-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
#s-home     .hover-overlay { background: linear-gradient(135deg, rgba(0,44,88,0.7), rgba(253,185,28,0.25)); }
#s-articles .hover-overlay { background: linear-gradient(135deg, rgba(0,26,53,0.7), rgba(32,128,255,0.3)); }
#s-devops   .hover-overlay { background: linear-gradient(135deg, rgba(0,26,20,0.7), rgba(0,255,100,0.25)); }
#s-security .hover-overlay { background: linear-gradient(135deg, rgba(26,0,40,0.7), rgba(180,0,255,0.3)); }
#s-private  .hover-overlay { background: linear-gradient(135deg, rgba(13,13,13,0.7), rgba(255,50,50,0.25)); }

.hover-overlay.active { opacity: 1; }

/* Hover text label */
.hover-label {
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s ease 0.5s;
    font-family: "Josefin Slab", serif;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 300;
    color: #fff;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    bottom: 12vh;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}
.hover-label.active { opacity: 1; }

/* Section logo/title */
.section-logo {
    position: absolute;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    text-align: center;
}
.section-logo__text {
    font-family: "Black Han Sans", sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.8rem);
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Click anchors */
.anchors {
    display: block;
    position: absolute;
    z-index: 3;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ─────────────────────────────────────────────────
   BIG SECTION TITLES (centre of each fold)
───────────────────────────────────────────────── */
.fold-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    z-index: 2;
}
.fold-title h2 {
    font-family: "Black Han Sans", sans-serif;
    font-size: clamp(3rem, 9vw, 8rem);
    font-weight: 400;
    color: rgba(255,255,255,0.07);
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-style: normal;
}
.fold-title h2 span { font-weight: 400; color: rgba(253,185,28,0.12); }

/* ─────────────────────────────────────────────────
   SIDEBAR MENU (exact clone)
───────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 23%;
    z-index: 10;
    cursor: default;
}
.sidebar-art {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, transparent, rgba(0,44,88,0.6));
    pointer-events: none;
}
#sidebar-menu {
    position: fixed;
    font-family: "Black Han Sans", sans-serif;
    bottom: 8vh;
    left: 0%;
    font-size: 2vw;
    transform: matrix3d(1, 0.05, 0, 0.0005, 0.03, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    line-height: 3em;
    display: none;
    padding: 0;
    margin: 0;
}
#projects-menu {
    position: fixed;
    font-family: "Black Han Sans", sans-serif;
    bottom: 3%;
    left: 0%;
    font-size: 2vw;
    transform: matrix3d(1, 0.05, 0, 0.0007, 0.03, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    line-height: 3em;
    display: none;
    padding: 0;
    margin: 0;
}
#sidebar-menu .small-line-height,
#projects-menu .small-line-height { line-height: 1em; }
#sidebar-menu li, #projects-menu li { list-style: none; }
#sidebar-menu li a, #projects-menu li a {
    color: #ffffff;
    text-decoration: none;
    transition: .2s linear all;
}
#sidebar-menu li a:hover,
#projects-menu li a:hover,
#projects-link:hover { color: #fdb91c; }
#sidebar-menu li ul, #projects-menu { display: none; }
#sidebar-menu li.hide { display: none; }
.sidebar:hover #sidebar-menu { display: block; }
#projects-link { cursor: pointer; color: #ffffff; }
#sidebar-menu li {
    animation-name: sidebar-animation;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    opacity: 0;
    animation-fill-mode: forwards;
}
@keyframes sidebar-animation {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.delay1 { animation-delay: 0.1s; }
.delay2 { animation-delay: 0.2s; }
.delay3 { animation-delay: 0.3s; }
.delay4 { animation-delay: 0.4s; }

/* ─────────────────────────────────────────────────
   ARROWS (exact clone)
───────────────────────────────────────────────── */
#arrows {
    width: 20%;
    position: fixed;
    right: 0;
    bottom: -50px;
    z-index: 10;
}
.cls-1 { fill: url(#linear-gradient); filter: drop-shadow(0px 10px 5px #11063d66); }
.cls-1,.cls-2,.cls-3,.cls-4,.cls-5 { stroke-width: 0px; }
.cls-6 { fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px; }
.cls-2 { fill: url(#linear-gradient-2); }
.cls-3 { fill: url(#linear-gradient-3); }
.cls-4 { fill: #c1b259; }
.cls-5 { fill: #8c8141; }
.next-arrow { filter: drop-shadow(0px 10px 5px #11063d66); }
.next-arrow:hover .cls-4, .prev-arrow:hover .cls-4 { fill: #fdb91c; }
.next-arrow:hover .cls-5, .prev-arrow:hover .cls-5 { fill: #fdb91c; }
.prev-arrow { filter: drop-shadow(0px 10px 5px #11063d66); }
.index li { list-style-type: none; }
[data-fold="s-private"] .next-arrow .cls-4,
[data-fold="s-home"]    .prev-arrow .cls-4 { fill: #606060; }
[data-fold="s-private"] .next-arrow .cls-5,
[data-fold="s-home"]    .prev-arrow .cls-5 { fill: #8f8f8f; }
[data-fold="s-home"]    .prev-arrow a,
[data-fold="s-private"] .next-arrow a { cursor: not-allowed; }

/* ─────────────────────────────────────────────────
   TOP NAVIGATION (inner pages)
───────────────────────────────────────────────── */
#top-navigation {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    z-index: 100;
    transition: all .2s linear;
    box-sizing: border-box;
    justify-content: space-between;
    color: #ffffff;
    line-height: 1em;
}
.top-header-left-side { display: flex; align-items: center; }
.ak-logo {
    font-family: "Black Han Sans", sans-serif;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.05em;
    fill: #fff;
    transition: color .2s;
}
.ak-logo span { color: #fdb91c; }
.ak-logo:hover { color: #fdb91c; }
.hamburger-icon {
    height: 50px;
    margin-right: 10px;
    cursor: pointer;
}
.hamburger-icon path { stroke: #ffffff; stroke-width: 1; }
.hamburger-icon:hover path { stroke: #fdb91c; }
.next-prev-container .separator { font-size: 30px; margin: 0 20px; }
.next-prev-container a { text-decoration: none; color: #fff; font-size: 20px; transition: color .2s; }
.next-prev-container a:hover { color: #fdb91c; }
.next-prev-container a span { font-size: 37px; margin: 0 10px; }
#top-navigation.scrolled {
    background: rgba(255,255,255,0.93);
    box-shadow: 0 0 20px #959595;
    color: #222;
}
#top-navigation.scrolled a { color: #222; }
#top-navigation.scrolled a:hover { color: #fdb91c; }
#top-navigation.scrolled .ak-logo { color: #222; }
#top-navigation.scrolled .ak-logo:hover { color: #fdb91c; }
#top-navigation.scrolled .ak-logo span { color: #fdb91c; }
#top-navigation.scrolled .hamburger-icon path { stroke: #222; }
#top-navigation.scrolled .hamburger-icon:hover path { stroke: #fdb91c; }
#top-navigation a.disabled { opacity: 0.5; cursor: not-allowed; }

/* Pages menu (hamburger) */
#overlay {
    position: fixed; width: 100%; height: 100%;
    background: rgba(255,255,255,0.9); top: 0; left: 0;
    z-index: 3; opacity: 0; display: none;
}
#overlay.active { opacity: 1; display: block; }
#pages-menu {
    background: #fff; width: 30%;
    position: fixed; top: 0; left: -30%; height: 100%;
    z-index: 4; box-shadow: 0 0 10px #959595;
    opacity: 0; transition: .2s all linear;
}
#pages-menu li { list-style: none; line-height: 3em; }
#pages-menu .hamburger-icon { position: absolute; right: -80px; margin: 0; transition: all .2s linear; display: none; }
#pages-menu .hamburger-icon path { stroke: #fff; }
#pages-menu.active { animation: pages-menu-animation .2s ease-out forwards; }
#pages-menu.active .hamburger-icon { display: block; }
#pages-menu.active .hamburger-icon path { stroke: #222; }
#pages-menu.active .middle-line { opacity: 0; }
#pages-menu.active .bottom-line { transform: rotate(-45deg) translateY(6px) translateX(-6px); transform-origin: center; }
#pages-menu.active .top-line { transform: rotate(45deg); transform-origin: center; }
@keyframes pages-menu-animation {
    from { opacity: 0; left: -30%; }
    to   { opacity: 1; left: 0%; }
}
html.menu-active { overflow: hidden; }
#links-menu { padding: 10%; }
#links-menu a, #pages-menu-projects-link {
    color: #222; text-decoration: none; font-size: 30px;
    line-height: 2.5em; cursor: pointer; position: relative; display: block;
}
#pages-menu-projects-link::after {
    content: "▾"; font-size: 16px; position: absolute; right: -20px; top: -16px; transition: .2s all linear;
}
#pages-menu-projects-link.active::after { transform: rotate(180deg); top: -14px; }
#pages-menu-projects-menu { height: 0; overflow: hidden; }
#pages-menu-projects-menu.active { height: auto; margin-bottom: 20px; }
#menu-container { height: 100%; overflow-y: scroll; }
#links-menu a:hover, #pages-menu-projects-link:hover { color: #fdb91c; }

/* ─────────────────────────────────────────────────
   INNER PAGE CONTENT
───────────────────────────────────────────────── */
.project-page {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23002c58' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.project-page header {
    background: linear-gradient(135deg, #002c58 0%, #001640 60%, #000d24 100%);
    padding: 150px 60px 80px;
    position: relative;
    overflow: hidden;
}
.project-page header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 70% 50%, rgba(253,185,28,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.project-page header h1 {
    font-family: "Black Han Sans", sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
    position: relative; z-index: 1;
}
.project-page header h1 span { color: #fdb91c; }
.project-page header p {
    font-family: "Josefin Slab", serif;
    font-weight: 100;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: rgba(255,255,255,0.7);
    margin: 0;
    position: relative; z-index: 1;
    letter-spacing: 0.08em;
}
.project-page .main {
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23002c58' fill-opacity='0.04' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    background-color: #f5f4f0;
    padding-top: 80px;
    padding-bottom: 100px;
}
.main { padding-bottom: 100px; }

h2 { color: #fff; font-size: 20px; font-weight: 100; padding: 0 25px; font-style: italic; }
h2 span { font-weight: 600; }
h2 .separator { font-weight: 100; }
h3 { color: #fff; font-size: 20px; font-weight: 100; padding: 0 25px; max-width: 600px; }
h4, h1 { font-family: "Josefin Slab", serif; font-weight: 300; font-size: 30px; }
section { padding: 150px 0; }
section.small-vertical-space { padding: 0; }

.side-text {
    display: block; width: 80%; background: #fff;
    padding: 40px; box-sizing: border-box;
}
.justified-content {
    display: flex; align-items: center;
    justify-content: space-between; width: 100%;
}
.reverse-content { flex-direction: row-reverse; }
.centered-content {
    background: rgba(255,255,255,0.95);
    padding: 50px 200px;
    margin-bottom: 100px;
}
.center-text {
    display: block; width: 50%;
    margin: 0 auto 30px; text-align: center;
}
.left-margin { margin-left: 50px; }
.right-margin { margin-right: 50px; }
.shadow { box-shadow: 0px 9px 9px 1px #cecece; }
.bg-for-images { padding: 30px 45px; background: #fff; }
.white-bg { background: #fff; }

/* Animated scroll-in */
.animated-scrolled-to {
    opacity: 0;
    transform: translateY(150px);
    transition: .5s all linear;
}
.animated-scrolled-to.show {
    opacity: 1;
    transform: translateY(0px);
}

/* ─────────────────────────────────────────────────
   ARTICLE LIST
───────────────────────────────────────────────── */
.article-list-container { padding: 0 60px 60px; }
.article-list-item {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 25px 0;
    border-bottom: 1px solid #e0dbd3;
    text-decoration: none;
    color: #222;
    transition: color .15s;
}
.article-list-item:hover { color: #fdb91c; }
.article-list-item:hover .ali-arrow { transform: translateX(5px); color: #fdb91c; }
.ali-cat {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: #fdb91c; margin-bottom: 4px;
}
.ali-title { font-family: "Josefin Slab", serif; font-size: 1.1rem; font-weight: 300; }
.ali-date { font-size: 0.8rem; color: #888; white-space: nowrap; margin-left: 2rem; }
.ali-arrow { transition: transform .2s; font-size: 1.2rem; margin-left: 1rem; color: #bbb; }

/* Private banner */
.private-banner {
    background: linear-gradient(135deg, #002c58, #001a35);
    border-left: 4px solid #fdb91c;
    padding: 20px 40px;
    color: rgba(255,255,255,0.8);
    font-family: "Josefin Slab", serif;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────── */
.footer {
    display: flex; padding: 50px; align-items: center;
    justify-content: space-between;
    background: #fff;
    color: #adadad;
}
.footer .link-container {
    max-width: 600px; width: 50%;
    display: flex; justify-content: space-between;
    font-family: "Josefin Slab", serif;
}
.footer .link-container a {
    color: #adadad; text-decoration: none; font-size: 20px;
}
.footer a:hover { color: #222; }
.footer-logo {
    font-family: "Black Han Sans", sans-serif;
    font-size: 1.8rem; letter-spacing: 0.05em; color: #222;
    text-decoration: none;
}
.footer-logo span { color: #fdb91c; }

/* ─────────────────────────────────────────────────
   MOBILE MENU (exact clone)
───────────────────────────────────────────────── */
.mobile-menu-container {
    width: 100vw; position: fixed; bottom: 0; left: 0;
    height: 70px; font-size: 1.2em;
    background: #222; color: #fff;
    overflow-x: scroll; overflow-y: hidden;
    display: none; z-index: 5;
}
.mobile-menu {
    display: flex; width: 1000px;
    margin: 0; padding: 0; height: 100%; align-items: center;
}
.mobile-menu li { border-right: 1px solid; padding: 0 50px; list-style: none; }
.mobile-menu li:last-child { border-right: 0; }
.mobile-menu a { color: #fff; text-decoration: none; }

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media only screen and (max-width: 1000px) {
    html.index { overflow: hidden; }
    .index body { overflow-y: hidden; overflow-x: auto; }
    .index #sidebar-menu, .index .sidebar, .index #arrows { display: none; }
    #background-container { width: 1000%; margin-left: -53vw; }
    .mobile-menu-container { display: block; }
    .fold-title h2 { font-size: 3rem; }
    #top-navigation { height: 100px; }
    .project-page header { padding: 120px 30px 60px; }
    .centered-content { padding: 40px 30px; }
    .article-list-container { padding: 0 20px 40px; }
    .footer { flex-direction: column; gap: 20px; }
    .footer .link-container { width: 100%; }
}