*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0A0A0A;
  --white:#FAFAF8;
  --gray-100:#F2F1EF;
  --gray-200:#E4E3E0;
  --gray-400:#B0AFA9;
  --gray-600:#706F6A;
  --accent:#1D9E75;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --max:1100px;
  --pad:clamp(1.5rem,5vw,4rem);
  --nav-bg:rgba(250,250,248,0.92);
  --about-bg:#0A0A0A;
}
[data-theme="dark"]{
  --black:#EDECE8;
  --white:#111110;
  --gray-100:#1C1C1A;
  --gray-200:#2E2E2B;
  --gray-400:#5A5A56;
  --gray-600:#9A9990;
  --nav-bg:rgba(17,17,16,0.92);
  --about-bg:#1A1A18;
}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background 0.3s,color 0.3s}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.25rem var(--pad);display:flex;align-items:center;justify-content:space-between;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color 0.3s,background 0.3s}
nav.scrolled{border-color:var(--gray-200)}
.nav-logo{font-family:var(--serif);font-size:1.1rem;letter-spacing:-0.01em;color:var(--black);text-decoration:none}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{font-size:0.8125rem;color:var(--gray-600);text-decoration:none;letter-spacing:0.02em;transition:color 0.2s}
.nav-links a:hover{color:var(--black)}
.nav-cta{font-size:0.8125rem;font-weight:500;color:var(--black);text-decoration:none;border:1px solid var(--black);padding:0.45rem 1rem;border-radius:2rem;letter-spacing:0.01em;transition:background 0.2s,color 0.2s}
.nav-cta:hover{background:var(--black);color:var(--white)}

/* SECTIONS */
section{padding:7rem var(--pad)}
.inner{max-width:var(--max);margin:0 auto}

/* HERO */
#hero{padding-top:7rem;padding-bottom:0;border-bottom:none;text-align:center}
#hero .inner{padding-bottom:2rem}
.hero-wave-wrap{width:calc(100% + 2 * var(--pad));margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));height:clamp(260px,22vw,480px);overflow:hidden;line-height:0;position:relative}
.hero-wave-bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;min-width:1500px;height:auto;display:block}
.hero-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:center top;display:block;margin:0 auto 2.5rem;opacity:0;animation:fadeUp 0.7s 0.1s forwards}
.hero-eyebrow{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-600);margin-bottom:1.5rem;opacity:0;animation:fadeUp 0.7s 0.2s forwards}
.hero-headline{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,4.2rem);line-height:1.22;letter-spacing:-0.02em;max-width:820px;margin:0 auto 1.5rem;opacity:0;animation:fadeUp 0.7s 0.35s forwards}
.hero-headline em{font-style:italic;color:var(--gray-600)}
.hero-sub{font-size:1.1rem;line-height:1.7;color:var(--black);opacity:0.65;max-width:540px;margin:0 auto 3rem;opacity:0;animation:fadeUp 0.7s 0.5s forwards}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:1.5rem;opacity:0;animation:fadeUp 0.7s 0.65s forwards}
.btn-primary{display:inline-flex;align-items:center;gap:0.5rem;background:var(--black);color:var(--white);font-size:0.875rem;font-weight:400;padding:0.75rem 1.5rem;border-radius:2rem;text-decoration:none;transition:opacity 0.2s}
.btn-primary:hover{opacity:0.8}
.btn-ghost{font-size:0.875rem;color:var(--gray-600);text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:color 0.2s}
.btn-ghost:hover{color:var(--black)}
.btn-ghost .arr{transition:transform 0.2s}
.btn-ghost:hover .arr{transform:translateX(3px)}
.hero-stats{padding:2.5rem var(--pad);border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);opacity:0;animation:fadeUp 0.7s 0.8s forwards}
.hero-stats-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:center;gap:0}
.hero-stats-inner>div{flex:1;text-align:center;padding:0 2rem;border-right:1px solid var(--gray-200)}
.hero-stats-inner>div:last-child{border-right:none}
.stat-num{font-family:var(--serif);font-size:2.5rem;letter-spacing:-0.03em;line-height:1}
.stat-label{font-size:0.8125rem;color:var(--gray-600);margin-top:0.4rem;letter-spacing:0.02em}

