@charset "utf-8";

/* ---------------- TOKENS ---------------- */
:root{
    --ink:          #eef1f6;
    --ink-dim:      rgba(238, 241, 246, 0.66);
    --ink-faint:    rgba(238, 241, 246, 0.32);

    --bg-0:         #07080d;
    --bg-1:         #0d0e16;
    --bg-2:         #11131e;

    --glass:        rgba(255, 255, 255, 0.045);
    --glass-strong: rgba(255, 255, 255, 0.085);
    --glass-line:   rgba(255, 255, 255, 0.10);
    --glass-line-2: rgba(255, 255, 255, 0.22);

    --c1-a: #22c55e;   --c1-b: #a3e635;       /* Hidra — green */
    --c2-a: #f97316;   --c2-b: #fbbf24;       /* Learnings — orange */
    --c3-a: #3b82f6;   --c3-b: #22d3ee;       /* Producție — blue */
    --c4-a: #a855f7;   --c4-b: #ec4899;       /* Tasks (Creație) — purple */

    --radius-lg:    22px;
    --radius-md:    14px;
    --radius-sm:    10px;
    --ease:         cubic-bezier(.22,.61,.36,1);
    --ease-out:     cubic-bezier(.16,1,.3,1);
}

/* ---------------- RESET ---------------- */
*,*:before,*:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:none; }
html, body{ min-height:100%; }
html{ overflow-x:hidden; }
body{
    margin:0; padding:0;
    font-family:"Titillium Web", "Segoe UI", Calibri, Arial, Helvetica, sans-serif;
    font-weight: 400;
    color:var(--ink);
    background-color: var(--bg-0);
    background-image:
        radial-gradient(1100px 800px at 8% -10%,  rgba(34, 197, 94, .14),  transparent 60%),
        radial-gradient(900px 700px  at 110% 8%, rgba(249, 115, 22, .14),  transparent 60%),
        radial-gradient(900px 900px  at 8% 110%, rgba(59, 130, 246, .14),  transparent 60%),
        radial-gradient(900px 800px  at 110% 110%, rgba(168, 85, 247, .14), transparent 60%),
        linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%);
    background-attachment: fixed;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
select, input, textarea, button{ font-family:inherit; }
a{ text-decoration:none; color:inherit; }
img{ display:block; max-width:100%; }

/* ---------------- BG ORBS + GRID ---------------- */
.bg-orbs{
    position:fixed; inset:0; pointer-events:none; z-index:0;
}
.bg-orb{
    position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
    will-change: transform;
}
.bg-orb-1{ width:520px; height:520px; left:-140px;  top:-160px;  background:radial-gradient(circle, #22c55e, transparent 70%);  animation: orbDrift1 22s ease-in-out infinite alternate; opacity:.32; }
.bg-orb-2{ width:420px; height:420px; right:-120px; top:8%;       background:radial-gradient(circle, #f97316, transparent 70%);  animation: orbDrift2 26s ease-in-out infinite alternate; opacity:.30; }
.bg-orb-3{ width:480px; height:480px; left:18%;     bottom:-160px; background:radial-gradient(circle, #3b82f6, transparent 70%);  animation: orbDrift3 28s ease-in-out infinite alternate; opacity:.35; }
.bg-orb-4{ width:380px; height:380px; right:6%;     bottom:-120px; background:radial-gradient(circle, #a855f7, transparent 70%);  animation: orbDrift4 24s ease-in-out infinite alternate; opacity:.32; }

@keyframes orbDrift1{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(80px,40px) scale(1.08);} }
@keyframes orbDrift2{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-60px,60px) scale(1.1);} }
@keyframes orbDrift3{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(60px,-50px) scale(1.05);} }
@keyframes orbDrift4{ 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-70px,-30px) scale(1.1);} }

.bg-grid{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 75%);
}

/* ---------------- STAGE ---------------- */
.gdm-stage{
    position:relative; z-index:1;
    width:100%;
    min-height:100vh;
    max-width:1320px;
    margin:0 auto;
    padding: 28px 36px 24px;
    display:flex;
    flex-direction:column;
}

/* ---------------- HEADER ---------------- */
.gdm-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding: 0 2px 4px;
    animation: fadeDown .9s var(--ease-out) both;
}
.gdm-logo-link{ display:inline-flex; align-items:center; }
.gdm-logo{
    height:54px; width:auto;
    filter: drop-shadow(0 6px 24px rgba(255, 255, 255, .08));
    transition: transform .5s var(--ease), filter .5s var(--ease);
}
.gdm-logo-link:hover .gdm-logo{
    transform: scale(1.03);
    filter: drop-shadow(0 8px 28px rgba(255, 255, 255, .14));
}

.gdm-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-dim);
}
.gdm-eyebrow-dot{
    width:8px; height:8px; border-radius:50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .20);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.25); opacity:.8;} }

/* ---------------- GRID ---------------- */
.gdm-grid{
    flex: 1 1 auto;
    margin: 24px 0 16px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
    min-height: 0;
}

