/* SHARED DESIGN TOKENS: edit these colors to update every detail page. */
:root {
    --bg:#edf3f7;
    --surface:rgba(255,255,255,.72);
    --surface-solid:#fff;
    --text:#101820;
    --muted:#5d6973;
    --accent:#1487c7;
    --accent-soft:#dff3fc;
    --line:rgba(16,24,32,.11);
    --shadow:0 24px 70px rgba(27,57,75,.10);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 14% 8%,rgba(65,193,245,.17),transparent 34%),
        radial-gradient(circle at 88% 22%,rgba(82,103,238,.09),transparent 28%),
        var(--bg);
    font-family:Inter,"Helvetica Neue",Arial,sans-serif;
    transition:background-color .35s ease,color .35s ease;
    padding-bottom:86px;
}

a { color:inherit; }

/* FIXED DISPLAY CONTROLS: theme and language. */
.floating-controls {
    position:fixed;
    left:20px;
    bottom:20px;
    z-index:50;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:7px;
    background:rgba(255,255,255,.68);
    border:1px solid rgba(255,255,255,.86);
    border-radius:10px;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 12px 34px rgba(23,49,65,.14);
}

.control-button {
    padding:9px 12px;
    color:var(--text);
    background:transparent;
    border:1px solid var(--line);
    border-radius:7px;
    cursor:pointer;
    font:600 13px/1 Inter,"Helvetica Neue",Arial,sans-serif;
}

.detail-shell {
    width:min(1120px,calc(100% - 32px));
    margin:24px auto 40px;
}

