/* ============================================
   C01 Bennet Tech
   Concept: Silicon Valley Minimal × Black + Electric Blue
   ============================================ */

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

:root {
  --color-bg:      #0A0A0A;
  --color-bg-alt:  #111111;
  --color-white:   #FFFFFF;
  --color-blue:    #2563EB;
  --color-gray:    #F5F5F5;
  --color-text:    #FFFFFF;
  --color-text-sub:#8A8A8A;
  --color-rule:    #222222;

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body:    "Inter Tight", -apple-system, sans-serif;

  --max-w: 1100px;
  --pad:   40px;
  --transition: 0.3s ease;
}

html{scroll-behavior:smooth}

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--color-blue);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-white)}
ul{list-style:none}

.section-label{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-blue);margin-bottom:8px}
.section-heading{font-family:var(--font-display);font-size:clamp(36px,6vw,56px);font-weight:800;letter-spacing:-0.03em;margin-bottom:56px}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(10,10,10,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-rule)}
.header__inner{max-width:var(--max-w);margin:0 auto;padding:16px var(--pad);display:flex;justify-content:space-between;align-items:center}
.header__logo{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--color-white);letter-spacing:-0.02em}
.header__logo-dot{color:var(--color-blue)}
.header__nav{display:flex;gap:28px;align-items:center}
.header__link{font-size:13px;font-weight:500;color:var(--color-text-sub);transition:color var(--transition)}
.header__link:hover{color:var(--color-white)}
.header__link--cta{background:var(--color-blue);color:var(--color-white);padding:8px 20px;border-radius:6px}
.header__link--cta:hover{background:#3B82F6;color:#fff}

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px var(--pad) 80px}
.hero__inner{max-width:var(--max-w);margin:0 auto;width:100%}
.hero__eyebrow{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-text-sub);margin-bottom:32px}
.hero__title{font-family:var(--font-display);font-size:clamp(48px,10vw,96px);font-weight:800;line-height:1;letter-spacing:-0.04em;margin-bottom:32px}
.hero__title-dot{color:var(--color-blue)}
.hero__lead{font-size:17px;color:var(--color-text-sub);max-width:480px;line-height:1.9;margin-bottom:40px}
.hero__btn{display:inline-block;padding:16px 40px;background:var(--color-blue);color:#fff;font-weight:600;font-size:14px;border-radius:8px;letter-spacing:0.02em;transition:background var(--transition)}
.hero__btn:hover{background:#3B82F6;color:#fff}

/* ---------- Services ---------- */
.services{padding:120px var(--pad);max-width:var(--max-w);margin:0 auto;border-top:1px solid var(--color-rule)}
.services__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.service-card{border:1px solid var(--color-rule);padding:40px 32px;transition:border-color var(--transition)}
.service-card:hover{border-color:var(--color-blue)}
.service-card__number{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--color-blue);display:block;margin-bottom:16px}
.service-card__title{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.01em;margin-bottom:12px}
.service-card__desc{font-size:14px;color:var(--color-text-sub);line-height:1.8}

/* ---------- Works ---------- */
.works{padding:120px var(--pad);max-width:var(--max-w);margin:0 auto;border-top:1px solid var(--color-rule)}
.works__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.work-card{overflow:hidden;border:1px solid var(--color-rule);transition:border-color var(--transition)}
.work-card:hover{border-color:var(--color-blue)}
.work-card--wide{grid-column:span 2}
.work-card__image{overflow:hidden}
.work-card__image img{width:100%;height:280px;object-fit:cover;transition:transform 0.6s cubic-bezier(0.16,1,0.3,1)}
.work-card--wide .work-card__image img{height:360px}
.work-card:hover .work-card__image img{transform:scale(1.03)}
.work-card__info{padding:24px}
.work-card__tag{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-blue);margin-bottom:8px;display:block}
.work-card__title{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:4px}
.work-card__desc{font-size:13px;color:var(--color-text-sub)}

/* ---------- About ---------- */
.about{padding:120px var(--pad);max-width:var(--max-w);margin:0 auto;border-top:1px solid var(--color-rule)}
.about__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.about__body{color:var(--color-text-sub);margin-bottom:20px;line-height:1.9}
.about__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.about__stat{text-align:center;padding:32px 0;border:1px solid var(--color-rule)}
.about__stat-number{font-family:var(--font-display);font-size:40px;font-weight:800;display:block;color:var(--color-blue)}
.about__stat-label{font-size:12px;color:var(--color-text-sub);letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;display:block}

/* ---------- Contact ---------- */
.contact{padding:120px var(--pad);max-width:var(--max-w);margin:0 auto;border-top:1px solid var(--color-rule);text-align:center}
.contact__heading{font-family:var(--font-display);font-size:clamp(48px,8vw,80px);font-weight:800;letter-spacing:-0.03em;margin-bottom:16px}
.contact__dot{color:var(--color-blue)}
.contact__text{color:var(--color-text-sub);margin-bottom:32px}
.contact__email{font-size:18px;font-weight:600;padding-bottom:4px;border-bottom:2px solid var(--color-blue)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--color-rule);padding:24px var(--pad);max-width:var(--max-w);margin:0 auto}
.footer__inner{display:flex;justify-content:space-between;align-items:center}
.footer__logo{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--color-text-sub)}
.footer__links{display:flex;gap:20px}
.footer__links a{font-size:12px;color:var(--color-text-sub)}
.footer__copy{font-size:11px;color:var(--color-text-sub);opacity:0.5}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  :root{--pad:20px}
  .header__nav{gap:16px}.header__link{font-size:11px}.header__link--cta{padding:6px 14px}
  .hero{min-height:auto;padding:100px var(--pad) 60px}
  .hero__title{font-size:clamp(36px,10vw,56px)}
  .services__grid{grid-template-columns:1fr}
  .works__grid{grid-template-columns:1fr}.work-card--wide{grid-column:span 1}
  .work-card__image img,.work-card--wide .work-card__image img{height:220px}
  .about__inner{grid-template-columns:1fr;gap:48px}
  .about__stats{grid-template-columns:repeat(3,1fr);gap:12px}
  .footer__inner{flex-direction:column;gap:16px;text-align:center}
}

@media(max-width:480px){
  .header__nav{gap:10px}.header__link{font-size:10px}
  .hero__title{font-size:32px}
  .about__stats{grid-template-columns:1fr;gap:8px}
  .about__stat{padding:20px}
}