/* LOGOS STRIP */
.logos-strip{padding:2.5rem var(--pad);border-bottom:1px solid var(--gray-200);text-align:center}
.logos-label{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-400);margin-bottom:1.5rem}
.logos-row{display:flex;align-items:center;justify-content:center;gap:3.5rem;flex-wrap:wrap}
.company-logo{height:26px;width:auto;object-fit:contain;opacity:0.5;filter:grayscale(1);transition:opacity 0.25s,filter 0.25s}
.company-logo:hover{opacity:0.85;filter:grayscale(0)}
[data-theme="dark"] .company-logo{filter:grayscale(1) brightness(0) invert(1);opacity:0.45}
[data-theme="dark"] .company-logo:hover{opacity:0.8}

/* MARQUEE */
.marquee-wrap{padding:1.5rem 0;border-bottom:1px solid var(--gray-200);overflow:hidden;background:var(--white)}
.marquee-track{display:flex;gap:3rem;animation:marquee 22s linear infinite;width:max-content}
.marquee-track span{font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gray-600);white-space:nowrap}
.marquee-track .dot{color:var(--accent)}

/* APPROACH — VALUE CHAIN */
#approach{border-bottom:1px solid var(--gray-200)}
.label-row{display:flex;align-items:center;gap:0.75rem;margin-bottom:3.5rem}
.section-label{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-600)}
.section-label-num{font-size:0.75rem;letter-spacing:0.1em;color:var(--gray-600);font-variant-numeric:tabular-nums}
.section-h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-0.02em;line-height:1.15;max-width:640px;margin-bottom:4rem}
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:0.75rem;overflow:hidden}
.chain-item{background:var(--white);padding:1.75rem 1.25rem;transition:background 0.2s}
.chain-item:hover{background:var(--gray-100)}
.chain-step{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gray-600);margin-bottom:1rem}
.chain-arrow{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem}
.chain-arrow svg{color:var(--accent)}
.chain-name{font-size:0.875rem;font-weight:500;color:var(--black);line-height:1.3}
.chain-desc{font-size:0.875rem;color:var(--gray-600);margin-top:0.5rem;line-height:1.6}
.capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);border-radius:0.75rem;overflow:hidden;margin-top:1px}
.cap-item{background:var(--white);padding:2rem 1.5rem;transition:background 0.2s}
.cap-item:hover{background:var(--gray-100)}
.cap-tag{display:inline-block;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);background:rgba(29,158,117,0.08);padding:0.3rem 0.6rem;border-radius:0.25rem;margin-bottom:1rem}
.cap-item h3{font-size:0.9375rem;font-weight:500;margin-bottom:0.5rem}
.cap-item p{font-size:0.875rem;color:var(--gray-600);line-height:1.6}

/* PROJECTS ACCORDION */
#projects{border-bottom:1px solid var(--gray-200)}
.proj-accordion{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--gray-200);border-radius:0.75rem;overflow:hidden;margin-top:0}

/* Left list */
.proj-list{display:flex;flex-direction:column;border-right:1px solid var(--gray-200)}
.proj-list-item{display:flex;align-items:center;gap:1.25rem;padding:1.5rem 1.75rem;cursor:pointer;border-bottom:1px solid var(--gray-200);transition:background 0.2s;position:relative;background:var(--white)}
.proj-list-item:last-child{border-bottom:none}
.proj-list-item:hover{background:var(--gray-100)}
.proj-list-item.active{background:var(--gray-100)}
.proj-list-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 2px 2px 0}
.proj-list-num{font-size:0.7rem;color:var(--gray-400);letter-spacing:0.1em;flex-shrink:0;min-width:1.5rem;font-variant-numeric:tabular-nums}
.proj-list-body{flex:1;display:flex;flex-direction:column;gap:0.3rem}
.proj-list-badge{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);font-weight:500}
.proj-list-title{font-size:0.9375rem;font-weight:400;color:var(--black);line-height:1.35}
.proj-list-arrow{font-size:0.875rem;color:var(--gray-400);flex-shrink:0;transition:transform 0.2s,color 0.2s}
.proj-list-item.active .proj-list-arrow,.proj-list-item:hover .proj-list-arrow{transform:translateX(3px);color:var(--black)}

/* Right detail — gradient background */
.proj-detail{background:url('images/card background.jpg') center/cover no-repeat;position:relative;min-height:380px;display:flex;align-items:center;justify-content:center}
.proj-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity 0.35s}
.proj-panel.active{opacity:1;pointer-events:auto}

