/* ============================================================
   Antoci CV Theme — cv-style.css v2.1
============================================================ */

:root {
    --bg:       #080c14;
    --bg2:      #0f1420;
    --bg3:      #161d2e;
    --accent:   #38bdf8;
    --accent2:  #818cf8;
    --accent3:  #34d399;
    --txt:      #e2e8f0;
    --muted:    #64748b;
    --border:   rgba(255,255,255,0.08);
    --border-h: rgba(56,189,248,0.35);
    --ff: 'Outfit', sans-serif;
    --fb: 'DM Sans', sans-serif;
    --r-sm: 8px;
    --r-md: 12px;
    --tr: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--fb);
    color: var(--txt);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

.s0 { background: var(--bg); }
.s2 { background: var(--bg2); }
.section-pad { padding: 5rem 6vw; }

.sec-label { font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; }
.sec-title  { font-family:var(--ff); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:#f8fafc; letter-spacing:-.025em; line-height:1.15; margin-bottom:.4rem; }
.sec-div    { width:36px; height:3px; background:var(--accent); border-radius:2px; margin-bottom:2.5rem; }

/* ── NAVIGATION ─────────────────────────────────────────── */
.nav {
    background: rgba(8,12,20,0.94);
    border-bottom: 1px solid var(--border);
    padding: .9rem 6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; top: 0; z-index: 1000;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.nav-logo { font-family:var(--ff); font-weight:800; font-size:1.35rem; letter-spacing:-.05em; color:var(--txt); text-decoration:none; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-link  { color:var(--muted); text-decoration:none; font-size:.8rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; transition:color var(--tr); padding:.25rem 0; position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; right:100%; height:1px; background:var(--accent); transition:right var(--tr); }
.nav-link:hover, .nav-link.active { color:var(--accent); }
.nav-link:hover::after, .nav-link.active::after { right:0; }
.nav-cta { background:var(--accent); color:#080c14; padding:.5rem 1.25rem; border-radius:var(--r-sm); font-size:.8rem; font-weight:700; text-decoration:none; display:flex; align-items:center; gap:6px; transition:opacity var(--tr),transform var(--tr); }
.nav-cta:hover { opacity:.85; transform:translateY(-1px); }
.nav-hamburger { display:none; background:none; border:1px solid var(--border); color:var(--txt); padding:.4rem .6rem; border-radius:var(--r-sm); cursor:pointer; font-size:1.1rem; line-height:1; }

/* ── HERO ────────────────────────────────────────────────── */
.hero { min-height:calc(100vh - 60px); display:flex; align-items:center; gap:4rem; padding:5rem 6vw; position:relative; overflow:hidden; background:var(--bg); }

#hero-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

.hero-left  { flex:1; min-width:0; position:relative; z-index:2; }
.hero-right { flex:0 0 245px; display:flex; flex-direction:column; gap:.85rem; position:relative; z-index:2; }

.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.25); color:var(--accent); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 16px; border-radius:100px; margin-bottom:1.5rem; }
.hero-badge-dot { width:7px; height:7px; background:var(--accent3); border-radius:50%; animation:pulse-dot 1.8s ease infinite; }

.hero-name { font-family:var(--ff); font-size:clamp(2.5rem,5vw,4rem); font-weight:800; line-height:1.05; letter-spacing:-.04em; color:#f8fafc; margin-bottom:.85rem; }
.hero-name em { font-style:normal; color:var(--accent); }

.hero-role { font-family:var(--ff); font-size:clamp(1rem,2vw,1.25rem); color:var(--accent2); margin-bottom:1.5rem; min-height:2em; display:flex; align-items:center; gap:2px; }
.hero-role .cursor { display:inline-block; width:2px; height:1.15em; background:var(--accent); border-radius:1px; animation:blink .8s step-end infinite; margin-left:2px; }

.hero-desc { color:var(--muted); font-size:1rem; line-height:1.85; max-width:540px; margin-bottom:2rem; }

.cta-row { display:flex; gap:.85rem; flex-wrap:wrap; }

.btn-p { background:var(--accent); color:#080c14; padding:.75rem 2rem; border-radius:var(--r-sm); font-weight:700; font-size:.9rem; text-decoration:none; border:none; cursor:pointer; letter-spacing:.02em; transition:opacity var(--tr),transform var(--tr); display:inline-block; font-family:var(--fb); }
.btn-p:hover { opacity:.85; transform:translateY(-2px); color:#080c14; }

.btn-s { background:transparent; color:var(--txt); padding:.75rem 2rem; border-radius:var(--r-sm); font-weight:600; font-size:.9rem; text-decoration:none; border:1px solid var(--border); cursor:pointer; transition:border-color var(--tr),color var(--tr),transform var(--tr); display:inline-block; }
.btn-s:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.hero-stats { display:flex; gap:2.5rem; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.stat .num { font-family:var(--ff); font-size:2.2rem; font-weight:800; color:#f8fafc; line-height:1; }
.stat .num span { color:var(--accent); }
.stat .lbl { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

.hero-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-md); padding:1rem 1.25rem; transition:border-color var(--tr); }
.hero-card:hover { border-color:var(--border-h); }
.hc-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.3rem; }
.hc-val   { font-family:var(--ff); font-size:.92rem; font-weight:600; color:var(--txt); }
.hc-val a { text-decoration:none; }
.hc-val a:hover { color:var(--accent); }
.status-ok { color:var(--accent3) !important; }

/* ── ABOUT ───────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.about-text { color:var(--muted); font-size:.97rem; line-height:1.85; margin-bottom:1rem; }
.about-text strong { color:var(--txt); font-weight:600; }
.about-highlights { display:flex; flex-direction:column; gap:1.25rem; }
.ah-item { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 1.25rem; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color var(--tr); }
.ah-item:hover { border-color:var(--border-h); }
.ah-item > .ti { color:var(--accent); font-size:1.4rem; flex-shrink:0; margin-top:2px; }
.ah-title { font-family:var(--ff); font-size:.95rem; font-weight:700; color:var(--txt); margin-bottom:.2rem; }
.ah-desc  { font-size:.82rem; color:var(--muted); }

/* ── SKILLS ──────────────────────────────────────────────── */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.sk { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-md); padding:1.25rem 1.4rem 1.5rem; position:relative; overflow:hidden; transition:border-color var(--tr),transform var(--tr); }
.sk:hover { border-color:var(--border-h); transform:translateY(-3px); }
.sk-bar { position:absolute; bottom:0; left:0; height:3px; width:0; transition:width 1.2s cubic-bezier(.4,0,.2,1); }
.sk.animated .sk-bar { width:var(--pct,0%); }
.sk-ico  { font-size:1.5rem; margin-bottom:.75rem; display:block; }
.sk-name { font-family:var(--ff); font-size:.95rem; font-weight:700; color:var(--txt); margin-bottom:.2rem; }
.sk-pct  { font-size:.77rem; color:var(--muted); }

/* ── TIMELINE ────────────────────────────────────────────── */
.tl { position:relative; padding-left:2rem; max-width:780px; }
.tl::before { content:''; position:absolute; left:0; top:12px; bottom:0; width:1px; background:var(--border); }
.tli { position:relative; padding-bottom:2.75rem; }
.tli:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:-2rem; top:5px; width:10px; height:10px; background:var(--accent); border-radius:50%; transform:translateX(-4px); box-shadow:0 0 0 4px rgba(56,189,248,.12); }
.tl-dot-green { background:var(--accent3); box-shadow:0 0 0 4px rgba(52,211,153,.12); }
.tl-period { display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; }
.tl-role { font-family:var(--ff); font-size:1.1rem; font-weight:700; color:#f8fafc; margin-bottom:.25rem; line-height:1.3; }
.tl-co { font-size:.845rem; color:var(--muted); margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem; }
.tl-list { list-style:none; margin-bottom:.5rem; }
.tl-list li { font-size:.845rem; color:var(--muted); padding-left:1.1rem; position:relative; margin-bottom:.3rem; line-height:1.65; }
.tl-list li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-size:.72rem; top:3px; }
.tl-desc-small { font-size:.845rem; color:var(--muted); line-height:1.7; }
.tl-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
.tag { font-size:.67rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.15); padding:3px 10px; border-radius:100px; }
.tag.tag-v { color:#818cf8; background:rgba(129,140,248,.1); border-color:rgba(129,140,248,.15); }
.tag.tag-g { color:var(--accent3); background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.15); }

/* ── PORTFOLIO CAROUSEL ──────────────────────────────────── */
.portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.portfolio-header .sec-div { margin-bottom: 0; }

.carousel-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: 3.25rem;
}
.carousel-counter { font-family:var(--ff); font-size:.85rem; color:var(--muted); min-width:50px; text-align:center; }
.carousel-counter span { color:var(--txt); font-weight:700; }

.arrow-btn {
    width: 44px; height: 44px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--tr);
    flex-shrink: 0;
}
.arrow-btn:hover:not([disabled]) { border-color:var(--accent); color:var(--accent); transform:scale(1.06); }
.arrow-btn:active:not([disabled]) { transform:scale(.95); }
.arrow-btn[disabled] { opacity:.3; cursor:default; }

