:root{
    --bg1:#07111f;
    --bg2:#0b1730;
    --card:rgba(255,255,255,.18);
    --card-border:rgba(255,255,255,.10);
    --text:#eef4ff;
    --muted:rgba(238,244,255,.72);
    --accent:#7cdbff;
    --accent2:#8b7bff;
    --accent3:#38f2b5;
    --shadow:0 24px 80px rgba(0,0,0,.45);
    --radius:28px;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color:var(--text);
    background:
    radial-gradient(circle at top left, rgba(124,219,255,.20), transparent 28%),
    radial-gradient(circle at top right, rgba(139,123,255,.18), transparent 24%),
    radial-gradient(circle at bottom, rgba(56,242,181,.10), transparent 30%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
    overflow-x:hidden;
}
body.modal-open{overflow:hidden}

.wrap{
    min-height:100%;
    display:grid;
    place-items:center;
    padding:32px 18px;
}

.card{
    width:min(1120px, 100%);
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    overflow:hidden;
    position:relative;
}

.card::before{
    content:"";
    position:absolute;
    inset:-2px;
    background:linear-gradient(135deg, rgba(124,219,255,.25), rgba(139,123,255,.18), rgba(56,242,181,.16));
    filter:blur(42px);
    opacity:.55;
    pointer-events:none;
}

.content{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:0;
}

.left{padding:46px 42px}

.brand{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:24px;
}

.subtitle.highlight {
    color: #7cdbff;
}

.logo{
    width:72px;
    height:72px;
    border-radius:7px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    overflow:hidden;
    flex:none;
}

.logo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:.74rem;
    color:var(--accent);
    margin:0 0 10px;
    font-weight:700;
}

h1{
    margin:0;
    font-size:clamp(2.4rem, 5vw, 4.6rem);
    line-height:1;
    letter-spacing:-.04em;
}

.subtitle{
    margin:18px 0 0;
    color:var(--muted);
    font-size:1.05rem;
    line-height:1.7;
    max-width:60ch;
}

.pillrow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:24px 0 0;
}

.pill{
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    color:var(--text);
    font-size:.92rem;
}

.right{
    padding:42px;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border-left:1px solid rgba(255,255,255,.08);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:22px;
}

.panel{
    background:rgba(8,14,28,.55);
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    padding:22px;
}

.panel h2{
    margin:0 0 12px;
    font-size:1.05rem;
    letter-spacing:.01em;
}

.panel p, .panel li{
    color:var(--muted);
    line-height:1.65;
    margin:0;
    font-size:.98rem;
}

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

.service{
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    font-size:.94rem;
    color:var(--text);
}

.service.gold{color:#febd69}

.service.green{color:#36f4a4}

.links{
    display:grid;
    gap:12px;
    margin-top:14px;
}

.link{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    border-radius:16px;
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
    background:linear-gradient(135deg, rgba(124,219,255,.14), rgba(139,123,255,.10));
    border:1px solid rgba(255,255,255,.10);
    transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.link:hover,
.link:focus-visible{
    transform:translateY(-2px);
    border-color:rgba(124,219,255,.35);
    background:linear-gradient(135deg, rgba(124,219,255,.20), rgba(139,123,255,.14));
    outline:none;
}

.link-title{
    display:block;
    font-weight:650;
}

.link small{
    color:var(--muted);
    display:block;
    margin-top:4px;
}

.view-project{
    color:var(--accent3);
    font-size:.84rem;
    font-weight:700;
    white-space:nowrap;
    flex:none;
}

.footer{
    padding:0 42px 42px;
    color:rgba(238,244,255,.55);
    font-size:.92rem;
}

/* Portfolio lightbox */
.portfolio-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(2,7,16,.82);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.portfolio-modal.is-open{display:flex}

.portfolio-browser{
    width:min(1500px, 96vw);
    height:min(900px, 92vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:22px;
    background:#0b1220;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 34px 110px rgba(0,0,0,.65);
}

.portfolio-browser-bar{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:15px 18px 15px 22px;
    background:linear-gradient(180deg, #101a2c, #0c1525);
    border-bottom:1px solid rgba(255,255,255,.10);
}

.portfolio-project-meta{min-width:0}

.portfolio-project-title{
    margin:0;
    color:var(--text);
    font-size:1rem;
    font-weight:750;
}

.portfolio-project-description{
    margin:4px 0 0;
    color:var(--muted);
    font-size:.88rem;
}

.portfolio-browser-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex:none;
}

.portfolio-browser-action{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 14px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:var(--text);
    font:inherit;
    font-size:.86rem;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:background .18s ease, border-color .18s ease;
}

.portfolio-browser-action:hover,
.portfolio-browser-action:focus-visible{
    background:rgba(124,219,255,.12);
    border-color:rgba(124,219,255,.38);
    outline:none;
}

.portfolio-link-external{
    text-decoration:none;
}

.portfolio-frame-wrap{
    position:relative;
    flex:1;
    min-height:0;
    background:#fff;
}

.portfolio-frame{
    width:100%;
    height:100%;
    display:block;
    border:0;
    background:#fff;
}


@media (max-width:920px){

    .content{grid-template-columns:1fr}
    .right{border-left:none;border-top:1px solid rgba(255,255,255,.08)}
    .left,.right,.footer{padding-left:24px;padding-right:24px}
    .left{padding-top:32px}
    .portfolio-modal{padding:14px}
    .portfolio-browser{width:100%;height:94vh}

}
@media (max-width:560px){

    .brand{align-items:flex-start}
    .logo{width:62px;height:62px;border-radius:18px}
    .services{grid-template-columns:1fr}
    h1{font-size:2.15rem}
    .link{align-items:flex-start}
    .view-project{margin-top:2px}
    .portfolio-modal{padding:0}
    .portfolio-browser{width:100%;height:100%;border-radius:0;border-left:0;border-right:0}
    .portfolio-browser-bar{min-height:auto;align-items:flex-start;flex-direction:column;gap:12px;padding:14px 16px}
    .portfolio-browser-actions{width:100%}
    .portfolio-browser-action{flex:1}
    .hidemobile {display:none;}

}