/* ---------------- CARD ---------------- */
.app-card{
    --mx: 50%; --my: 50%;
    --grad-a: var(--c1-a);
    --grad-b: var(--c1-b);
    position:relative;
    display:flex; flex-direction:column;
    padding: 28px 30px 24px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(380px circle at var(--mx) var(--my), rgba(255,255,255,.10), transparent 55%),
        linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025) 60%, rgba(255,255,255,.015));
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    color: var(--ink);
    overflow:hidden;
    cursor:pointer;
    transition:
        transform .55s var(--ease-out),
        border-color .35s var(--ease),
        box-shadow .55s var(--ease-out);
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 30px 80px -40px rgba(0,0,0,.7);
    opacity: 0;
    transform: translateY(28px) scale(.985);
    animation: cardIn 1.05s var(--ease-out) forwards;
    animation-delay: var(--card-delay, 0s);
}
.app-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    padding:1px;
    background: linear-gradient(135deg, var(--grad-a), transparent 45%, transparent 60%, var(--grad-b));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:.55;
    transition: opacity .4s var(--ease);
    pointer-events:none;
}
.app-card::after{
    content:"";
    position:absolute; inset:auto -40% -60% auto;
    width:80%; height:80%;
    background: radial-gradient(closest-side, var(--grad-a), transparent 70%);
    filter: blur(50px);
    opacity:.22;
    pointer-events:none;
    transition: opacity .5s var(--ease);
}
.app-card:hover{
    transform: translateY(-6px) scale(1.002);
    border-color: var(--glass-line-2);
    box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 40px 100px -30px rgba(0,0,0,.85),
        0 0 0 1px rgba(255,255,255,.04);
}
.app-card:hover::before{ opacity:1; }
.app-card:hover::after{ opacity:.4; }

@keyframes cardIn{
    0%   { opacity:0; transform: translateY(28px) scale(.985); }
    100% { opacity:1; transform: translateY(0)    scale(1); }
}

.app-card-shine{
    position:absolute; top:0; left:-60%;
    width:50%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent);
    transform: skewX(-18deg);
    transition: left .9s var(--ease-out);
    pointer-events:none;
}
.app-card:hover .app-card-shine{ left:130%; }

.app-card-num{
    position:absolute;
    top: 14px; right: 22px;
    font-family: "Titillium Web", sans-serif;
    font-size: 78px;
    line-height: 1;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.15);
    letter-spacing: -3px;
    pointer-events:none;
    transition: -webkit-text-stroke-color .4s var(--ease), transform .55s var(--ease-out);
}
.app-card:hover .app-card-num{
    -webkit-text-stroke: 1px rgba(255,255,255,.32);
    transform: translateY(-2px);
}

.app-card-top{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-bottom: 8px;
}
.app-tag{
    display:inline-block;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    color: var(--ink-dim);
    border: 1px solid var(--glass-line);
    background: rgba(255,255,255,.03);
}
.app-badge-wip{
    display:inline-block;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    color: #ffd06b;
    background: rgba(255, 208, 107, .12);
    border: 1px solid rgba(255, 208, 107, .35);
    box-shadow: 0 0 24px -8px rgba(255, 208, 107, .5);
}