/*
 * CAROUSEL — uses inline-block to avoid ANY flex/grid override issues.
 * white-space:nowrap keeps cards on one line regardless of external CSS.
 */
.carousel-wrap {
    overflow: hidden;
    width: 100%;
    border-radius: var(--r-md);
}

.carousel-belt {
    /* inline-block approach: immune to WordPress CSS overrides */
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

.pc-card {
    display: inline-block !important;
    vertical-align: top;
    white-space: normal !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    /* width injected by JS */
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--tr), transform var(--tr);
    margin-right: 1.1rem;
}
.pc-card:last-child { margin-right: 0; }
.pc-card:hover { border-color: var(--border-h); transform: translateY(-4px); }

.pc-thumb {
    height: 158px;
    display: block;
    display: flex !important; /* override display:block set above */
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: filter var(--tr);
}
.pc-thumb:hover { filter: brightness(1.15); }
.pt-wp { background: #0d1b2a; }
.pt-wt { background: #1a0f07; }
.pt-gm { background: #071a0f; }
.pt-cv { background: #0e0714; }
.pt-cl { background: #100714; }

.pc-body    { padding: 1.25rem; }
.pc-title   { font-family:var(--ff); font-size:.975rem; font-weight:700; color:#f8fafc; margin-bottom:.4rem; line-height:1.3; }
.pc-desc    { font-size:.8rem; color:var(--muted); line-height:1.65; margin-bottom:.85rem; }
.pc-link    { font-size:.75rem; color:var(--accent); font-weight:700; letter-spacing:.04em; text-decoration:none; display:inline-flex; align-items:center; gap:5px; transition:gap var(--tr); }
.pc-link:hover { gap:9px; }

.badge-new { display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent3); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.2); padding:2px 8px; border-radius:100px; margin-left:6px; vertical-align:middle; }
.badge-wp  { display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.15); padding:2px 8px; border-radius:100px; margin-left:6px; vertical-align:middle; }

.carousel-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; }
.cdot { width:6px; height:6px; border-radius:50%; background:var(--border); border:none; cursor:pointer; transition:all .25s; padding:0; }
.cdot.active { background:var(--accent); width:20px; border-radius:3px; }
.cdot:hover:not(.active) { background:var(--muted); }

/* ── CONTACT ─────────────────────────────────────────────── */
/* .cg { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; }
.ci-desc { color:var(--muted); font-size:.95rem; line-height:1.85; margin-bottom:1.75rem; }
.ci-row  { display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:var(--muted); margin-bottom:.85rem; }
.ci-row .ti { color:var(--accent); font-size:1.1rem; }
.ci-row a   { color:var(--muted); text-decoration:none; transition:color var(--tr); }
.ci-row a:hover { color:var(--accent); }
.socials { display:flex; gap:.75rem; margin-top:1.75rem; }
.sb { width:44px; height:44px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:1.2rem; text-decoration:none; transition:all var(--tr); }
.sb:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.cf input, .cf textarea { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-sm); padding:.78rem 1rem; color:var(--txt); font-family:var(--fb); font-size:.9rem; margin-bottom:.85rem; outline:none; transition:border-color var(--tr); -webkit-appearance:none; }
.cf input:focus, .cf textarea:focus { border-color:var(--accent); }
.cf input::placeholder, .cf textarea::placeholder { color:var(--muted); }
.cf textarea { height:120px; resize:vertical; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.cf-row input { margin-bottom:0; }
.cf .wpcf7-form-control-wrap { display:block; margin-bottom:.85rem; }
.cf .wpcf7-submit { margin-top:0; width:100%; }
#cf-feedback.success { color:var(--accent3); }
#cf-feedback.error   { color:#fb7185; } */

/* Contact Form 7 — integrare cu tema dark */
/* CONTACT FORM 7 */

.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form textarea {
    width: 100% !important;
    background: #161d2e !important;
    border: 1px solid #2a3448 !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    margin-bottom: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color .25s ease !important;
    -webkit-appearance: none;
}

.wpcf7 form input[type="text"]:focus,
.wpcf7 form input[type="email"]:focus,
.wpcf7 form textarea:focus {
    border-color: #38bdf8 !important;
}

.wpcf7 form input::placeholder,
.wpcf7 form textarea::placeholder {
    color: #94a3b8 !important;
}

.wpcf7 form textarea {
    height: 140px !important;
    resize: vertical !important;
}

.wpcf7 form input[type="submit"] {
    width: 100% !important;
    background: #38bdf8 !important;
    color: #080c14 !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity .25s ease !important;
}

.wpcf7 form input[type="submit"]:hover {
    opacity: .85;
}

.wpcf7-response-output {
    border: none !important;
    padding: 10px 0 !important;
    margin: 10px 0 0 !important;
    color: #38bdf8 !important;
}

.wpcf7-not-valid-tip {
    color: #fb7185 !important;
    font-size: 13px !important;
}
/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background:var(--bg); border-top:1px solid var(--border); padding:1.5rem 6vw; display:flex; justify-content:space-between; align-items:center; }
.footer-txt  { font-size:.8rem; color:var(--muted); }
.footer-link { font-size:.8rem; color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:5px; transition:color var(--tr); }
.footer-link:hover { color:var(--accent); }

/* ── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.24s; }

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.75)} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── RESPONSIVE: Tablet ≤ 900px ──────────────────────────── */
@media (max-width:900px) {
    .hero { flex-direction:column; padding:3rem 6vw 4rem; min-height:auto; gap:2.5rem; }
    .hero-right { flex:none; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
    .about-grid { grid-template-columns:1fr; gap:2.5rem; }
    .cg { grid-template-columns:1fr; gap:2.5rem; }
}

/* ── RESPONSIVE: Mobile ≤ 640px ─────────────────────────── */
@media (max-width:640px) {
    .nav { padding:.85rem 5vw; }
    .nav-hamburger { display:flex; align-items:center; }
    #nav-menu { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--border); padding:1rem 5vw 1.5rem; }
    #nav-menu.open { display:block; }
    .nav-links { flex-direction:column; gap:1rem; }
    .hero-right { grid-template-columns:1fr; }
    .hero-stats { gap:1.5rem; }
    .skills-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
    .section-pad { padding:3rem 5vw; }
    .portfolio-header { flex-direction:column; align-items:flex-start; gap:1rem; }
    .carousel-controls { padding-bottom:0; }
    .cf-row { grid-template-columns:1fr; }
    .cf-row input { margin-bottom:.85rem; }
    .footer { flex-direction:column; gap:.75rem; text-align:center; }
}