/* Basic reset and design tokens (Minimal / Flat) */
@font-face {
    font-family: 'ComponentFont';
    src: url('../assets/ttf/ttf-title.ttf') format('truetype');
}
:root{
  --bg:#f6f7f9;
  --surface:#ffffff;
  --text:#0f1720;
  --muted:#6b7280;
  --muted-2:#94a3b8;
  --primary:#0b63c6;
  --accent:#06b6d4;
  --card:#ffffff;
  --radius:12px;
  --max-width:1200px;
  --hero-height-desktop:640px;
  --hero-height-tablet:480px;
  --hero-height-mobile:320px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width);margin:0 auto;}

/* Header */
.site-header{background:rgba(255,255,255,0.98);color:var(--text);backdrop-filter: blur(6px);position:fixed;left:0;right:0;top:0;z-index:1000;border-bottom:1px solid rgba(15,23,32,0.04);transition:background .22s ease,box-shadow .22s ease}
.site-header.scrolled{background:rgba(255,255,255,1);box-shadow:0 8px 28px rgba(15,23,32,0.06)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 28px}
.logo{font-weight:700;color:var(--text);text-decoration:none;font-size:22px;letter-spacing:0.04rem;font-style:italic;font-family:'ComponentFont', sans-serif}
.nav{display:flex;gap:20px;font-size:15px}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;transition:color .14s ease,background .14s ease}
.nav a:focus{outline:2px solid rgba(11,99,198,0.14);outline-offset:3px}
.nav a:hover{color:var(--text);background:rgba(11,99,198,0.06)}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:22px}
/* header CTA */
.header-actions{margin-left:12px}
.header-cta{background:linear-gradient(90deg,var(--primary),#066bc0);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(11,99,198,0.08);transition:transform .18s ease,box-shadow .18s ease}
.header-cta:hover{transform:translateY(-3px);box-shadow:0 14px 42px rgba(11,99,198,0.12)}

/* Hero (flat & refined) */
.hero-carousel{position:relative}
.carousel-wrapper{position:relative;height:var(--hero-height-desktop);overflow:hidden;border-radius:calc(var(--radius) + 6px);box-shadow:0 20px 50px rgba(15,23,32,0.06)}
.carousel-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform .7s ease,filter .4s ease}
.carousel-slide.active{opacity:1;transform:scale(1);filter:grayscale(0)}
.carousel-overlay{position:absolute;inset:0;display:flex;align-items:center}
.carousel-text{max-width:760px;color:#fff;padding:36px;background:linear-gradient(90deg,rgba(3,12,32,0.7),rgba(3,12,32,0.06));border-radius:14px;margin-left:56px}
.carousel-text h1{font-size:46px;margin-bottom:8px;letter-spacing:-0.01em;font-weight:800;line-height:1.02}
.carousel-text p{font-size:18px;margin-bottom:18px;color:rgba(255,255,255,0.95);line-height:1.6}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:10px 18px;border-radius:9px;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.16)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.12)}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,rgba(0,0,0,0.28),rgba(0,0,0,0.08));border:0;color:#fff;width:46px;height:56px;border-radius:10px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.carousel-arrow.left{left:18px}
.carousel-arrow.right{right:18px}
.carousel-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;display:flex;gap:10px}
.carousel-dots button{width:14px;height:14px;border-radius:50%;border:0;background:rgba(255,255,255,0.5);cursor:pointer;box-shadow:0 4px 14px rgba(2,6,23,0.12)}
.carousel-dots button.active{background:var(--primary);transform:scale(1.05);box-shadow:0 8px 24px rgba(11,99,198,0.12)}

/* Features */
.features{padding:56px 0}
.features h2{margin-bottom:22px;color:var(--text);font-size:30px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:linear-gradient(180deg,var(--card),#fbfdff);padding:18px;border-radius:14px;border:1px solid rgba(15,23,32,0.04);box-shadow:0 8px 28px rgba(11,99,198,0.04)}
.card h3{margin-bottom:10px;color:var(--text);font-size:18px}
.card p{color:var(--muted);line-height:1.6}

/* Card media and hover effects */
.card{display:flex;flex-direction:column;overflow:hidden;transition:transform .28s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease;background:linear-gradient(180deg,var(--card),#fbfdff);padding:14px;border-radius:12px;border:1px solid rgba(15,23,32,0.04);box-shadow:0 8px 20px rgba(11,99,198,0.03)}
.card-media{width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:10px;flex-shrink:0;transition:transform .45s ease,filter .3s ease}
.card-body{padding:12px 8px 8px 8px;display:flex;flex-direction:column;flex:1}
.more-link{margin-top:10px;text-align:center;display:inline-block;padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,var(--primary),#066bc0);color:#fff;border:0;text-decoration:none;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .26s ease,transform .26s ease,background .18s ease}
.card h3{margin:12px 0 8px}

.card:hover, .card:focus{transform:translateY(-8px);box-shadow:0 28px 80px rgba(11,99,198,0.08)}
.card:hover .more-link, .card:focus .more-link{opacity:1;transform:translateY(0)}
.card:hover .card-media, .card:focus .card-media{filter:brightness(0.92);transform:scale(1.04)}

/* make sure grid gap aligns with card rounding */
.grid .card:first-child .card-media{border-top-left-radius:12px}

/* Contact cards use shorter media thumbnails */
.contact-cards .card-media{height:90px;aspect-ratio:auto}


/* About */
.about{padding:36px 0;background:transparent}
.about h2{margin-bottom:12px;color:var(--text)}

/* Contact */
.contact{padding:44px 0}
.contact > div{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:start}
.contact > div > div{background:var(--surface);padding:14px;border-radius:10px;border:1px solid rgba(15,23,32,0.04);color:var(--muted-2);box-shadow:0 8px 20px rgba(11,99,198,0.03)}
.contact p.lead{color:var(--muted);margin-top:8px}

/* Footer */
.site-footer{background:#061529;color:#dbe9ff;padding:30px 0}
/* footer layout */
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:20px}
.site-footer .brand{font-weight:700;color:#fff}
.site-footer .links{display:flex;gap:18px}
.site-footer .links a{color:rgba(255,255,255,0.85);text-decoration:none}
.site-footer .links a:hover{color:#fff}

/* Responsive */
@media (max-width:1000px){
  .carousel-wrapper{height:var(--hero-height-tablet)}
  .carousel-text h1{font-size:34px}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .carousel-wrapper{height:var(--hero-height-mobile)}
  .carousel-text{padding:14px;margin-left:16px}
  .carousel-text h1{font-size:20px}
  .carousel-text p{font-size:14px}
  .carousel-arrow{width:36px;height:48px;font-size:20px}
  .nav{display:none}
  .nav-toggle{display:block}
  .grid{grid-template-columns:1fr}
  .site-header .container{padding:12px}
  .contact > div{grid-template-columns:1fr}
}

/* Scrollbar styles (WebKit + Firefox) - minimal / Element-like */
/* WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent;border-radius:10px}
::-webkit-scrollbar-thumb{background:rgba(15,23,32,0.12);border-radius:10px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(15,23,32,0.18)}
::-webkit-scrollbar-corner{background:transparent}

/* Firefox */
html{scrollbar-width:thin;scrollbar-color:rgba(15,23,32,0.12) transparent}

/* Optional: slightly bolder thumb for focused states */
:root:focus-within ::-webkit-scrollbar-thumb{background:rgba(15,23,32,0.16)}