.app-title{
    margin: 8px 0 14px;
    font-family: "Titillium Web", sans-serif;
    font-size: clamp(40px, 5vw, 72px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    transition: filter .4s var(--ease);
}
.app-card:hover .app-title{ filter: drop-shadow(0 6px 24px rgba(255,255,255,.05)); }

.app-desc{
    margin: 0;
    flex: 1 1 auto;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 92%;
}

.app-card-foot{
    margin-top: 18px;
    display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
.app-url{
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: lowercase;
    color: var(--ink);
    opacity: .85;
    border-bottom: 1px dashed rgba(255,255,255,.18);
    padding-bottom: 2px;
    transition: border-color .35s var(--ease), opacity .35s var(--ease);
}
.app-card:hover .app-url{ border-color: rgba(255,255,255,.55); opacity:1; }

.app-arrow{
    width: 44px; height: 44px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    color: #1a0211;
    flex-shrink: 0;
    box-shadow:
        0 12px 30px -10px color-mix(in srgb, var(--grad-a) 60%, transparent),
        0 0 0 1px rgba(255,255,255,.12) inset;
    transition: transform .55s var(--ease-out), box-shadow .45s var(--ease);
    position:relative;
    overflow:hidden;
}
.app-arrow svg{ width: 18px; height: 18px; position:relative; z-index:1; transition: transform .55s var(--ease-out); }
.app-card:hover .app-arrow{
    transform: rotate(-8deg) scale(1.06);
    box-shadow:
        0 18px 40px -10px color-mix(in srgb, var(--grad-a) 80%, transparent),
        0 0 0 1px rgba(255,255,255,.2) inset;
}
.app-card:hover .app-arrow svg{ transform: translateX(3px); }

/* per-card palettes */
.app-card-1{ --grad-a: var(--c1-a); --grad-b: var(--c1-b); }
.app-card-2{ --grad-a: var(--c2-a); --grad-b: var(--c2-b); }
.app-card-3{ --grad-a: var(--c3-a); --grad-b: var(--c3-b); }
.app-card-4{ --grad-a: var(--c4-a); --grad-b: var(--c4-b); }

/* WIP state — slightly faded but still hoverable */
.app-card.is-wip{ cursor: not-allowed; }
.app-card.is-wip .app-desc,
.app-card.is-wip .app-title{ filter: grayscale(.1); }
.app-card.is-wip:hover{ transform: translateY(-3px); }

/* ---------------- FOOT ---------------- */
.gdm-foot{
    display:flex; align-items:center; gap:10px;
    padding: 6px 4px 0;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-faint);
    animation: fadeIn 1.2s 1s var(--ease-out) both;
}
.gdm-foot-sep{ opacity:.5; }

/* ---------------- ANIMATIONS ---------------- */
@keyframes fadeDown{
    0%   { opacity:0; transform: translateY(-14px); }
    100% { opacity:1; transform: translateY(0); }
}
@keyframes fadeIn{
    0%   { opacity:0; }
    100% { opacity:1; }
}

/* legacy compat for the alerts in index.php */
.wow{ visibility:hidden; }
.hello, .forbidden{
    width:auto; max-width:90%;
    position:fixed; z-index:1000;
    bottom:24px; left:50%; transform: translateX(-50%);
    padding:14px 28px;
    border-radius: 999px;
    text-align:center;
    font-size:14px; letter-spacing: 1px;
    color:#fff; font-weight:700;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.hello{ background: linear-gradient(90deg, #1c344d 0%, #244e76 50%, #1c344d 100%); }
.forbidden{ background: linear-gradient(90deg, #d00 0%, #ff4d4d 50%, #d00 100%); }


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

/* Tablet — keep 2x2 but tighter */
@media (max-width: 1100px){
    .gdm-stage{ padding: 24px 24px 20px; }
    .gdm-grid{ gap: 16px; }
    .app-card{ padding: 24px 24px 20px; }
    .app-card-num{ font-size: 62px; }
    .app-title{ font-size: clamp(34px, 5.5vw, 56px); }
    .app-desc{ font-size: 14.5px; }
}

/* Mobile — single column, scrollable, full-height stage */
@media (max-width: 740px){
    body{
        background-attachment: scroll;
    }
    .bg-orb{ filter: blur(60px); }
    .bg-orb-1{ width:340px; height:340px; }
    .bg-orb-2{ width:280px; height:280px; }
    .bg-orb-3{ width:300px; height:300px; }
    .bg-orb-4{ width:260px; height:260px; }
    .bg-grid{ background-size: 32px 32px; }

    .gdm-stage{
        padding: 18px 16px 22px;
        min-height: 100vh;
    }
    .gdm-header{
        gap: 12px;
        padding-bottom: 2px;
    }
    .gdm-logo{ height: 38px; }
    .gdm-eyebrow{
        padding: 6px 12px;
        font-size: 10px; letter-spacing: 1.5px;
    }

    .gdm-grid{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 14px;
        margin: 16px 0 12px;
    }

    .app-card{
        padding: 20px 20px 18px;
        border-radius: 18px;
        min-height: 0;
    }
    .app-card-num{
        font-size: 54px;
        top: 8px; right: 16px;
    }
    .app-card-top{ margin-bottom: 4px; }
    .app-tag{ font-size: 10px; padding: 4px 9px; letter-spacing: 2px; }
    .app-badge-wip{ font-size: 9px; padding: 4px 8px; }
    .app-title{
        font-size: 38px;
        margin: 6px 0 10px;
    }
    .app-desc{
        font-size: 13.5px;
        line-height: 1.5;
        max-width: 100%;
    }
    .app-card-foot{ margin-top: 14px; }
    .app-url{ font-size: 12px; }
    .app-arrow{ width: 38px; height: 38px; }
    .app-arrow svg{ width: 16px; height: 16px; }

    .gdm-foot{ font-size: 10px; letter-spacing: 1.5px; padding-top: 2px; }
}

/* Very small phones */
@media (max-width: 380px){
    .app-title{ font-size: 32px; }
    .app-desc{ font-size: 13px; }
    .app-card-num{ font-size: 46px; }
}

/* Short laptops — keep everything in 1 viewport */
@media (min-width: 741px) and (max-height: 760px){
    .gdm-stage{ padding: 18px 30px 16px; }
    .gdm-grid{ gap: 16px; margin: 16px 0 10px; }
    .app-card{ padding: 20px 24px 18px; }
    .app-card-num{ font-size: 58px; top: 10px; }
    .app-title{ font-size: clamp(32px, 4.2vw, 48px); margin: 4px 0 8px; }
    .app-desc{ font-size: 13.5px; line-height: 1.45; }
    .app-card-foot{ margin-top: 12px; }
    .gdm-logo{ height: 44px; }
}

@media (prefers-reduced-motion: reduce){
    .bg-orb{ animation: none; }
    .app-card{ animation: none; opacity:1; transform:none; }
    .gdm-header, .gdm-foot{ animation: none; }
    .gdm-eyebrow-dot{ animation: none; }
}