/* DETAIL-PAGE HERO */
.detail-hero {
    position:relative;
    min-height:540px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:clamp(32px,7vw,78px);
    overflow:hidden;
    color:white;
    background:linear-gradient(145deg,#0d1821,#174b68);
    border-radius:14px;
    box-shadow:var(--shadow);
}

.detail-hero::after {
    content:"";
    position:absolute;
    width:min(58vw,620px);
    height:min(58vw,620px);
    right:-12%;
    top:-35%;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    box-shadow:0 0 0 48px rgba(255,255,255,.035),0 0 0 105px rgba(255,255,255,.025);
}

.detail-hero.education { background:linear-gradient(145deg,#0d1b25,#195777); }
.detail-hero.culture { background:linear-gradient(145deg,#111927,#364d80); }
.detail-hero.growth { background:linear-gradient(145deg,#0b1c27,#23668c); }
.detail-hero.web { background:linear-gradient(145deg,#111723,#46547e); }

.eyebrow {
    position:relative;
    z-index:1;
    margin:0 0 20px;
    color:#73d7ff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.detail-hero h1 {
    position:relative;
    z-index:1;
    max-width:850px;
    margin:0;
    font-size:clamp(48px,8vw,100px);
    line-height:1;
    letter-spacing:-.055em;
}

.hero-summary {
    position:relative;
    z-index:1;
    max-width:680px;
    margin:24px 0 0;
    color:rgba(255,255,255,.76);
    font-size:18px;
    line-height:1.7;
}

/* CONTENT CARD GRID */
.detail-grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:22px;
    margin-top:22px;
}

.detail-card {
    grid-column:span 6;
    padding:clamp(25px,4vw,42px);
    background:var(--surface);
    border:1px solid rgba(255,255,255,.86);
    border-radius:12px;
    backdrop-filter:blur(18px);
    box-shadow:0 12px 34px rgba(36,64,80,.06);
}

.detail-card.wide { grid-column:1/-1; }
.detail-card.third { grid-column:span 4; }

.detail-card h2 {
    margin:0 0 16px;
    font-size:clamp(25px,3.5vw,37px);
    letter-spacing:-.035em;
}

.detail-card h3 { margin:0 0 10px; font-size:20px; }

.detail-card p,
.detail-card li {
    color:var(--muted);
    font-size:16px;
    line-height:1.75;
}

.detail-card ul { margin:0; padding-left:20px; }
.detail-card li + li { margin-top:8px; }

/* EDITABLE MEDIA: reusable image and logo layouts for detail pages. */
.media-card {
    padding:0;
    overflow:hidden;
}

.media-card img {
    display:block;
    width:100%;
    height:100%;
    min-height:320px;
    object-fit:cover;
}

.brand-intro {
    display:grid;
    grid-template-columns:minmax(180px,280px) 1fr;
    align-items:center;
    gap:clamp(24px,5vw,58px);
}

.brand-logo {
    display:grid;
    place-items:center;
    min-height:210px;
    padding:28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
}

.brand-logo img {
    display:block;
    width:100%;
    max-height:150px;
    object-fit:contain;
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.product-card {
    display:flex;
    flex-direction:column;
    min-height:220px;
    padding:24px;
    color:var(--text);
    background:var(--surface-solid);
    border:1px solid var(--line);
    border-radius:9px;
    text-decoration:none;
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.product-card:hover {
    transform:translateY(-4px);
    border-color:rgba(20,135,199,.4);
    box-shadow:0 16px 30px rgba(20,60,84,.10);
}

.product-card strong { font-size:24px; }
.product-card p { margin:12px 0 24px; }
.product-card span { margin-top:auto; color:var(--accent); font-size:14px; font-weight:750; }

.project-status {
    display:inline-flex;
    align-items:center;
    width:max-content;
    margin-bottom:16px;
    padding:7px 10px;
    color:var(--accent);
    background:var(--accent-soft);
    border-radius:6px;
    font-size:13px;
    font-weight:750;
}

.metric-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.metric {
    padding:23px;
    background:var(--surface-solid);
    border:1px solid var(--line);
    border-radius:9px;
}

.metric strong { display:block; color:var(--accent); font-size:32px; }
.metric span { display:block; margin-top:8px; color:var(--muted); font-size:14px; }

.metric-note {
    margin:16px 2px 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

.tags {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    padding:0;
    list-style:none;
}

.tags li,
.tags li:first-child {
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:8px 12px;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid rgba(20,135,199,.12);
    border-radius:6px;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    transform:none;
    box-shadow:none;
    transition:transform .24s ease,color .24s ease,background-color .24s ease,box-shadow .24s ease;
}

.tags li:hover {
    color:white;
    background:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(20,135,199,.2);
}

.certificate-placeholder {
    min-height:330px;
    display:grid;
    place-items:center;
    padding:30px;
    text-align:center;
    background:linear-gradient(135deg,rgba(20,135,199,.08),rgba(64,80,130,.08));
    border:1px dashed rgba(20,135,199,.45);
    border-radius:10px;
}

.certificate-placeholder strong { display:block; margin-bottom:10px; font-size:20px; }
.certificate-placeholder span { color:var(--muted); line-height:1.6; }

.certificate-link {
    display:block;
    margin-top:18px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:10px;
    background:white;
    box-shadow:0 18px 45px rgba(14,38,56,.10);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.certificate-link:hover {
    transform:translateY(-4px);
    border-color:rgba(20,135,199,.42);
    box-shadow:0 24px 56px rgba(14,38,56,.16);
}

.certificate-image {
    display:block;
    width:100%;
    height:auto;
}

.certificate-caption {
    margin:14px 0 0;
    color:var(--muted);
    font-size:13px;
}

.source-note { margin-top:20px; color:var(--muted); font-size:13px; }
.source-note a { color:var(--accent); }

.bottom-cta {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:22px;
    padding:12px;
    background:rgba(255,255,255,.56);
    border:1px solid rgba(255,255,255,.8);
    border-radius:12px;
    backdrop-filter:blur(18px);
}

.bottom-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:76px;
    padding:18px 20px;
    color:var(--text);
    background:rgba(255,255,255,.74);
    border:1px solid var(--line);
    border-radius:8px;
    text-decoration:none;
    font-weight:750;
    transition:transform .25s ease,background-color .25s ease,color .25s ease;
}

.bottom-link.next {
    color:white;
    background:var(--accent);
    border-color:var(--accent);
}

.bottom-link:hover {
    color:white;
    background:#26333d;
    transform:translateY(-2px);
}

a:focus-visible,button:focus-visible { outline:3px solid #63cdf7; outline-offset:3px; }

body.dark-mode {
    --bg:#0c1116;
    --surface:rgba(27,34,40,.78);
    --surface-solid:#20282e;
    --text:#f3f7f9;
    --muted:#b7c1c8;
    --line:rgba(255,255,255,.13);
    --accent-soft:rgba(20,135,199,.16);
}

body.dark-mode .detail-card { border-color:rgba(255,255,255,.1); }
body.dark-mode .floating-controls,
body.dark-mode .bottom-cta { background:rgba(18,25,30,.72); border-color:rgba(255,255,255,.12); }
body.dark-mode .bottom-link { color:white; background:rgba(255,255,255,.06); }
body.dark-mode .bottom-link.next { background:var(--accent); }
body.dark-mode .tags li { border-color:rgba(99,205,247,.15); }

@media (max-width:760px) {
    .detail-shell { width:calc(100% - 20px); margin-top:10px; }
    .detail-hero { min-height:470px; padding:30px 23px; }
    .detail-card,.detail-card.third { grid-column:1/-1; }
    .metric-grid { grid-template-columns:1fr; }
    .brand-intro,.product-grid { grid-template-columns:1fr; }
    .media-card img { min-height:230px; }
    .bottom-cta { grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
    .bottom-link { min-height:68px; padding:14px 12px; font-size:13px; }
    .floating-controls { left:12px; bottom:12px; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}