/* White card floating over gradient */
.proj-panel-card{background:#fff;border-radius:1.25rem;padding:2rem;box-shadow:0 8px 48px rgba(0,0,0,0.13),0 2px 10px rgba(0,0,0,0.07);width:100%;display:flex;flex-direction:column;gap:0.75rem}
.proj-panel-meta{display:flex;align-items:center;gap:0.75rem}
.proj-panel-num{font-size:0.7rem;color:#B0AFA9;letter-spacing:0.1em;font-variant-numeric:tabular-nums}
.proj-panel-badge{font-size:0.7rem;letter-spacing:0.09em;text-transform:uppercase;background:#F2F1EF;color:#706F6A;padding:0.25rem 0.65rem;border-radius:0.25rem;font-weight:500}
.proj-panel-label{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:#B0AFA9}
.proj-panel-title{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-0.01em;line-height:1.25;color:#0A0A0A}
.proj-panel-card>p{font-size:0.875rem;color:#706F6A;line-height:1.7}
.proj-panel .proj-tags{display:flex;flex-wrap:wrap;gap:0.4rem;padding-top:0.25rem}
.proj-panel .proj-tag{font-size:0.75rem;border:1px solid #E4E3E0;color:#706F6A;padding:0.25rem 0.6rem;border-radius:2rem;background:#fff}

/* Chat card (standalone below accordion) */
.chat-card{background:#0A0A0A!important;color:#fff!important;padding:3rem 2.5rem;display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem;border-radius:0.75rem}

/* TECH */
#technical{border-bottom:1px solid var(--gray-200)}
.tech-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.tech-intro{position:sticky;top:8rem}
.tech-intro .section-h2{margin-bottom:1.5rem;font-size:clamp(1.75rem,3vw,2.75rem)}
.tech-intro p{font-size:1rem;color:var(--gray-600);line-height:1.75}
.tech-list{display:flex;flex-direction:column;gap:0}
.tech-row{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;border-bottom:1px solid var(--gray-200);gap:1rem}
.tech-row:first-child{border-top:1px solid var(--gray-200)}
.tech-name{font-size:0.9375rem;font-weight:400}
.tech-context{font-size:0.875rem;color:var(--gray-600);max-width:260px;margin-top:0.2rem}
.tech-bar-wrap{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}
.tech-dots{display:flex;gap:4px}
.tech-dot{width:6px;height:6px;border-radius:50%;background:var(--gray-200)}
.tech-dot.on{background:var(--black)}

/* ABOUT */
#about{border-bottom:1px solid var(--gray-200);background:var(--about-bg);color:#fff;transition:background 0.3s}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-left{}
.about-label{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.45);margin-bottom:2rem}
.about-headline{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-0.02em;line-height:1.15;margin-bottom:2.5rem;color:#fff}
.about-headline em{font-style:italic;color:rgba(255,255,255,0.5)}
.about-list{list-style:none;display:flex;flex-direction:column;margin-bottom:2.5rem;border-top:1px solid rgba(255,255,255,0.1)}
.about-item{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.about-item-text{font-size:1rem;color:rgba(255,255,255,0.7);line-height:1.6}
.about-item-num{font-size:0.75rem;color:rgba(255,255,255,0.3);letter-spacing:0.08em;flex-shrink:0;font-variant-numeric:tabular-nums}
.about-linkedin{display:inline-flex;align-items:center;gap:0.5rem;color:rgba(255,255,255,0.6);font-size:0.875rem;text-decoration:none;border:1px solid rgba(255,255,255,0.2);padding:0.55rem 1.1rem;border-radius:2rem;transition:color 0.2s,border-color 0.2s}
.about-linkedin:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.about-right{display:flex;align-items:center;justify-content:center}
.about-gradient-wrap{position:relative;width:100%;border-radius:1.5rem;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.35)}
.about-gradient-img{display:block;width:100%;height:auto}
.about-chips{position:absolute;inset:0}
.about-chip{position:absolute;background:rgba(255,255,255,0.88);color:#0A0A0A;font-size:0.8125rem;font-weight:500;letter-spacing:0.01em;padding:0.45rem 1rem;border-radius:2rem;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 16px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.08)}

/* FAQ */
#faq{border-bottom:1px solid var(--gray-200)}
.faq-layout{display:grid;grid-template-columns:1fr 2fr;gap:5rem;align-items:start}
.faq-intro{position:sticky;top:8rem}
.faq-intro .section-h2{font-size:clamp(1.75rem,3vw,2.75rem);margin-bottom:1rem}
.faq-intro p{font-size:0.875rem;color:var(--gray-600);line-height:1.7}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--gray-200)}
.faq-item:first-child{border-top:1px solid var(--gray-200)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0;cursor:pointer;gap:1rem}
.faq-q-text{font-size:0.9375rem;font-weight:400;line-height:1.4}
.faq-icon{width:20px;height:20px;flex-shrink:0;border:1px solid var(--gray-200);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s,border-color 0.2s;font-size:0.75rem;color:var(--gray-600)}
.faq-item.open .faq-icon{background:var(--black);border-color:var(--black);color:var(--white)}
.faq-a{font-size:0.875rem;color:var(--gray-600);line-height:1.75;max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.2s}
.faq-item.open .faq-a{max-height:400px;padding-bottom:1.25rem}

/* CONTACT */
#contact{background:var(--white);text-align:center}
.contact-eyebrow{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-600);margin-bottom:2rem}
.contact-headline{font-family:var(--serif);font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-0.03em;line-height:1.05;margin-bottom:2.5rem}
.contact-headline em{font-style:italic;color:var(--gray-400)}
.contact-link{display:inline-flex;align-items:center;gap:0.5rem;font-size:1rem;color:var(--black);text-decoration:none;border-bottom:1px solid var(--black);padding-bottom:0.2rem;transition:opacity 0.2s}
.contact-link:hover{opacity:0.5}

/* FOOTER */
footer{padding:2rem var(--pad);border-top:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-size:0.75rem;color:var(--gray-600)}
.footer-links{display:flex;gap:1.5rem;list-style:none}
.footer-links a{font-size:0.75rem;color:var(--gray-600);text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--black)}

/* WANT TO CHAT CARD */
.chat-card{background:#0A0A0A!important;color:#fff!important;padding:3rem 2.5rem;display:flex;flex-direction:column;gap:1rem}
.chat-label{font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.45)}
.chat-headline{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;letter-spacing:-0.01em;color:#fff;margin:0}
.chat-sub{font-size:1rem;color:rgba(255,255,255,0.6);line-height:1.7;max-width:520px;margin:0}
.chat-actions{display:flex;align-items:center;gap:1.5rem;margin-top:0.5rem;flex-wrap:wrap}

/* CONTACT ACTIONS */
.contact-actions{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.contact-btn-primary{font-size:1rem;padding:0.875rem 2rem}

/* THEME TOGGLE */
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--gray-200);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s,border-color 0.2s;flex-shrink:0;margin-left:0.75rem}
.theme-toggle:hover{background:var(--gray-100)}
.theme-toggle svg{width:15px;height:15px;stroke:var(--gray-600);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.2s}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s,transform 0.7s}
.reveal.visible{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:860px){
  .chain{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .capabilities{grid-template-columns:1fr}
  .proj-accordion{grid-template-columns:1fr;overflow:hidden}
  .proj-list{border-right:none;border-bottom:1px solid var(--gray-200)}
  .proj-list-body{min-width:0}
  .proj-list-title{display:block;white-space:normal;word-break:break-word}
  .proj-list-arrow{display:none}
  .proj-list-item{padding:1.25rem 1.25rem}
  .proj-detail{min-height:0;display:block}
  .proj-panel{position:relative;inset:auto;display:none;padding:1.5rem;pointer-events:none}
  .proj-panel.active{display:block;opacity:1;pointer-events:auto}
  .proj-panel-card{border-radius:0.75rem}
  .tech-layout,.faq-layout{grid-template-columns:1fr;gap:2.5rem}
  .tech-intro,.faq-intro{position:static}
  .about-layout{grid-template-columns:1fr;gap:3rem}
  .about-right{order:2}
  .about-left{order:1}
  .hero-stats-inner{flex-wrap:wrap}
  .hero-stats-inner>div{flex:1 1 40%;border-right:none;border-bottom:1px solid var(--gray-200);padding:1.25rem}
  .hero-stats-inner>div:last-child{border-bottom:none}
  nav .nav-links{display:none}
  .logos-row{gap:2rem}
  .company-logo{height:22px}
}